Learn CSS Variables by Building a City Skyline - Step 22

Tell us what’s happening: seems I am doing it. says to give --building-color2 a value of #66cc99
Describe your issue in detail here.

  **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"></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;
}

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

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

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

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

.bb2 {
width: 10%;
height: 50%;
--building-color2: #66cc99;
}
.bb3 {
width: 10%;
height: 55%;
}

.bb4 {
width: 11%;
height: 58%;
}
  
  **Your browser information:**

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

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

Link to the challenge:

Perhaps the instructions could be a little clearer here. How is this?

“Create a new variable directly below the other one you created in the .bb1 rule set and name it --building-color2 and give it a value of #66cc99.”

“Then set the background-color property of .bb2 to this new variable.”


.bb2 {
  --building-color2: #66cc99;
  background-color: var(--building-color2);
}

I don’t get it. My code is like .bb1. setting the background color … where? there are no .bb2a, etc

sorry this is my code

  --building-color2: #66cc99;
}type or paste code here
.bb2 {
  --building-color2: #66cc99;
}```

Did you read my revised instructions very carefully?

“Create a new variable directly below the other one you created in the .bb1 rule set and name it --building-color2 and give it a value of #66cc99.”

What you have here may technically be correct but it is not what the instructions are asking you to do. If you have questions about my instructions please let me know.

You are doing the second part of the instructions properly.

omg. it is confusing yet logical. I need to get my Spock vibe on here :slight_smile: