Day 49: Learning CSS Variable by Building a City Skyline (Part 8)

Table of contents

No heading

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:

  1. 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.

Day 49 no1a.png

Day 49 no1b.png

  1. 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.

Day 49 no2a.png

  1. Gave the .fb3-window elements a width of 25%, a height of 80%, and used --window-color1 variable as the background-color value.

Day 49 no3a.png

Day 49 no3b.png

  1. Added window-wrap class to the .fb3a element to center and spaced the windows.

Day 49 no4a.png

Day 49 no4b.png

  1. With CSS variables you can change values without searching everywhere in the stylesheet. Changed the --window-color1 value to #bb99ff.

Day 49 no5a.png

Day 49 no5b.png

  1. 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.

Day 49 no6a.png

Day 49 no6b.png

  1. Gave .fb4b a width of 100% and height of 89%.
  2. Added --building-color1 variable as value of the background-color property of .fb4b. Then, removed the background-color from .fb4.

Day 49 no7a.png

Day 49 no7b.png

  1. Nested six div elements within .fb4b and gave them all a class of fb4-window.

Day 49 no9a.png

  1. 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.

Day 49 no10a.png

Day 49 no10b.png