City Skyline Step #40 linear-gradient

HTML-CSS
1

I’m having an issue with step #40 the error is asking me to add a background to the bb1a class element. I have a background property with a linear-gradient function and added the variables. I tried looking up the linear-gradient function, but it’s asking me to add a background to bb1a.

here is my css code so far:

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

2

From what I see you’ve forgotten to call the variable with the var function within your linear-gradient function.

.bb1a {
width: 70%;
height: 10%;
background-color: var(–building-color1);
<!--  Look below here -->

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

<!-- Look above here -->
}
3

this is a helpful comment because the example syntax that is shown at step 40 is incorrect;

gradient-type(
 color1,
 color2
);

since this does not work;

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

I tried your alternative method;

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

it did not work either.

4

This is the correct syntax though.

This is not.

Can you post the code to your latest attempt of what you think should be correct?

Remember. To call variables, you need to call var() function and put the name of the variable inside the arguments (inside the brackets).

5

This is the accepted answer… :man_facepalming:

6

except it does not pass.

7

Hi @jasperstam

Can you post all of your CSS code using that method?

Enclose it in a triple backtick like this

```css

paste css codes here

```

That would be much appreciated

8 
: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 {
  background: linear-gradient(
    var(--building-color1),
    var(--window-color1)
  );
  width: 70%;
  height: 10%;
  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);
}

.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);
}
9

Hi @jasperstam.

I just posted a hint for this step and for this exact issue not long ago.

Take a look at this post:

Hope this helps :grin:

1 Like
10

THIS IS THE ANSWER!! It should be included in the hint instead of the useless message " You should apply a background to .bb1a ."
it submitted and accepted instantly.

11

YAY!!! Glad it worked out for you! Can you mark the post above as Answered? That would be much appreciated :wave::wave:

12

I have no method to mark the post as answered??

13

It is near the heart :heart: button and the link :link: button.

14

all posts only show; LIKE, SHARE-LINK, FLAG, BOOKMARK, and REPLY

15

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