Learn CSS Variables by Building a City Skyline - Step 60

Step 60 - Learn CSS Variables by Building a City Skyline

So far, all the gradients you created have gone from top to bottom, that’s the default direction. You can specify another direction by adding it before your colors like this:

gradient-type(
  direction,
  color1,
  color2
);

Fill in .bb3 with a repeating-linear-gradient. Use 90deg for the direction, your building-color3 for the first two colors, and window-color3 at 15% for the third. When you don’t specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to 0% and 7.5% because it starts at 0%, and 7.5% is half of the 15%.

Does anyone have any idea what’s wrong here?

.bb3 {
width: 10%;
height: 55%;
background: repeating-linear-gradient(
90deg,
var(–building-color3),
var(–building-color3),
var(–window-color3) 15%,
var(–building-color3))
;
}

my first impression is that variable are written like this:

--building-color3

so the double – at the start of your variable are missing.

It still doesn’t work.
.bb3 {
width: 10%;
height: 55%;
background: repeating-linear-gradient(
90deg,
var(–building-color3),
var(–building-color3),
var(–window-color3) 15%,
);
}

because I dont see that you changed –building-color3 to –-building-color3

at the end it should look like this:

background: repeating-linear-gradient(
90deg,
var(–-building-color3),
var(–-building-color3),
var(–-window-color3) 15%,

Delete the comma after the last color.

P.S. Use the </> button in your editor to format code properly. Always provide the link to the challenge.

Thanks for the tip will do. That worked

1 Like

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