TP 2 : Galerie Responsive avec Informations
Objectif :
Créer une galerie d’images avec des descriptions sous chaque image et un design
responsive grâce à Flexbox.
Instructions :
1. HTML :
o Créez une galerie contenant 12 images avec des descriptions fictives.
o Ajoutez un titre général pour la galerie et divisez-la en sections (par exemple
: « Nature », « Technologie », « Ville »).
2. CSS :
o Disposez les images en grille flexible (3 colonnes sur grand écran, 2 sur
tablette, 1 sur mobile).
o Ajoutez un effet au survol des images (ex. : zoom ou changement de
bordure).
o Stylisez les descriptions avec une police différente et un alignement cent
Grand écran :
Mobile :