Learn CSS Variables by Building a City Skyline - Step 21

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

how do i add 2 divs there?

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">    
  <head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />   
  </head>


<!-- User Editable Region -->

  <body>
        <div class="background-buildings">
      <div class="bb1">
        <div></div>
        <div></div>
        <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>

<!-- User Editable Region -->

  </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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 21

2

You appear to have created this post without editing the template. Please edit your post to 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!

3

Hello!
Okay so your 2 divs that are in your .bb1 move it so that it is in-between your .background-building and your '.bb1opening tag. Then in-between yourbb3andbb4and one div element. Then after your.bb4` add two more div elements.

The order of your code should be as follows:

 .background-building
1 div opening and closing tag
Another div opening and closing tag
.bb1 opening tag
.bb1a
.bb1b
.bb1c
.bb1d
.bb1 closing tag
.bb2 opening and closing tag
.bb3 opening and closing tag
Add one div opening and closing tag here
.bb4 opening and closing tag
Add one div opening and closing tag here
Add another div opening and closing tag here
.background-building closing tag
4

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