Learn CSS Variables by Building a City Skyline - Step 78

Can anyone know what is wrong with this code:
.fb1c {
width: 100%;
height: 80%;
background: repeating-linear-gradient(
90deg,
var(–building-color4),
var(–building-color4) 10%,
transparent 10%,
transparent 15%
),
repeating-linear-gradient(90deg,
var(–building-color4) 0%,
var(–building-color4) 10%,
var(–window-color4) 10%,
var(–window-color4) 90%,

);
}
It reports an error:
You should add a repeating-linear-gradient with a first color of --building-color4 from 0% to 10% .
The step says:

Step 78

You can add multiple gradients to an element by separating them with a comma (,) like this:

gradient1(
  colors
),
gradient2(
  colors
);

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.

Hey @sladjanam2383
Please paste your code here so that we can help

1 Like

Your variable names lack some characters, they should resemble the ones in the root selector.

:root {
  --building-color1: #aa80ff;
  --building-color2: #66cc99;
  --building-color3: #cc6699;
  --building-color4: #538cc6;
  --window-color1: black;
  --window-color2: #8cd9b3;
  --window-color3: #d98cb3;
  --window-color4: #8cb3d9;
}

You do not need the number zero here, just have a comma.

Here, remove the comma, the variables were like a list of items. The last item in a list does not need a comma. Juts have the percentage.

1 Like

Hello @sladjanam2383 !

Both @opudoprince and @stephenmutheu have provided good guidance.

I would like to add that the 90deg should be removed from the second linear gradient.

Keep up the great progress!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.