mariaale2023 / 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.

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.

Omnifood Website Content

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)
• 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 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 @keyframes and not the deprecated tag
• Utilized grid, flexbox and absolute positioning