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.
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
selectinput 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