● Display the location of restaurants. Eventually, it will be possible to choose restaurants close to a certain place.
● A short presentation of the company.
● A section containing the four menus in the form of maps. When clicking on the map,
the user is redirected to the menu page.
● Four pages each containing a restaurant menu.
● The footer is identical on all pages.
● When you click on Contact, a link to an email address is made.
● The header is present on all pages.
● The home page contains the logo of the site.
● The menu pages contain a button to return to the home page.
The effects accessible by clicking or hovering are visible on the model. They must use CSS animations or transitions, no JavaScript, or library.
● When hovering, 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. When you click on it, it should fill up gradually. For this first version, the effect can appear on hovering on desktop instead of clicking. Home Page
● When the application has more menus, a loading spinner will be necessary. On this mock-up, we would like to have a preview of it. It will have to appear for 1 to 3 seconds when you arrive on the home page, cover the whole 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 graphic charter. Menu Pages
● When arriving on the page, the dishes should appear gradually with a slight time lag. They may appear either 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 wishes to his order by clicking on them. A small checkmark will appear to the right of the dish. This tick should slide from right to left. For this first version, the effect can be displayed on hovering on desktop instead of clicking. If the title of the dish is too long, it will have to be trimmed with suspension points. An example of the expected effect is provided.