Ohmyfood, a platform originally from New York for pre-ordering menus from gourmet restaurants, is expanding to Paris. The task is to create the first version of a responsive website based on a mobile graphic mockup. Then, animations must be included to give a first glimpse of the site when it is fully developed and functional.
Static and responsive website for the Ohmyfood platform, developed using HTML and Sass. Focuses on CSS animations to enhance the user interface, including a loading spinner, hover effects on buttons and icons, and animated appearances for menu items.
Technologies:
- HTML5
- CSS3 / Sass (SCSS)
Key Features:
- Responsive design (Mobile-first approach)
- CSS Animations:
- Loading spinner on the homepage
- Button hover effects
- Progressive heart icon fill on hover
- Staggered appearance of menu items
- Checkmark icon appearance on menu item hover
- Clone the repository:
git clone https://github.com/thomas-savigner/ohMyFood.git
- Or download the ZIP file and extract it.
- If using GitHub Desktop, click on "Clone repository" and paste the URL.
- Navigate to the project directory:
cd ohMyFood
- If using Sass for compilation:
- Install Sass (if not already installed):
npm install -g sass
(or use a GUI compiler) - Compile Sass to CSS:
sass sass/style.scss css/style.css --watch
(The--watch
flag automatically recompiles on changes)
- Install Sass (if not already installed):
- Open
index.html
in your web browser.