Step 40 Gradients in CSS :Building A City Skyline

I’ve tried moving things around and writing different variations. It asks me to set the background to linear gradient however then how am I supposed to set the gradient using the building color and window color? Just been confused. Any help?

These are the instructions:
Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the background property and the syntax looks like this:

gradient-type(
color1,
color2
);
In the example, color1 is solid at the top, color2 is solid at the bottom, and in between it transitions evenly from one to the next. In .bb1a, add a background property below the background-color property. Set it as a gradient of type linear-gradient that uses --building-color1 as the first color and --window-color1 as the second.

*/
.bb1 {
width: 10%;
height: 70%;
display: flex;
flex-direction: column;
align-items: center;
}
.bb1a {
width: 70%;
height: 10%;
background-color: var(–building-color1);
background: gradient-linear (–building-color1,
–window-color1);
}
.bb1b {
width: 80%;
height: 10%;
background-color: var(–building-color1);
}

Sorry, your code does not pass. Don’t give up.

You should apply a background to .bb1a right after the background-color.

Here is my code:

.bb1a {
width: 70%;
height: 10%;
background-color: var(–building-color1);
background: gradient-linear (–building-color1,
–window-color1);
}

you need to write linear-gradient

you are missing var for each of these

1 Like

Hi @ 23odeth ,

  • You are using the wrong syntax for CSS variable declaration.
    syntax. css property: var(--css-variable-name);
  • linear-gradient property
    background: linear-gradient(direction, color1, color2);
1 Like

Thank you so much. I spent a lot of time on Google and was able to finally figure it out! thank you

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