Création d’un site web multipage HTML CSS :
- Mettre en œuvre des effets CSS graphique avancés.
- Assurer la cohérence graphique d’un site web.
- Mette en place des structures de navigation pour un site web.
site web 100% mobile qui répertorie les menus de restaurants gastronomiques. En plus des systèmes classiques de réservation, les clients pourront composer le menu de leur repas pour que les plats soient prêts à leur arrivée. Finis, les temps d'attente au restaurant !
Pour ce projet, aucune installation n'est nécessaire.
- La maquette mobile. L'implatation version Desktop est donc libre.
Réaliser un prototype Pages à intégrer selon les maquettes
- Page d’accueil
- Pages de menu (x4)
Animation
- Boutons
- Au survol, la couleur de fond des boutons principaux devra légèrement s’éclaircir. L’ombre portée devra également être plus visible.
- À terme, les visiteurs pourront sauvegarder leurs menus préférés. Pour ça, unbouton "J’aime" en forme de cœur est présent sur la maquette. Au clic, il devra se remplir progressivement. Pour cette première version, l’effet peut être apparaître au survol au lieu du clic.
- Page d’accueil
- Quand l’application aura plus de menus, un “loading spinner” sera nécessaire. Sur cette maquette, nous souhaitons en avoir un aperçu. Il devra apparaître pendant 1 à 3 secondes quand on arrive sur la page d'accueil, couvrir l'intégralité de l'écran, et utiliser les animations CSS (pas de librairie). Le design de ce loader n’est pas défini,toute proposition est donc la bienvenue tant qu’elle est cohérente avec la chartegraphique du site.
- Pages de menu
- À l’arrivée sur la page, les plats devront apparaître progressivement avec un léger décalage dans le temps. Ils pourront soit apparaître un par un, soit par groupe “Entrée”, “Plat” et “Dessert”.
- Le visiteur peut ajouter les plats qu'il souhaite à sa commande en cliquant dessus. Cela fait apparaître une petite coche à droite du plat. Cette coche devra coulisser dela droite vers la gauche. Pour cette première version, l’effet peut apparaître au survolau lieu du clic. Si l’intitulé du plat est trop long, il devra être rogné avec des points de suspension.
Technologies
- Authorisés: HTML/SASS
- Interdit: Javascript / Frameworks CSS / Inline CSS
Polices
- Logo & titres: Shrikhand
- Texte: Roboto
Couleurs
- Primaire:
#9356DC - Secondaire:
#FF79DA - Tertiaire:
#99E2D0
Contraintes
- Approche mobile-first
- Validation W3C HTML / CSS
- Compatible Chrome / Firefox
L'IDE que j'ai utilisé est Visual Studio Code.
✔️ Ce projet a été validé par le jury d'OpenClassrooms le jeudi 5 novembre 2020.