Aprenda variáveis em CSS criando o horizonte em uma cidade - Passo 23

Português HTML-CSS
1

Conte-nos o que está acontecendo:

Ajude me novamente , segunda dúvida seguida . Não entendi exatamente , o que fiz de errado ou se esse não é ou não o caminho?

Seu código até o momento

<!-- 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>
  </body>
</html>

/* file: styles.css */
* {
  border: 1px solid black;
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.background-buildings {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
}

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --building-color1: #aa80ff;
  --building-color2: #66cc99;
}

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

/* User Editable Region */

.bb2 {
  width: 10%;
  height: 50%;
  background-color: var(--bb2-background-color,#66cc99);
}

/* User Editable Region */

.bb3 {
  width: 10%;
  height: 55%;
}

.bb4 {
  width: 11%;
  height: 58%;
}

Informações do seu navegador:

Agente de usuário: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Informações do desafio:

Aprenda variáveis em CSS criando o horizonte em uma cidade - Passo 23

2

Olá @lizaraxamg

Aqui está uma comparação do código original e do seu código.

O código em azul é o código original, o código em vermelho é o seu código.
O código em magenta é a sobreposição.

image
image631×180 8.51 KB

Parece que você modificou a cor variável.

Redefina a etapa para restaurar o código original.

O valor da cor substituta precisa ser green

Boa codificação

3 
type or paste code here* {
  border: 1px solid black;
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.background-buildings {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
}

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --building-color1: #aa80ff;
  --building-color2: #66cc99;
}

.bb1a {
  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(--bb2-background-color, green);
}
.bb3 {
  width: 10%;
  height: 55%;
}

.bb4 {
  width: 11%;
  height: 58%;
}
Continua não dando certo. Eu não sei o que fazer ,  parece que estou seguindo a instrução , mas alguma ideia que não entendi.  Aí aparece essa correção : "Você deve adicionar um valor substituto de green na propriedade background-color."  Não sei o que acontece , qual código por.
4

this variable doesn’t exist, you can’t use it here

1 Like
5

But , this var it isn’t incorrect. how do i do?

6

Hey,
The variable you are using ( --bb2-background-color) is incorrect. You should reset this step to get the real variable and add a fallback value of green to it.

1 Like
7

.bb2 {
width: 10%;
height: 50%;
background-color: green;
} I didn’t work. See the instruction: That didn’t work. You should add a fallback value to a variable by putting it as the second value of where you use the variable like this: var(--variable-name, fallback-value) . The property will use the fallback value when there’s a problem with the variable. Add a fallback value of green to the background-color of .bb2 .

8

A Fallback is a 2nd color. You only have 1 color here.

There are 2 colors here var(--variable-name and the fallback: fallback-value

The property will use the fallback value when there’s a problem with the variable.

So if something is wrong with the variable for some reason, the page will “fall back” onto the second color. But you will need to give it a first and second (fallback) color.

9

I can’t do this . i don’t know i did wrong. See:

.bb2 {
  width: 10%;
  height: 50%;
  background: var(#371,#00ff00)
}

type or paste code here
10

what is this? this is not your variable, why did you remove your variable?

1 Like
11

You can definitely do it. Once you understand it, it will seem easy.

For some reason you changed the background-color property to just “background” which is incorrect. Reset the step to set it back to the starting code.

EDIT: Just removing this incorrect explanation

If you have no questions it’s difficult to help you. “I can’t do this” isn’t really a question.

1 Like
12

this is not correct, background-color accepts only one color, it’s the var function that accepts the fallback value

1 Like
13

Ah, I really misunderstood, thank you. Makes more sense since it’s only a variable that could fail this way. Not like adding fonts.

14

I’ll try a correct example.

Here’s a background color with a variable:

.class {
  background-color: var(--mycolor);
}

Similar to the code you start with for this step:

  background-color: var(--building-color2);

To add a fallback color, just add a comma and the color after the variable name like this:

.class {
  background-color: var(--mycolor, blue);
}

I hope this helps, please ask if you have a question.

1 Like
15

I don’t know what i put in this structure .

16

Olá @lizaraxamg

A primeira variável color possui o número incorreto.

Boa codificação

The final structure is that:

.bb2 {
  width: 10%;
  height: 50%;
  background-color: var(--building-color1, green);
}

And doesn’t correct, i don’t know more what do.

17

Pretty close. What is –building-color1 ?

Here is the original code again:

  background-color: var(--building-color2);

All you need to do is add the fallback color. Don’t change anything else.

Reset the step and try again.

You got this

1 Like
18

Olá @lizaraxamg

A primeira variável color não possui o número correto.

Boa codificação

1 Like
19

Thank you a lot. you help me so much.

1 Like