06/02/2025 19:16 Création site vitrine HTML
PRÉSENTATION DU SITE VITRINE POUR UN RESTAURANT
🎤 Introduction (1 min)
Bonjour à tous,
Nous sommes [Nom de l'équipe], et nous avons développé un site vitrine pour un restaurant en utilisant
exclusivement HTML et CSS.
L’objectif de ce projet est de mettre en avant les services du restaurant tout en offrant une expérience
utilisateur agréable et une navigation fluide.
Nous allons vous présenter la maquette, le code développé, et les animations utilisées pour améliorer
l’expérience utilisateur.
📌 Présentation de la maquette (2 min)
Avant de coder, nous avons conçu une maquette sur Canva qui respecte les principes suivants :
✔ Simplicité et clarté : Disposition bien organisée avec une hiérarchie visuelle claire.
✔ Harmonie des couleurs : Nous avons choisi une palette cohérente centrée sur des tons chaleureux.
✔ Équilibre entre texte et images : Le visuel joue un rôle clé pour donner envie aux visiteurs.
🎯 Comparaison maquette vs site final :
Nous avons suivi fidèlement la maquette pour assurer une transition fluide entre le design et
l’implémentation.
💻 Présentation du site développé (5 min)
Nous allons maintenant vous montrer le site en expliquant les différentes sections et leurs spécificités.
1️⃣ Accueil (Hero Section)
💡 Effet visuel :
Un fond d’écran en image fixe (parallax) améliore l’immersion.
Un overlay sombre (rgba(0,0,0,0.5)) assure une meilleure lisibilité du texte.
Animation du texte et du logo pour donner une touche dynamique.
2️⃣ Section "À propos"
💡 Points clés :
Trois cartes avec des icônes représentant la vision, les valeurs et la mission du restaurant.
Effet au survol : Les images tournent légèrement (animation rotate(360deg) ).
[Link] 1/2
06/02/2025 19:16 Création site vitrine HTML
Animation de surélévation : Au survol, les cartes prennent de la hauteur ( translateY(-10px) ).
3️⃣ Section "Nos Produits"
💡 Mise en valeur des plats avec :
Une grille flexible ( grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); ).
Un effet au survol sur les images ( scale(1.1) rotate(2deg) ).
Un bouton animé qui change de couleur lorsqu’on clique.
4️⃣ Formulaire de Contact
💡 Accessibilité et design :
Champs de formulaire modernes, avec effet focus .
Validation des entrées : Le champ email est obligatoire.
Effet de transparence sur les champs pour mieux s’intégrer au fond sombre.
5️⃣ Navigation & Responsivité
💡 Facilité d’accès :
Menu fixe qui reste en haut en défilant ( position: fixed; ).
Animation au survol des liens avec soulignement dynamique.
Adaptabilité mobile ( @media (max-width: 768px) {} ) :
✔ Le menu devient plus compact.
✔ Les sections s’adaptent en une seule colonne.
🚀 Conclusion et perspectives (2 min)
✅ Les points forts du site :
Esthétique moderne, animations fluides, design épuré.
Expérience utilisateur agréable, avec des interactions dynamiques.
Code bien structuré et organisé, facilitant la maintenance.
🔄 Améliorations futures :
Ajout d’un menu burger en JavaScript pour la version mobile.
Animation plus dynamique du texte avec des transitions plus fluides.
Connexion avec un back-end pour rendre le formulaire fonctionnel.
🔹 Merci pour votre attention ! 🔹
Nous sommes ouverts aux questions et suggestions. 😊
[Link] 2/2
