Projet 3 du parcours Développeur Web (Openclassrooms)
Intégrer la page web OhMyFood et la dynamiser en utilisant HTML et le préprocesseur Sass.
Eléments fournis:
- maquette mobil, (maquette desktop n'est pas fournie, à improviser), les images,
- les couleurs : Primaire: #9356DC, Secondaire: #FF79DA, Tertiaire: #99E2D0,
- la police : Logo & titres: Shrikhand, texte: Roboto.
Consignes:
- Mobil-first (l’ensemble du site devra être responsive sur mobile, tablette et desktop)
- Validation W3C HTML et CSS : sans erreur
- Compatibilité : Dernières versions de Chrome, Firefox & Safari
- Le développement en CSS, sans JavaScript
- Aucun code CSS appliqué via un attribut dans une balise HTML
Contenu des pages :
- Page d’accueil (x1). Affichage de la localisation des restaurants, 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 (x4). 4 pages contenant chacune le menu d’un restaurant.
- Footer. Le footer est identique sur toutes les pages. Au clic sur “Contact”, un renvoi vers une adresse mail est effectué.
- 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 Animations :
- Boutons. Au survol, la couleur de fond des boutons principaux devra légèrement s’éclaircir et l’ombre portée devra également être plus visible.
- Au survol du bouton "J’aime" en forme de cœur, il devra se remplir progressivement.
- Loader. 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
- Pages de menu. À l’arrivée sur la page, les plats devront apparaître progressivement avec un léger décalage dans le temps (soit apparaître un par un, soit par groupe “Entrée”, “Plat” et “Dessert”).
- Élément du menu. Au survol une petite coche doit apparaître de la droite vers la gauche. Si l’intitulé du plat est trop long, il devra être rogné avec des points de suspension.