Learn CSS Variables by Building a City Skyline - Step 40 PLZ i need help

Tell us what’s happening:
Describe your issue in detail here. why isnt this working i have done what it says, could someone see if they see whats wrong with it

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 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:linear-gradient-type(
  --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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

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

Link to the challenge:

these are variables, you need to use var() to get their value

linear-gradient-type is not a valid gradient type. The type you should add is linear-gradient

that still isn’t working

what does your newest try look like?

first i tried what ilenia said to try and that didnt work so then i tried this:
background{

background: linear-gradient(–building-color1, --window-color1);

}

.bb1a {

width: 70%;

height: 10%;

background-color: var(–building-color1);

}

You are trying to use ‘background’ as an element selector, but there is no such thing as an HTML <background> element.

Background here is a property type. You specify it inside a CSS selector block.

it still wasn’t working before

i have been trying for a longish time now but it isn’t working

please stop trying and instead, work on fixing one thing at a time.
For eg. Do you understand what a css selector is?
If yes, do you know how to add a property to a css selector block?
if yes, do you know how to add the requested gradient.
If yes, do you know how to reference a variable?

Approach this one step at a time. Get one thing correct, then add to that.

Let me know if I can help you get there by explaining anything.

how do i fix something if i don’ t try?

1.yes i know how to seclect something, would i have gotten this far if i didnt?

  1. yes you do: display:block;

  2. I think so

  3. I think so i have done it before

Try to click on Restart Step then do one thing at a time:

in .bb1a , add a gradient of type linear-gradient to the background property with --building-color1 as the first color and --window-color1 as the second.

So step 1: locate the selector they are talking about .bb1a
step 2: add a new line to the bottom of the its block
step 3: copy and paste the sample code to that line
step 4: replace the parts of the sample code with the requested values.

so the sample code looks like this initially:

gradient-type(
  color1,
  color2
);

You need to replace the words “gradient-type” with the name of the gradient function (mentioned in the description). And replace the colors as well.
You need to use the var function if you are referencing a color variable.

Try to do one thing at a time. Then check your work, the hints will keep making suggestions as you go…

I have tried that but all it says is “add a background to bb1a”

yes so you need a background property like this:
background: something;

then put the gradient definition in the “something”

I just tried that and it said" You should apply a background to .bb1a"

please post the new code

still isn’t working. so what do i do

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

again, gradient-type is not what you have to write there, you want to create a linear-gradient

for the variables you need to use var()

now fix your “gradient-type”

the words “gradient-type” is just a placeholder word
You must replace it with the actual gradient function (the name is given in the exercise).

Finally fix your colors. You need to use the var function for these.