تحدي المراجعة

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 31 من 35.

التحدي

سهل

لقد تم تزويدك بصفحة HTML تحتوي على بعض المحتوى حول غابات الأمازون المطيرة. مهمتك هي تحويلها إلى تخطيط الكأس المقدسة (Holy Grail Layout) باتباع الخطوات التالية:

أضف وسوم HTML الدلالية
قم بتغليف المحتوى باستخدام الوسوم التالية:
- <header> لعنوان الصفحة
- <main> للمحتوى الرئيسي
- <aside> للشريط الجانبي - Quick Facts
- <nav> للقسم الذي يحتوي على روابط التنقل
- <footer> لتذييل الصفحة

إليك كيف يجب أن تبدو النتيجة:

جرّب بنفسك

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