Hello wonderful people. Quick question…..why is the weekend always short? It’s like the 24 hours is 12 hours during the weekends. Am I the only one on this boat? Yesterday was interesting, I had the opportunity on working more on linear-gradient by adding percentages that shows how colors transition from one to the next, code optimization and added a new variable. These are the next 10 steps I took:

1. Added a linear-gradient to .bb2b that uses --building-color2 from 0% to 6% and --window-color2 from 6% to 9%. Gradient transitions often gradually change from one color to another. You can make the change a solid line like this:

linear-gradient( var(--first-color) 0%, var(--first-color) 40%, var(--second-color) 40%, var(--second-color) 80% );

1. From step 1 there is a hard color change at the top of the section. Went on to change the gradient type from linear-gradient to repeating-linear-gradient. This will make the four colors of the gradient repeat until it gets to the bottom of the element; giving it some stripes, and saving me from having to add a bunch of elements to create them.

1. Removed the background-color from .bb2 since you don't need it anymore.

1. Added these CSS properties to .bb2a in order to create the top of the building.

1. Next, I removed the width and height from .bb2a, and changed the border-left and border-right to use 5vw instead of 1vw.

1. Next, I changed the two #999 of .bb2a to transparent. This will make the left and right borders invisible.

1. Removed the margin and border-top properties and values from .bb2a to turn it into a triangle for the top of the building.

1. Finally, I changed the border-bottom property of .bb2a from 1vw to 5vh and the #000 color to your --building-color2 variable. Now it looks like a roof.

1. On to the next building! Created a new variable called --window-color3 in :root and gave it a value of #d98cb3. This will be the secondary color for the pink buildings.

1. So far, all the gradients I created have gone from top to bottom, that's the default direction. However, I can specify another direction by adding it before your colors like this:

gradient-type( direction, color1, color2 ); I filled in .bb3 with a repeating-linear-gradient. Used 90deg for the direction, building-color3 for the first two colors, and window-color3 at 15% for the third. N.B: When distance for a color is not specified, it will use the values that makes sense. In this case, the first two colors will default to 0% and 7.5% because it starts at 0%, and 7.5% is half of the 15%.

Time to draw the curtain for today. Thanks for reading. Please drop a comment.