Learn CSS Variables by Building a City Skyline - Step 18

Tell us what’s happening:

hey guys I needs help with this, been staring at it all morning, It is saying code is wrong because it is not in the correct order but I have put it in the order it asked me to

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 class="bb2"></div> 
      <div class="bb3"></div> 
      <div class="bb4"></div>
      
      <div class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>

<!-- User Editable Region -->



<!-- User Editable Region -->

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

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

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 Edg/117.0.2045.60

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 18

1 Like

Hello @reggie419 !

Great work so far. To get through this challenge you need to add three new div element and assign the appropriate classes.

You might benefit from resetting the challenge and starting again, as your code is all there, just not in the correct order. Resetting won’t discard your work prior to this challenge.

Does this help?
Keep up the good progress!

Happy Coding! :slightly_smiling_face:

1 Like

Welcome to the forum

Place the div elements below the other div elements in the correct numerical order for the class numbers.

Happy coding

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.