Learn CSS Variables by Building a City Skyline - Step 40

great, already much improved.
Now again, look back at the instructions given in this exercise (pasted for you the syntax block here for convenience)

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

the syntax:

gradient-type(
  color1,
  color2
);

do you see how the syntax block uses the ‘gradient-type(’ with a bracket surrounding the colors?

Try putting a bracket around your colors in the same way (and remove the , following the word gradient)

That is one step closer to the solution. Now you have to use the linear-gradient keyword as a function.

The syntax for CSS function is already given in the example. You can replace the gradient-type to the ones they asked you in the question.

And after that, you can put the var that you’ve made inside the linear-gradient function.

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

You can put variables inside functions.


Use variables like this: `var(--this-is-a-variable)`

And put the variables inside a function like this

linear-gradient(
   var(--variable1) , var(--variable2) , ... 
) 

sorry, this is going backwards a bit.

The previous solution was almost correct.
You just needed to add a bracket around the colors without touching anything else except for the comma

this was your best line of code so far

so again, please remove the comma after the word gradient here
and add a bracket instead (in the same place as the comma and one at the end before the semi-colon to match the given syntax)

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

you guys are so cool , i got it correct now
i was waiting for you guys to scold or swear at me already, since i was not catching up fast
how my instructors usually would do to me in my country , thanks for the patience

2 Likes

We would never never ever do that!
I appreciate you trying so hard! Many people get very frustrated.
Please stay a bit longer because there is something more to learn from this exercise.

first thing to learn is that var is a function.
You can practice using it simply by typing out some code that needs a color value.
like try adding another line after you submit this exercise and play with the colors and gradients.

You will see gradients again, so spend a few minutes understanding how they work
(how the syntax looks especially).

Hope you can do this and enjoy seeing the webpage develop.

1 Like

No man, instead, for me it was the other way around…

I’m afraid that you would give up or that you would be frustated over our answer that you would stop learning coding again.

But I can see where you are coming from. It is also prevalent in my country :pensive:

Cheers :grin:

1 Like

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