Day 50: Learning CSS Variable by Building a City Skyline (Part 9)

Another day to show you 10 steps I took learning CSS Variables by building a city skyline.

1. Filled in the windows with the secondary color for this building (var(--window-color1). Also added a margin of 10% to give the windows some space.

1. Added display: flex and flex-wrap: wrap to the window container. This put the windows side by side, and then push them down to a new row when they don't fit.

1. This building is going to have another triangle on top, something like a roof. Gave the top section a border-top of 5vh solid transparent, and a border-left that is 8vw, solid, and used your building color variable as the color.

1. On to the next building! It's the green one in the foreground. Give it a repeating-linear-gradient with your building color from 0% to 5%, and transparent from 5% to 10%.

1. Added another repeating-linear-gradient below the one I just added. Gave it a 90deg direction, used the building color from 0% to 12% and window color 12% to 44%. This made a bunch of rectangle windows.

1. The background-color is no longer needed for this building anymore so I removed that property.

1. Finally! The last building! Added a repeating gradient to it with a 90deg direction. Used the building color from 0% to 10% and transparent from 10% to 30%.

1. Added another repeating gradient to this building; made it the same as the one in no.7 above, except the addition of the 90deg direction, used your window color instead of the two transparent colors.

1. I removed the background-color for this building since it isn't needed.

1. Okay, the buildings are done. Went back to the * selector and removed the border I applied to everything at the beginning and the buildings come together like magic.

Ooops! We have gone so far. I have to run now.See you tomorrow.