**Tell us what’s happening: Step 112 - Give the sky class a radial-gradient. Use #ffcf33 from 0% to 20%, #ffff66 at 21%, and #bbeeff at 100%. This will add circular gradient to the background that will be your sun.
I think I’ve learnt from previous errors and done it right!
I see the sky and the sun both but Unfortunately NOT!
Test: Sorry, your code does not pass. Keep trying.
Hint: You should give .sky a radial-gradient in the background property.**
background-color: var(--sun-color1);
background: radial-gradient(
var(--sun-color1),
var(--sun-color1) 20%,
var(--sun-color2) 21%,
var(--sky-color1) 100%
)
}```
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
```text
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Challenge: Learn CSS Variables by Building a City Skyline - Step 112
First thing you need to address is the variables. There is no sun-color or sky-color variable in this challenge. You can look through the variables that the challenge has, and if there is a variable with the correct color then you can use that. If not you will have to manually enter the color
Did the challenge give them to you or did you add them? Because when I load the challenge the variables available are
The challenge did not tell you to make new variables, so its probably not checking for any new variable you created. The challenge needs to be followed exactly how the directions are laid out
The variables were not there, so I assumed that I needed to add new ones for the sun and the sky. I’ve attached a pic above. As the sky, two varients of the sun are behind the buildings, I felt I was on the right path. But unfortunately not.
I mean it was a smart idea, but because the challenge did not specifically ask you to make new variables then the challenge test is not looking for any new variables when you hit submit
I see. In that case, how do I get the three colours then? As you showed above, there are only 8 colours and they are no way near to the sun and sky colours.
It advises “You should give the radial-gradient a first color of #ffcf33” but that colour isn’t there. Surely, I will need to add new variables, right?
.water{
background: radial-gradient(
#f000,
#D343 100000000%,
etc.
}
If its 0% then you can just have the color like I show for the top color. You would just follow this using the correct color and percentages that the challenge tells you
Hi Cody, many thanks. Finally after 4 hours, it turned out to be a simple one-line code . Had to eventually seek mdm.web.docs help to be precise. The result was very close to what I had done above though! Thank you for your guidance!
For me, the issue was an extra comma and it took me over 2 hours. So, you need to pay attention to details and avoiding commas or semi-colons, etc when not necessary is very important.
Also, just like @Cody_Biggs said, the variable might work but the challenge didn’t specifically ask for a new variable because they knew it wasn’t necessary or needed. Thanks for the guide.
. Had to eventually seek mdm.web.docs help to be precise. The result was very close to what I had done above though! Thank you for your guidance!