A partir des maquettes mobiles du site Ohmyfood, il est demandé d’ intégrer les maquettes responsive en HTML et CSS et d’y inclure des animations CSS.
Technologies:
- Le développement doit se faire en CSS, sans JavaScript.
- Aucun framework ne doit être utilisé, en revanche l’utilisation de SASS est un plus. *Aucun code CSS ne doit être appliqué via un attribut style dans une balise HTML.
Compatibilité:
- Le site est développé en utilisant l’approche mobile-first. Sur tablette et desktop, le site doit s’adapter, la mise en page est libre.
- Les pages doivent passer la validation W3C en HTML et CSS sans erreur.
- Le site doit être parfaitement compatible avec les dernières versions desktop de Chrome et Firefox
Contenu:
- 1 page d’accueil
- 4 pages de menu.
- Le header est présent sur toutes les pages avec un bouton retour à l’accueil présent sur les 4 pages menus.
- Le footer est identique sur toutes les pages avec un renvoi vers une adresse mail sur contact.
Animations:
- 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. Le bouton en forme de cœur devra se remplir progressivement. L’effet peut apparaître au survol sur desktop.
- Sur la page d’accueil, un « loading-spinner » apparaît en amont, de 1 à 3 secondes dont le design est libre.
- À l’arrivée sur la page des menus, les plats devront apparaître progressivement avec un léger décalage dans le temps.
- 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 de la droite vers la gauche. Pour cette première version, l’effet peut apparaître au survol sur desktop au lieu du clic. Si l’intitulé du plat est trop long, il devra être rogné avec des points de suspension.
Lien du site :https://telk44.github.io/Ohmyfood/