Aprende variables CSS construyendo un horizonte de la ciudad - Paso 60

Cuéntanos qué está pasando:
Describe tu problema en detalle aquí.

Tu código hasta el 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: var(--building-color3);
  background: repeating-linear-gradient(
      90deg, 
      var(--building-color3),
      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);
}

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.188

Challenge: Aprende variables CSS construyendo un horizonte de la ciudad - Paso 60

Enlaza al desafío:

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

El código que agreste funciona y no hay errores de sintaxis, el problema es que para pasar las pruebas el código tiene que ser exactamente como piden las instrucciones.

Yo también me confundí con las instrucciones.

usa 90deg para la dirección, su building-color3 para los dos primeros colores, y window-color3 en 15% para el tercero

Las instrucciones dicen que solo hay que agregar 15% al window-color3

la parte donde explica lo de 7.5% nos dice que no es necesario agregar el porcentaje porque esto se agrega solo por defecto

por lo que en tu código aunque sea correcto el 7.5% esta demás y lo podemos omitir

2 Likes

actualmente en este mismo paso tengo mi codigo q es el siguiente:
.bb3 {
width: 10%;
height: 55%;
background: repeating-linear-gradient(
90deg,
var(–building-color3),
var(–building-color3) 7.5%,
var(–window-color3) 15%
);
}
pero me marca este error: “Debe usar --window-color3 en 15% para el tercer color.”

no logro terminar de saber de donde viene mi error

gracias

Hey @alan19 ,

Tienes exactamente el mismo problema que OP y que se soluciona con lo que menciona @franciscomelov:

Las instrucciones dicen que solo hay que agregar 15% al window-color3

la parte donde explica lo de 7.5% nos dice que no es necesario agregar el porcentaje porque esto se agrega solo por defecto

por lo que en tu código aunque sea correcto el 7.5% esta demás y lo podemos omitir

1 Like

muchisimas gracias !!!