-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (178 loc) · 6.65 KB
/
index.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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!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="stylesheet" href="style.css" />
<link rel="shortcut icon" href="img/leaf.png" type="image/x-icon" />
<script defer src="script.js"></script>
<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>
<title>Eat Healthy</title>
</head>
<body>
<section class="container container-main section-1">
<div class="description-box">
<h1 class="header">
<span class="color">Skip</span> the Diet, <br />
Just Eat Healthy<br />
With Food Network
</h1>
<p class="text">
Imagine you don't need a diet because we provide healthy and delicious
food for you!
</p>
<a class="btn" href="">Order Food</a>
</div>
<div>
<img class="img" src="img/man/man.png" alt="man face at the gym" />
</div>
</section>
<section class="section-2 section-main">
<div class="img-box-owner">
<h2 class="about-us">About Us</h2>
</div>
<div class="about-owner">
<p class="owner-text">
A chef is a trained professional cook and tradesman who is proficient
in all aspects <br />of food preparation, often focusing on a
particular cuisine. The word "chef" is derived from the term chef de
cuisine, the director or head of a kitchen. proficient in all aspects
of food preparation, often focusing on a particular cuisine. The word
"chef" is derived from the term chef de cuisine, the director or head
of a kitchen.
</p>
<a class="btn" href="">Contact Us</a>
</div>
</section>
<section class="section-3 section-main">
<h2 class="gallery-title">Our Recipe Gallery</h2>
<div class="gallery-img-box">
<div class="img-food">
<img src="img/food/food-1.jpg" alt="vegetable on the bowl" />
</div>
<div class="img-food">
<img src="img/food/food-2.jpg" alt="vegetable on the bowl" />
</div>
<div class="img-food">
<img src="img/food/food-3.jpg" alt="vegetable on the bowl" />
</div>
<div class="img-food">
<img src="img/food/food-4.jpg" alt="vegetable on the bowl" />
</div>
<div class="img-food">
<img src="img/food/food-5.jpg" alt="vegetable on the bowl" />
</div>
<div class="img-food">
<img src="img/food/food-6.jpg" alt="vegetable on the bowl" />
</div>
<div class="img-food">
<img src="img/food/food-7.jpg" alt="vegetable on the bowl" />
</div>
<div class="img-food">
<img src="img/food/food-8.jpg" alt="vegetable on the bowl" />
</div>
</div>
</section>
<section class="cart-container section-4 section-main">
<h2 class="cart-title">Start to eat fresh food!</h2>
<div class="cart-box">
<div class="cart-items">
<img src="img/cart/meal-1.jpg" alt="vegetable salas" />
<ul>
<li class="meal-title">Vegetable Salad</li>
<li class="meal-price">40.00$ <span>45.00$</span></li>
</ul>
<div class="star-icons">
<ion-icon class="star-icon" name="star-outline"></ion-icon>
<ion-icon class="star-icon" name="star-outline"></ion-icon>
<ion-icon class="star-icon" name="star-outline"></ion-icon>
<ion-icon class="star-icon" name="star-outline"></ion-icon>
<ion-icon class="star-icon" name="star-outline"></ion-icon>
</div>
<input
class="serving-number"
type="number"
name=""
id=""
placeholder=" 1"
/>
<a class="btn btn-cart" href="">Add to Cart</a>
</div>
<div class="cart-items">
<img src="img/cart/meal-2.jpg" alt=" vegetable with fish" />
<div>
<ul>
<li class="meal-title">Vegetable Salad</li>
<li class="meal-price">40.00$ <span>45.00$</span></li>
</ul>
<div class="star-icons">
<ion-icon class="star-icon" name="star-outline"></ion-icon>
<ion-icon class="star-icon" name="star-outline"></ion-icon>
<ion-icon class="star-icon" name="star-outline"></ion-icon>
<ion-icon class="star-icon" name="star-outline"></ion-icon>
<ion-icon class="star-icon" name="star-outline"></ion-icon>
</div>
<input
class="serving-number"
type="number"
name=""
id=""
placeholder=" 1"
/>
<a class="btn btn-cart" href="">Add to Cart</a>
</div>
</div>
<div class="cart-items">
<img src="img/cart/meal-3.jpg" alt="fruit and egg" />
<ul>
<li class="meal-title">Vegetable Salad</li>
<li class="meal-price">40.00$ <span>45.00$</span></li>
</ul>
<div class="star-icons">
<ion-icon class="star-icon" name="star-outline"></ion-icon>
<ion-icon class="star-icon" name="star-outline"></ion-icon>
<ion-icon class="star-icon" name="star-outline"></ion-icon>
<ion-icon class="star-icon" name="star-outline"></ion-icon>
<ion-icon class="star-icon" name="star-outline"></ion-icon>
</div>
<input
class="serving-number"
type="number"
name=""
id=""
placeholder=" 1"
/>
<a class="btn btn-cart" href="">Add to Cart</a>
</div>
</div>
<div class="rating section-main">
<ul class="rating-item">
<li class="rating-number">700k</li>
<li class="rating-source">Youtube Subscribers</li>
</ul>
<ul class="rating-item">
<li class="rating-number">2.4m</li>
<li class="rating-source">Instagram Followers</li>
</ul>
<ul class="rating-item">
<li class="rating-number">100k</li>
<li class="rating-source">Dribble Shot Likes</li>
</ul>
</div>
</section>
<footer class="footer">
<h3 class="footer-title">Eat <span id="gray">Fresh</span></h3>
<p class="footer-text">
Eat healthy to live healthy, Live healthy to live happy
</p>
</footer>
</body>
</html>