Learn CSS Variables by Building a City Skyline - Step 40

HTML-CSS
1

Tell us what’s happening:
I keep drawing the error " ou should give the background a linear-gradient starting from --building-color1 on the part where it says " 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.

  **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 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 (Macintosh; Intel Mac OS X 10_13_6) 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

hi there,
the variable var (–example-color), takes only one color as set in the :root.
If trying to give the linear gradient two different colors, there should be two var`s.

3

would it be formatted like this… example…```
var(–accent-green), var(–accent-blue),

4

this is my exact code, and it still won’t pass me.
‘’‘background: linear-gradient var(–building-color1),var(–window-color1);’‘’

5

linear-gradient is written with own paranthesis “()”. there should be a linear -gradient paranthesis including the both of the var’s.
hint: the line look like '))" at its end.

6

@joseph.quiroz please whats wrong with this step40? i’m having the same issue which says “You should apply a background to .bb1a”. meanwhile i have applied a background property.

7

@septerrain /you mean something like this?/

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

}

/it’s still not working/

8

when referencing a css variable, you need to use the exact name including the two – symbols for eg.
var(--window-color1) (this is the correct one)
var(–window-color1) (this one is yours)

9

@hbar1st
okay! but even with that it’s still not working for me though

10

Possible you just need to make one space between the word background: and the rest of the code.
(It doesn’t look like you have any space right now).

If still not working, please show the updated code in your next reply.

2 Likes
11

@hbar1st it worked! its the spacing like you said. Thanks a lot!

– deleted by Mod because it contains solution

12

I’m happy for you! :raised_hands:t4:

Please note that I had to delete the code you posted in the last reply because we are trying to keep FCC exercise solutions from being available in full in the forum. (Hopefully people can learn to work through the exercises step by step without looking for something to cut and paste just so they can pass the current step)
Thanks for your understanding.

13

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