Piè di pagina
Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 38 di 43.
Sfida
FacileCompletiamo il layout dando uno stile alla sezione inferiore del sito: il piè di pagina.
- Assegnagli uno sfondo scuro e un testo bianco.
- Centra il testo orizzontalmente.
- Aggiungi padding e angoli arrotondati per dare spazio e stile.
- Imposta una dimensione del carattere più piccola per un piè di pagina dall’aspetto pulito.
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>
Tutte le lezioni di Padronanza di CSS
1Padronanza dei selettori – Combinazioni
IntroduzioneSelettore discendenteSelettore figlioSelettore fratello adiacenteSelettore fratello generaleSfida di ripasso2Pseudo-classi interattive
Pseudo-classiEffetti al passaggio del mouseEffetti di focusStili attiviSfida di riepilogo3Classi pseudo-strutturali
Classi pseudo-strutturaliSelezionare il primo figlioSelezionare l'ultimo figlioIl potere degli schemi: usare nth-childSfida di riepilogoEsercitati da solo: Playground Web