Projet 3 OPENCLASSROOMS: Dynamisez une page web avec des animations CSS
Contexte:
- Ohmyfood est une jeune start-up de commande de repas en ligne. Leur concept permet aux utilisateurs de composer leur propre menu et ainsi de réduire leur temps d’attente dans les restaurants car leur menu est préparé à l’avance. La start-up propose aux internautes les menus de restaurants gastronomiques. Développé d’abord à New-York, l’entreprise souhaite élargir son concept à Paris. Occupant un poste de développeuse web dans l’entreprise, je suis chargée de la conception du site web.
Contraintes techniques:
- Les polices du sites sont : Shrikhand pour le logo et les titres et Roboto pour le texte. Les couleurs du site sont #9356dc , #ff79da et #99e2d0. Le développement doit se faire uniquement en HTML et CSS. Aucun code CSS ne devra être appliqué via un attribut style dans une balise HTML.Toutefois, l’utilisation de SASS est possible. Tout le code doit être versionné sur Github et le site doit être accessible sur GitHub Pages une fois terminé.
- La cible étant les personnes connectées et pressées, le site sera donc développé en utilisant l’approche Mobile-first. Il devra également s’adapter sur tablette et desktop mais leur mise en page est libre. Enfin, le site doit être compatible avec les dernières versions de Google Chrome et Mozilla Firefox.
- Les pages devront passer la validation W3C en HTML et CSS sans erreur.
Animations CSS:
- Le loading-spinner apparaître pendant 1 à 3 secondes dans la page d'accueil et doit respecter la charte graphique du site web.
- Au survol, la couleur de fond des boutons doit légèrement s'éclaircir. L’ombre portée est aussi plus visible.
- Le bouton “J’aime” en forme de coeur doit se remplir progressivement au survol de la souris.
- A l’arrivée sur la page menu, les plats doivent apparaître progressivement avec un léger décalage dans le temps.
- Le visiteur peut ajouter les plats qu’il souhaite à sa commande. Pour cela, une petite coche apparaît à la droite du plat sélectionné et coulisse de la droite vers la gauche.Enfin, lorsque l’intitulé des plats est trop long, il doit être rogné avec les trois points de suspension.
Contenu des pages
- Page d'accueil Affichage de la localisation des restaurants. À terme il sera possible de choisir sa localisation pour trouver des restaurants proches d’un certain lieu. Une courte présentation de l’entreprise. Une section contenant les 4 menus sous forme cartes. Au clic sur la carte, l’utilisateur est redirigé vers la page du menu.
- Pages de menu 4 pages contenant chacune le menu d’un restaurant. Header
- Le header est présent sur toutes les pages. Sur la page d’accueil, il contient le logo du site. Sur les pages de menu, il contient en plus un bouton de retour vers la page d’accueil Footer
- Le footer est identique sur toutes les pages. Au clic sur “Contact”, un renvoi vers une adresse mail est effectué.