כותרת עליונה

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 36 מתוך 43.

אתגר

קל

המשימה שלך היא לעצב את אזור .header כדי להבליט אותו בראש הדף.

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

נסו בעצמכם

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