Ce projet consiste à créer une page web interactive pour un Pokédex centré sur le Pokémon Pikachu. La page inclura des informations clés telles que :
- Le type du Pokémon.
- Son nom.
- Une photo.
- Ses caractéristiques principales.
L'objectif est de pratiquer HTML, CSS et éventuellement JavaScript pour ajouter des fonctionnalités interactives.
- Nom du Pokémon : Pikachu.
- Type du Pokémon : Électrique.
- Photo : Une image de Pikachu.
- Caractéristiques :
- Poids : 6 kg.
- Taille : 0,4 m.
- Description : Pikachu est un Pokémon de type électrique connu pour ses joues chargées d'électricité.
-
Structure générale :
- Présentation sous forme de carte (ou fiche) centrée sur la page.
- Police principale : une police sans-serif comme Arial, ou une police personnalisée comme Pokemon Solid (téléchargeable).
- Couleurs principales : jaune (rappelant Pikachu), avec des touches de noir et blanc pour le contraste.
- Bordure : Ajoutez une bordure autour de la carte, avec des coins arrondis.
-
Mise en page :
- Une section pour le nom du Pokémon en haut, bien mise en avant.
- Une image centrale de Pikachu (réduite proportionnellement).
- Une liste des caractéristiques (poids, taille, type) en dessous.
-
Effets interactifs :
- Hover : Transitions pour que les éléments changent de couleur ou grossissent légèrement au survol.
- Animation : Faites briller le nom ou l’image avec une animation CSS simple.
Ajoutez une touche d’interactivité avec JavaScript :
-
Effet dynamique :
- Au clic sur l'image de Pikachu, affichez un message comme : "Pika Pika !" dans une boîte de dialogue ou un élément texte en dessous.
-
Changement de thème :
- Ajoutez un bouton permettant de changer le thème des couleurs de la carte (par exemple, un thème sombre).
-
Chargement conditionnel :
- Utilisez JavaScript pour charger dynamiquement les caractéristiques à partir d’un tableau ou d’un fichier JSON.
- Cloner le projet :
git clone <URL du dépôt>