Repeating-linear-gradient with ranges not single color stops

HTML-CSS
1

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.

gradient1
gradient1716×820 33.6 KB 

  **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:

3

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%.

4

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?

6

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%.

8

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?

10

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.

13

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.

14

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