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

**URL:** <https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-40/630651>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [August 17, 2023, 6:55pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-40/630651 "2023-08-17T18:55:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![cristianbot400](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cristianbot400/32/319830_2.png) [@cristianbot400](https://forum.freecodecamp.org/u/cristianbot400)\
**Post date:** [August 17, 2023, 6:55pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-40/630651/1 "2023-08-17T18:55:54Z")

</div>

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

**Your code so far**

Why i cant move on if there are mistakes pls let me now

```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"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
      <div class="bb2"></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;
}

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

/* User Editable Region */

.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1);
  background: linear-gradient(
    var(--building-color1) 
    var(--window-color1)
  );
}

/* User Editable Region */

.bb1b {
  width: 80%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1c {
  width: 90%;
  height: 10%;
  background-color: var(--building-color1);
}

.bb1d {
  width: 100%;
  height: 70%;
  background-color: var(--building-color1);
}

.bb2 {
  width: 10%;
  height: 50%;
  background-color: var(--building-color2);
}

.bb3 {
  width: 10%;
  height: 55%;
  background-color: var(--building-color3);
}

.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/115.0.0.0 Safari/537.36`

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

**Link to the challenge:**

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

---

<div class="post-metadata">

**Author:** ![DobarBREND](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dobarbrend/32/297954_2.png) [@DobarBREND](https://forum.freecodecamp.org/u/DobarBREND)\
**Post date:** [August 17, 2023, 6:58pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-40/630651/2 "2023-08-17T18:58:10Z")

</div>

> [@cristianbot400](#):
>
> ```auto
> background: linear-gradient(
> var(--building-color1) 
> var(--window-color1)
> );
> 
> ```

Add a comma after the first color.

---

<div class="post-metadata">

**Author:** ![cristianbot400](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/cristianbot400/32/319830_2.png) [@cristianbot400](https://forum.freecodecamp.org/u/cristianbot400)\
**Post date:** [August 17, 2023, 6:59pm UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-40/630651/3 "2023-08-17T18:59:40Z")

</div>

woa thanks bro you are a G

---

<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:** [February 16, 2024, 7:00am UTC](https://forum.freecodecamp.org/t/learn-css-variables-by-building-a-city-skyline-step-40/630651/4 "2024-02-16T07:00:02Z")

</div>

Closed on February 16, 2024, 7:00am UTC

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