Desafío de repaso

Parte de la sección Frontend Práctico del Journey de HTML de Coddy. Lección 31 de 35.

Desafío

Fácil

Se te proporciona una página HTML con contenido sobre la selva amazónica. Tu tarea es convertirla en un diseño Holy Grail siguiendo estos pasos:

Añade etiquetas HTML semánticas
Envuelve el contenido usando las siguientes etiquetas:
- <header> para el título de la página
- <main> para el contenido principal
- <aside> para la barra lateral: datos rápidos
- <nav> para la sección con los enlaces de navegación
- <footer> para el pie de página

Así debería verse el resultado:

Pruébalo tú mismo

<!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>