Learn CSS Variables by Building a City Skyline - Step 104

HTML-CSS
1

Tell us what’s happening:

“Hey everyone, I’m working on a CSS project and I’m struggling with a repeating-linear-gradient. I need to create a background with my building color (–building-color2) from 0% to 5%, and then make it transparent from 5% to 10%. Here’s the code I’m working with, but it keeps giving me an error. Any guidance would be really appreciated! Thanks!”
.fb5 {
width: 10%;
height: 33%;
background: repeating-linear-gradient(
90deg,
var(–building-color2) 0%,
var(–building-color2) 5%,

Your code so far

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


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

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

/* User Editable Region */

Your browser information:

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

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 104

2

Did this step ask for the 90deg?

3

Hi there!

The direction is not asked to add for the challenge in the instructions.

1 Like