Responsive frontend static integration with CSS animation

HTML, CSS

Ohmyfood CSS animation project

This project is about web design implementation, with only HTML and advanced CSS.

Features

• 4 restaurants featured, which contain a menu each.
• The background-color on the buttons should be slightly lighten on hover.
• The heart icon should be filled progressively with two colors on hover.
• A back button should be visible from the restaurant page.
• A loading spinner should appear before the main page is shown.
• The items in the menu should appear smoothly from the bottom.
• the visitor can choose his item, a validation box should then appear from the right, with a rotation for the icon.

Technical constraints

• Mobile-first approach.
• Only the mobile model has been provided, desktop and tablet results are free.
• Only CSS can be used, no Javascript and no framework.
• Using SASS is required.
• The colors to be used : #9356DC as primary, #FF79DA as secondary, #99E2D0 as tertiary.