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:
- Removed the background-color property and value from .bb3 since I am using the gradient as the background now.
- 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.
- 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.
- 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.
- 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.
- Moved the display, flex-direction, and align-items properties and values from .bb1 to the new building-wrap class.
- Added the new building-wrap class to the .bb1 and .bb4 elements. This applied the centering properties to the buildings that needed it.
- 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.
- Nested four new div elements within .bb4c, gave them all the class of bb4-window. These will be windows for this building
- 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.