Step 40-Learn CSS Variables by Building City Skyline

HTML-CSS
1

SUMMARY
I’m not sure what I’m missing. I checked the next step to see what the code is supposed to look and it matches exactly what I have. To check I copy/pasted the solution in and saw no difference in the code and it still wouldn’t let me submit it. I’m not sure what I’m missing.

INSTRUCTION
Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the background property and the syntax looks like this:

gradient-type(
  color1,
  color2
);

In the example, color1 is solid at the top, color2 is solid at the bottom, and in between it transitions evenly from one to the next. In .bb1a, add a background property below the background-color property. Set it as a gradient of type linear-gradient that uses --building-color1 as the first color and --window-color1 as the second.

CODE

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

Please post a link to the challenge

3

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

You aren’t accessing the custom CSS properties correctly. Look at how you accessed the --building-color-1 property in the background-color as an example.

6 Likes
5

You are missing the var function for each variable you have referenced

19 Likes
6

Code:

mod edit: code removed

7

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

2 Likes
8

Got it, thanks for the feedback

1 Like
9

this is the solution, thank you :pray:

3 Likes
10

You read your variables without using var.
Correct your code to be like this :slight_smile:

3 Likes
11

this is the solution:

Mod edit:removed

12

@sh0gost

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like