Learn CSS Variables by Building a City Skyline - Step 40

HTML-CSS
1

Tell us what’s happening:

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

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;
  --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(--building-color1, --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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Challenge Information:

Learn CSS Variables by Building a City Skyline - Step 40

2

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!

1 Like
3

The problem checker is telling me I should " apply a background to .bb1a right after the background-color ." and I can’t seem to guess the answer correctly. Any help would be appreciated

4

Hi there!

You aren’t added the var() function within the linear-gradient()

2 Likes
5

This could be used as a reference on how to enter each color.

Good attempt!

The var part is missing from the colors.

Wishing you good progress on your coding journey. :slightly_smiling_face:

1 Like
6

hmm… I’m still having trouble understanding what I’m doing wrong. Should my solution include the words “var(”?

7

Yes, you need to add the variables within the var() function.

1 Like
8

Keep up the good attempts. If you used the one from the background-color as reference you should pass it.

1 Like
9

and the var() is linear-gradient, correct? I’ve tried to add this to both the background and background-color and it isn’t working. Of course I’m not sure if that is correct :smiling_face_with_tear:

10

No, it’s not. var() function should be added within the linear-gradient() and each color variable should be added within the var() function.
Try to do that and share your code , if you gets error.

1 Like
11

I’ve tried this code but keep getting an error. I’m doing something incorrectly

background-color: var(–background-color1);
background: var: linear-gradient (–background-color1, --window-color1);

12

Your above previous code was in better condition. You just need to add var() function on variables --building-color1 and --window-color1.
Reset the challenge step to restore the original code back and try again.

13

now I’ve written

///background-color: var(–building-color1);
background: linear-gradient(–building-color1), linear-gradient(–window-color1);///

and the response is " You should apply a background to .bb1a right after the background-color ."

14

Hey @ellie.codes.us

The above code of yours is kinda close to what the step wants. You just have use var() with both --building-color1 and --window-color1 ( put these two inside a var() for each ) inside the linear-gradient.

Your code right now ( background: linear-gradient(–building-color1), linear-gradient(–window-color1);) is incorrect.
Hope this helps!

1 Like
15

You aren’t using the var() function within the linear-gredient() function that I said to use it in my all previous posts. Instead you have added one more linear-gredient() function within the existing one’s. That’s not correct formation.

1 Like
16

here your color is var(--building-color1), when you use a variable you always need to use var(), you need to use var() for each color inside linear-gradient

17

Thank you for your patience. It took me a while to understand what you were explaining. But I’ve finally been able to figure it out.

1 Like
19

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.