Learn CSS Variables by Building a City Skyline - Step 1

“You should create 3 new div elements.”

I am so lost on what to do.

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>

 They asked me to make 3 div elements. I did. But where Am I going wrong.

      <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/118.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 18

Your code works fine by me.
Try reseting this step or changing a browser.
It is also possible that you need to disable any adblockers you have. You can clear the cache as well.
Hope this helps!

1 Like

I tried these steps but it is still asking me this

I’m not quite sure why it isn’t working.
Did you try following my other suggestions besides for reseting the step?
Hope it works!

2 Likes

Yes I did it.
and still failed never been so lost.

I’m scratching my head too.
Can you try disabling dark mode?
And use a browser which hasn’t got any extensions installed. Also make sure you clear the cache.

3 Likes

There are no extensions, on my browser.
it’s even in the light mode.
Never been so confused

Anyway thank you starstruck I js skipped to step 19 and when I saw the code it was the one I typed it in. sigh. wasted my hour but still the 18 is not colored yet :frowning:

Welcome to the world of coding :laughing:.
If it still bothers you, you could create a post under the the support category!
Happy coding!

2 Likes