Learn CSS Variables by Building a City Skyline - Step 78

Tell us what’s happening:

Your code so far

.
153

.fb1c {

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.

.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),
var(–building-color4) 10%,
var(–window-color4) 10%,
var(–window-color4) 90%
);
}
.fb2 {
width: 10%;
height: 40%;
background-color: var(–building-color3);
}

.fb3 {
width: 10%;
height: 35%;
background-color: var(–building-color1);
}

.fb4 {
width: 8%;
height: 45%;
background-color: var(–building-color1);
position: relative;
left: 10%;
}

.fb5 {
width: 10%;
height: 33%;
background-color: var(–building-color2);
position: relative;
right: 10%;
}

.fb6 {
width: 9%;
height: 38%;
background-color: var(–building-color3);
}

Your browser information:

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

Challenge: Learn CSS Variables by Building a City Skyline - Step 78

Link to the challenge:

Hello.

Review your variables. What do you think? Do they star with - or with --?

Gerts.

Hello!

You may wish to check and see if the 90deg was to be added to the second repeating linear-gradient.

Keep up the great progress! :slight_smile:

2 Likes

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