Omnifood

Single page website built as a final project for my old HTML/CSS course. Omnifood is a fictional company focused on providing AI-based meals through a subscription service.

Key Features

Having created the website from scratch, I learned how to create and implement features that I'm likely to use in my future websites over and over again. Here are some of the key features and topics that I worked on:

• Hamburger menu that appears on tablet-sized screens and smaller
• Smooth scrolling whenever any navigation (header and footer) are clicked
• Subtle animations that trigger when a certain viewport rule is met (e.g. element is in viewport or element is not in viewport) using IntersectionObserver
• Added cross-broswer support for certain CSS styles using prefixes (-webkit, -moz-, -o-, -ms-)
• Tested website on different browsers & had to style the select input so that it appears the same on all(Not really) browsers/devices
• Functional form 💌
• Fully responsive thanks to media queries ✨
• Utilized grid, flexbox and absolute positioning

Hero