Learn CSS Variables by Building a City Skyline - Step 21

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

</div>


<!-- User Editable Region -->

</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%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
}

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

.bb2 {
  width: 10%;
  height: 50%;
}

.bb3 {
  width: 10%;
  height: 55%;
}

.bb4 {
  width: 11%;
  height: 58%;
}
    

Your browser information:

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

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

Link to the challenge:

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

Hi emanuelmurrure !

You’re forgetting the requirement " two more at the bottom of it" and
and one more in between .bb3 and .bb4

Squeeze them together by adding two empty div elements to the top of the :smiley:
two more at the bottom of it :frowning_face:
and one more in between .bb3 and .bb4 ← You added in both divs not in between both of the divs. :frowning_face:

Hello! I have to squeeze the buildings because they are too spaced out. They gave me the instructions, but I did what I thought was the right thing to do, but I keep failing this level. This is what they want me to do " The buildings are too spaced out. Squeeze them together by adding two empty div elements to the top of the .background-buildings element, two more at the bottom of it, and one more in between .bb3 and .bb4 . These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center." sorry for my english. thanks in advance.

It’s fine, let me get more in depth for you!

<div class="background-buildings">
      <div class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
      <div class="bb2"></div>
      <div class="bb3"></div>
      <div class="bb4"></div>
    </div>

Squeeze them together by adding two empty div elements to the top of the .background-buildings element.

Which is: <div class="background-buildings"> .
So right after !

" two more at the bottom of it "
The bottom of the

<div class="background-buildings">

container!

and one more in between .bb3 and .bb4:

      <div class="bb3"></div>
      IN BETWEEN IS HERE 
      <div class="bb4"></div>

Thank you. Lemme try. I let you know.

I did that, amd still not working.

 <div class="background-buildings">
  <div></div>
  <div></div>
  <div class="bb1">
    <div class="bb1a"></div>
    <div class="bb1b"></div>
    <div class="bb1c"></div>
    <div class="bb1d"></div>
  </div>
  <div></div>
<div></div>
  
  <div class="bb2"></div>
  <div class="bb3"></div>
  <div></div>
  <div class="bb4"></div>
  

</div>

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

Reset your code and start over.

First, we have to squeeze them together by adding two empty div elements to the top of the .background-buildings element.

Then two more at the bottom of it.

last but not least, and one more in between .bb3 and .bb4:

<div class="background-buildings">
<--- HERE IS THE TOP
      <div class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
      <div class="bb2"></div>
      <div class="bb3"></div>
<---INBETWEEN
      <div class="bb4"></div>
<-- THIS IS THE BOTTOM 
    </div>
1 Like

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