Scribd
Importer
3 vues2 pages

Création de 3 blocs flexibles en CSS

Transféré par

sanae.elhaddad99
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
3 vues2 pages

Création de 3 blocs flexibles en CSS

Transféré par

sanae.elhaddad99
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 : Créez 3 blocs alignés avec display: flex

Dans ce TP, vous allez créer une mise en page contenant 3 blocs. Chaque bloc contiendra
une image, une description, et un bouton lien. Vous utiliserez la propriété CSS display: flex
pour aligner ces blocs horizontalement.

1. HTML :
1. Créez une structure HTML contenant une div principale nommée avec un class container
contient 3 blocs avec les classes box1, box2, et box3.

2. Chaque bloc doit contenir :


- Une image.
- Une description sous l'image.
- Un lien affiché comme bouton.

2. CSS :
1. Utilisez la propriété display: flex pour aligner les blocs horizontalement dans la classe
container.

2. Ajoutez un espacement égal entre les blocs avec justify-content.

3. Appliquez les styles suivants pour chaque bloc :


- Une largeur fixe de 300px.
- Un arrière-plan coloré.
- Une bordure grise et arrondie.
- Un padding intérieur pour espacer le contenu.
- Une ombre légère pour améliorer l'apparence.

3. Images :
1. Limitez la largeur des images pour qu'elles s'ajustent à la largeur du bloc.
2. Ajoutez un espacement sous chaque image.

4. Boutons :
1. Transformez les liens en boutons avec une couleur de fond et un texte blanc.
2. Ajoutez un effet de survol (hover) qui change la couleur du fond.

5. Bonus :
- Appliquez une couleur de fond différente pour chaque bloc (exemple : bleu, rouge, vert).
- Ajoutez une animation subtile lorsque le bouton est survolé.

Résultat attendu :

Vous aimerez peut-être aussi