Ohmyfood | Online Food Delivery

Developed Skills

• Develop a navigation structure for a website
• Implement design effects using CSS & SCSS
• Ensure design consistency on a website

Description

Ohmyfood is an online food ordering website. Their concept allows users to compose their own menu and reduce waiting time in restaurants because they make their choice in advance.

Aim of the project was to turn mockups into a webpage and to create animations and transitions. Mockups for the Ohmyfood website were provided, as well as logo and images. In addition to building the site using HTML and CSS/SCSS, it was required to create animations and transitions using CSS. The effects were provided in form of a short video.

Objectives

CONTENT

The project objectives for the content can be divided into four parts:

1. Header
   • header is present on all pages
   • home page contains the logo of the site
   • menu pages contain a return button to home page
2. Homepage
   • homepage displays the location of restaurants (location setting not functional)
   • include a short presentation of the company
   • includes a section containing four exemplary restaurant cards, that are clickable and when clicked on, redirect user to respective menu page
3. Restaurant pages
   • 4 pages each containing a restaurant menu
4. Footer
   • identical footer on all pages
   • when contact link is clickable, when clicked a link to an email address is made

ANIMATIONS

Effects must be accessible by clicking or hovering. They use CSS animations/transitions, no JavaScript or library is used.

The project objectives for the animation can be divided into three parts:

1. Homepage
   • loading spinner appears
2. Buttons
   • on hover, background color lightens slightly and drop shadow becomes more visible
   • on click, heart-shaped like buttons fill up with gradient
3. Menu pages
   • when arriving on page, dishes appear gradually with slight time lag, by group Starter, Main course and Dessert.
   • Hovering over menu items, small checkmarl appears to the right of the dish and slides in from right to left. If title of dish is too long, it's trimmed with suspension points.

Requirements

• only CSS, no JavaScript for animations
• no framework
• use of SCSS
• use of Google Fonts
• must pass W3C validation for HTML and CSS without errors
• must be fully responsive
• must be fully compatible with latest desktop versions of Chrome, Firefox and Safari (March 2021)

Challenges & Achievements

• build custom loading spinner

Demo

Link to website