Link to website: ohmyfood
A front end website for online food ordering company, using HTML, CSS and CSS animations.
| Home Page (Mobile Version) | Menu Page (Mobile Version) |
|---|---|
 |
 |
- Set up developer working environment;
- Code using HTML, CSS and CSS animations;
- Make the website responsive, starting with mobile first approach;;
- Use colors (primary #9356DC | secondary #FF79DA| tertiary #99E2D0);
- Font used for the logo should be Shrikhand and for the text font should be Roboto;
Page Content Homepage (x1):
- Display the location of restaurants.
- A short presentation of the company.
- A section containing the four menus in the form of cards. When clicking on the card, the user is redirected to the menu page.
Menu Pages (x4):
- Four pages each containing a restaurant menu.
Footer:
- The footer is identical on all pages.
- When you click on Contact, a link to an email address is made.
Header:
- 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.
Buttons:
- When hovering, the background color of the main buttons should lighten slightly. The drop shadow should also be more visible.
- When you click heart-shaped like button 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 consistent with the graphic charter will be necessary. 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).
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.
- 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.