Learn CSS Variables by Building a City Skyline - Step 78

HTML-CSS
1

So, looks like I inserted this into step 77:

background: repeating-linear-gradient(90deg, var(–building-color4), var(–building-color4) 10%, transparent 10%, transparent 15%)

…but I forgot the semi-colon ( ; )

in step 78, I’m asked to:

Add a repeating-linear-gradient to .fb1c below the one that’s there; use your --building-color4 from 0% to 10% and --window-color4 from 10% and 90%. This will fill in behind the gradient you added last.

The problem is: I don’t have the semi-colon closing the previous command, so I’m stuck in this bug: if I insert the semi-colon above, the code is working but I receive this error:

You should not alter the first repeating-linear-gradient.

If I remove the semi-colon, I receive this error:

You should add a repeating-linear-gradient with a first color of --building-color4 from 0% to 10% .

The code is:

.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%
);
}

2

please include a link to the step you are stuck on.
(you may want to use the Help button next time as it will create a template with the code and the link for you before posting here)

3

Hi, this is the link:

4

Try adding a comma here after the first gradient definition

5

It does not work. It doesn’t allow me to edit that definition:

You should not alter the first repeating-linear-gradient.

6

Sorry in addition to adding the comma, you need to erase this background: (erase the second one)

7

Hi, what do you mean?
I have to keep the first background and erase the second background? In that case the error is:

You should add a repeating-linear-gradient with a first color of --building-color4 from 0% to 10% .

Looks like a bug…

8

The bug is in your code.

You need to add the missing comma. Then you need to erase the second background:

If you are still stuck, please post the corrected code.

9

I posted a new one here

10

Please post the new code here as a reply.

11

Here it is:

.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%
);
}

12

Replace the semicolon with a comma
And then delete the background:

13

It did work! Thank you!

1 Like