Ohmyfood!

Voir le projet en live >>> Ohmyfood!

Ohmyfood! est une jeune startup qui voudrait s'imposer sur le marché de la restauration. L'objectif est de développer un site 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 !

Cible

Classes moyennes et supérieures, connectées et souvent pressées, souhaitant déguster des produits de qualité.

Identité graphique

Polices

Logo et titres: Shrikhand

Texte: Roboto

Couleurs

Primaire: #9356DC

Secondaire: #FF79DA

Tertiaire: #99E2D0

Compatibilité

La cible étant les personnes connectées et pressées, le site sera développé en utilisantl’approche mobile-first. Pour cette raison, seules des maquettes mobiles seront réalisées. Sur tablette et desktop, le site devra s’adapter, mais ces supports n’étant pas prioritaires,leur mise en page est libre.

L’ensemble du site devra être responsive sur mobile, tablette et desktop.

Les pages devront passer la validation W3C en HTML et CSS sans erreur.

Le site doit être parfaitement compatible avec les dernières versions desktop deChrome et Firefox

Technologie

Le développement devra se faire en CSS, sans JavaScript.

Aucun framework ne devra être utilisé, en revanche l’utilisation de SASS serait unplus

Aucun code CSS ne devra être appliqué via un attribut style dans une balise HTML

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.

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.

Effets graphiques et animations

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