Aprenda cores em CSS criando um conjunto de marcadores coloridos - Passo 14

Português HTML-CSS
1

Conte-nos o que está acontecendo:
Descreva detalhadamente o problema aqui.
Não sei como colocar dentro do elemento <div container

Seu código até o momento

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>

<!-- User Editable Region -->

    <div class="marker"> <div class="container">
    <div class="marker"> <div class="marker">
    </div>
    </div>
    </div>
    </div>

<!-- User Editable Region -->

  </body>
</html>

/* file: styles.css */
h1 {
  text-align: center;
}

.marker {
  width: 200px;
  height: 25px;
  background-color: red;
  margin: auto;
}

Informações de seu navegador:

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

Desafio: Aprenda cores em CSS criando um conjunto de marcadores coloridos - Passo 14

Link para o desafio:

2

Oi, @xabuca2364 ! Boas-vindas ao fórum do freeCodeCamp.
Colocar um elemento dentro de outro é inseri-lo entre as tags de abertura e de fechamento desse último elemento, assim:

<div class="elemento-pai">
  <div class="elemento-filho">
  </div>
</div>

Você verá que a primeira tag de fechamento (</div>), nesse exemplo, é a tag de fechamento do elemento-filho. A segunda e última é a do elemento-pai, o elemento que envolve o primeiro. Normalmente, colocamos espaços antes dos elementos filhos para mostrar que eles estão “dentro” do elemento pai. Chamamos isso de “indentação”.

No seu código, as quatro tags de abertura estão alinhadas, uma após a outra, e as tags de fechamento estão todas depois delas. Assim, o leitor de código entenderá que a terceira div com a classe marker é filha da segunda div dessa classe, que é filha da div com a classe container que, por sua vez, é filha da primeira div com a classe marker.

Representando de outro modo, seu código, de momento, está assim:

<div class="marker">
  <div class="container">
    <div class="marker">
      <div class="marker">
      </div>
    </div>
  </div>
</div>

Se você quer que as três divs marker estejam dentro de container, mas não dentro uma da outra, é preciso alterar seu código, deixando-o assim:

<div class="container">
  <div class="marker">
  </div>
  <div class="marker">
  </div>
  <div class="marker">
  </div>
</div>

Espero ter ajudado você. Faça as alterações necessárias e tente novamente. Bons estudos! :smiley:

1 Like