Learn CSS Variables by Building a City Skyline - Step 78

HTML-CSS
1

Can anyone help, how to do this task?

I have already tried hundreds of different variants and also asked ChatGPT for help, but it always gives the same errors. I don’t even understand anymore what to try and what or if anything is right at all.

Task:

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: linear-gradient(
    to bottom,
    var(--building-color4),
    var(--window-color4) 10%,
    var(--window-color4) 90%
  ), 
  repeating-linear-gradient(
    to bottom,
    var(--building-color4) 0%,
    var(--window-color4) 10%
  );
}

ERROR: You should not alter the first repeating-linear-gradient .

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:

3

Thanks for your reply!

But unfortunately I don’t understand anything anymore. For me, the whole system has become so confused with this task that I don’t even understand what I understood before.
I’ve really tried all kinds of options(that is also why I shared such weird code) and can’t figure out what’s going on. I’ve been at this task for three hours already and I don’t know what to do. It’s getting more and more confusing.

I understand what you are referring to “Change only what the instructions state to change.”, but unfortunately I don’t understand that. So far I have found the solutions myself, but this is a complete mystery.

There’s probably something little…but…

My first thought was that:

.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%
  );
}

But it is not working.

So if anyone is happy to point out some specific thing, I would be happy to hear it.

4

One specific thing - don’t copy-paste the entire background property’s value again.

5

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