Table of contents
No headings in the article.
It's nearly weekend. Don’t know if I should be excited or not. Thought it would be like every other weekend for me, just got a notification that I will be having meetings during the weekend and that means leaving my house which I don't enjoy. Let me not bore you with my issues. Welcome to another day where I show you steps I take daily in building a city skyline with the aim of learning CSS Variables via free code camp. Here are the 10 steps for today:
- Added your building-wrap class to the .fb3 element to center the sections. This is so that the element in the building-wrap class would also reflect in .fb3.
- Nested three new div elements in the first .fb3a element. Gave them each a class of fb3-window. These will be windows for this section.
- Gave the .fb3-window elements a width of 25%, a height of 80%, and used --window-color1 variable as the background-color value.
- Added window-wrap class to the .fb3a element to center and spaced the windows.
- With CSS variables you can change values without searching everywhere in the stylesheet. Changed the --window-color1 value to #bb99ff.
- Only three more building to go. Nested two new div elements within the .fb4 element and gave them the classes of fb4a and fb4b, in that order.
- Gave .fb4b a width of 100% and height of 89%.
- Added --building-color1 variable as value of the background-color property of .fb4b. Then, removed the background-color from .fb4.
- Nested six div elements within .fb4b and gave them all a class of fb4-window.
- Gave the .fb4-window elements a width of 30%, height of 10%, and border-radius of 50%. These made some circular windows for this building.
