תחתית העמוד

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

אתגר

קל

נסיים את פריסת האתר בעיצוב החלק התחתון שלו: הכותרת התחתונה.

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

נסו בעצמכם

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