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

• when arrive on the home page a loading spinner will be cover the whole screen for 3 seconds

Menu Pages

• When arriving on the page, the dishes appear gradually with a slight time lag.
• A small checkmark will appear to the right of the dish. This tick slide from right to left.If the title of the dish is too long, it will be trimmed with suspension points (the effect display on hover)

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

• Flash
• Zoom-In
• BounceInLeft

Side informations

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

I used

• SASS
• Keyframes
• Transition

This Mock-Up Home page for phone

Mock-Up Menu page for phone