Learn CSS Variables by Building a City Skyline - Step 78

HTML-CSS
1

Tell us what’s happening: I’m getting this error but I can understand the error here.

" Sorry, your code does not pass. Keep trying.

You should not alter the first repeating-linear-gradient."

### Your code so far

:root {
–building-color1: #aa80ff;
–building-color2: #66cc99;
–building-color3: #cc6699;
–building-color4: #538cc6;
–window-color1: black;
–window-color2: #8cd9b3;
–window-color3: #d98cb3;
–window-color4: #8cb3d9;
}

  • {
    border: 1px solid black;
    box-sizing: border-box;
    }

body {
height: 100vh;
margin: 0;
overflow: hidden;
}

.background-buildings, .foreground-buildings {
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: space-evenly;
position: absolute;
top: 0;
}

.building-wrap {
display: flex;
flex-direction: column;
align-items: center;
}

.window-wrap {
display: flex;
align-items: center;
justify-content: space-evenly;
}

/* BACKGROUND BUILDINGS - “bb” stands for “background building” */
.bb1 {
width: 10%;
height: 70%;
}

.bb1a {
width: 70%;
}

.bb1b {
width: 80%;
}

.bb1c {
width: 90%;
}

.bb1d {
width: 100%;
height: 70%;
background: linear-gradient(
var(–building-color1) 50%,
var(–window-color1)
);
}

.bb1-window {
height: 10%;
background: linear-gradient(
var(–building-color1),
var(–window-color1)
);
}

.bb2 {
width: 10%;
height: 50%;
}

.bb2a {
border-bottom: 5vh solid var(–building-color2);
border-left: 5vw solid transparent;
border-right: 5vw solid transparent;
}

.bb2b {
width: 100%;
height: 100%;
background: repeating-linear-gradient(
var(–building-color2),
var(–building-color2) 6%,
var(–window-color2) 6%,
var(–window-color2) 9%
);
}

.bb3 {
width: 10%;
height: 55%;
background: repeating-linear-gradient(
90deg,
var(–building-color3),
var(–building-color3),
var(–window-color3) 15%
);
}

.bb4 {
width: 11%;
height: 58%;
}

.bb4a {
width: 3%;
height: 10%;
background-color: var(–building-color4);
}

.bb4b {
width: 80%;
height: 5%;
background-color: var(–building-color4);
}

.bb4c {
width: 100%;
height: 85%;
background-color: var(–building-color4);
}

.bb4-window {
width: 18%;
height: 90%;
background-color: var(–window-color4);
}

/* FOREGROUND BUILDINGS - “fb” stands for “foreground building” */
.fb1 {
width: 10%;
height: 60%;
}

.fb1b {
width: 60%;
height: 10%;
background-color: var(–building-color4);
}
.fb1c {
width: 100%;
height: 80%;
background:
repeating-linear-gradient(
90deg,
var(–building-color4)
var(–building-color4) 10%,
transparent 10%,
transparent 15%
),
repeating-linear-gradient(
90deg,
var(–building-color4),
var(–building-color4) 10%,
var(–window-color4) 10%,
var(–window-color4) 90%
);
}

.fb2 {
width: 10%;
height: 40%;
background-color: var(–building-color3);
}

.fb3 {
width: 10%;
height: 35%;
background-color: var(–building-color1);
}

.fb4 {
width: 8%;
height: 45%;
background-color: var(–building-color1);
position: relative;
left: 10%;
}

.fb5 {
width: 10%;
height: 33%;
background-color: var(–building-color2);
position: relative;
right: 10%;
}

.fb6 {
width: 9%;
height: 38%;
background-color: var(–building-color3);
}

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; rv:121.0) Gecko/20100101 Firefox/121.0

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 78

1 Like
2

Welcome to the community @eng.dellsony !

Try removing the 90deg from the second repeating-linear-gradient.

This is an easy mistake to make by any of us.

I hope this helps you move on in your coding journey.

Keep up the good progress! :sun_with_face:

3

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

4

Hello @serrettibreno

Please create your own post, instead of posting your code on other posts?

This is the second post on another person’s original post.

Thank you for understanding this goes against the forum rules.

5

Thank you for posting your own code @eng.dellsony !

Good attempt. You almost have it.

Please remove the 90deg from this code and see if that will help you pass the code.

6

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