Header

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

Aufgabe

Einfach

Deine Aufgabe ist es, den Bereich .header so zu gestalten, dass er oben auf der Seite hervorsticht.

Füge eine dunkle Hintergrundfarbe und weißen Text für den Kontrast hinzu.
Zentriere den Text innerhalb des Headers.
Füge etwas Polsterung (Padding) hinzu, um dem Inhalt Raum zu geben.
Verwende eine große Schriftgröße, um den Seitentitel hervorzuheben.
Füge abgerundete Ecken und einen kleinen Außenabstand (Margin) unten 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>