Html/css build a CIty Skyline step 40

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:

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

did you use ‘two’ vars?

yeah i used two vars

share that snippet let me try that on my browser

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.

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

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

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

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

1 Like
Now its saying "you should apply background to .bb1a"
thank you that solved it