Learn CSS Variables by Building a City Skyline - Step 104

[smnharuna]

I am asked to give the repeating-linear-gradient a second color of transparent from 5% to 10% .:

Your code so far

Below is my code:

    var(--building-color2),
    var(--building-color2) 5%,
    transparent: 5%,
    transparent: 10%
  )
  background-color: var(--building-color2);
  position: relative;
  right: 10%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Learn CSS Variables by Building a City Skyline - Step 104

Link to the challenge:

freeCodeCamp.org

[hbar1st]

can you show the rest of the code?
Also make sure to write the background property below the background-color property.

[smnharuna]

This is the entire code for the step:
.fb5 {
width: 10%;
height: 33%;
background: repeating-linear-gradient(
var(–building-color2),
var(–building-color2) 5%,
transparent: 5%,
transparent: 10%
)
background-color: var(–building-color2);
position: relative;
right: 10%;
}

[hbar1st]

always place background below background-color

[smnharuna]

Done… still not working…please find my code below:

  width: 10%;
  height: 33%;
  background-color: var(--building-color2);
  position: relative;
  right: 10%;
  background: repeating-linear-gradient(
    var(--building-color2),
    var(--building-color2) 5%,
    transparent: 5%,
    transparent: 10%
  );
}

[DobarBREND]

Check out the dashes in front of your colors:

background: repeating-linear-gradient(
  var(--building-color2),
  var(--building-color2) 5%,
  transparent 5%,
  transparent 10%
  );

Repeat the step.

[smnharuna]

I’ve removed them… still the same.

  width: 10%;
  height: 33%;
  background-color: var(--building-color2);
  position: relative;
  right: 10%;
  background: repeating-linear-gradient(
  var(--building-color2),
  var(--building-color2) 5%,
  transparent 5%,
  transparent 10%
  );
}

[DobarBREND]

This code has passed on my side:

.fb5 {
  width: 10%;
  height: 33%;
  background-color: var(--building-color2);
  position: relative;
  right: 10%;
  background: repeating-linear-gradient(
    var(--building-color2),
    var(--building-color2) 5%,
    transparent 5%,
    transparent 10%
    );
 }

Try this:
“Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.”