Learn CSS Variables by Building a City Skyline - Step 42 pls help me with this

HTML-CSS
1

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

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>

<!-- User Editable Region -->

      <div class="bb1">
        <div class="bb1a", class="bb1-window"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>

<!-- User Editable Region -->

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

.bb1a {
  width: 70%;
  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);
}

.bb1-window {
  height: 10%;
  background: linear-gradient(
      var(--building-color1),
      var(--window-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/112.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hello again, lets look at the directions which ask you to

" Add the new bb1-window class to the .bb1a , .bb1b , and .bb1c elements. This will apply the gradient to them."

Looks like you have only attempted to add the class to .bb1a.

as for adding two classes to an element you can look at this article. The section in the article that will give you the answer is “Attribute Values”

1 Like
3

not understanding what you are saying to me sorry but If you want to help me, do it, don’t talk around like this it is making me more confused

4

What are getting confused on? As I pointed out you are not completing the steps as the directions say. The directions tell you to add the window class to .bb1a, .bb1b, and .bb1c. According to your code the only one you attempted was adding the class to .bb1a. You still need to add it to the two others

As for the correct way to add two classes to an element I gave you a link and told you what section you need to look under. We are not going to just give you the answers

5

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!

6

sorry for my angry reply i got really angry because i am doing it from a really long time and not getting answer and you also saying that read instructions bro If I could have solved after reading the instruction, I would not have done it myself, why am I taking your help?

1 Like
7

I understand that this can be frustrating, I was pointing out the directions because you missed some of the steps. So, I pointed it out so you were aware because the challenge wont pass unless those steps were addressed. Some people miss parts of the directions when they work on challenges. Thats all it was, was pointing out that you still need to complete those steps

8

Please understand that these forums are to help work around a problem to find a solution. To learn the processes of coding (be it like here in HTML), you have to oftentimes learn how to solve your own problems.

Now, the directions tell us to
“Add the new bb1-window class to the .bb1a, .bb1b, and .bb1c elements. This will apply the gradient to them.”

Judging from your code, you need to add this class type a couple more times to the corresponding elements. If you have skipped around (which I doubt), then you might get tripped up on some of these concepts. Review if you need to. And remember, it’s not about a mistake, it’s something to be learned from.

1 Like
9

Instead of adding a new class+value to the element(s), try adding both values to the same class

1 Like
10

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