Learn CSS Variables by Building a City Skyline - Step 18

HTML-CSS
1

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

Your code so far




I am getting this error
You should place these div elements within the .background-buildings element.

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

<!-- User Editable Region -->

            <div class="bb2"></div>
            <div class="bb3"></div>
            <div class="bb4"></div>
      
         

<!-- 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

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

Link to the challenge:

2

Look closely at your HTML. Which div are the three new divs you added nested in?

Actually, let me ask that better. What is the immediate parent div of the three new divs you added?

Also, you deleted a closing </div> tag from the original HTML. You don’t want to do that. Can you see how you don’t have a closing </div> tag for every opening <div> tag?

You can fix your issue by adding the closing </div> back in the proper place.

1 Like
3

thank you it went through

1 Like