Learn CSS Variables by Building a City Skyline - Step 77

HTML-CSS
1

Tell us what’s happening:

Step 77

Don’t worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building.

Add a repeating-linear-gradient to .fb1c with a 90deg angle, your --building-color4 from 0% to 10% and transparent from 10% to 15%.

So i’ve done the var which is this so far:

.fb1c {
width: 100%;
height: 80%;
background: repeating-linear-gradient (
90deg,
var(–building-color4) 0%,
var(–building-color4) 10%,

but they also want me to make it transparent, I must have forgot previous challenges because I have no clue how to make it transparent, i’ve been googling but none of it makes sense. Can you help me or guide me to understand how to make it transparent?

Your code so far

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.

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/116.0.0.0 Safari/537.36

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

Link to the challenge:

2

To make it easier to read, it’s such a mess in this post;

The instructions were:
Add a repeating-linear-gradient to .fb1c with a 90deg angle, your --building-color4 from 0% to 10% and transparent from 10% to 15% .

I did this so far;
.fb1c {
width: 100%;
height: 80%;
background: repeating-linear-gradient (
90deg,
var(–building-color4) 0%,
var(–building-color4) 10%,
var(–building-transparent) 10%,
var(–building-transparent) 15%,
)
}

Obviously this is not working, everything is correct except the transparent thing. I don’t know the code for it, it is very unclear instructions or I am just overcomplicating things, either way I need some help with this, I am very stuck and cant progress

3

Should be:

(--building-color4)

Make sure to use dashes.

1 Like
4

To make it transparent just type the keyword : ‘transparent’ followed by a space and the the percent of transparency.
Ex:

 background: repeating-linear-gradient(
      90deg,
      var(--first-color),
      var(--first-color) 20%,
      transparent 20%,
      transparent 25%
    ),
3 Likes
5

Thank you very much, starstruck!

1 Like
6

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