This project is part of the Build Responsive Real-World Websites with HTML and CSS course by Jonas Schmedtmann. The website design and structure were provided as part of the course curriculum, and I did not design the website from scratch. The project's primary purpose is to practice and apply the concepts learned during the course.
Check out the live demo of the project here.
In this project, we introduce "Omnifood," a tech company prioritizing users' well-being through convenient and healthy eating. Busy lifestyles often lead to unhealthy diets, and we aim to remedy this with AI-driven meal planning. Our app lets users customize weekly meal plans, which our AI algorithm creates. We go the extra mile by partnering with restaurants to prepare and deliver these meals in select cities, all within a monthly subscription. Users can choose one or two meals per day, every day of the month.
This project showcases the Omnifood website, built using HTML, CSS, and JavaScript, with a focus on modern web design principles to improve the user experience.
While this project doesn't implement the full functionality of the Omnifood website, it is dedicated to creating an impressive and user-friendly user interface (UI). The UI design highlights the following essential features:
-
User-Friendly Navigation: The navigation menu allows users to easily explore different sections of the website, including "How it works," "Meals," "Testimonials," and "Pricing."
-
Informative Content: Detailed information about Omnifood's services, mission, and benefits is provided to help users understand the value proposition.
-
Featured In: Logos of media outlets where Omnifood has been featured add credibility and trustworthiness to the brand.
-
How It Works: A step-by-step guide explains how Omnifood works, from personalizing meal plans to meal delivery, making it easy for users to grasp the process.
-
Meal Variety: The website showcases a diverse range of meals, each with tags indicating dietary preferences such as vegetarian, vegan, paleo, etc.
-
Diets Compatibility: Omnifood caters to various diets, including vegetarian, vegan, pescatarian, gluten-free, lactose-free, keto, paleo, low FODMAP, and kid-friendly.
-
Customer Testimonials: Real customer testimonials and photos provide social proof, reinforcing the quality and convenience of Omnifood's services.
-
Pricing Plans: Clear pricing information for both the "Starter" and "Complete" plans is presented, highlighting the value of each subscription.
-
Plan Details: Additional plan details are provided, including the ability to pause subscriptions, no-waste packaging, and access to latest recipes.
-
CTA Section: The "Call to Action" section encourages users to sign up for Omnifood's services with the promise of a free first meal.
-
Footer Links: Useful links to account creation, sign-in, and mobile app downloads are provided for easy access.
-
Responsive Design: The website is built with responsive design in mind, ensuring a seamless experience on various devices, including desktops, tablets, and smartphones.
- Clone the repository:
git clone https://github.com/SuperUser-Gump/Omnifood.git - Navigate to the project directory:
cd omnifood - Open the
index.htmlfile in a web browser to view the website.
Explore the Omnifood website to discover our mission, services, and subscription options. Feel free to navigate through the site to learn more about our AI-driven meal planning and food delivery services. If you're interested in joining our community of healthy eaters, you can sign up for a monthly subscription and select your preferred meal plan, whether it's one or two meals per day. Enjoy the convenience of nutritious meals delivered straight to your doorstep, and start your journey to a healthier lifestyle today!
This project was created as part of the Build Responsive Real-World Websites with HTML and CSS course by Jonas Schmedtmann. Special thanks to him for providing the project structure and design.