Learn CSS Variables by Building a City Skyline - Step 60

HTML-CSS
1

Tell us what’s happening:

Stuck with this error “You should use --building-color3 for the first two colors.” for the longest time. Still cant wrap my head around what’s wrong

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">    
  <head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />   
  </head>

  <body>
    <div class="background-buildings">
      <div></div>
      <div></div>
      <div class="bb1">
        <div class="bb1a bb1-window"></div>
        <div class="bb1b bb1-window"></div>
        <div class="bb1c bb1-window"></div>
        <div class="bb1d"></div>
      </div>
      <div class="bb2">
        <div class="bb2a"></div>
        <div class="bb2b"></div>
      </div>
      <div class="bb3"></div>
      <div></div>
      <div class="bb4"></div>
      <div></div>
      <div></div>
    </div>

    <div class="foreground-buildings">
      <div></div>
      <div></div>
      <div class="fb1"></div>
      <div class="fb2"></div>
      <div></div>
      <div class="fb3"></div>
      <div class="fb4"></div>
      <div class="fb5"></div>
      <div class="fb6"></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

/* file: styles.css */



/* User Editable Region */

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


/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 60

2

If you read this exercise again, you may notice that the point of the last part of it is to show you what would happen if you don’t specify the exact stop values. Try doing that except for the 15%.

3

I am not sure what you mean… able to elaborate further?

4

Use 90deg for the direction, your building-color3 for the first two colors, and window-color3 at 15% for the third.

This is all the instructions ask you to do. Notice that the instructions never mention 0% or 7.5%

When you don’t specify a distance for a color, it will use the values that makes sense.

It’s telling you what happens if you don’t write in a specific number here.

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

CSS will automatically calculate these values based on the 15% that you wrote. You don’t need to type the rest (unless you want something other than the defaults)

5

Sorry about that. Too many typos!

You should not specify any stop values as only the last one is needed.