Repeating-linear-gradient with ranges not single color stops

Tell us what’s happening:

It’s asking for a range of stops for each color. I can find no examples with a range for the color stops. I’ve already created repeating-linear-gradient numerous times with single color stops and they worked fine.
I’m only finding examples that have a single stop for each color. Maybe I’m misunderstanding what they’re asking. But now I’m stuck.

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

Also, I’m not familiar with using “transparent” in a gradient, and can find nothing on that either.
Please help.

Thanks.

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>    
<head>
  <title>City Skyline</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />   
</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% to 10%,
  transparent 10% to 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 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0

Challenge: Step 77

Link to the challenge:

I typed repeating-linear-gradient into Google and found this as the first item in the search result. It shows examples of exactly what to do here.

I can find none with a range for the stops. I’m only finding examples that have a single stop for each color.

--building-color4 from 0% to 10% and transparent from 10% to 15%.

I can find no examples with a range for the color stops.
I’m only finding examples that have a single stop for each color.

Are you able to address that part please?

I see both types of examples. If you only see examples for the single stop color, then try doing that instead. There will be a total of 4 stops. One to start with --building-color4, one for --building-color4 up to 10%, one to start transparent starting at 10%, and final one for ending transparent up to 15%. Give it a try. If you get stuck, post your code for that css selector and we will try to guide you further.

I’m talking about ranges within a single stop though.

I’ve already successfully created repeating-linear-gradients.

They worked fine.

Current ask:
You should give .fb1c a background with a repeating-linear-gradient.

Here’s the current code that won’t pass:
( Can you personally see what’s wrong with it or not?)

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

Error Message:

You should use a first color of --building-color4 from 0% to 10%.

Your code accomplishes the task and as far as I am concerned should be accepted. The test behind-the-scenes is very restrictive in what it allows for the “correct” answer. The test is expecting 4 different stops. I think it is not great that the curriculum does not give any examples of the expectations. The new project-based curriculum is a work in progress.

I copied and pasted this code in Visual Studio Code and it works 100%.
And there are 4 stops.

So, I’m at an impasse and cannot proceed.

I have no idea what they think is wrong.

Any idea what should I do?

You have not properly referenced the css variable here. You are missing a -. Even if you fix it, you will still not pass the remaining tests because of the test bug I mentioned above.

It actually has two dashes in the code, not sure why it pasted as one on here. If I attempt to edit on here, the edit text displays two dashes. Weird.

I successfully modified the test to accept your version (more like the docs show) and the version of code which FCC was already accepting. I will submit a PR shortly for the curriculum team to review.

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.