Learn CSS Variables by Building a City Skyline - Step 40

Tell us what’s happening:
Describe your issue in detail here.

  **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 {background: linear-gradient (
--building-color1, and --window-color1);

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%;
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:

1 Like

Hello there.

Please 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 information you give us, the more likely we are to be able to help.

1 Like

the problem is this part background: linear-gradient (–building-color1, --window-color1); what i am i doing wrong.

1 Like

Please don’t just quote your code or the instructions. What about the instructions or error messages has you confused? What have you tried to fix that confusion?

Talking to people about code is a big part of professional coding.

1 Like

when i write my code its telling me that i have to apply a background to my .bb1a

1 Like

The sample code didn’t use the word ‘and’. I don’t think that belongs.

I’m not sure if you can have a space before that (

1 Like

i am very new to this , i have no idea what i am doing wrong here.

Did you try removing the ‘and’

Did you try removing the space between linear-gradient and (

yes i tried that, i think the syntex on my code is wrong.

What does your code look like when you do that?

Can you give us your code block of your latest attempt, enclosed in triple backtics?

Like this

```css
/* copy paste code here */
```

Don’t forget this syntax for using the variables.

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

yes i done that to be honest i have no clue here.

Have you refer to JeremyLT’s comment? You have to use the proper syntax to call the variables

You have to include the var( followed by the name of the variable and close it with ) creating var(--building-color1)

1 Like

What’s it look like when you add the var syntax to your code?

looks like this background: linear-gradient var(–building-color1, --window-color1);

None of the other places where you use var() do you put two colors in at the same time. I would use separate var() for each color.

the first 1 is the --building-color1 and the 2 the --window-color1

Yes I see that you have correctly identified the variables. But to call a variable you need to enclose them with var( and )

Like var(--building-color1) :grin:

Try it! it will work :+1: