אתגר סיכום

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 31 מתוך 35.

אתגר

קל

ניתן לך דף HTML עם תוכן על יערות הגשם באמזונס. המשימה שלך היא להפוך אותו ל־פריסת הגביע הקדוש באמצעות ביצוע השלבים הבאים:

הוסף תגיות HTML סמנטיות
עטוף את התוכן באמצעות התגיות הבאות:
- <header> עבור כותרת הדף
- <main> עבור התוכן הראשי
- <aside> עבור סרגל הצד — עובדות מהירות
- <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>