رأس الصفحة

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 36 من 43.

التحدي

سهل

مهمتك هي تنسيق قسم .header لجعله يبرز في الجزء العلوي من الصفحة.

أضف لون خلفية داكنًا ونصًا أبيض للتباين.
قم بتوسيط النص داخل الهيدر.
أضف بعض الحشو (padding) لتوفير مساحة للمحتوى.
استخدم حجم خط كبير لجعل عنوان الموقع بارزًا.
أضف زوايا مستديرة وهامشًا صغيرًا في الأسفل لفصله عن الأقسام الأخرى.

جرّب بنفسك

<html>
<head>
  <title>FlavorFiesta</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header class="header">FlavorFiesta</header>
    
    <section class="hero">
      <h1>Delicious Recipes & Culinary Adventures</h1>
      <p>Your daily dose of flavor, fun, and food!</p>
    </section>
    
    <section class="featured">
      <h2>Featured Recipes</h2>
      <div class="recipe-grid">
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Food-pasta-spinach_%2824218510092%29.jpg" alt="Pasta">
          <p> Creamy Spinach Pasta</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/NCI_Visuals_Food_Hamburger.jpg" alt="Burger">
          <p> Classic Beef Burger</p>
        </div>
        <div class="recipe-card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/1/1e/Quinoa%2C_Black_Bean%2C_and_Mango_Salad.png" alt="Salad">
          <p> Quinoa & Avocado Salad</p>
        </div>
      </div>
    </section>   
    <footer class="footer">
      <p>© 2025 FlavorFiesta | Follow us @flavorfiesta</p>
    </footer>
  </div>
</body>
</html>