ohmyfood: Online food ordering

Integrate a mobile website with animations in CSS

My web page hosted online on GitHub Pages

Graphic Effects and Animations

Home Page

• A loading spinner will be displayed and cover the whole screen for 3 seconds

Menu Pages

• The menu dishes will appear gradually on page load with a slight delay for each menu.

• A small checkmark will appear to the right of the dish. This tick slide from right to left.

Buttons

• When hovering, the background color of the main buttons be lighten slightly. The drop shadow also be more visible.

• A heart-shaped Like button is present on this model. When you hover on it, it will fill up gradually.

Others Animations integrated

• Bouncing-loader
• FadeIn
• SlideIn

Additional requirements

• When you click on Contact, a link to an email address is made.
• The whole site responsive on mobile, tablet, and desktop.

Tools used

• VScode
• GitHub
• SASS
• Keyframes
• Transition