Learn CSS Variables by Building a City Skyline - Step 108

Tell us what’s happening:

I cannot get past this part. I have looked through the forums for a while and haven’t found an answer

Your code so far

<!-- file: index.html -->

/* file: styles.css */
/* User Editable Region */

.fb6 {
  width: 9%;
  height: 38%;
  background-color: var(--building-color3);
  background: repeating-linear-gradient(90deg,
    var(--building-color3),
    var(--building-color3) 10%,
    transparent 10%,
    transparent 30%,
    ),

  repeating-linear-gradient(90deg,
    var(--building-color3),
    var(--building-color3) 10%,
    var(--window-color3) 10%,
    var(--window-color3) 30%
  );
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.6330.220 Safari/537.36 OPR/108.0.4412.105

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 108

Hello. Use background-image property instead of background.

Hello and welcome to forum;
There is nothing wrong with using background instead of background-image.

You just have extra space in there, it confisung to code editor. Help to code editor understand your code clearly :slightly_smiling_face:
Happy coding.

And also remove “90deg” on the second gradient…
I see step 108 says:

Add another repeating gradient to this building; make it the same as the one you just added, except don’t add the 90deg direction and use your window color instead of the two transparent colors.

1 Like

I have cleared the space but it’s still not working

did you remove 90deg on the second gradient?

Thanks a lot I have removed it yet still not working

repeating-linear-gradient(
var(–building-color3),
var(–building-color3) 10%,
var(–window-color3) 10%,
var(–window-color3) 30%)

Post your code here, add three back ticks ``` before and after your code in a separate line.

I see where the problem is now lol… use 2 dashes Preformatted textfor your var (–window-color3)

The dashes are maybe 2 in the above code block. But it’s not seen, because there is no back ticks used in the above post.

yes the dashes are two

.fb6 {
  width: 9%;
  height: 38%;
  background-color: var(--building-color3);
  background: repeating-linear-gradient(
    90deg,
    var(--building-color3),
    var(--building-color3) 10%,
    transparent 10%,
    transparent 30%
  ),
  repeating-linear-gradient(
    var(--building-color3),
    var(--building-color3) 10%,
    var(--window-color3) 10%,
    var(--window-color3) 30%
  )
}

I’ve tried the above code on my side and it passed, hope this’ll help

Just got the hang of ``, thanks bro

1 Like

Did you passed the challenge?

Yes it passed Thanks bro but what was the actual problem

looking at the first code you provided, the spacing between the 2 gradients and the 90deg on the second gradient were the problem

Yes I did thanks bro

1 Like

okay , Thanks for helping me out

1 Like