Historique des conversations
Chargement...
Projet CSS – Site vitrine — Correction d'exercices
Voici des propositions de solutions en mode console (via readline()). N’hésite pas à les adapter.
#1 — En-tête (Header)
Fais en sorte que le logo et le menu soient aux deux extrémités de la barre de navigation.
Voir le corrigé
nav {
display: flex;
justify-content: space-between;
align-items: center;
}#2 — Section Hero
Centre le titre du site sur une image de fond qui couvre toute la zone.
Voir le corrigé
.hero {
height: 500px;
background-image: url('hero.jpg');
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
color: white;
}#3 — Grille de services
Crée une grille de 3 cartes avec un espacement de 30px.
Voir le corrigé
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}#4 — Effet sur les cartes
Ajoute une ombre légère au survol d'une carte.
Voir le corrigé
.card:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
transition: 0.3s;
}#5 — Footer simple
Donne au footer un fond gris foncé, du texte blanc et centre-le.
Voir le corrigé
footer {
background-color: #222;
color: #fff;
text-align: center;
padding: 20px 0;
}