OHMYFOOD

Fourth project of the OpenClassrooms "web integrator" training

Acces to result: https://w41t3r.github.io/ohmyfood/

Mission:

Your mission is to develop a “mobile first” site that lists the menus of gourmet restaurants. In addition to traditional reservation systems, customers will be able to compose their meal menu so that the dishes are ready when they arrive. No more waiting times at the restaurant! The sales team has already succeeded in convincing 4 restorers to use the OhMyFood platform. Paul then decides that the site will initially contain 4 menus.

Expected deliverables:

Home page (x1):

Display of restaurant locations. Eventually, it will be possible to choose location to find restaurants near a certain place.
A short presentation of the company.
A section containing the 4 menus in the form of cards. By clicking on the map, the user is redirected to the menu page.

Menu Pages (x4):

4 pages each containing the menu of a restaurant.

Footer:

The footer is identical on all pages.
When clicking on “Contact”, a forwarding to an e-mail address is made.

Header:

The header is present on all pages.
On the home page, it contains the site logo.
On the menu pages, it also contains a button to return to the home page.

Effects accessible by clicking or hovering are visible on the model. They will have to use CSS animations or transitions, no JavaScript or library. For all animations, in order to take care of the rendering of the site, it is important that when we have an effect on hover or on click, we have the opposite effect when exiting the hover.

Buttons:

On hover, the background color of the main buttons should lighten slightly. The drop shadow should also be more visible.
Eventually, visitors will be able to save their favorite menus. For that, a heart-shaped "Like" button is present on the model. On click, it will have to fill gradually. For this first version, the effect can appear at hover on desktop instead of click.

Home page:

When the application will have more menus, a “loader” will be necessary. On this model, we want to get a glimpse of it. It will have to appear for 1 to 3 seconds when you get to the home page, cover the entire screen, and use CSS animations (no library). The design of this loader is not defined, any proposal is therefore welcome as long as it is consistent with the charter website graphics.

Menu pages:

Upon arrival on the page, the dishes should appear gradually with a slight time lag. They can appear either one by one or in groups "Starter, main course and dessert".
The visitor can add the dishes he wants to his order by clicking on them. This brings up a small checkmark to the right of the dish. This tick will have to slide from right to left. For this first version, the effect can appear on hover on desktop instead of click. If the title of the dish is too long, it will have to be trimmed with suspension points.

Mobile model:

Homepage:

Restaurant page exemple:

Desktop model: