Learn CSS Variables by Building a City Skyline - Step 23

Curriculum Help
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far
please can someone help me out here

<!-- 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"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
      <div class="bb2"></div>
      <div class="bb3"></div>
      <div></div>
      <div class="bb4"></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

/* file: styles.css */
* {
  border: 1px solid black;
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.background-buildings {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
}

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --building-color1: #aa80ff;
  --building-color2: #66cc99;
}

.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1, #66cc99);
}

.bb1b {
  width: 80%;
  height: 10%;
  background-color: var(--building-color1, #66cc99);
}

.bb1c {
  width: 90%;
  height: 10%;
  background-color: var(--building-color1, #66cc99);
}

.bb1d {
  width: 100%;
  height: 70%;
  background-color: var(--building-color1, #66cc99);
}

/* User Editable Region */

.bb2 {
  width: 10%;
  height: 50%;
  background-color: var(--building-color1, #66cc99); 
}

/* User Editable Region */

.bb3 {
  width: 10%;
  height: 55%;
}

.bb4 {
  width: 11%;
  height: 58%;
}

Your browser information:

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

Challenge: Learn CSS Variables by Building a City Skyline - Step 23

Link to the challenge:

2

Hello!

The fallback color is expecting the text for the color in the instructions of green.
I believe this is why it is not working.

Keep up the good progress!
Happy coding!

3

The original color was --building-color2. You changed it to --building-color1. I wouldn’t do that. Also, the fallback color you were asked to add is green and you used #66cc99. I would use the one that the instructions asked you to use.

It looks like you added the #66cc99 fallback colors to a lot of other rulesets that you weren’t asked to change. This may cause you to fail even if you add it correctly for bb2. You might want to reset the step to get the original CSS back and then only do what the instructions ask and no more.