Learn CSS Variables by Building a City Skyline - Step 21

HTML-CSS
1

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

This is what STEP 21 asks for:

Step 21

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.

I did it exactly what it’s asked but still couldn’t pass.

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></div>
    <div></div>
    <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 class="bb2"></div>
      <div class="bb3"></div>
      <div></div>
      <div class="bb4"></div>
    </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%;
  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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

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

Link to the challenge:

2

how many new element divs did you add?

They want 5 new ones

3

But, it’s not mentioned in the task.

4

Let’s count together…

adding two empty div elements to the top
two more at the bottom
and one more in between

that’s 5?

5

I already did. Didn’t you check the code I provided?

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

The above is the original code.
There are 11 lines of code total.

Here is your code:

It has 14 lines of code total.

So as I asked already. How many divs did you add.
You need to add 5. (total lines of code should be 16)

7

Here’s missing 2 divs which adds up to 16.

8

ah i see the misunderstanding.
the ‘top’ does not mean ‘above’
It means add the divs inside and at the top
(bottom means add inside and at the bottom)

1 Like
9

Did that too. Still doesn’t work.

10

do you have new code? if yes please share.
(remember, the total number of divs added inside should be 5)

11

Why don’t you show me how to get this done by sharing your code? I literally did anything, but still couldn’t pass.

12

I asked first? (please share your code and I will let u know what you have missed)

remember, 2 at the top, 2 at the bottom and the one in the middle

1 Like
13

Okay I got it done, thanks for helping out.

1 Like
14

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