<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet" /> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js" ></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js" ></script> <script type="text/javascript" src="./js/main.js" defer></script> <link rel="stylesheet" href="./css/main.css" /> <link rel="stylesheet" href="./css/how-it-works.css" /> <link rel="stylesheet" href="./css/responsive.css" /> <title>Omni Food</title> </head> <body> <div class="head-sec"> <header> <div class="nav-container sticky"> <img src="./img/omnifood-logo.png" alt="logo img" /> <div class="nav-list"> <nav> <ul class="main-nav"> <li> <a class="sec-item" href="#how-it-works">How it works</a> </li> <li><a class="sec-item" href="#meals">Meals</a></li> <li> <a class="sec-item" href="#testimonials">Testimonials</a> </li> <li><a class="sec-item" href="#pricing">Pricing</a></li> <li><a class="main-nav-last" href="#">Try it for free</a></li> </ul> </nav> </div> <ion-icon class="mobile-btn" name="menu-outline"></ion-icon> <ion-icon class="mobile-btn" name="close-outline"></ion-icon> </div> </header> <main> <section class="hero-section"> <div class="hero"> <div class="hero-content"> <h1>A healthy meal delivered to your door, every single day</h1> <p> The smart 365-days-per-year food subscription that will make you eat healthy again. Tailored to your personal tastes and nutritional needs. </p> <div class="hero-buttons"> <a href="#pricing" class="btn btn-sew btn-margin" >Start Eating Well</a > <a href="#how-it-works" class="btn btn-lm">Learn More ↓</a> </div> <div class="hero-customers-container"> <div class="hero-customers"> <img class="hero-cust" src="./img/customers/customer-1.jpg" alt="customers" /> <img class="hero-cust" src="./img/customers/customer-2.jpg" alt="customers" /> <img class="hero-cust" src="./img/customers/customer-3.jpg" alt="customers" /> <img class="hero-cust" src="./img/customers/customer-4.jpg" alt="customers" /> <img class="hero-cust" src="./img/customers/customer-5.jpg" alt="customers" /> <img class="hero-cust hero-cust-last" src="./img/customers/customer-6.jpg" alt="customers" /> </div> <p><span> 250,000+</span> meals delivered last year!</p> </div> </div> <div class="hero-img"> <img src="./img/hero.png" alt="header-image" /> </div> </div> </section> </main> </div> <section class="featured-in"> <div class="container"> <div class="section-heading fn-section-titile">AS FEATURED IN</div> <div class="featured-items"> <img src="./img/logos/business-insider.png" alt="featured-img" /> <img src="./img/logos/forbes.png" alt="featured-img" /> <img src="./img/logos/techcrunch.png" alt="featured-img" /> <img src="./img/logos/the-new-york-times.png" alt="featured-img" /> <img src="./img/logos/usa-today.png" alt="featured-img" /> </div> </div> </section> <section class="how-it-works" id="how-it-works"> <div class="container"> <div class="how-it-works-headings"> <p class="section-title-1">HOW IT WORKS</p> <h2 class="section-title-2"> Your daily dose of health in 3 simple steps </h2> </div> <div class="how-it-works-content grid grid-2-col grid-align-cntr"> <div> <div class="hiw-content-num">01</div> <div class="hiw-content-heading"> <h3>Tell us what you like (and what not)</h3> </div> <div class="hiw-content-para"> Never again waste time thinking about what to eat! Omnifood AI will create a 100% personalized weekly meal plan just for you. It makes sure you get all the nutrients and vitamins you need, no matter what diet you follow! </div> </div> <div class="hiw-content-img-container"> <img class="hiw-content-img" src="./img/app/app-screen-1.png" alt="appscreen" /> </div> <div class="hiw-content-img-container"> <img class="hiw-content-img" src="./img/app/app-screen-2.png" alt="appscreen" /> </div> <div> <div class="hiw-content-num">02</div> <div class="hiw-content-heading"> <h3>Approve your weekly meal plan</h3> </div> <div class="hiw-content-para"> Once per week, approve the meal plan generated for you by Omnifood AI. You can change ingredients, swap entire meals, or even add your own recipes.! </div> </div> <div> <div class="hiw-content-num">03</div> <div class="hiw-content-heading"> <h3>Receive meals at convenient time</h3> </div> <div class="hiw-content-para"> Best chefs in town will cook your selected meal every day, and we will deliver it to your door whenever works best for you. You can change delivery schedule and address daily! </div> </div> <div class="hiw-content-img-container"> <img class="hiw-content-img" src="./img/app/app-screen-3.png" alt="appscreen" /> </div> </div> </div> </section> <section class="meals" id="meals"> <div class="container"> <div class="section-title-1 text-center">Meals</div> <h2 class="text-center">Omnifood AI chooses from 5,000+ recipes</h2> <div class="meals-container grid grid-3-col"> <div class="card card-1"> <img src="./img/meals/meal-1.jpg" alt="meal-img-1" /> <div class="card-items"> <div class="card-labels"> <div class="card-label label-vegetarian">Vegetarian</div> </div> <div class="card-item-name">Japanese Gyozas</div> <ul class="card-items-list"> <li> <ion-icon class="card-icons" name="flame-outline"></ion-icon >650 Calories </li> <li> <ion-icon class="card-icons" name="restaurant-outline" ></ion-icon >NutriScore ®: 74 </li> <li> <ion-icon class="card-icons" name="star-outline"></ion-icon >4.9 Rating </li> </ul> </div> </div> <div class="card card-2"> <img src="./img/meals/meal-2.jpg" alt="meal-img-1" /> <div class="card-items"> <div class="card-labels"> <div class="card-label label-vegetarian">Vegetarian</div> <div class="card-label label-Paleo">Paleo</div> </div> <div class="card-item-name">Avocado Salad</div> <ul class="card-items-list"> <li> <ion-icon class="card-icons" name="flame-outline"></ion-icon >400 Calories </li> <li> <ion-icon class="card-icons" name="restaurant-outline" ></ion-icon >NutriScore ®: 92 </li> <li> <ion-icon class="card-icons" name="star-outline"></ion-icon >4.8 Rating </li> </ul> </div> </div> <div class="diet-plan"> <h3 class="diet-plan-name">Works with any diet:</h3> <ul class="diet-list"> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Vegetarian </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Vegan </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Pescatarian </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Gluten-free </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Lactose-free </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Keto </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Paleo </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Low FODMAP </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Kid-friendly </li> </ul> </div> </div> <div class="meal-all-meals"> <a href="url">See all recipes →</a> </div> </div> </section> <section class="testimonials testimonials-grid" id="testimonials"> <div class="testimonial-description"> <div class="section-title-1">TESTIMONIALS</div> <h2>Once you try it, you can't go back</h2> <div class="testimonial-grid grid grid-2-col"> <figure class="testimonial"> <img src="./img/customers/customer-2.jpg" alt="customer image" /> <blockquote class="block-quote"> Inexpensive, healthy and great-tasting meals, without even having to order manually! It feels truly magical. <span class="block-quote-author">— Dave Bryson</span> </blockquote> </figure> <figure class="testimonial"> <img src="./img/customers/customer-4.jpg" alt="customer image" /> <blockquote class="block-quote"> Omnifood is a life saver! I just started a company, so there's no time for cooking. I couldn't live without my daily meals! <span class="block-quote-author">— Steve Miller</span> </blockquote> </figure> <figure class="testimonial"> <img src="./img/customers/customer-3.jpg" alt="customer image" /> <blockquote class="block-quote"> I got Omnifood for the whole family, and it frees up so much time! Plus, everything is organic and vegan. <span class="block-quote-author">— Hannah Smith</span> </blockquote> </figure> <figure class="testimonial"> <img src="./img/customers/customer-6.jpg" alt="customer image" /> <blockquote class="block-quote"> The AI algorithm is crazy good, it chooses the right meals for me every time. It's amazing not to worry about food anymore! <span class="block-quote-author">— Marvy Wilson</span> </blockquote> </figure> </div> </div> <div class="testimonial-gallery testimonial-gallery-grid"> <figure class="testimonial-img"> <img class="testimonial-img" src="./img/gallery/gallery-2.jpg" alt="food-img" /> </figure> <figure class="testimonial-img"> <img class="testimonial-img" src="./img/gallery/gallery-1.jpg" alt="food-img" /> </figure> <figure class="testimonial-img"> <img class="testimonial-img" src="./img/gallery/gallery-3.jpg" alt="food-img" /> </figure> <figure class="testimonial-img"> <img class="testimonial-img" src="./img/gallery/gallery-4.jpg" alt="food-img" /> </figure> <figure class="testimonial-img"> <img class="testimonial-img" src="./img/gallery/gallery-5.jpg" alt="food-img" /> </figure> <figure class="testimonial-img"> <img class="testimonial-img" src="./img/gallery/gallery-6.jpg" alt="food-img" /> </figure> <figure class="testimonial-img"> <img class="testimonial-img" src="./img/gallery/gallery-7.jpg" alt="food-img" /> </figure> <figure class="testimonial-img"> <img class="testimonial-img" src="./img/gallery/gallery-8.jpg" alt="food-img" /> </figure> <figure class="testimonial-img"> <img class="testimonial-img" src="./img/gallery/gallery-9.jpg" alt="food-img" /> </figure> <figure class="testimonial-img"> <img class="testimonial-img" src="./img/gallery/gallery-10.jpg" alt="food-img" /> </figure> <figure class="testimonial-img"> <img class="testimonial-img" src="./img/gallery/gallery-11.jpg" alt="food-img" /> </figure> <figure class="testimonial-img"> <img class="testimonial-img" src="./img/gallery/gallery-12.jpg" alt="food-img" /> </figure> </div> </section> <section class="pricing" id="pricing"> <div class="container"> <div class="section-title-1">Pricing</div> <h2>Eating well without breaking the bank</h2> <div class="pricing-container"> <div class="complete pricing-flex"> <span class="pricing-heading">COMPLETE</span> <span class="pricing-price"> <span class="pricing-doller">$</span> 659 </span> <div class="plan-desc">per month. That's just $10 per meal!</div> <ul class="diet-list plan-list"> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >2 meal per day </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Order 24/7 </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Delivery is free </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Get access to latest recipes </li> </ul> <a href="#" class="btn btn-sew btn-margin">Start Eating Well</a> </div> <div class="starter pricing-flex"> <span class="pricing-heading">Starter</span> <span class="pricing-price"> <span class="pricing-doller">$</span> 399 </span> <div class="plan-desc">per month. That's just $13 per meal!</div> <ul class="diet-list plan-list"> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >1 meal per day </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Order from 11am to 9pm </li> <li> <ion-icon class="diet-list-icons" name="checkmark-circle-outline" ></ion-icon >Delivery is free </li> <li> <ion-icon class="diet-list-icons lastchild" name="close-circle-outline" ></ion-icon >Get access to latest recipes </li> </ul> <a href="#" class="btn btn-sew btn-margin">Start Eating Well</a> </div> </div> <div class="pricing-tax-desc"> Prices include all applicable taxes. You can cancel at any time. Both plans include the following: </div> </div> <div class="container grid grid-4-col"> <div class="feature"> <ion-icon class="feature-icon" name="infinite-outline"></ion-icon> <p class="feature-title">Never cook again!</p> <p class="feature-text"> Our subscriptions cover 365 days per year, even including major holidays. </p> </div> <div class="feature"> <ion-icon class="feature-icon" name="nutrition-outline"></ion-icon> <p class="feature-title">Local and organic</p> <p class="feature-text"> Our cooks only use local, fresh, and organic products to prepare your meals. </p> </div> <div class="feature"> <ion-icon class="feature-icon" name="leaf-outline"></ion-icon> <p class="feature-title">No waste</p> <p class="feature-text"> All our partners only use reusable containers to package all your meals. </p> </div> <div class="feature"> <ion-icon class="feature-icon" name="pause-outline"></ion-icon> <p class="feature-title">Pause anytime</p> <p class="feature-text"> Going on vacation? Just pause your subscription, and we refund unused days. </p> </div> </div> </section> <section class="email-subscription"> <div class="container email-grid"> <div class="subscription"> <div class="sub-heading">Get your first meal for free!</div> <div class="sub-desc"> Healthy, tasty and hassle-free meals are waiting for you. Start eating well today. You can cancel or pause anytime. And the first meal is on us! </div> <form class="email-form" action=""> <div class="form-elem"> <label for="name">Full Name</label> <input required placeholder="Your Name" id="name" type="text" /> </div> <div class="form-elem"> <label for="email">Email</label> <input required placeholder="username@gmail.com" id="email" type="email" /> </div> <div class="form-elem"> <label for="select-where">Where did you hear from us?</label> <select id="select-where" required> <option value="">Please choose one option:</option> <option value="friends">Friends and family</option> <option value="youtube">YouTube video</option> <option value="podcast">Podcast</option> <option value="ad">Facebook ad</option> <option value="others">Others</option> </select> </div> <button class="btn signup-btn">Sign up now</button> </form> </div> <div class="email-sub-img" role="img"></div> </div> </section> <section class="footer-section"> <footer class="footer"> <div class="container grid grid--footer"> <div class="logo-col"> <a href="#" class="footer-logo"> <img class="logo" alt="Omnifood logo" src="img/omnifood-logo.png" /> </a> <ul class="social-links"> <li> <a class="footer-link" href="#" ><ion-icon class="social-icon" name="logo-instagram" ></ion-icon ></a> </li> <li> <a class="footer-link" href="#" ><ion-icon class="social-icon" name="logo-facebook"></ion-icon ></a> </li> <li> <a class="footer-link" href="#" ><ion-icon class="social-icon" name="logo-twitter"></ion-icon ></a> </li> </ul> <p class="copyright"> Copyright © 2027 by Omnifood, Inc. All rights reserved. </p> </div> <div class="address-col"> <p class="footer-heading">Contact us</p> <address class="contacts"> <p class="address">Mappoli house,kadalundi,calicut - 673302</p> <p> <a class="footer-link" href="tel:+91 9746542410" >+91-9746542410</a ><br /> <a class="footer-link" href="mailto:pranavmappoli@gmail.com" >pranavmappoli@gmail.com</a > </p> </address> </div> <nav class="nav-col"> <p class="footer-heading">Account</p> <ul class="footer-nav"> <li><a class="footer-link" href="#">Create account</a></li> <li><a class="footer-link" href="#">Sign in</a></li> <li><a class="footer-link" href="#">iOS app</a></li> <li><a class="footer-link" href="#">Android app</a></li> </ul> </nav> <nav class="nav-col"> <p class="footer-heading">Company</p> <ul class="footer-nav"> <li><a class="footer-link" href="#">About Omnifood</a></li> <li><a class="footer-link" href="#">For Business</a></li> <li><a class="footer-link" href="#">Cooking partners</a></li> <li><a class="footer-link" href="#">Careers</a></li> </ul> </nav> <nav class="nav-col unvis"> <p class="footer-heading">Resources</p> <ul class="footer-nav"> <li><a class="footer-link" href="#">Recipe directory </a></li> <li><a class="footer-link" href="#">Help center</a></li> <li><a class="footer-link" href="#">Privacy & terms</a></li> </ul> </nav> </div> </footer> </section> </body> </html>