Day 48: Learning CSS Variables by Building a City Skyline (Part 7)

Hallo!!! Welcome back again. I would like to encourage someone reading this today that that dream of yours is possible. The process may be difficult, energy sapping, uncomfortable and everything not nice, but you can. Please, Don’t give up. For a while now I have been learning CSS Variables by creating a City Skyline. Yesterday, I continued with the fore buildings, giving them windows and background colors and good positioning. Let me show you the 10 steps I took today.

  1. On to the next building! Nested two div elements within .fb2 and gave them classes of fb2a and fb2b, in that order.

Day 48 no1a.png

  1. Gave .fb2a a width of 100% and .fb2b a width of 100% and height of 75%.

Day 48 no2a.png

Day 48 no2b.png

  1. Nested three div elements within .fb2b and gave them a class of fb2-window. These will be windows for this section of the building.

Day 48 no3a.png

  1. Added window-wrap class to .fb2b to position the new window elements.

Day 48 no4a.png

  1. Gave the .fb2-window elements a width of 22%, height of 100%, and a background-color of --window-color3 variable.

Day 48 no5a.png

Day 48 no5b.png

  1. Moved the background-color property and value from .fb2 to .fb2b to just color the section and not the container.

Day 48 no6a.png

Day 48 no6b.png

  1. For .fb2a, added a border-bottom of 10vh solid var(--building-color3), and a border-left and border-right of 1vw solid transparent. This time the border trick will create a trapezoid shape.

Day 48 no7a.png

Day 48 no7b.png

  1. For the next building, nested four div elements within .fb3 with classes of fb3a, fb3b, fb3a again, and fb3b again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two.

Day 48 no8a.png

  1. Gave the .fb3a element a width of 80% and height of 15%. Then gave the .fb3b element a width of 100% and height of 35%.

Day 48 no9aa.png

Day 48 no9a.png

  1. Removed the background-color property and value from .fb3, and added them to .fb3a and .fb3b

Day 48 no10a.png

Day 48 no10b.png

That will be all for today. Thank you for reading.