Welcome to the first working day of the week. I tried something new today….I wrote out all I want to accomplish this week cause I read somewhere that it gives a sense of purpose. Will surely give you an update on how it went. Yesterday, I continued on the CSS variable journey, continued learning on the linear-gradient transitions, code optimization and I built a roof for one of my buildings (It is slowly becoming a mansion). Here are today’s 10 steps I took:

1. Removed the background-color property and value from .bb3 since I am using the gradient as the background now.

1. The next building will have three sections therefore I nested three div elements within .bb4. Gave them the classes of bb4a, bb4b and bb4c in that order.

1. Gave the new div elements these width and height values: 3% and 10% to .bb4a, 80% and 5% to .bb4b, and 100% and 85% to .bb4c.

1. Removed the background-color property and value from .bb4, and added it to the three new sections .bb4a, .bb4b, and .bb4c, so only the sections are filled.

1. I want .bb4 to share the properties of .bb1 that center the sections. Instead of duplicating that code, I created a new class above the background building comment called building-wrap.

1. Moved the display, flex-direction, and align-items properties and values from .bb1 to the new building-wrap class.

1. Added the new building-wrap class to the .bb1 and .bb4 elements. This applied the centering properties to the buildings that needed it.

1. Created a new variable called --window-color4 in :root and gave it a value of #8cb3d9. This will be the secondary color for the last background building.

1. Nested four new div elements within .bb4c, gave them all the class of bb4-window. These will be windows for this building

1. Gave the bb4-window class a width of 18%, a height of 90%, and added --window-color4 variable as the background-color.

Let's call it a day. Don't forget to drop your comments. Kisses.