OhMyFood - Restaurant website

Live page @ https://c-v-pop.github.io/ohmyfood/

Integrate a mobile website with animations in CSS

My web page hosted online on GitHub Pages

Custom made Graphic Effects and Animations

When landed on the home page a loading spinner will cover the whole screen for 3 seconds

Menu Pages

When arriving on the menu page, the dishes appear gradually with a slight delay. 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.

Made in Visual Studio Code using: HTML CSS SASS Keyframes Transition Animations

Homepage Mockup for mobile version

Menu pages Mock-ups for mobile version