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

Português HTML-CSS
1

Conte-nos o que está acontecendo:

Alguém me ajuda a corrigir essa parte do meu código. Não sei se é exatamente essa estrutura certa. ou se tem algum pequeno erro de sintaxe. Quem puder me ajudar , já agradeço agora.

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 bb1-window"></div>
        <div class="bb1b bb1-window"></div>
        <div class="bb1c bb1-window"></div>
        <div class="bb1d"></div>
      </div>
      <div class="bb2">
        <div class="bb2a"></div>
        <div class="bb2b"></div>
      </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;
  --window-color2: #8cd9b3;
  --window-color3: #d98cb3;
}

* {
  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%;
}

.bb1b {
  width: 80%;
}

.bb1c {
  width: 90%;
}

.bb1d {
  width: 100%;
  height: 70%;
  background: linear-gradient(
      var(--building-color1) 50%,
      var(--window-color1)
    );
}

.bb1-window {
  height: 10%;
  background: linear-gradient(
      var(--building-color1),
      var(--window-color1)
    );
}

.bb2 {
  width: 10%;
  height: 50%;
}

.bb2a {
  border-bottom: 5vh solid var(--building-color2);
  border-left: 5vw solid transparent;
  border-right: 5vw solid transparent;
}

.bb2b {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
      var(--building-color2),
      var(--building-color2) 6%,
      var(--window-color2) 6%,
      var(--window-color2) 9%
    );
}

/* User Editable Region */

.bb3 {
  width: 10%;
  height: 55%;
  background-color: repeating-linear-gradient(
    90deg, var(building-color3) 0%, var(building-color3) 7.5%, var(window-color3) 15%)
  )
}

/* User Editable Region */

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

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 60

2

aren’t you missing something from the variable name?

1 Like
3

Olha eu modifiquei!!! Ainda não deu certo. Preformatted text.bb3 { width: 10%; height: 55%; background-color: repeating-linear-gradient( 90deg, var(--building-color3)0%, var(--building-color3)7.5%, var(--window-color3) 15%) ) }

4

Eu modifiquei , mas ficou assim:

bb3 {
  width: 10%;
  height: 55%;
  background-color: repeating-linear-gradient(
    90deg, var(--building-color3)0%, var(--building-color3)7.5%, var(--window-color3) 15%)
  );
}
5

Please help me. Because i’m lost.

6

We are helping you, but you need to start asking questions.

1 Like
7

Look at your previous gradients in all of the buildings you have done previously. There is something different about them than what you’ve done here.

It’s not in these instructions, and I don’t know if it was mentioned or even what the rules are regarding this, maybe you can search for the answer yourself but:

Look for the property you are putting the gradient on in your previous buildings. Is it background-color ? Just do it the exact same way that you’ve been doing it for the previous. Why change it now?

Also, read the instructions:

Fill in .bb3 with a repeating-linear-gradient. Use 90deg for the direction, your building-color3 for the first two colors, and window-color3 at 15% for the third.

This is all you need to do. If you do anything else, it’s incorrect. 0% and 7.5% are not mentioned here, so you should not put them into your code.

1 Like
8

Eu as vezes não consigo fazer perguntas , porque tenho muita dúvida na estrutura.
Eu fiz de tudo , achei que fiz igual aos moldes anteriores. Contudo, ainda deu erro, segui as intruções de vocês . o que posso pedir é para ver meus erros e me ajudar. Ainda deu erro , mas por quê? Essa é a pergunta. Preformatted text

  width: 10%;
  height: 55%;
  background: repeating-linear-gradiente(   
      90deg, 
      var(--building-color3), 
      var(--building-color3), 
      var(--window-color3) 15%);
}
type or paste code here
9

I can. Thank you . I found the wrong in the written.

1 Like
10

Thank you , so much . You help a lot , now.

1 Like