0% ont trouvé ce document utile (0 vote)
4 vues2 pages

Galerie Responsive avec Flexbox

Le document présente un projet de création d'une galerie d'images responsive utilisant Flexbox. Il inclut des instructions pour structurer le HTML avec 12 images et des descriptions, ainsi que des sections thématiques. Les directives CSS précisent la disposition des images en fonction de la taille de l'écran et l'ajout d'effets visuels.

Transféré par

Hiab
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
4 vues2 pages

Galerie Responsive avec Flexbox

Le document présente un projet de création d'une galerie d'images responsive utilisant Flexbox. Il inclut des instructions pour structurer le HTML avec 12 images et des descriptions, ainsi que des sections thématiques. Les directives CSS précisent la disposition des images en fonction de la taille de l'écran et l'ajout d'effets visuels.

Transféré par

Hiab
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

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 :

Vous aimerez peut-être aussi