Learn CSS Variables by Building a City Skyline - Step 78

HTML-CSS
1

Tell us what’s happening:

.fb1c {
width: 100%;
height: 80%;
background: repeating-linear-gradient(
90deg,
var(–building-color4),
var(–building-color4) 10%,
transparent 10%,
transparent 15%
),
background: repeating-linear-gradient(
var(–building-color4) 0%
var(–building-color4) 10%,
var(–window-color4) 10%,
var(–window-color4) 90%

Your code so far

<!-- file: index.html -->


/* file: styles.css */
/* User Editable Region */

.fb1c {
  width: 100%;
  height: 80%;
  background: repeating-linear-gradient(
      90deg,
      var(--building-color4),
      var(--building-color4) 10%,
      transparent 10%,
      transparent 15%
    ),
    background: repeating-linear-gradient(
      var(--building-color4) 0%
      var(--building-color4) 10%, 
      var(--window-color4) 10%, 
      var(--window-color4) 90%)
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 78

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

Hi @Shakubuku67

Here is a comparison of the original code and your code.

The code in blue is the original code, the code in red is your code.
The code in magenta is the overlap.

image

  1. Please remove background: from before the second repeating-linear-gradient, as you are adding a second colour to the same property.
  2. Notice how the first repeating-linear-gradient ends with a round brace.
  3. Notice how the first three colours in the first repeating-linear-gradient end with a comma.

Happy coding