I dont know what Im doing wrong here

HTML-CSS
1

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

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>    
<head>
  <title>City Skyline</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />   
</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(--building-color1, --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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Step 40

Link to the challenge:

2

Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the background property and the syntax looks like this:

gradient-type(
  color1,
  color2
);

In the example, color1 is solid at the top, color2 is solid at the bottom, and in between it transitions evenly from one to the next. In .bb1a, add a gradient of type linear-gradient to the background property with --building-color1 as the first color and --window-color1 as the second.

3

I cant tell what I am doing wrong. Can anyone help?

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

4

Whenever you want to use the value of a CSS custom variable you need to use var(...).

6 Likes
5

Thank you so much!! That worked!

7

I struggled a lot to get it done. Here is the code for you all just in case.

Blockquote
Mod edit: solution redacted
Blockquote

3 Likes
8

this one was really getting me, too - i hate that i copied the answer - but i dunno if i would have figured that out w/ the hints that were included. UGH. guess i should just GRASP it even if i copied the answer. :confused:

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

didnt w0rk just yet. hmmmm, paulie…

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

heres where i am right now and i just cant figure out why its not w0rking. the full css entry is;

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

why cant i figure this out…

10

There is something weird with those double dashes. Those aren’t ascii dashes, they are some other type of character that looks like a dash. The dashes you used in the background-color are what you want.

11

Here is the code that worked for me

Mod edit: solution redacted

12

The code that worked for me was:

Mod Edit: code solution removed

13

Hello Carlos!

I noticed your attempt to help and contribute support to the forum and other fellow learners. Thank you for doing that. It is exactly what we hope everyone will do.

If I may point your attention to one thing though; we believe that learning is best achieved by working hard and sometimes even struggling to accomplish tasks and challenges. This struggle makes the person appreciate more the successes when they get them. If we post solutions to the forum though, we are preventing others from this achievement through their effort (to debug/to communicate/to problem-solve). They may learn only to copy-paste other people’s solutions and regret this later when they are unable to stand on their own two feet in software development roles.

I am sure you understand this from your own experience and I hope you understand therefore why I edited your last post to remove the code solution from it.

All the best.

2 Likes
14

@hbar1st I agree with you ! Thank you for your advice !

1 Like
15

it took me more than 30mins to solve the problem but finally. I have solved it.
here is the code :-
mod edit: solution removed

16

i’m glad you are doing well. Please do not post your solutions on the forum though.

17

Below is the code that worked for me.
mod edit: solution redacted

1 Like
18

you should put a double hyphen immediately after the variable parentheses. “–” just like that

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.

20

this work
mod edit: solution redacted

21

hi there,

you are new to the forum I believe, so you may not be aware that we are trying to cut back on solutions being posted on the forum in response to requests for help.
We encourage everyone to post hints/tips/guidance but not solutions in response to someone asking for help with a coding problem.

Thanks for your understanding.