Learn CSS Variables by Building a City Skyline - Step 40

HTML-CSS
1

Tell us what’s happening:

I am being asked to add a background property to the .bb1a selector using the gradient-type(color1, color2); syntax with two variables, var(–building-color1) and var(–window-color2) using the linear-gradient gradient type. My answer is placed immediately after the background-color property as instructed. The error I am getting when I submit my answer is: “You should apply a background to .bb1a right after the background-color.” Other forum posts on this subject seem to agree with my answer.

Your code so far

/* BACKGROUND BUILDINGS - “bb” stands for “background building” /
.bb1 {
width: 10%;
height: 70%;
display: flex;
flex-direction: column;
align-items: center;
}
**/-----------------Problem code starts here-------------------------/**
/ User Editable Region */

.bb1a {
width: 70%;
height: 10%;
background-color: var(–building-color1);
background: linear-gradient(var(–building-color1), var(window-color1));
}
/* User Editable Region /
**/-------------------Problem code ends here-----------------------*/**

.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);
} 


### Your browser information:

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0</code>

### Challenge Information:
Learn CSS Variables by Building a City Skyline - Step 40
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-variables-by-building-a-city-skyline/step-40`Preformatted text`

EDIT TO ADD: I am using double hyphens before the variable names. I am not sure why it removed the "You code so far" formatting around my code when I made this post, but I can't seem to fix it. Apologies.
2

Hi, try to replace
background-color: var(--building-color1);
with
background: var(--building-color1);

edited:
I use this webapp to create gradients, and just look at the code it provides. The first rule needs to show the background in browsers that don’t support the second with gradient (as I understand)

3

Welcome to the forum @tianoel1999

The second colour is missing double dashes.

Happy coding

1 Like