Intestazione

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 36 di 43.

Sfida

Facile

Il tuo compito è applicare uno stile alla sezione .header per farla risaltare nella parte superiore della pagina.

Aggiungi un colore di sfondo scuro e del testo bianco per creare contrasto.
Centra il testo all'interno dell'intestazione.
Aggiungi un po' di spaziatura interna per dare spazio al contenuto.
Usa una dimensione del carattere grande per mettere in risalto il titolo del sito.
Aggiungi angoli arrotondati e un piccolo margine inferiore per separarla dalle altre sezioni.

Provalo tu

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