Learn CSS Variables by Building a City Skyline - Step 78

HTML-CSS
1

Pls i need help to figure out this stage, ive been getting this error message.y ou should not alter the first repeating-linear-gradient .

this is my 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%;
  position: relative;
}

.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) 0%,
    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);
}
2

I have edited your post so that your code displays correctly on the forum. You need to enclose code within two sets of triple backticks. You can do this manually or use the Preformatted Text tool (</> icon or CTRL+e) to create them for you.

Also, I added a direct link to the challenge, as it’s tricky to help you without the proper context.

For future reference, if you click on the Help button (which appears after you have submitted incorrect code three times), this will create a forum post which includes your full code, a direct link to the challenge and an opportunity for you to describe, in your own words, what you are having trouble with.

There are only two small issues with your second repeating-linear-gradient. You have a stray comma after the final variable. Also, you don’t need the 90deg property this time. Remove those two things and your code will pass.

3

Thank you for this . but I am still getting the same error message
" You should not alter the first repeating-linear-gradient ."

after removing the comma after the final variable and the 90deg

4

Oh, for some reason you also have a duplicate selector which shouldn’t be there.
Remove this:

.fb1c {
  width: 100%;
  height: 80%;
  position: relative;
}
5

.fb1c {background: repeating-linear-gradient(
90deg,
var(–building-color4),
var(–building-color4) 10%,
transparent 10%,
transparent 15%
),
repeating-linear-gradient(
var(–building-color4) 0%,
var(–building-color4) 10%,
var(–window-color4) 10%,
var(–window-color4) 90%

);
}

This is what it looks like and the error message is still coming up

its getting very frustrating

6

As I said, you have a duplicate .fb1c selector, so even if you’ve corrected the code inside the second selector, you still need to remove the duplicate one.

7

I just noticed the duplicate selector , the code has passed. thank you.

MODE EDIT: Solution removed.

1 Like
8

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