Another problem with CSS gradient stops πŸ˜…

Challenge Link: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-variables-by-building-a-city-skyline/step-78

Instructions:
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.

My 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(var(--building-color4) 0%, var(--building-color4) 10%, var(--window-color4) 10%, var(--window-color4) 90%);
}

Error:
:heavy_multiplication_x: Try again. This might help:
You should use a second color of --window-color4 from 10% to 90%

I’m supposed to make the second color --window-color4 but if I do that, I get the error:
:heavy_multiplication_x: Try again. This might help:
You should add a repeating-linear-gradient with a first color of --building-color4 from 0% to 10%.

1 Like

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

repeating-linear-gradient(), repeating-linear-gradient()

2 Likes

Thanks!
Gradients just trip me up ig. :woman_shrugging:

2 Likes

hi Meimato,

could you help me on this one?

even like this, its wrong…
help, please :frowning:

4 Likes

thank you!
i appreciate it

Its helpful thanks for this.