Learn CSS Variables by Building a City Skyline - Step 78

HTML-CSS
1

Tell us what’s happening:

Somomebody can help me? i check te code and it´s correct but i cand find the error. I’ve been on this step for about 2 hours

Your code so far

<!-- file: index.html -->


/* file: styles.css */
/* User Editable Region */

.fb1c {
  width: 100%;
  height: 80%;
  background: 
    repeating-linear-gradient(
      90deg,
      var(--building-color4) 0% 10%,
      transparent 10% 15%
    ),
    repeating-linear-gradient(
      90deg,
      var(--building-color4) 0% 10%,
      var(--window-color4) 10% 90%
    );
}


/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 78

2

Reset the exercise. This should be the default.

  background: repeating-linear-gradient(
      90deg,
      var(--building-color4),
      var(--building-color4) 10%,
      transparent 10%,
      transparent 15%
    )

There is a difference with the code you have.

      var(--building-color4) 0% 10%,
      transparent 10% 15%

The syntax for adding a second repeating-linear-gradient is correct (the comma after the first linear-gradient) but not the inner properties. ) The second linear-gradient does not have 90deg as a criteria too.

1 Like
3

ok, i tried to reset but I keep getting mistakes, what do I do? the error is: // running tests 2. You should add a

repeating-linear-gradient

with a first color of

--building-color4

from

0%

to

10%

. // tests completed

4

Can’t help if you do not share the latest state of your code.

5

sorry… i´m really bad for this. this is my code

.fb1c {
  background: 
    repeating-linear-gradient(
      to bottom,
      var(--building-color4) 0%,
      var(--building-color4) 10%,
      var(--window-color4) 10%,
      var(--window-color4) 90%
    ),
    /* Keep the existing gradient unchanged */
    repeating-linear-gradient(
      to bottom,
      /* Existing gradient colors remain here */
    );
}

// running tests 1. You should not alter the first repeating-linear-gradient

. 2. You should add a repeating-linear-gradient with a first color of --building-color4
from 0% to 10%

. 3. You should use a second color of --window-color4 from 10% to90%

. // tests completed

6

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
7

What’s this?

You do not need to change the first gradient code.

Look at the example:

gradient1(
  colors
),
gradient2(
  colors
);

Here is the starting code when you reset the step:

repeating-linear-gradient(
      90deg,
      var(--building-color4),
      var(--building-color4) 10%,
      transparent 10%,
      transparent 15%
    )

So you need to use the example to add a second gradient, by adding a comma and a new repeating-linear-gradient. You can copy the previous one and just change what you need.

Here’s an example of 2 gradients:

repeating-linear-gradient(
      90deg,
      var(--building-color4),
      var(--building-color4) 10%,
      transparent 10%,
      transparent 15%
    ), 
linear-gradient(
      red, 
      yellow, 
      blue)

Now, this is important: Do you have any questions?