Learn Css Variables by Building a Skyline- Step 60

Can anyone know what is wrong with this code:
.bb3 {
width: 10%;
height: 55%;
background-color: var(–building-color3);
background: repeating-linear-gradient(90deg,
var(–building-color3),
var(–building-color3) 7.5%,
var(–window-color3) 15%
);
}
It reports an error:
“You should use --window-color3 at 15% for the third color.”
The step says:

Step 60

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%.

1 Like

I can definitely see how this would be confusing. Notice how the instructions say this:

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%.

The instructions seem like they only want you to specify 15% on the third color, and not specify any percent on the other two colors. So, without testing it myself, my hunch is that specifying 7.5% for the second color is breaking the test somehow. Lmk if that works

2 Likes

Welcome to the community @sladjanam2383 !

As @shy_away has stated, the 7.5% should not be included within the color scheme.
The instructions were explaining how the scheme works for the colors that do not have any targeted color percent value. This is confusing for many, including me when I did it.

Great guidance from @shy_away !

Great progress on your part. Keep it up!

1 Like

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