Learn CSS Variables by Building a City Skyline - Step 105

Tell us what’s happening:

I keep getting the “You should give .fb5 a second repeating-linear-gradient in the background property.” when it appears that I have done that. Suggestions?

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(90deg, 
    var(--building-color2) 0%, 
    var(--building-color2) 5%, 
    transparent 5%, 
    transparent 10%),
    repeating-linear-gradient(90deg, 
    var(--building-color2) 0%, 
    var(--building-color2) 12%, 
    var(--window-color2) 12%,
    var(--window-color2) 44%
    );
}


/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:125.0) Gecko/20100101 Firefox/125.0

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 105

The tests can be very touchy about unexpected changes. In the first linear gradient, you did not have a zero percent specified for the first color. The tests weren’t expecting you to add that. They also don’t want you to add it for the first color in the new gradient you are adding in this step.

I removed both of the 0%s and still same error message.

Hey!
From where you removed 0% ? It’s still there.

@egelhja

there was any mention of a direction for the second linear gradient?

The original directive below:

Add another repeating-linear-gradient below the one you just added. Give it a 90deg direction, use your building color from 0% to 12% and window color 12% to 44%. This will make a bunch of rectangle windows.

Somehow using this exact code solved it…despite it being the exact same from my many attempts yesterday:

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

1 Like

Hello!

Looking at the code provided previously, the first linear gradient had a 90deg which was preventing passing the step.

Good for you finding it and correcting it!

Happy coding!