Voir le projet sur GitHub

? Structure du projet

payment-app/
│-- index.html
│-- styles.css
│-- images/
│   └-- credit-card.png

? Comment utiliser ce projet

1. Télécharger ou cloner le référentiel :

   git clone https://github.com/yourusername/simple_interface.git

1. Accédez au répertoire du projet :

   cd payment_app_interface

1. Ouvrez le fichier index.html dans votre navigateur pour afficher l'interface de l'application de paiement.

? Concepts et fonctionnalités clés

1. Structure HTML :

   • Navigation dans la barre latérale : utilisation de nav et ul pour une simple barre latérale.
   • Sections de contenu principales :
     • Affichage du solde avec une carte stylisée.
     • Formulaire de paiement avec des champs de saisie et un bouton d'envoi.
     • Liste de transactions utilisant les éléments ul et li.

2. Style CSS :

   • Flexbox Layout : utilisé pour l'alignement de la barre latérale et du contenu principal.
   • Schémas de couleurs : couleurs distinctes pour la barre latérale, les boutons et les types de transactions (revenus ou dépenses).
   • Effets de survol : commentaires interactifs pour les boutons et les liens de la barre latérale.
   • Responsive Design : barre latérale à largeur fixe avec contenu principal flexible.

3. Compétences intermédiaires pratiquées :

   • Mises en page complexes avec barre latérale et plusieurs sections.
   • Style de formulaire pour la saisie de l'utilisateur.
   • Conception d'interface utilisateur cohérente avec des sections distinctes et des éléments interactifs.