Exercice Genshin Impact¶

Flexbox: Galerie de personnages Genshin Impact¶

Contexte¶

Vous créez une galerie de personnages pour le jeu Genshin Impact, avec leurs éléments (Pyro, Hydro, Electro, etc.).

Aperçu du résultat¶

Objectifs¶

Maîtriser display: flex
Utiliser justify-content, align-items, gap
Pratiquer flex-direction et flex-wrap
Utiliser Flexbox à l'intérieur d'une carte pour empiler du contenu verticalement

Consignes de base¶

Créez une galerie de 6 cartes de personnages avec :

Portrait du personnage (image fournie)
Nom du personnage
Élément (Pyro, Hydro, Cryo, etc.)
Couleur de fond selon l'élément
Layout qui s'adapte (wrapping)

Structure de chaque carte (de haut en bas) :

Image du personnage
Nom (h3)
Élément (paragraphe avec emoji)

Fichier de départ¶

IMPORTANT : Connectez-vous à CodePen d'abord et ensuitefaites un FORK du Pen de départ pour l'enregistrer dans votre compte, archiver l'exercice et pouvoir avoir un lien unique vers votre exercice complété pour la remise.

Pen de départ | FAIRE UN FORK

Étapes recommandées¶

ÉTAPE 1 : La galerie (conteneur principal)

Utilisez display: flex sur .galerie
Ajoutez flex-wrap: wrap pour permettre le passage à la ligne
Centrez les cartes avec justify-content: center
Espacez-les avec gap (suggestion : 1.5rem)

ÉTAPE 2 : Les cartes individuelles

Définissez une largeur fixe (suggestion : 200px)
Ajoutez du padding, border-radius, box-shadow
Utilisez Flexbox À L'INTÉRIEUR de chaque carte :
- display: flex
- flex-direction: column (empiler verticalement)
- align-items: center (centrer horizontalement)
- gap pour espacer image, titre, élément

ÉTAPE 3 : Styliser l'image

width: 100% pour qu'elle prenne toute la largeur de la carte
height: auto pour garder les proportions
Optionnel : border-radius pour arrondir les coins

ÉTAPE 4 : Animation au survol

Ajoutez transform: translateY(-5px) sur .carte:hover
Augmentez le box-shadow au survol

Résultat attendu¶

Une galerie responsive où :

Les cartes sont centrées et espacées uniformément
Elles passent à la ligne si l'écran est trop petit
Le contenu à l'intérieur de chaque carte est bien empilé verticalement
L'image, le nom et l'élément sont centrés
Un effet de "levée" apparaît au survol

🚀Vous êtes super rapide?¶

Voici des bonus pour vous rendre encore plus fort 💪 !

Ajoutez une barre de navigation en haut de page avec le logo Genshin et 3 liens de menu, alignés avec space-between.

⭐⭐ BONUS 2 - Cartes avec direction column¶

À l'intérieur de chaque carte, utilisez Flexbox en flex-direction: column pour organiser le contenu verticalement (image/icône en haut, nom, élément, description).

⭐⭐⭐ DÉFI - Layout complexe¶

Créez une mise en page avec :

Header flex (logo + navigation)
Section hero flex (image + texte côte à côte)
Galerie de cartes en dessous
Footer flex (liens réseaux sociaux centrés)

Remise¶

Remettre le lien de votre CodePen complété dans le Devoir Teams nommé: c4-genshin-impact. Si vous ne l'avez pas terminé pendant le cours, vous devrez le terminer en devoir et le remettre avant le cours 5.

📚 Notes de cours¶

📚 Contenu de cours sur Flexbox-introduction