Omnifood is a modern, responsive food subscription website built with HTML, CSS, and JavaScript, featuring AI-powered meal recommendations and seamless subscription plans.
✅ AI-Powered Meal Plans – Get personalized, healthy meals delivered to your doorstep.
✅ Fully Responsive – Optimized for all devices: 📱 Mobile, 🖥️ Desktop, 📊 Tablet.
✅ Smooth User Experience – Enjoy animations, transitions, and interactive elements.
🔹 Modern & Responsive Design – Ensures a seamless experience on all screen sizes.
🔹 Interactive Components:
📌 Sticky navigation
🎢 Smooth scrolling
🍔 Mobile-first hamburger menu
✅ Form validation
✨ CSS animations & transitions
🔹 Key Sections:
🌟 Hero Section – Showcasing customer success stats.
🔥 Featured in Top Brands – Highlighting major food networks.
🍽️ How It Works – A simple 3-step subscription process.
🥗 Meal Cards – Displaying dietary-friendly meal options.
💬 Testimonials & Gallery – Real customer experiences.
💰 Pricing Plans – Compare subscription options.
📩 Sign-up Form – Integrated with Netlify.
🎥 Live Demo: Try it out now!
git clone https://github.com/GauravKarakoti/omnifood.gitcd omnifood- Open
index.htmlin your browser. - OR use Live Server for a better experience.
🔹 Frontend: HTML5, CSS3 (BEM methodology), JavaScript
🔹 Icons: Ionicons
🔹 Responsive Design: Media queries (7 breakpoints)
🔹 Animations & Interactions: CSS transitions, JavaScript event listeners
omnifood/
├── css/
│ ├── general.css # Base styles & utilities
│ ├── style.css # Main stylesheet
│ └── queries.css # Responsive media queries
├── js/
│ └── script.js # Handles navigation & interactions
├── img/ # Website images & assets
└── index.html # Main webpage markup| Device | Max Width |
|---|---|
| Small Phones | 544px |
| Tablets | 704px |
| Large Tablets | 944px |
| Laptops | 1200px |
| Desktops | 1344px |
🔹 Icons: Ionicons
🔹 Images: Unsplash
👨💻 Gaurav Karakoti
📧 karakotigaurav12@gmail.com
🐙 GitHub
🚀 Bon Appétit! Build & Explore Omnifood Today! 🍽️🔥