-
Notifications
You must be signed in to change notification settings - Fork 0
/
responsive.html
145 lines (127 loc) · 4.82 KB
/
responsive.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive</title>
<link rel="stylesheet" href="css/responsive.css" />
</head>
<body>
<header class="header">
<!-- logo -->
<a>
<img class="logo" src="assets/img/omnifood-logo.png" alt="" />
</a>
<!-- nav -->
<nav class="main-nav">
<ul class="main-nav-list">
<li>
<a href="#" class="main-nav-link">How it works</a>
</li>
<li>
<a href="#" class="main-nav-link">Meals</a>
</li>
<li>
<a href="#" class="main-nav-link">Testimonials</a>
</li>
<li>
<a href="#" class="main-nav-link">Pricing</a>
</li>
<li>
<a href="#" class="main-nav-link nav-cta">Try For Free</a>
</li>
</ul>
</nav>
<button class="mobile-nav-icon">Mobile nav</button>
</header>
<section class="hero-section">
<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. We have delivered 250,000+ meals last year!
</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="assets/img/customers/customer-1.jpg" alt="" />
<img src="assets/img/customers/customer-2.jpg" alt="" />
<img src="assets/img/customers/customer-3.jpg" alt="" />
<img src="assets/img/customers/customer-4.jpg" alt="" />
<img src="assets/img/customers/customer-5.jpg" alt="" />
<img src="assets/img/customers/customer-6.jpg" alt="" />
</div>
<p class="delivered-text">
<span>250,000+</span> meals delivered last year!
</p>
</div>
</div>
<div class="hero-img-box">
<img src="assets/img/hero-min.png" alt="" class="hero-img" />
</div>
</div>
</section>
<!-- How it works section -->
<section class="section-how">
<div class="container">
<h4 class="heading-how-it-works">HOW IT WORKS</h4>
<h2 class="heading-secondary">
Your daily dose of health in 3 simple steps
</h2>
</div>
<div class="container grid-how-it-works">
<!-- step01 -->
<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="assets/img/app/app-screen-1.png" class="step-img" alt="" />
<div class="inner-circle"></div>
<div class="outer-circle"></div>
</div>
<div class="step-img-box">
<img src="assets/img/app/app-screen-2.png" class="step-img" alt="" />
<div class="inner-circle"></div>
<div class="outer-circle"></div>
</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>
<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="assets/img/app/app-screen-3.png" class="step-img" alt="" />
<div class="inner-circle"></div>
<div class="outer-circle"></div>
</div>
</div>
</section>
</body>
</html>