-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
508 lines (431 loc) · 14.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
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
transition: background-color .5s;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.8;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("images/jogging.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("images/yoga1.jpg");
min-height: 90%;
}
.bgimg-3 {
background-image: url("images/g.jpg");
min-height: 80%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #111;
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}
}
.sidenav {
height: 100%;
width:0;
position: fixed;
z-index: 1;
top: 0;
left:0;
background-color: black;
overflow-x: hidden;
transition: 0.45s;
padding-top: 60px;
}
.sidenav a {
padding: 18px 18px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
font-size: 28px;
color: blue;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
text-align:left;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: none;}
.sidenav a {font-size: 18px;}
}
.button {
display: inline-block;
border-radius: 4px;
background-color: green;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
ul, #myUL {
list-style-type: circle;
background-color: black;
}
#myUL {
margin: 0;
padding: 0;
}
.caret {
cursor: pointer;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
.caret-down::before {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */'
transform: rotate(90deg);
}
.nested {
display: none;
}
.active {
display: block;
}
/* FOOTER CODE */
.footer {
width: 100%;
position: relative;
height: auto;
background-color:black;
}
.footer .col {
width: 190px;
height: auto;
float: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0px 20px 20px 20px;
}
.footer .col h1 {
margin: 0;
padding: 0;
font-family: inherit;
font-size: 12px;
line-height: 17px;
padding: 20px 0px 5px 0px;
color: rgba(255,255,255,0.2);
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.250em;
}
.footer .col ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.footer .col ul li {
color: #999999;
font-size: 14px;
font-family: inherit;
font-weight: bold;
padding: 5px 0px 5px 0px;
cursor: pointer;
transition: .2s;
-webkit-transition: .2s;
-moz-transition: .2s;
}
.social ul li {
display: inline-block;
padding-right: 5px !important;
}
.footer .col ul li:hover {
color: #ffffff;
transition: .1s;
-webkit-transition: .1s;
-moz-transition: .1s;
}
.clearfix {
clear: both;
}
@media only screen and (min-width: 1280px) {
.contain {
width: 1200px;
margin: 0 auto;
}
}
@media only screen and (max-width: 1139px) {
.contain .social {
width: 1000px;
display: block;
}
.social h1 {
margin: 0px;
}
}
@media only screen and (max-width: 950px) {
.footer .col {
width: 33%;
}
.footer .col h1 {
font-size: 14px;
}
.footer .col ul li {
font-size: 13px;
}
}
@media only screen and (max-width: 500px) {
.footer .col {
width: 50%;
}
.footer .col h1 {
font-size: 14px;
}
.footer .col ul li {
font-size: 13px;
}
}
@media only screen and (max-width: 340px) {
.footer .col {
width: 100%;
}
}
/* FOOTER CODE */
h1.y:hover{
color: orange;
font-size: 15px;
font-style:italic;
text-decoration: none;
}
li.x:hover{
font-style: italic;
text-decoration: none;
}
a{
text-decoration: none;
}
</style>
</head>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="contact.html">Contact</a>
<a href="exersisemain.html">EXERSISE</a>
<a href="gym.html">GYM</a>
<a href="all workout.html">All Workouts</a>
<a href="yoga.html">Yoga</a>
<a href="plandiet.html">Plan Your Diet</a>
<a href="FAQ.html">FAQ's</a>
<ul id="myUL">
<li style="font-size: 25px;"><span class="caret">Calculators</span>
<ul class="nested">
<a href="bmi.html"><li>BMI</li></a>
<a href="dietcalculator.html"><li>DietCalculator</li></a>
<a href="calorie calculator.html"><li>CalorieCalculator</li></a>
</ul>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()" >☰MYFitness<sub><img src="images/logo.png" width="90px" height="50px"></sub></span>
</div>
<script>
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
</script>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "black";
}
</script>
<body>
<div class="bgimg-1">
<div class="caption">
<button onclick="document.location='exersisemain.html'"class="button" style="vertical-align:middle border-radius:20px;"><span>EXERSISE </span></button>
</div>
</div>
<div style="color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center;">EXERSISE</h3>
Exercise involves engaging in physical activity and increasing the heart rate beyond resting levels. It is an important part of preserving physical and mental health.
Whether people engage in light exercise, such as going for a walk, or high intensity activities, for example, uphill cycling or weight training, regular exercise provides a huge range of benefits for the body and mind.
Taking part in exercise of any intensity every day is essential for preventing a range of diseases and other health issues
It is performed for various reasons, to aid growth and improve strength, preventing aging, developing muscles and the cardiovascular system, honing athletic skills, weight loss or maintenance, improving health and also for enjoyment. Many individuals choose to exercise outdoors where they can congregate in groups, socialize, and enhance well-being.
In terms of health benefits, the amount of recommended exercise depends upon the goal, the type of exercise, and the age of the person. Even doing a small amount of exercise is healthier than doing none.
</div>
<div class="bgimg-2">
<div class="caption">
<button onclick="document.location='yoga.html'" class="button" style="vertical-align:middle border-radius:20px;"><span>YOGA </span></button>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center; color: red; font-size: 30px;"><b>YOGA</b></h3>
<p style="font-size: 18px;"> The word yoga means to join together or yoke together. It unites the body and mind together as one. Yoga can be traced back to 5,000 years ago. It began on the Indian subcontinent of the Indus Valley. The word yoga was first mentioned in the Vedas, which are a collection of hymns containing some of the oldest yogic teachings. This is known as the Pre-classical Yoga Period. Yoga played an important role in the Upanishads, which are also known as the Gnostic texts. The teachings of the Upanishads differ from the Vedic texts. The Vedas taught the art of sacrifice, and the Upanishads concentrated on four specific truths. Your true essence or soul, everyone would experience birth, death, and rebirth, your present actions would determine the nature of your rebirth, and you can reverse the effects of bad karma through specific spiritual practices.
Next came the Classical Yoga Period. During this period was the first systematic presentation of yoga which was Patanjali's Yoga-Sutras. Patanjali believed in a eight-limbed path of yoga. The eight steps of Classical Yoga are yama which is restraint; niyama which is observance of purity, tolerance, and study; asana which are physical exercises; pranayama or breathe control; pratyahara which is preparation for meditation; dharana which is concentration; dhyana which is meditation; and samadhi which is adsorption in the sublime. Patanjali was considered the father of yoga.
Some time after Patanjali yoga masters designed some practices which would rejuvenate the body and prolong life. This introduced the Post-Classical Era of Yoga. Post-Classical Yoga can best be described as an appreciation of the present moment. People during this period rejected the teachings of the Vedas and saw the physical body as the means to achieve enlightenment. They invented Tantra Yoga which uses techniques to cleanse the body and mind and to break the knots that bind us to our physical existence.<br><br>
</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<button onclick="document.location='gym.html'"class="button" style="vertical-align:middle border-radius:20px;"><span>GYM </span></button>
</div>
</div>
</div>
<div style="position:relative;">
<div style="color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify;">
<h3 style="text-align:center; color: red; font-size: 30px;"><b>GYM</b></h3>
<p style="font-size: 18px;">Exercising today is very important to a persons health. Exercising is mainly for cardiovascular fitness. Some people do it because they just enjoy it. Exercising also gently improves your health.
There are three good benefits to exercising. Health benefits sush as helping weight management, improve your quality of life, and reducing the feelings of depression and anxiety.
Another benefit is environmental. When people are active it can contribute to the created healthy environment. Places where people feel comfortable to walk, would be safer because more people are out and about. Social benefits is one of the best ways to meet new people while exercising.
The most common risk in exercising is injury to the muscles and joints. This usually happens from exercising too hard or for too long. Heat exaustion or a heat stroke are also risks of exercising. Symptoms of heat exhaustion or heat stroke are dizziness, headache, nausea, and much more. Both heat exhaustion and heat stroke can be avoided if the person exercising drinks plenty of fluids, preferably water.
Some people have had heart problems from exercising even have died from it. Most deaths are caused by overexertion from people who have already had heart conditions. Now research studies have shown that physically inactive people are more likely to have sudden, fatal heart attacks than active people. Exercising too hard is not a good idea. A person should always be at a pace that he/she can handle.
Another important thing to exercising is eating, especially after you exercise. Always avoid exercising if there are going to be thunderstorms or lighting. Exercising in too hot weather could damage the lungs, skin, and heart. If he/she exercising has diabetes and require insulin than the active participation in the management of his/her condition essential. Regular exercise has many physical benefits, including cardiovascular conditions, drop in blood pressure and lipid...</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
</div>
</div>
<!-- FOOTER START -->
<div class="footer">
<div class="contain">
<div class="col">
<h1 class="y">MyFitness</h1>
<ul>
<a href="#"><li class="x">About</li>
<a href="exersisemain.html"><li class="x">Explore-Exersise</li></a>
<a href="gym.html"><li class="x">Explore-Gym</li></a>
<a href="yoga.html"><li class="x">Explore-Yoga</li></a>
</ul>
</div>
<div class="col">
<h1 class="y">Assistance</h1>
<ul>
<li class="x">Aerobic</li>
<li class="x">Anaerobic</li>
<li class="x">Services</li>
<li class="x">Social</li>
<li class="x">Get in touch</li>
</ul>
</div>
<div class="col">
<h1 class="y">Resources</h1>
<ul>
<a href="plandiet.html"><li class="x">DIET</li></a>
<a href="gym.html"><li class="x">GYM</li></a>
<a href="yoga.html"><li class="x">YOGA</li></a>
<a href="#"><li class="x">CALCULATORS</li>
<li class="x"></li>
</ul>
</div>
<div class="col">
<h1 class="y">Support</h1>
<ul>
<a href="contact.html"><li class="x">Contact us</li></a>
<a href="disclaimer.html"><li class="x">Disclaimer</li></a>
<a href="terms and conditions.html"><li class="x">Terms&Conditions</li></a>
</ul>
</div>
<div class="col social">
<h1 class="y">Social</h1>
<ul>
<li><img src="images/insta.png" width="32" style="width: 50px; height: 40px;"></li><br>
<li><img src="images/facebook.png" width="32" style="width: 50px; height: 40px;"></li><br>
<li><img src="images/twitter.png" width="32" style="width: 40px; height: 30px;"></li>
</ul>
</div>
<div class="col">
<h1 class="y">NEWSLETTER</h1>
<input type="text" name=""><input type="submit" value="suscribe" =>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- END OF FOOTER -->
</body>
</html>