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:

2
  • ‘var’ keyword should be used as such var(--smVar)
  • use one ‘var’ syntax for each ‘variable’
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
15

what is the solution to this?

16

this is work for me.
thanks.

17

background: linear-gradient (var(–building-color1), var(–window-color1));
this is work for me

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