Learn CSS Variables by Building a City Skyline - Step 38

Tell us what’s happening:
// So in the instruction it asks you to add the comment above the .fb1 selector. But the error message states the comment should be above the .bb1 selector. This is confusing! Also, I’ve tried putting in both areas and both are wrong!!!

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

* {
  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;
}
/*FOREGROUND BUILDINGS - "fb" stands for "foreground building"/*

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.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);
}



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

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

Link to the challenge:

Add the comment between these two blocks of code (in that large empty area)

Mod edit: Removed Solution

Would be better if you could explain how to solve the challenge rather than posting the code

1 Like

i am stuck in the same area kindly anyone with the knowledge please explain what am doing wrong

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

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

.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);
}

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like

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