Passo 9

Instruções

Forneça às partes da construção as propriedades width e height com estes valores: 70% e 10% para .bb1a, 80% e 10% para .bb1b, 90% e 10% para .bb1c e 100% e 70% para .bb1d. Lembre-se de que essas porcentagens são relativas ao pai e observe que as alturas somarão 100% - enchendo verticalmente o contêiner.

O que fazer:

Testes:

Você deve usar um seletor de classe para estilizar `.bb1a`.
Você deve dar a `.bb1a` uma `width` de `70%`.
Você deve dar a `.bb1a` uma `height` de `10%`.
Você deve usar um seletor de classe para estilizar `.bb1b`.
Você deve dar a `.bb1b` uma `width` de `80%`.
Você deve dar a `.bb1b` uma `height` de `10%`.
Você deve usar um seletor de classe para estilizar o `.bb1c`.
Você deve dar a `.bb1c` uma `width` de `90%`.
Você deve dar a `.bb1c` uma `height` de `10%`.
Você deve usar um seletor de classe para estilizar o `.bb1d`.
Você deve dar a `.bb1d` uma `width` de `100%`.
Você deve dar a `.bb1d` uma `height` de `70%`.

<!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 class="bb1">
        <div class="bb1a"></div>
        <div class="bb1b"></div>
        <div class="bb1c"></div>
        <div class="bb1d"></div>
      </div>
    </div>
  </body>
</html>

* {
  border: 1px solid black;
  box-sizing: border-box;
}

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

.background-buildings {
  width: 100%;
  height: 100%;
}

.bb1 {
  width: 10%;
  height: 70%;
}

Preview