<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Always include this line of code!!! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Omifood make you eating well."
<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"
/>
<link rel="stylesheet" href="css/general.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/queries.css" />
<script
type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule=""
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
></script>
<script defer src="script.js"></script>
<title>Omnifood — never cook again</title>
</head>
<body>
<header class="header">
<a href="#">
<img class="logo" alt="Omnifood logo" src="img/omnifood-logo.png" />
</a>
<nav class="main-nav">
<ul class="main-nav-list">
<li><a class="main-nav-link" href="#how">How it works</a></li>
<li><a class="main-nav-link" href="#meals">Meals</a></li>
<li><a class="main-nav-link" href="#testimonials">Testimonials</a></li>
<li><a class="main-nav-link" href="#pricing">Pricing</a></li>
<li><a class="main-nav-link nav-cta" href="#cta">Try for free</a></li>
</ul>
</nav>
<button class="btn-mobile-nav">
<ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
<ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
</button>
</header>
<main>
<section class="section-hero">
<div class="hero">
<div class="hero-text-box">
<h1 class="heading-primary">
A healthy meal delivered to your door, every single day
</h1>
<p class="hero-description">
The smart 365-days-per-year food subscription that will make you
eat healthy again. Tailored to your personal tastes and
nutritional needs.
</p>
<a href="#cta" class="btn btn--full margin-right-sm"
>Start eating well</a
>
<a href="#how" class="btn btn--outline">Learn more ↓</a>
<div class="delivered-meals">
<div class="delivered-imgs">
<img src="img/customers/customer-1.jpg" alt="Customer photo" />
<img src="img/customers/customer-2.jpg" alt="Customer photo" />
<img src="img/customers/customer-3.jpg" alt="Customer photo" />
<img src="img/customers/customer-4.jpg" alt="Customer photo" />
<img src="img/customers/customer-5.jpg" alt="Customer photo" />
<img src="img/customers/customer-6.jpg" alt="Customer photo" />
</div>
<p class="delivered-text">
<span>250,000+</span> meals delivered last year!
</p>
</div>
</div>
<div class="hero-img-box">
<img
src="img/hero.png"
class="hero-img"
alt="Woman enjoying food, meals in storage container, and food bowls on a table"
/>
</div>
</div>
</section>
<section class="section-featured">
<div class="container">
<h2 class="heading-featured-in">As featured in</h2>
<div class="logos">
<img src="img/logos/techcrunch.png" alt="Techcrunch logo" />
<img
src="img/logos/business-insider.png"
alt="Business Insider logo"
/>
<img
src="img/logos/the-new-york-times.png"
alt="The New York Times logo"
/>
<img src="img/logos/forbes.png" alt="Forbes logo" />
<img src="img/logos/usa-today.png" alt="USA Today logo" />
</div>
</div>
</section>
<section class="section-how" id="how">
<div class="container">
<span class="subheading">How it works</span>
<h2 class="heading-secondary">
Your daily dose of health in 3 simple steps
</h2>
</div>
<div class="container grid grid--2-cols grid--center-v">
<!-- STEP 01 -->
<div class="step-text-box">
<p class="step-number">01</p>
<h3 class="heading-tertiary">
Tell us what you like (and what not)
</h3>
<p class="step-description">
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!
</p>
</div>
<div class="step-img-box">
<img
src="img/app/app-screen-1.png"
class="step-img"
alt="iPhone app
preferences selection screen"
/>
</div>
<!-- STEP 02 -->
<div class="step-img-box">
<img
src="img/app/app-screen-2.png"
class="step-img"
alt="iPhone app
meal approving plan screen"
/>
</div>
<div class="step-text-box">
<p class="step-number">02</p>
<h3 class="heading-tertiary">Approve your weekly meal plan</h3>
<p class="step-description">
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.
</p>
</div>
<!-- STEP 03 -->
<div class="step-text-box">
<p class="step-number">03</p>
<h3 class="heading-tertiary">Receive meals at convenient time</h3>
<p class="step-description">
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!
</p>
</div>
<div class="step-img-box">
<img
src="img/app/app-screen-3.png"
class="step-img"
alt="iPhone app
delivery screen"
/>
</div>
</div>
</section>
<section class="section-meals" id="meals">
<div class="container center-text">
<span class="subheading">Meals</span>
<h2 class="heading-secondary">
Omnifood AI chooses from 5,000+ recipes
</h2>
</div>
<div class="container grid grid--3-cols margin-bottom-md">
<div class="meal">
<img
src="img/meals/meal-1.jpg"
class="meal-img"
alt="Japanese Gyozas"
/>
<div class="meal-content">
<div class="meal-tags">
<span class="tag tag--vegetarian">Vegetarian</span>
</div>
<p class="meal-title">Japanese Gyozas</p>
<ul class="meal-attributes">
<li class="meal-attribute">
<ion-icon class="meal-icon" name="flame-outline"></ion-icon>
<span><strong>650</strong> calories</span>
</li>
<li class="meal-attribute">
<ion-icon
class="meal-icon"
name="restaurant-outline"
></ion-icon>
<span>NutriScore ® <strong>74</strong></span>
Omifood学习项目
需积分: 0 52 浏览量
2023-04-15
22:37:25
上传
评论
收藏 4.42MB RAR 举报
myproject.rar （42个子文件） 
09-Omnifood-Optimizations img customers 
dave.jpg 8KB ben.jpg 6KB customer-3.jpg 7KB customer-4.jpg 6KB customer-6.jpg 6KB customer-1.jpg 6KB customer-5.jpg 7KB hannah.jpg 7KB customer-2.jpg 5KB steve.jpg 20KB logos 
business-insider.png 19KB usa-today.png 20KB techcrunch.png 15KB forbes.png 21KB the-new-york-times.png 25KB app app-screen-3.png 210KB app-screen-1.png 140KB app-screen-2.png 214KB eating.jpg 95KB gallery gallery-11.jpg 99KB gallery-2.jpg 53KB gallery-1.jpg 70KB gallery-10.jpg 40KB gallery-5.jpg 42KB gallery-8.jpg 54KB gallery-7.jpg 39KB gallery-12.jpg 58KB gallery-9.jpg 50KB gallery-4.jpg 83KB gallery-6.jpg 59KB gallery-3.jpg 70KB meals meal-2.jpg 45KB meal-1.jpg 50KB hero.png 2.76MB omnifood-logo.png 30KB favicon.png 15KB css 
style.css 10KB general.css 4KB queries.css 5KB
index.html 25KB content.md 5KB script.js 3KB资源评论
sainmu
- 粉丝: 6
- 资源: 1
最新资源
- Panoply软件是大名鼎鼎的NASA下属的GISS研究所开发的可视化软件，该软件可以实现对地学常用数据的读取，其中包括netC
- 一些高质量的学习Ruby的资源清单.zip
- 基于STM32智能家居（智能云）
- 适合江苏地带的别墅小院子图纸D038-两层-11.04&11.94米-施工图.dwg
- 农村小别墅图纸四合院图纸D037-两层-13.20&12.90米-施工图.dwg
- 农村别墅系列图纸cad图纸D035-两层-10.20&14.70米- 施工图.dwg
- Verilog硬件仿真过程中出现的X态总结
- 中国各省份2012-2020年政府财政支出占GDP的比重
- 旅游管理系统毕业设计+计算机专业本科毕业设计+Vue+JS框架
- 农村小别墅二层小楼图纸D034-两层-11.40&14.70米- 施工图.dwg
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
