Omnifood Landing Page

https://omnifood.aniqa.dev/

🥗 A full redesign of the original Omnifood website (fictional AI-based meal subscription service). Website utilizes a sticky navigation, hamburger menu, toggle switch, animations triggered by IntersectionObserver, and smooth scrolling.

Tech

• HTML5
• CSS3 compiled from SCSS
• JavaScript

Key Features

Design

• Converted the original website’s assets to my chosen color scheme and style
• Fully responsive on all devices

General

• Hamburger menu that appears on tablet-sized screens or smaller
• Sticky header that sticks after user scrolls past the hero section
• Smooth scrolling active whenever any navigation links are clicked
• Subtle animations that trigger when a certain viewport rule is met (using IntersectionObserver)
• Added cross-browser support for certain CSS styles using prefixes (-webkit, -moz-, -o-, -ms-)
• Performed testing on different browsers and designs and had to update styling for the select input as the browser default styling differs from browser to browser
• Functional form with validation and a message displayed after submission by user
• Toggle between two different pricing models (monthly or annually)
• Marquee animation using @keyframes animation

Update 11/2023

• Used Sass partials to modularize CSS styles

Hero