Https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-variables-by-building-a-city-skyline/step-77

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I can’t get this test to pass, and it looks like I’ve done what it’s asked for. What am I missing? Thanks for your time.

  **Your code so far**

Here’s the code in question copied out. I’m sorry, I have no idea how this forum works, are there any resources for it? Thanks in advance.

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

/* file: index.html */
<!DOCTYPE html>
<html>    
<head>
  <title>City Skyline</title>
  <link href="styles.css" rel="stylesheet" />   
</head>

<body>
  <div class="background-buildings">
    <div></div>
    <div></div>
    <div class="bb1 building-wrap">
      <div class="bb1a bb1-window"></div>
      <div class="bb1b bb1-window"></div>
      <div class="bb1c bb1-window"></div>
      <div class="bb1d"></div>
    </div>
    <div class="bb2">
      <div class="bb2a"></div>
      <div class="bb2b"></div>
    </div>
    <div class="bb3"></div>
    <div></div>
    <div class="bb4 building-wrap">
      <div class="bb4a"></div>
      <div class="bb4b"></div>
      <div class="bb4c window-wrap">
        <div class="bb4-window"></div>
        <div class="bb4-window"></div>
        <div class="bb4-window"></div>
        <div class="bb4-window"></div>
      </div>
    </div>
    <div></div>
    <div></div>
  </div>

  <div class="foreground-buildings">
    <div></div>
    <div></div>
    <div class="fb1 building-wrap">
      <div class="fb1a"></div>
      <div class="fb1b"></div>
      <div class="fb1c"></div>
    </div>
    <div class="fb2"></div>
    <div></div>
    <div class="fb3"></div>
    <div class="fb4"></div>
    <div class="fb5"></div>
    <div class="fb6"></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

/* file: styles.css */
: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) 0%,
    var(--building-color4) 10%,
    transparent 10%,
    transparent 15%,
  );
}
.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);
}
  

  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36

Challenge: Step 77

Link to the challenge:

2

try taking out the 0% from the first var(–building-color4). I’m not sure why it matters, but I think the 0% is assumed.

3

Thank you for the suggestion, but I’m afraid that didn’t fix it.

The suggestion it’s giving me is:

Hint

You should use a second color of transparent from 10% to 15%.

4

This code worked for me:

Blockquote

Blockquote

5

Hi,
We’re trying to lower the amount of spoiler solutions on the forum. Please do not post full working solutions to lessons on the forum. I have edited your post to remove the solution.

Full working solutions that can be copy pasted into the lesson do not help users learn long term, as having the solution doesn’t mean understanding why it works. Trying different ways to solve a coding problem with hints and tips improves coding knowledge overall.

Thank you.

6

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