-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
jumprope.html
142 lines (117 loc) · 4.27 KB
/
jumprope.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JUMP-ROPE</title>
<style type="text/css">
#slide{
width:96%;
}
* {
box-sizing: border-box;
text-transform: capitalize;
}
.mySlides {
display: none
}
.slideshow-container {
width: 1200px;
position: relative;
margin: -10px;
}
.prev, .next {
cursor:progress;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: black;
font-weight: bolder;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 5px 5px 0;
}
.next {
right: 0;
border-radius: 5px 0 0 5px;
}
.prev {
left: 0;
border-radius: 5px 0 0 5px;
}
p{
font-size: 20px;
}
body{
background-color: black;
color: white;
}
div.y{
text-align: left;
}
</style>
</head>
<body>
<h1 align="center" style="font-size: 50px;">JUMP-ROPE</h1>
<div align="center">
<br>
<div id="slide" align="center">
<div class="slideshow-container">
<div class="mySlides fade"> <img src="images/jump-rope.jpg" height="600px" width="1000px;" style="width:100%"> </div>
<div class="mySlides fade"> <img src="images/jump-rope1.jpg" height="600px" width="1000px;" style="width:100%"> </div>
<div class="mySlides fade"> <img src="images/jump-rope2.jpg" height="600px" width="1000px;" style="width:100%"> </div>
<div class="mySlides fade"> <img src="images/jump-rope3.jpg" height="600px" width="1000px;" style="width:100%"> </div>
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div>
<br>
<script type="text/javascript">
var slideIndex = 0;
showSlides();
var slides;
function showSlides() {
var i;
slides = document.getElementsByClassName("mySlides");
dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
function plusSlides(position) {
slideIndex +=position;
if (slideIndex> slides.length) {slideIndex = 1}
else if(slideIndex<1){slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
function currentSlide(index) {
if (index> slides.length) {index = 1}
else if(index<1){index = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[index-1].style.display = "block";
dots[index-1].className += " active";
}
</script>
<div class="y">
<h3 style="color: blue; font-size: 30px;">Equipment:</h3> <p> gym shoes (sneakers), jump rope</p>
<h3 style="color: blue; font-size: 30px;">Benefits:</h3> <p> Jumping rope helps develop better body awareness, hand-foot coordination, and agility.</p>
<h3 style="color: blue; font-size: 30px;">Safety:</h3><p>Your jump rope should be adjusted for your height. Stand with both feet on the middle of the rope and extend the handles to your armpits. That's the height you're going for. If it's too long, cut or tie it to avoid tripping on the rope.</p>
<h3 style="color: blue; font-size: 30px;">Duration and frequency:</h3> <p>15 to 25 minutes, 3 to 5 times per week</p>
<h3 style="color: blue; font-size: 30px;">If you're a beginner:</h3>
<p>Start by jogging forward as you swing the jump rope over your head and under your feet. Do this move for 15 seconds.
Next, reverse your direction and jog backward as you continue to swing the jump rope. Do this move for 15 seconds.
Finish your set by doing a hopscotch jump for 15 seconds. To do this move, jump rope in place, and as you jump, alternate between jumping your feet out to the sides and then back to the center, similar to how you'd move them while doing jumping jacks. Do this move for 15 seconds.
Rest for 15 seconds between sets.
Repeat 18 times.</p>
<h3 style="color: blue; font-size: 30px;">If you're an intermediate exerciser:</h3> <p>you can perform the moves for 30 seconds and rest for 30 seconds between sets. The advanced circuit should be performed for 60 seconds at a time, followed by 60 seconds of rest.
</p>
</div>
</body>
</html>