Header

Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 36 von 43.

Aufgabe

Einfach

Deine Aufgabe ist es, den Abschnitt .header zu gestalten, damit er am oberen Rand der Seite hervorsticht.

Füge eine dunkle Hintergrundfarbe und weißen Text für einen guten Kontrast hinzu.
Zentriere den Text innerhalb des Headers.
Füge etwas Innenabstand hinzu, damit der Inhalt Platz hat.
Verwende eine große Schriftgröße, damit der Titel der Website hervorsticht.
Füge abgerundete Ecken und einen kleinen Außenabstand am unteren Rand hinzu, um ihn von anderen Abschnitten zu trennen.

Probier es selbst

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