<!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 &copy; 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>