-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
335 lines (330 loc) · 11.7 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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!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" />
<title>Fit and Healthy Healthy.com</title>
<link rel="stylesheet" href="CSS/style.css" />
<link rel="stylesheet" href="CSS/responsive.css" />
<link rel="shortcut icon" href="images/favicon.png"image/x-icon">
</head>
<body>
<header class="header">
<div class="logo">
<img class="mylogo" src="images/logo.png" alt="my health logo" />
</div>
<nav class="navbar">
<div class="left-nav">
<ul class="navlist">
<li>
<a class="navbar-link" href="#hero-section">Home</a>
<a class="navbar-link" href="#app-section">About US</a>
<a class="navbar-link" href="#tools-section">Goals</a>
<a class="navbar-link" href="#journey-section">Tips</a>
</li>
</ul>
</div>
<div class="right-nav">
<button class="common-btn navbar-btn" id="nav-btn-1">Log In</button>
<button class="common-btn navbar-btn" id="nav-btn-2">Sign Up</button>
</div>
</nav>
<div class="menu-bar">
<i
class="navbar-icons fa-solid fa-bars fa-lg"
style="color: #03cece"
name="menu"
></i>
<i
class="navbar-icons fa-solid fa-xmark fa-lg"
style="color: #03cece"
name="close"
></i>
</div>
</header>
<section class="hero-section common-section" id="hero-section">
<div class="hero-left-section">
<h1>Healthy Living Simplified</h1>
<p class="para">
Take control of your goods. Tranck calaries breakdown ingredients.
Congratulations on removing the excess fat and we hope that you will
be successful in losing the fat of your body
</p>
<div class="btn-group">
<img
class="app-btn"
src="images/play-store-img.png"
alt="Play Store"
/>
<img class="app-btn" src="images/app-store-img.png" alt="App Store" />
</div>
</div>
<div class="hero-right-section">
<figure class="hero-img">
<img class="hero-image" src="images/main-img.png" alt="Main Image" />
</figure>
</div>
</section>
<section class="app-section common-section" id="app-section">
<div class="app-section-left">
<img
class="app-section-img"
src="images/mobile-app-img.jpg"
alt="Mobile app image"
/>
</div>
<div class="app-section-right">
<h2>Your Daily Healthy App</h2>
<p class="para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi facere
iusto earum est. Harum deleniti sunt ipsum eos quo laboriosam,
repudiandae ipsam aperiam impedit consequuntur error culpa praesentium
itaque odio velit pariatur non nobis placeat .
</p>
<div class="common-btn-group main-btn-group">
<button class="common-btn main-btn" type="button">Get Started</button>
<button class="common-btn main-btn" type="button">
How It Works?
</button>
</div>
</div>
</section>
<section class="tools-section common-section" id="tools-section">
<div class="tools-heading">
<h2>The Tools For Your Goals</h2>
<p class="para">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta sequi
quidem, provident consectetur dignissimos praesentium doloribus dolore
voluptates fugit veritatis laboriosam repellendus autem, molestias
qui?
</p>
<div class="tool-boxes">
<div class="tool-box" id="tool-box-1">
<img
class="tool-images"
src="images/board-img.png"
alt="Sign-Board Image"
/>
<h3>Learn & Improve</h3>
<p class="para">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Voluptatibus, ratione ea? Ducimus tenetur iusto id dolorem in
soluta consectetur distinctio.
</p>
</div>
<div class="tool-box" id="tool-box-2">
<img
class="tool-images"
src="images/clock-img.png"
alt="Clock Image"
/>
<h3>Time Management</h3>
<p class="para">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Voluptatibus, ratione ea? Ducimus tenetur iusto id dolorem in
soluta consectetur distinctio.
</p>
</div>
<div class="tool-box" id="tool-box-3">
<img
class="tool-images"
src="images/motivation-100-img.png"
alt="Motivation Image"
/>
<h3>Motivation</h3>
<p class="para">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Voluptatibus, ratione ea? Ducimus tenetur iusto id dolorem in
soluta consectetur distinctio.
</p>
</div>
</div>
</div>
</section>
<!-- Journey section is same to the app-section so I have copied the code of it and just changed the content of it -->
<section
class="app-section common-section journey-section"
id="journey-section"
>
<div class="app-section-left journey-section-left">
<img
class="journey-section-img"
src="images/section-4.png"
alt="Mobile app image"
/>
</div>
<div class="app-section-right">
<h2>Create Your Own Fitness Journey</h2>
<p class="para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi facere
iusto earum est. Harum deleniti sunt ipsum eos quo laboriosam,
repudiandae ipsam aperiam impedit consequuntur
</p>
<div class="common-btn-group">
<button type="button" class="common-btn main-btn">Get Started</button>
<button type="button" class="common-btn main-btn">
How It Works?
</button>
</div>
</div>
</section>
<section class="app-section common-section" id="fitness-goal-section">
<div class="app-section-left" id="goal-section-left">
<img class="goal-img" src="images/goals-img.png" alt="Goals image" />
</div>
<div class="app-section-right" id="goal-section-right">
<h2>We will take care of your fitness goals</h2>
<div class="goal-tip" id="goal-tip-1">
<h4>
<i
class="fa-solid fa-heart-pulse fa-beat fa-lg"
style="color: #03cece"
></i>
We will take care of your fitness goals
</h4>
<p class="para">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt
repellat quam, laudantium hic molestias labore voluptas, nobis minus
incidunt accusantium iure.
</p>
</div>
<div class="goal-tip" id="goal-tip-2">
<h4>
<i
class="fa-solid fa-heart-pulse fa-beat fa-lg"
style="color: #03cece"
></i>
Track your daily habits with water
</h4>
<p class="para">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt
repellat quam, laudantium hic molestias labore voluptas, nobis minus
incidunt accusantium iure.
</p>
</div>
<div class="goal-tip" id="goal-tip-3">
<h4>
<i
class="fa-solid fa-heart-pulse fa-beat fa-lg"
style="color: #03cece"
></i>
Track your weight and waist
</h4>
<p class="para">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt
repellat quam, laudantium hic molestias labore voluptas, nobis minus
incidunt accusantium iure.
</p>
</div>
</div>
</section>
<footer class="footer-section common-section">
<div class="footer-content">
<div class="footer-left">
<img class="mylogo" src="images/logo.png" alt="logo image" />
</div>
<div class="footer-right">
<div class="footer-right-content">
<div class="footer-link" id="footer-link-1">
<h4>Home</h4>
<ul>
<li>
<a href="#">About US</a>
<a href="#">How it works</a>
<a href="#">Annual Checkup</a>
<a href="#">Our Story</a>
<a href="#">Team Work</a>
</li>
</ul>
</div>
<div class="footer-link" id="footer-link-1">
<h4>Our Products</h4>
<ul>
<li>
<a href="#">Medical</a>
<a href="#">Emergency</a>
<a href="#">Blood Donation</a>
<a href="#">Cancer Treatement</a>
<a href="#">Eye Surgery</a>
</li>
</ul>
</div>
<div class="footer-link" id="footer-link-1">
<h4>Pricing</h4>
<ul>
<li>
<a href="#">Basic Treatement</a>
<a href="#">AICU</a>
<a href="#">NICU</a>
<a href="#">ICU</a>
<a href="#">KCU</a>
</li>
</ul>
</div>
<div class="footer-link" id="footer-link-1">
<h4>Contact US</h4>
<ul>
<li>
<a href="#">FAQ's</a>
<a href="#">Our Blog</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr class="hr" />
<div class="copyright-data">
<div class="copyright-right">
<h4>© Copyright www.thehealth.com 2023</h4>
</div>
<div class="copyright-left">
<h4>
Made with
<i
class="fa-solid fa-heart fa-beat fa-lg"
style="color: #03cece"
></i>
Love by Kashish.
</h4>
</div>
</div>
</footer>
<!-- Social Media icons Section -->
<div class="icon-bar">
<a href="https://www.facebook.com" target="_blank" class="facebook"
>Click here to visit
<i class="fa-brands fa-square-facebook fa-beat-fade fa-lg fab"></i>
</a>
<a href="https://telegram.org" target="_blank" class="telegram"
>Click here to visit
<i class="fa-brands fa-telegram fa-beat-fade fa-lg fab"></i>
</a>
<a href="https://www.instagram.com" target="_blank" class="instagram"
>Click here to visit
<i class="fa-brands fa-square-instagram fa-beat-fade fa-lg fab"></i>
</a>
<a href="https://www.youtube.com" target="_blank" class="youtube"
>Click here to visit
<i class="fa-brands fa-square-youtube fa-beat-fade fa-lg fab"></i>
</a>
</div>
<!-- All Script Tags -->
<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
src="https://kit.fontawesome.com/3dd7962506.js"
crossorigin="anonymous"
></script>
<script src="JS/script.js"></script>
</body>
</html>