Learn CSS Variables by Building a City Skyline - Step 21

HTML-CSS
#1

Tell us what’s happening:
Describe your issue in detail here.
Guys i’m stuck here someone pls help. I’m told to add one div element between .bb3 and .bb4 and i’ve done so but i’m still stuck.

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

.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/106.0.0.0 Safari/537.36

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

Link to the challenge:

#2

Only one div after .bb3
You have given two

#3

hello and welcome to fcc forum :slight_smile:

it has few issues:

  • “div” tags are not “even” in number meaning there are extra unwanted “div” token exists
  • and then what’s already been pointed out, about “.bb3”, there needs to be “1 empty div but not 2”

address those changes or consider restarting and reflect on these matters it should be fine, happy learning :slight_smile:

#4

thank you … It worked

#5

Thank you soo much… I’ve cleared it.