Desafio de Revisão

Parte da seção Frontend Prático do Journey de HTML da Coddy. Lição 31 de 35.

Desafio

Fácil

Você recebeu uma página HTML com algum conteúdo sobre a Floresta Amazônica. Sua tarefa é transformá-la em um Layout Holy Grail seguindo estas etapas:

Adicione tags HTML semânticas
Envolva o conteúdo usando as seguintes tags:
- <header> para o título da página
- <main> para o conteúdo principal
- <aside> para a barra lateral — Fatos rápidos
- <nav> para a seção com os links de navegação
- <footer> para o rodapé da página

Veja como o resultado deve ser:

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
  <title>Recap Challenge</title>
  <style>
    :root {
      --main-color: #2e7d32; /* green theme */
      --secondary-color: #fff;
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #f5f5f5;
    }

    .container {
      display: grid;
      grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
      grid-template-columns: 150px 1fr 150px;
      min-height: 100vh;
      gap: 1rem;
    }

    header {
      grid-area: header;
      background: var(--main-color);
      color: var(--secondary-color);
      text-align: center;
      padding: 1.5rem;
    }

    footer {
      grid-area: footer;
      background: var(--main-color);
      color: var(--secondary-color);
      text-align: center;
      padding: 1rem;
    }

    nav {
      grid-area: nav;
      background: #c8e6c9;
      padding: 1rem;
    }

    main {
      grid-area: main;
      background: #fff;
      padding: 1.5rem;
    }

    aside {
      grid-area: aside;
      background: #dcedc8;
      padding: 1rem;
    }

    nav ul {
      list-style: none;
      padding: 0;
    }

    nav li {
      margin: 0.5rem 0;
    }

    nav a {
      text-decoration: none;
      color: #2e7d32;
    }

    @media (max-width: 768px) {
      .container {
        grid-template-areas:
          "header"
          "main"
          "aside"
          "nav"
          "footer";
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="container">
      <h1>Amazon Rainforest</h1>
      <p>The Lungs of the Earth</p>
      
      <h3>Sections</h3>
      <ul>
        <li><a href="#">Biodiversity</a></li>
        <li><a href="#">Conservation</a></li>
        <li><a href="#">Climate Impact</a></li>
        <li><a href="#">Facts</a></li>
      </ul>

      <h2>Why the Amazon is Vital</h2>
      <p>
        The Amazon Rainforest is home to over 10% of the known species on Earth. 
        Its trees produce about 20% of the world's oxygen, making it crucial for global climate regulation.
      </p>
      <p>
        Conservation efforts are critical as deforestation continues to threaten this vital ecosystem. 
        Protecting the Amazon helps preserve biodiversity, local communities, and climate stability.
      </p>

      <h3>Quick Facts</h3>
      <ul>
        <li>Area: 5.5 million km²</li>
        <li>Countries: 9 (mostly Brazil)</li>
        <li>Estimated trees: 390 billion</li>
      </ul>

      <p>&copy; 2025 Rainforest Awareness</p>
  </div>
</body>
</html>