Header

Coddy'nin HTML Journey'sinin CSS Mastery 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ü stillendirmektir.

Kontrast için koyu bir arka plan rengi ve beyaz metin ekleyin.
Üst bilgideki metni ortalayın.
İçeriğe alan kazandırmak için biraz dolgu (padding) ekleyin.
Site başlığının belirginleşmesini sağlamak 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 (margin) 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>