Learn CSS Variables by Building a City Skyline - Step 40

HTML-CSS
1

Tell us what’s happening:
Hi, I’ve looked at all the previous queries and I can’t see what the solution is to create the gradient. Please can you help?

  **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(--building-color1);
background: 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

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

Link to the challenge:

2

You are already creating a gradient by using linear-gradient. However, it doesn’t understand your variables.
Can you guess why not?

(Hint: why does the previous line of code understand the given variable?)

3

I’m sorry, I’m can only guess. Because I’ve included ‘var’?

4

Yes that is correct. So just use var every time you reference a variable in css.

5

So like this? It doesn’t pass, though?!?

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

6

More like:

linear-gradient(var(

Make sure you use one var for every variable.

7

I’ve added the () but still it doesn’t pass. Now its asking me:

Hint

You should give the background a linear-gradient ending at --window-color1.

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

8

right. That’s because your syntax for the var is wrong.
You need one var for each variable.
In the line of code you added, you have 2 variables, so you need two vars.
Recall:

var(–mycolor)
this is the syntax to reference a color called --mycolor

also don’t forget that CSS wants a semi-colon at the end of each line of code (refer to other lines to see that in use)

9

I feel like I’m adding too many var’s now. Still not right?

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

10

you have the correct number of vars, but you have lost a required ( bracket and a required , comma

Let me try to explain this syntax to you. Originally you had this line of code:

Then I said, you should be using var right?
Now look at what you have:

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

The comma in the original line of code is gone? And where did the bracket go that used to be after the word gradient?
Here’s the proper syntax (with the wrong colors)

linear-gradient(var(--something),var(--something-else));

Syntax is super important in coding. You will be seeing this type of syntax again, so take the time to understand what is the purpose of each bracket, comma and semi-colon.

11

Ah, I’m there (or more accurately, you got me there). Thanks for all of your help.

12

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