Learn CSS Variables by Building a City Skyline - Step 40

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
As you can see i need to add linear gradient to the background and i think i did that but it says that i should appy a background to. Bb1a. Can anyone help? I don’t know what’s the problem.

  **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;
}
.bb1a {
width: 70%;
height: 10%;
background-color: var(--building-color1);
Background: Linear-Gradient(Var(--Building-Color1), Var(--Window-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);
}

.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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

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

Link to the challenge:

2

Try using var and linear-gradient all in small alphabet as some CSS properties are case sensitive. You have set your variables all in small alphabet in the beginning in the root. So use them in small alphabet like below.

linear-gradient(
var(–building-color1) ,
var(–window-color1)
);

3

Already tried that, i don’t think the code is problem because it say in Hint:"

You should apply a background to .bb1a." but as far as i see it is applied to background. Could it be because of safari or am i missing something?

4

Hi, I’ll see if I can try to help some!

So I just reworked this step on my Chrome browser - I’d recommend using something like Chrome as it has more developer tools and responds better to FCC’s website/extensions/etc, and it might also help you out here.

Here’s your code below:

background-color: var(--building-color1);
Background: Linear-Gradient(Var(--Building-Color1), Var(--Window-Color1);
}

I agree that you’ll need to fix the capital letters that are throughout your linear gradient/variables. That will really throw off CSS as it’s reading through your lines of code.

Further, I got the same thing you did when I was reworking this. “apply background to .bb1a”.

I don’t know why, but I encountered a lot of weird loading/cache/strange website issues when I did these sections of the CSS certificate myself. It’s something about how the code is pasted in or typed. (I had been typing and pasting over from a notes app, and something about that formatting didn’t work/read for the CSS coder we use on the Free Code Camp website).

What I did to fix this on my end was right after the building color, I deleted/reset the problem for this, and slowly retyped in the code afterwards.

I typed in -

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

}

And also make sure you have the last curly brace to close down the CSS details/code for the .bb1a class (I see you have that already, but when you’re retyping.)

For me, it was something about the cache/not reading my correct code/not using Chrome/the hypertext formatting, etc. There’s a lot of little factors that got ‘buggy’ when I was working on this CSS project.

It might sound a little redundant, but I’d just try to reset the problem, clear history/cache, use Chrome, and go from there. Like I said, I had trouble too, so hopefully this will help you out.

It’s clear you understand the problem, just make sure the ‘answer’ can be read and understood by CSS and by FCC’s coder we use!

Best of luck!!

2 Likes
5

Well it seems that the problem is safari, managed to work this step over chrome on my phone. I need to get back to windows asap :joy: :smile:

6

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