The original Omnifood website was built as a final project for a Udemy course. I didn't want to follow a tutorial and create the same exact thing so I did a full redesign of the original Omnifood website and all of its assets and created my very own version. 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:
- Took original assets and converted the color palette to my chosen colors
- Used Figma to build frames for each section
- 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 browsers/devices - Functional form with a message displayed after submission by user
- Toggle switch in pricing section that switches pricing from monthly to annual
- Fully responsive thanks to media queries
- Marquee animation in hero section using
@keyframesand not the deprecated<marquee>tag - Utilized grid, flexbox and absolute positioning
