Learn CSS Variables by Building a City Skyline - Step 18

Tell us what’s happening:
I did the steps correctly but it’s still saying

Sorry, your code does not pass. Try again.

You should create 3 new `div` elements.

Here’s the step given

Step 18
Your first building looks pretty good now. Nest three new `div` elements in the `.background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background.

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

Hmm, your HTML passes for me.

Maybe try resetting the step and then hold down the Shift key while clicking the page reload button on your browser to force the cache to clear?

I’m not sure why it isn’t passing for you. I’m just guessing with my suggestions above. Sometimes things just don’t work correctly and you have to start over fresh.

2 Likes

Thank you for the reply. I tried the force refresh and I also cleared my cache and cookies as well but to no avail.

Hmm, sometimes a browser extension (such as dark mode) can confuse the tests and cause unnecessary failures, but I wouldn’t think that would come into play here. But you never know. If you are using browser extensions that change the styles on the page then you might try disabling those. Or perhaps switch to a “clean” browser that doesn’t have any extensions installed.

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