Learn CSS Variables by Building a City Skyline - Step 40

HTML-CSS
1

Tell us what’s happening:
I have tried using the other forums to guide me and ive gone back through to see how to us the variable correctly, but I am truley stuck on the way to set up the background. The hint keeps saying " You should apply a background to .bb1a". If someone can guide me or tell me where to look

  **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-color: var(linear-gradient(--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:

2

var can have only and exactly a variable name, you can use var multiple times so don’t worry on having multiple variables to use

3

The original code for background-color was:
background-color: var(--building-color1);
So you will need to put this code back first.

Then based on the hint, which says to “apply a background” what new style property do you need to add now?

(notice also how the word background looks slightly different than the rest of the font in the hint)

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

idk what the background would be i tried a few different background options but im stuck, where should i look to help?

5

you’re doing great.
You just need to fix one (or two) things.
Remember that the colors you are using are variables.
the browser needs your help to understand them.
Therefore use the var function for each variable so the browser knows what they are.

6

I’m not sure if you got it, but what you have to do is put var and the parenthesis around each color and a comma between each.
mod edit: solution removed

7

hello, please don’t share your code solution in the forum.
We don’t want people to learn to copy/paste, we’d prefer they learned to debug their code and use critical thinking skills to come up with their own solutions.
Feel free to help with that by sharing hints/tips/guides if you wish.
Thanks for your understanding.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.