OmniFood is a modern, user-friendly website designed to promote a healthy food delivery service. The project focuses on providing a visually appealing and intuitive user experience with clean, modular code for easy development and maintenance. This repository contains the source code for the OmniFood website, including the new features from version 14.2.
This site is live on : OmniFood
- Hero Section: Engages visitors with high-quality imagery and a clear call-to-action.
- Header with New Logo: A redesigned header featuring our brand-new logo and enhanced navigation.
- How It Works Section: Guides users through the steps to use the OmniFood service.
- Featured In Section: Highlights trusted media outlets and publications with interactive light-up logos, boosting credibility and user trust.
- Meals Section: Showcases a variety of meals with smooth hover animations, enhancing user interaction.
- Testimonial Section: Displays customer feedback with clean design and transitions, building social proof and trust.
- Gallery Section: A beautiful, interactive gallery that showcases meal imagery with engaging hover effects and animations.
- Pricing Model Section: Clearly presents OmniFood's service plans with pricing tiers and comparison options.
- Features Tab: Highlights the core services and features offered by OmniFood, helping users better understand the value of the service.
- Call to Action (CTA) Section: A clear and engaging call-to-action section to guide users toward signing up or learning more.
- Footer Section: A newly added footer with links to important pages, contact information, and social media links.
- Reusable Grid System: A flexible, responsive grid system for quick layout development.
- Improved UI Design: Enhanced visual consistency, including refined typography, button styles, and color contrast for better accessibility.
- Modular CSS Files: The CSS has been split into multiple files, improving readability and making the code easier to manage and scale.
- Extended General CSS: Reusable classes and styles are defined in
general.css
for consistent layout and design across the site. - Improved Accessibility: Enhanced accessibility visuals, including better color contrast, focus states, and screen reader compatibility.
- White Space Optimization: Improved overall content distribution and readability with better white space management.
- Design System: Introduction of a scalable, consistent design system for UI elements.
- Web App Integration: Now installable as a web app on Android and iOS, enhancing the mobile experience.
To run the project locally:
-
Clone the repository:
git clone https://github.com/HTMLCSS-GodMode/omnifood-site.git
-
Navigate to the project folder:
cd omnifood-site
-
Open
index.html
in your browser to view the website.
This project is designed to be easy to extend or customize. The grid system and modular CSS structure allow developers to build upon the existing foundation without cluttering the codebase. You can modify the sections, grid system, or navigation to fit your own project's needs.
- Grid System: The grid system uses a flexible, responsive design that adapts to various screen sizes.
- CSS Files: Each major section (e.g., header, navigation, hero, grid) is split into separate CSS files for better organization and maintenance.
- General CSS: The
general.css
file contains reusable styles and variables that can be used throughout the project to ensure design consistency and ease of maintenance.
- Web App Support for Android and iOS: This update introduces the ability for users to install the site on their mobile devices, enhancing the mobile experience with an app-like interface for both Android and iOS devices.
- Improved Performance and SEO: Added detailed metadata for better SEO and optimized the site's performance with faster loading times.
- Image Optimization: All images have been compressed and optimized for faster loading times, improving site performance.
- Accessibility Enhancements: Further improvements have been made to accessibility features, ensuring a more inclusive browsing experience.
For a complete list of all updates and changes, please refer to the Releases section of our GitHub repository.
We welcome contributions to the OmniFood project! Feel free to submit a pull request with your improvements, and we'll be happy to review them.
-
Fork the repository
-
Create your feature branch:
git checkout -b feature/your-feature-name
-
Commit your changes:
git commit -m 'Add some feature'
-
Push to the branch:
git push origin feature/your-feature-name
-
Open a pull request
A special thanks to Jonas Schmedtmann for the inspiration and project idea behind OmniFood. His tutorials and teachings laid the foundation for this project and helped guide its development.
This project is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. You may use the code for personal projects or non-commercial purposes. For any commercial use, including reselling or distributing the code, please contact the author for permission.
OmniFood is developed by Swarnavo Khanra.
- GitHub: @Anonav0
- LinkedIn:Swarnavo Khanra
Feel free to reach out with any questions or feedback!