Omnifood
Single page website built as a final project for my 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 (mobile-navigation) that appears on tablet-sized or smaller screens.
-
Smooth scrolling whenever any navigation links (from header and footer) are clicked
-
Subtle animations and stiky navigation bar 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-) -
Functional form 💌
-
Fully responsive thanks to media queries ✨
-
Utilized css-grid (for bigger layouts), flexbox(for smaller sections) and absolute positioning
Screenshots :
Desktop :
Tablet :
Mobile :
Visit the website to experience soothing hover effects, sticky navigation, responsive design and more.