Learn CSS Variables by Building a City Skyline - Step 51

Tell us what’s happening:
Describe your issue in detail here.
Hello guys, how do i move forward i really am stuck here…help kindy

Your code so far

<!-- 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>
/* file: styles.css */
:root {
  --building-color1: #aa80ff;
  --building-color2: #66cc99;
  --building-color3: #cc6699;
  --building-color4: #538cc6;
  --window-color1: black;
  --window-color2: #8cd9b3;
}

* {
  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%;
  background-color: var(--building-color2);
}

/* User Editable Region */

.bb2b {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    var(--building-color2) 0%,
    var(--building-color2) 6%
    var(--window-color2) 6%
    var(--window-color2) 9%
  );
}

/* User Editable Region */

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

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

Link to the challenge:

You do not need the percentage,just have a comma.

You do need to add a comma to at the end of these percentages.

Now am confused what are you trying to say?

Guys am really in need of help… What rally is wrong with my code?

You do not need to specify the 0%, it’s obvious we’ll start at 0%

Picture this as a list of items,and how do we list multiple items? We separate them by a comma.

Would you mind to show via an example…I really don’t understand a word your are saying…I’ve tried all the methids but still nothing is happening

Which part don’t you understand?
Here is an example.

selector{
background: linear-gradient(
var(--var-name 1) ,
var(--var-name 1) 5%,
var(--var-name 2) 5%,
var(--var-name 2) 6%
);
}

I keep on getting this response no matter what the changes I make

  • You should use --building-color2 from 0% to 6% .* Am almost giving up… I’ve been stuck here for almost 2hrs now.

Let me see your updated code.

.bb2b {
width: 100%;
height: 100%;
background: linear-gradient(
var(–building-color2) ,
var(–building-color2) 6%
var(–window-color2) 6%,
var(–window-color2) 9%,
);
}

You are missing a comma at the end of this percentage.

Even after I added it still nothin’ is changing…

You do not need this comma here.

Kindly let your code resemble my example.

Let me record it for you you see

I’m unable to share the file due to security measure…would you mind I create a google meet then you join me?

Please dont ask users to join a video call. If you have any doubts in your code then you need to keep showing your updated code. Show your entire code not just part of it because there could be issues in another area thats was created by accident

1 Like

I apologize for that… let me share it whole again

2 Likes

@Cody_Biggs here is my updated code, kindly help.

City Skyline
<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>
</html :root { --building-color1: #aa80ff; --building-color2: #66cc99; --building-color3: #cc6699; --building-color4: #538cc6; --window-color1: black; --window-color2: #8cd9b3; }
  • {
    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%;
background-color: var(–building-color2);
}
.bb2b {
width: 100%;
height: 100%;
background: linear-gradient(
var(–building-color2) 0%,
var(–building-color2) 6%,
var(–window-color2) 6%,
var(–window-color2) 9%,
);
}
.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);
}

Already told you,you do not need that percentage,only have a comma.

You also do not need the comma here.