Projet3 OhMyFood

Quatrième projet du parcours "Intégrateur-Web" d'OpenClassrooms.

Cahier des charges

L'intégration doit se faire uniquement en HTML5 et CSS3 sans JavaScript.

Le site doit être fait sans framework, mais l'utilisation de SASS est un plus.

Le HTML et le CSS doivent être séparés et le fichier doit être organisé.

L'approche utilisée doit être mibile-first, toutefois le site doit être responvise sur tablette et desktop.

Le code doit être sémantiquement correct et ne doit contenir aucune erreur au validateur W3C.

Le site doit être compatible avec les dernières versions de Chrome et Firefox.

Le code doit être versionné avec Git et doit avoir un dépôt sur GitHub ou GitLab.

Le site doit être déployé.

Livrables attendus

Contenu des pages

Page d'accueil (x1)

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 (x4)

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é.

Effets graphiques et animations

Les effets accessibles au clic ou au survol sont visibles sur la maquette. Ils doivent utiliser les animations ou transitions CSS, sans JavaScript ni de librairie.

Au survol sur les boutons principaux, la couleur de fond doit légèrement s’éclaircir.

Au survol, un remplissage progressif doit être présent sur le bouton "j'aime".

Quand l'application démarre un exemple de "loading spinner" doit être présent.

Les plats doivent apparaître progressivement avec un léger décalage dans le temps (exemple de l'effet fourni).

Faire coulisser une coche de validation au survol pour que le visiteur ajoute les plats à sa commande (exemple de l'effet fourni).

Éléments fournis pour le projet

Les maquettes à intégrer au format téléphone.

Les vidéos d'illustration des animations.

Les images présentes dans les maquettes.

La liste des différents menus proposée par restaurants.

Le brief du projet.

Les polices Roboto et Shrikhand.

Les couleurs de la charte :

Primaire : #9356DC

Secondaire : #FF79DA

Tertiaire : #99E2D0

Note du projet

L'intégration de la maquette à été réalisée sur l'éditeur Visual Studio.

La convention de nommage utilisée est BEM.

Les iconographies utilisées viennent du site Font Awesome.

Rose-Pauline/Oh-My-Food