# Learn CSS Variables by Building a City Skyline - Step 60

**URL:** <https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679>\
**Category:** Curriculum Help\
**Tags:** html, css\
**Created:** [October 19, 2022, 9:41pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679 "2022-10-19T21:41:35Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![kalio25](https://avatars.discourse-cdn.com/v4/letter/k/dec6dc/32.png) [@kalio25](https://forum.freecodecamp.org/u/kalio25)\
**Post date:** [October 19, 2022, 9:41pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/1 "2022-10-19T21:41:35Z")

</div>

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

**Your code so far**

 ![image](https://global.discourse-cdn.com/freecodecamp/original/4X/c/3/a/c3a1aee121a9bd4c94212492f57b1bb2d6138abb.png)  
i need a help out on the correct syntax for repeating linear gradient for three colors

```html
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">    
  <head>
    <meta charset="UTF-8">
    <title>City Skyline</title>
    <link href="styles.css" rel="stylesheet" />   
  </head>

  <body>
    <div class="background-buildings">
      <div></div>
      <div></div>
      <div class="bb1">
        <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"></div>
      <div></div>
      <div></div>
    </div>

    <div class="foreground-buildings">
      <div></div>
      <div></div>
      <div class="fb1"></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>

```

```css
/* 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;
}

* {
  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;
}

/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.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-color: var(--building-color3);
  background:repeating-linear-gradient(90deg, var(--building-color3), var(--building-color3)7.5%, var(--building-color3), var(--building-color3)7.5%, var(--window-color3) 7.5%, var(--window-color3) 15%);
}
.bb4 {
  width: 11%;
  height: 58%;
  background-color: var(--building-color4);
}

/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
  width: 10%;
  height: 60%;
  background-color: var(--building-color4);
}

.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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.5195.127 Safari/537.36`

**Challenge:** Learn CSS Variables by Building a City Skyline - Step 60

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-variables-by-building-a-city-skyline/step-60)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\
**Post date:** [October 19, 2022, 9:43pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/2 "2022-10-19T21:43:05Z")

</div>

Please **Tell us what’s happening** in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

---

<div class="post-metadata">

**Author:** ![kalio25](https://avatars.discourse-cdn.com/v4/letter/k/dec6dc/32.png) [@kalio25](https://forum.freecodecamp.org/u/kalio25)\
**Post date:** [October 19, 2022, 9:47pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/3 "2022-10-19T21:47:48Z")

</div>

i want to create a repeating linear gradient for three colors, the first two colors will take distance of 0% to 7.5% while the third color will take a distance of 15%, i have to code it and am still having error massage

---

<div class="post-metadata">

**Author:** ![kalio25](https://avatars.discourse-cdn.com/v4/letter/k/dec6dc/32.png) [@kalio25](https://forum.freecodecamp.org/u/kalio25)\
**Post date:** [October 19, 2022, 9:49pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/4 "2022-10-19T21:49:40Z")

</div>

![image](https://global.discourse-cdn.com/freecodecamp/original/4X/c/3/a/c3a1aee121a9bd4c94212492f57b1bb2d6138abb.png)  
this is what i am saying

---

<div class="post-metadata">

**Author:** ![kalio25](https://avatars.discourse-cdn.com/v4/letter/k/dec6dc/32.png) [@kalio25](https://forum.freecodecamp.org/u/kalio25)\
**Post date:** [October 19, 2022, 9:51pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/5 "2022-10-19T21:51:41Z")

</div>

![image](https://global.discourse-cdn.com/freecodecamp/original/4X/a/a/7/aa7020832ad3c6f05b7c20e8be04540d45290f02.png)  
here is the task i am to do

---

<div class="post-metadata">

**Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\
**Post date:** [October 19, 2022, 10:11pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/6 "2022-10-19T22:11:38Z")

</div>

you were only asked to add 3 colors  
(you seem to have a lot more than that)  
also check the request again. Which color needs a value next to it? (not all of them)

---

<div class="post-metadata">

**Author:** ![kalio25](https://avatars.discourse-cdn.com/v4/letter/k/dec6dc/32.png) [@kalio25](https://forum.freecodecamp.org/u/kalio25)\
**Post date:** [October 19, 2022, 10:31pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/7 "2022-10-19T22:31:27Z")

</div>

![image](https://global.discourse-cdn.com/freecodecamp/original/4X/d/e/4/de4e1d70491044b4714c16715fa5d8e833a88c5f.png)  
i have adjusted it, and am still having issues, can you look into it for me and help me with the correct syntax

---

<div class="post-metadata">

**Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\
**Post date:** [October 19, 2022, 10:36pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/8 "2022-10-19T22:36:35Z")

</div>

the colors are correct and the percentages are _almost_ all correct.  
You really should re-read this exercise. You are missing the point…

---

<div class="post-metadata">

**Author:** ![kalio25](https://avatars.discourse-cdn.com/v4/letter/k/dec6dc/32.png) [@kalio25](https://forum.freecodecamp.org/u/kalio25)\
**Post date:** [October 19, 2022, 10:55pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/9 "2022-10-19T22:55:03Z")

</div>

please can you clarify me more

---

<div class="post-metadata">

**Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\
**Post date:** [October 19, 2022, 10:58pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/10 "2022-10-19T22:58:41Z")

</div>

> Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don’t specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`.

Try to split this up into smaller sentences.

- Use `90deg` for the direction ✅

- your ‘building-color3’ for the first two colors ✅  
and

- window-color3 at 15% for the third ✅

- when you _don’t_ specify a distance for a color, it will use the values that make sense.

So, they said to specify 15% for the 3rd color. Where does it say to specify 7.5% anywhere?

---

<div class="post-metadata">

**Author:** ![kalio25](https://avatars.discourse-cdn.com/v4/letter/k/dec6dc/32.png) [@kalio25](https://forum.freecodecamp.org/u/kalio25)\
**Post date:** [October 19, 2022, 11:06pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/11 "2022-10-19T23:06:44Z")

</div>

thanks so much, am so grateful for this assistance, you have been helpful to me

---

<div class="post-metadata">

**Author:** ![kalio25](https://avatars.discourse-cdn.com/v4/letter/k/dec6dc/32.png) [@kalio25](https://forum.freecodecamp.org/u/kalio25)\
**Post date:** [October 19, 2022, 11:08pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/12 "2022-10-19T23:08:27Z")

</div>

it has been resolved with you help

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [April 20, 2023, 11:09am UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-60/564679/13 "2023-04-20T11:09:17Z")

</div>

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