Learn CSS Variables by Building a City Skyline - Step 15

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
It not working
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 class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
    </div>
  </body>
</html>

/* file: styles.css */
* {
  border: 1px solid black;
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.background-buildings {
  width: 100%;
  height: 100%;
}

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --building-color1: #999;
}
.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1#999);
}
.bb1b {
  width: 80%;
  height: 10%;
}

.bb1c {
  width: 90%;
  height: 10%;
}

.bb1d {
  width: 100%;
  height: 70%;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

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

Link to the challenge:

2

I assume that it’s not working if you are asking for help. Can you please be more specific about what has you stuck or confused? What errors do you see? What have to tried to address those errors?

3

background-color: var(–building-color1 #999);

4

What does this line do ?

5

help me fix the bug, it keep telling that my code is wrong
.bb1a {
width: 70%;
height: 10%;
background-color: var(–building-color1#999);
}

6

I am trying to help you my friend.
Try to tell me what this line is supposed to do.

1 Like
7

To use a variable, put the variable name in parentheses with var in front of them like this: var(--variable-name). Whatever value you gave the variable will be applied to whatever property you use it on.

Add the variable --building-color1 you created in the previous step as the value of the background-color property of the .bb1a class.

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

8

What does this part here mean? It is a color?

How about this one? What is this one?

9

I have figure it out thanks bro or sis
background-color: var(–building-color1#999); /wrong code/

background-color: var(–building-color); /correct code/

1 Like
10

how for I’m still stuck to this part ?

11

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It 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.

12

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