Défi récapitulatif

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 31 sur 35.

Défi

Facile

On vous donne une page HTML avec du contenu sur la forêt amazonienne. Votre tâche est de la transformer en un Holy Grail Layout en suivant ces étapes :

Ajouter des balises HTML sémantiques
Enveloppez le contenu en utilisant les balises suivantes :
- <header> pour le titre de la page
- <main> pour le contenu principal
- <aside> pour la barre latérale - Quick Facts
- <nav> pour la section avec les liens de navigation
- <footer> pour le pied de page

Voici à quoi devrait ressembler le résultat :

Essayez vous-même

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