Pokédex - Projet Pikachu

Description

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.

Technologies utilisées

• HTML5
• CSS3

Fonctionnalités implémentées

HTML (index.html)

• Structure sémantique avec header et footer
• Card Pokémon responsive
• Utilisation des balises appropriées pour l'accessibilité
• Intégration des métadonnées pour le SEO

CSS (style.css)

• Design moderne avec Flexbox
• Variables CSS pour la cohérence des couleurs
• Animations sur les hover
• Media queries pour la responsivité
• Effets de transition fluides

Contenu

1. Nom du Pokémon : Pikachu
2. Type du Pokémon : Électrique
3. Photo : Image HD de Pikachu
4. 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é

Style et Design

• Palette de couleurs :
  • Jaune principal : #FDD835
  • Noir : #212121
  • Blanc : #FFFFFF
  • Gris clair : #F5F5F5
• Police principale : 'Roboto', sans-serif
• Ombres et effets de profondeur
• Animations sur les interactions

Instructions de style (CSS)

• 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.

---

Option JavaScript

Ajoutez une touche d'interactivité avec JavaScript :

1. 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.

2. Changement de thème :

   • Ajoutez un bouton permettant de changer le thème des couleurs de la carte (par exemple, un thème sombre).

3. Chargement conditionnel :

   • Utilisez JavaScript pour charger dynamiquement les caractéristiques à partir d'un tableau ou d'un fichier JSON.

---

Installation et démarrage

1. Cloner le projet :

git clone <URL du dépôt>