Header

Coddy'nin HTML Journey'sinin CSS Hakimiyeti bölümünün bir parçası. Ders 36 / 43.

Görev

Kolay

Göreviniz, sayfanın üst kısmında öne çıkmasını sağlamak için .header bölümünü biçimlendirmektir.

Kontrast oluşturmak için koyu bir arka plan rengi ve beyaz metin ekleyin.
Başlığın içindeki metni ortalayın.
İçeriğe alan sağlamak için biraz dolgu ekleyin.
Site başlığını öne çıkarmak için büyük bir yazı tipi boyutu kullanın.
Diğer bölümlerden ayırmak için yuvarlatılmış köşeler ve alt kısma küçük bir kenar boşluğu ekleyin.

Kendin dene

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