Learn CSS Variables by Building a City Skyline - Step 22

HTML-CSS
1

Tell us what’s happening:

fuckin hell
how do you do this
please help
someone

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;
}

/* User Editable Region */

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

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

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

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

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

.bb2 {
  width: 10%;
  height: 50%;
}

/* 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/130.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 22

2

Hi there!

Read the challenge instructions carefully. The instructions is asking you: Create a new variable below your --building-color1 variable. Name your new variable --building-color2 and give it a value of #66cc99. Then set it as the background-color of .bb2.

You created the required variable in .bb1 selector, that’s right. But you also added the background color property and value in the .bb1. you need to add it within the .bb2 selector.