Learn CSS Variables by Building a City Skyline - Step 105

HTML-CSS
1

Tell us what’s happening:

You should give .fb5 a second repeating-linear-gradient in the background property.

I added a second one, what is wrong?

Your code so far

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


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

.fb5 {
  width: 10%;
  height: 33%;
  background-color: var(--building-color2);
  position: relative;
  right: 10%;
  background: repeating-linear-gradient(
      var(--building-color2),
      var(--building-color2) 10%,
      transparent 5%,
      transparent 10%
      ), 
      repeating-linear-gradient(
      90deg,
      var(--building-color2),
      var(--building-color2) 12%,
      var(--window-color2) 12%,
      var(--window-color2) 44%
    );
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 105

2

Welcome to the forum @dalessandrojk24

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
image516×495 26 KB

Try changing var(--building-color2) back to 5% in the first repeating linear gradient.
Also, please remove the semi-colon at the end of the second repeating linear gradient.

Happy coding

3

That worked thank you! Just curious though, why did the semi-colon at the end work for .fb1c but shouldn’t be used here? This is what I used previously and it had worked before. Thanks in advance for the quick response and help.

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

4

The test were not expecting a semi-colon.
Sometimes the tests are strict.