Html/css build a CIty Skyline step 40

HTML-CSS
1 
its saying i should apply background to .bb1a?? not sure where im going wrong? 

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>    
<head>
  <title>City Skyline</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />   
</head>

<body>
  <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></div>
    <div></div>
  </div>

  <div class="foreground-buildings">
    <div></div>
    <div></div>
    <div class="fb1"></div>
    <div class="fb2"></div>
    <div></div>
    <div class="fb3"></div>
    <div class="fb4"></div>
    <div class="fb5"></div>
    <div class="fb6"></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

/* file: styles.css */
:root {
--building-color1: #aa80ff;
--building-color2: #66cc99;
--building-color3: #cc6699;
--building-color4: #538cc6;
--window-color1: black;
}

* {
border: 1px solid black;
box-sizing: border-box;
}

body {
height: 100vh;
margin: 0;
overflow: hidden;
}

.background-buildings, .foreground-buildings {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: space-evenly;
position: absolute;
top: 0;
}

/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
width: 10%;
height: 70%;
display: flex;
flex-direction: column;
align-items: center;
}
.bb1a {
width: 70%;
height: 10%;
background-color: var(--building-color1);
gradient-type(linear-gradient)
background: linear-gradient var(--building-color1, --window-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%;
background-color: var(--building-color2);
}

.bb3 {
width: 10%;
height: 55%;
background-color: var(--building-color3);
}

.bb4 {
width: 11%;
height: 58%;
background-color: var(--building-color4);
}

/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
width: 10%;
height: 60%;
background-color: var(--building-color4);
}

.fb2 {
width: 10%;
height: 40%;
background-color: var(--building-color3);
}

.fb3 {
width: 10%;
height: 35%;
background-color: var(--building-color1);
}

.fb4 {
width: 8%;
height: 45%;
background-color: var(--building-color1);
position: relative;
left: 10%;
}

.fb5 {
width: 10%;
height: 33%;
background-color: var(--building-color2);
position: relative;
right: 10%;
}

.fb6 {
width: 9%;
height: 38%;
background-color: var(--building-color3);
}
  

  **Your browser information:**

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

Challenge: Step 40

Link to the challenge:

1 Like
2
  • ‘var’ keyword should be used as such var(--smVar)
  • use one ‘var’ syntax for each ‘variable’
1 Like
3 
I have tried this but this still gives me the same error
1 Like
4

did you use ‘two’ vars?

5 
yeah i used two vars
6

share that snippet let me try that on my browser

7

Just in case you or others haven’t solved it yet, watch you parenthesis() you might be missing one. This issue took my launch break to solved it.

1 Like
8 
.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
  background: linear-gradient var(--background-color1), var(--window-color1);
9

you’re missing opening and enclosing brackets for linear-gradient!! (i.e. linear-gradient(…))

1 Like
10 
sorry im quite new to this.  where am i putting the opening and closing brackets for the linear-gradient??
11

linear-gradient(var(…), var(…))

2 Likes
12 
Now its saying "you should apply background to .bb1a"
14 
thank you that solved it
1 Like
15

what is the solution to this?

16

this is work for me.
thanks.

17

Mod edit removed solution

18

did you figure this one out?

19

Didn’t read it here but you need to delete the old background-color css property for it to pass

20

Sure! Let’s continue building the city skyline using HTML and CSS. Here’s step 40:

HTML:

htmlCopy code

<!DOCTYPE html>
<html>
<head>
  <title>City Skyline</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="skyline">
    <div class="building"></div>
    <div class="building"></div>
    <div class="building"></div>
    <div class="building"></div>
  </div>
</body>
</html>

CSS:

cssCopy code

body {
  background-color: #191970;
  margin: 0;
}

.skyline {
  position: relative;
  width: 100%;
  height: 400px;
}

.building {
  position: absolute;
  width: 80px;
  height: 320px;
  background-color: #808080;
  bottom: 0;
}

.building:nth-child(1) {
  left: 50px;
}

.building:nth-child(2) {
  left: 150px;
}

.building:nth-child(3) {
  left: 250px;
}

.building:nth-child(4) {
  left: 350px;
}

In this step, we’ve added four more buildings to the skyline, each represented by a div element with the class “building”. The CSS positions the buildings absolutely within the “skyline” container using the left property. The buildings are spaced apart by 100 pixels horizontally, and their heights and colors are specified in the CSS as well.

You can customize the width, height, color, and positioning of the buildings by modifying the CSS properties in the .building selector. Feel free to adjust the values to create your desired city skyline!

Remember to save the HTML code in an HTML file (e.g., index.html) and the CSS code in a separate CSS file (e.g., styles.css) in the same directory. Then, open the HTML file in a web browser to see the city skyline.