🐉

⚡ Exercices HTML/CSS - Dresseur Pokémon ⚡

Devenez le meilleur dresseur web en maîtrisant HTML & CSS !

🎯 Exercice 1: Carte Pokémon HTML

Mission : Créez votre première carte Pokémon en HTML !

Votre carte doit contenir :

  • Un titre avec le nom du Pokémon : <h2>Pikachu</h2>
  • Une image emoji du Pokémon : <div class="pokemon-image">⚡</div>
  • Le type dans un span : <span class="pokemon-type">Électrik</span>
  • Les stats dans une liste : PV: 35, Attaque: 55, Défense: 40
  • Une description dans un paragraphe

Utilisez une <div class="pokemon-card"> comme conteneur principal.

0%
📝 Code HTML - Structure Pokémon
🏆 Aperçu de votre Carte
Cliquez sur "Aperçu" pour voir votre carte...
💡 Conseil : Commencez par la structure HTML basique avec les balises essentielles !

🎨 Exercice 2: Style Pokéball CSS

Mission : Stylisez votre carte Pokémon avec CSS !

Ajoutez les styles suivants :

  • .pokemon-card : largeur 250px, hauteur 350px, bordure 3px rouge, border-radius 15px
  • .pokemon-image : font-size 4em, text-align center
  • .pokemon-type : background rouge, couleur blanche, padding 5px 10px, border-radius 20px
  • Centrez tous les éléments avec text-align: center
  • Ajoutez un dégradé de fond : background: linear-gradient(135deg, #FFD700, #FFA500)

Bonus : Ajoutez une animation :hover pour faire grandir la carte !

0%
📝 Code HTML/CSS - Style Pokémon
🎨 Rendu Stylisé
Cliquez sur "Aperçu" pour voir le style...
💡 Conseil : Utilisez les propriétés CSS comme width, height, border et background !

⚡ Exercice 3: Animation Électrik

Mission : Ajoutez des animations CSS électrisantes !

Créez les animations suivantes :

  • Animation @keyframes electric qui fait clignoter l'emoji Pokémon
  • Animation @keyframes bounce qui fait rebondir la carte
  • Animation @keyframes glow qui fait briller la bordure
  • Appliquez animation: electric 2s infinite à l'image
  • Appliquez animation: glow 3s ease-in-out infinite à la carte

Bonus : Faites tourner la carte sur elle-même avec transform: rotate() !

0%
📝 Code HTML/CSS - Animations
⚡ Rendu Animé
Cliquez sur "Aperçu" pour voir les animations...
💡 Conseil : Utilisez opacity, transform: scale() et box-shadow dans vos keyframes !

📱 Exercice 4: Grid Pokédex

Mission : Créez un Pokédex avec CSS Grid !

Votre Pokédex doit avoir :

  • Un conteneur .pokedex-grid avec display: grid
  • grid-template-columns: repeat(3, 1fr) pour 3 colonnes
  • gap: 20px entre les cartes
  • Au moins 6 cartes Pokémon différentes
  • Chaque carte avec son propre type et couleur
  • Responsive : 2 colonnes sur tablette, 1 colonne sur mobile

Types à utiliser : Feu (rouge), Eau (bleu), Plante (vert), Électrik (jaune), Vol (violet), Sol (marron)

0%
📝 Code HTML/CSS - Pokédex Grid
📱 Pokédex Grid
Cliquez sur "Aperçu" pour voir votre Pokédex...
💡 Conseil : N'oubliez pas les media queries pour rendre votre Pokédex responsive !

🏆 Exercice 5: Interface Pokémon Complete

Mission : Créez une interface Pokémon complète et responsive !

Votre interface doit inclure :

  • Un header avec navigation (Accueil, Pokédex, Combat, Profil)
  • Une section hero avec titre et bouton d'action
  • Une grille de Pokémon avec filtres par type
  • Un footer avec informations
  • Menu burger responsive sur mobile
  • Animations et transitions fluides

Utilisez Flexbox pour la navigation et CSS Grid pour le contenu principal.

0%
📝 Code HTML/CSS - Interface Complète
🏆 Interface Finale
Cliquez sur "Aperçu" pour voir votre chef-d'œuvre...
💡 Conseil : Combinez Flexbox, Grid, animations et media queries pour créer une expérience exceptionnelle !