/ohmyfood

A Website for food delivery

Primary LanguageHTML

Ohmyfood

Ohmyfood

Objectives

  1. Develop a site offering the menu of 4 major Parisian restaurants.
  2. Allow online reservations and menu composition.

Deliverables

Pages to integrate according to the mockups

  • Home Page
  • Menu Pages (x4)

Animation

Buttons

  • On hover, the background color of the main buttons should lighten slightly. The shadow should also become more visible.
  • Eventually, visitors will be able to save their favorite menus. For this, a "Like" button in the shape of a heart is present in the mockup. On click, it should gradually fill up. For this first version, the effect can appear on hover instead of click.

Home Page

  • When the application has more menus, a “loading spinner” will be necessary. On this mockup, we want to see a preview. It should appear for 1 to 3 seconds when arriving on the home page, cover the entire screen, and use CSS animations (no library). The design of this loader is not defined, so any proposal is welcome as long as it is consistent with the site's graphic charter.

Menu Pages

  • On arrival on the page, the dishes should appear gradually with a slight delay in time. They can either appear one by one or by group (“Starter”, “Main Course”, and “Dessert”). An example of the expected effect is provided.
  • The visitor can add the dishes he wants to his order by clicking on them. This makes a small checkmark appear to the right of the dish. This checkmark should slide from right to left. For this first version, the effect can appear on hover instead of click. If the dish name is too long, it should be truncated with ellipses. An example of the expected effect is provided.

Technologies

Allowed: HTML / CSS / Sass

Recommended: HTML / Sass

Prohibited: Javascript / CSS Frameworks / Inline CSS

Notes

Fonts:

  • Logo & Titles: Shrikhand
  • Text: Roboto

Colors:

  • Primary: #9356DC
  • Secondary: #FF79DA
  • Tertiary: #99E2D0

Constraints:

  • Mobile-first approach: yes
  • Mobile mockup: yes
  • Desktop mockup: to improvise
  • W3C HTML validation: required, warnings allowed
  • W3C CSS validation: required, warnings allowed
  • Compatibility: Latest versions of Chrome, Firefox & Safari

View the Project

To quickly and easily test, please visit the page: https://ohmyfood.moonstruck.pro

Alternatively, clone the project:

git clone https://github.com/MoonstruckDev/ohmyfood.git

Install the dependencies:

yarn install

And start the server:

yarn dev

You can also build the project for production:

yarn build

How to Contact Me

If you have any questions, comments, or collaboration proposals, feel free to contact me via Mail or through my LinkedIn profile.

I am proud to have completed this project which taught me a lot about React, and I am happy to share this experience with you.