Learn CSS Variables by Building a City Skyline - Step 10

HTML-CSS
1

Tell us what’s happening:
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>

<!-- User Editable Region -->

    <div class="background-buildings">
      <div class="bb1">
      </div>
    </div>
    .bb1 {
      width: 10%;
      height: 70%;
    }

<!-- User Editable Region -->

  </body>
</html>

.bb1 {
      width: 10%;
      height: 70%;
    }

/* file: styles.css */
* {
  border: 1px solid black;
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.background-buildings {
  width: 100%;
  height: 100%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.61

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

Link to the challenge:

2

Restart step. First, you add the div element with a class set to bb1 in your HTML code (you already did it correctly). Then, add the selector .bb1 in your CSS file with the ‘width’ and ‘height’ properties set to their corresponding values. This is your CSS file:

/* file: styles.css */
* {
  border: 1px solid black;
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.background-buildings {
  width: 100%;
  height: 100%;
}
1 Like