Hi. I have been so inconsistent for a long while now. Thought about continuing this or just dropping it. I just couldn't. I still want to do this. So here I am trying to gain consistency again. Today, I am starting a new section still on CSS. Will be learning CSS Animation by building a Ferris Wheel. Here are the 5 steps I took today.

1. Began with the standard boilerplate. Added the DOCTYPE declaration, html element with the language set to English, the head and body elements. Added the meta element for the correct charset, title element, and a link element for the ./styles.css file. Set the title to Ferris Wheel.

1. Added a div within your body element and gave it a class of wheel. Inside the new div, added six span elements with a class set to line, and six div elements with a class set to cabin.

1. Created a selector for .wheel element. Started by setting the border to 2px solid black, the border-radius to 50%, and the margin-left to 50px.

And this is how it looks.

1. Set the position property of the .wheel selector to absolute. Set the height and width both to 55vw.

1. Gave the .wheel selector a max-height and max-width property both set to 500px.

That’s all for learning CSS Animation today. Decided to start a new journey today also with front-end mentors. I was challenged to build a QR Code page. You can see my solution here: Any suggestions on how I can improve are welcome!