/
index.html
223 lines (209 loc) · 26.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="descripiton" content="Basic yoga poses with description and instructions how to practice.">
<meta name="author" content="Jacek Jarczok">
<title>Yoga poses</title>
<link href="https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">
<link rel="manifest" href="./favicon/site.webmanifest">
<link rel="mask-icon" href="./favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="./favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="./favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<script defer src="js/script.js"></script>
<script defer src="js/touch.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header" id="header">
<h1 class="logo">Yoga poses</h1>
</header>
<main class="main">
<!-- Insert image srcset with class="showcase__image", data-original and data-english -->
<section class="section">
<div class="showcase">
<div class="showcase__imgContainer">
<img srcset="img/yoga_01@x2.jpg 2x"
src="img/yoga_01@x1.jpg" alt="Utthita Trikonasana pose" class="showcase__image" data-original="Utthita Trikonasana" data-english="Triangle Pose">
<img srcset="img/yoga_02@x2.jpg 2x"
src="img/yoga_02@x1.jpg" alt="Vrksasana pose" class="showcase__image" data-original="Vrksasana" data-english="Tree Pose">
<img srcset="img/yoga_03@x2.jpg 2x"
src="img/yoga_03@x1.jpg" alt="Salamba Sarvangasana pose" class="showcase__image" data-original="Salamba Sarvangasana" data-english="Shoulder Stand Pose">
<img srcset="img/yoga_04@x2.jpg 2x"
src="img/yoga_04@x1.jpg" alt="Utkatasana pose" class="showcase__image" data-original="Utkatasana" data-english="Chair Pose">
<img srcset="img/yoga_05@x2.jpg 2x"
src="img/yoga_05@x1.jpg" alt="Halasana pose" class="showcase__image" data-original="Halasana" data-english="Plow Pose">
<img srcset="img/yoga_06@x2.jpg 2x"
src="img/yoga_06@x1.jpg" alt="Adho Mukha Svanasana pose" class="showcase__image" data-original="Adho Mukha Svanasana" data-english="Downward-Facing Dog">
<img srcset="img/yoga_07@x2.jpg 2x"
src="img/yoga_07@x1.jpg" alt="Sukhasana pose" class="showcase__image" data-original="Sukhasana" data-english="Easy Pose">
<img srcset="img/yoga_08@x2.jpg 2x"
src="img/yoga_08@x1.jpg" alt="Virabhadrasana III pose" class="showcase__image" data-original="Virabhadrasana III" data-english="Warrior III Pose">
<img srcset="img/yoga_09@x2.jpg 2x"
src="img/yoga_09@x1.jpg" alt="Eka Pada Rajakapotasana pose" class="showcase__image" data-original="Eka Pada Rajakapotasana" data-english="Pigeon Pose">
<img srcset="img/yoga_10@x2.jpg 2x"
src="img/yoga_10@x1.jpg" alt="Virabhadrasana II pose" class="showcase__image" data-original="Virabhadrasana II" data-english="Warrior II Pose">
<img srcset="img/yoga_11@x2.jpg 2x"
src="img/yoga_11@x1.jpg" alt="Bhujangasana pose" class="showcase__image" data-original="Bhujangasana" data-english="Cobra Pose">
<img srcset="img/yoga_12@x2.jpg 2x"
src="img/yoga_12@x1.jpg" alt="Supta Virasana pose" class="showcase__image" data-original="Supta Virasana" data-english="Reclining Hero Pose">
</div>
<!-- Left and right chevron arrows -->
<div class="showcase__icon-box showcase__icon-box--left">
<button class="showcase__button" id="showcase__button--left" aria-label="Show previous image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="showcase__icon"><path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm43.4 289.1c7.5 7.5 7.5 19.8 0 27.3-3.8 3.8-8.7 5.6-13.6 5.6s-9.9-1.9-13.7-5.7l-94-94.3c-6.9-7.6-6.7-19.3.6-26.6l95.4-95.7c7.5-7.5 19.7-7.6 27.3 0 7.5 7.5 7.6 19.7 0 27.3l-81.9 81 79.9 81.1z"/></svg>
</button>
</div>
<div class="showcase__icon-box showcase__icon-box--right">
<button class="showcase__button" id="showcase__button--right" aria-label="Show next image">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="showcase__icon"><path d="M48 256c0 114.9 93.1 208 208 208s208-93.1 208-208S370.9 48 256 48 48 141.1 48 256zm244.5 0l-81.9-81.1c-7.5-7.5-7.5-19.8 0-27.3s19.8-7.5 27.3 0l95.4 95.7c7.3 7.3 7.5 19.1.6 26.6l-94 94.3c-3.8 3.8-8.7 5.7-13.7 5.7-4.9 0-9.9-1.9-13.6-5.6-7.5-7.5-7.6-19.7 0-27.3l79.9-81z"/></svg>
</button>
</div>
</div>
<!-- Dynamically generated bullets, one for each image from showcase__imgContainer -->
<div class="bullets-box"></div>
<!-- Pose names -->
<div class="name" id="names">
<p class="name--original"></p>
<p class="name--english"></p>
</div>
</section>
<article class="article" id="article">
<div class="pose">
<p class="pose__intro">Pose description</p>
<h2 class="pose__title">Triangle Pose</h2>
<p class="pose__description">Stand in Tadasana. With an exhalation, step or lightly jump your feet 3 1/2 to 4 feet apart. Raise your arms parallel to the floor and reach them actively out to the sides, shoulder blades wide, palms down.<br>
Turn your left foot in slightly to the right and your right foot out to the right 90 degrees. Align the right heel with the left heel. Firm your thighs and turn your right thigh outward, so that the center of the right knee cap is in line with the center of the right ankle.<br>
Exhale and extend your torso to the right directly over the plane of the right leg, bending from the hip joint, not the waist. Anchor this movement by strengthening the left leg and pressing the outer heel firmly to the floor. Rotate the torso to the left, keeping the two sides equally long. Let the left hip come slightly forward and lengthen the tailbone toward the back heel.<br>
Rest your right hand on your shin, ankle, or the floor outside your right foot, whatever is possible without distorting the sides of the torso. Stretch your left arm toward the ceiling, in line with the tops of your shoulders. Keep your head in a neutral position or turn it to the left, eyes gazing softly at the left thumb.<br>
Stay in this pose for 30 seconds to 1 minute. Inhale to come up, strongly pressing the back heel into the floor and reaching the top arm toward the ceiling. Reverse the feet and repeat for the same length of time to the left.
</p>
</div>
<div class="pose">
<p class="pose__intro">Pose description</p>
<h2 class="pose__title">Tree Pose</h2>
<p class="pose__description">Begin in tadasana (mountain pose), with feet parallel and four to six inches apart (the distance of about two fists). Then shift your weight onto your left foot as you bend your right knee, and place the sole of your right foot below or above your standing leg knee.<br>
Remember that this pose isn't about how wide you can open your knee out to the side. Rather than trying to crank open your lifted leg knee as much as you can, begin by focusing instead on aligning your pelvis. From your initial setup in tree pose balancing on your left leg with your right knee bent, with your right foot pressing against your standing-leg thigh or calf lift the sole of your right foot from your leg so that only your heel presses against it. Then pivot your right heel on your thigh (or calf), turning your toes to point more toward the front surface of your left leg, and your right knee to point out at only about a 45-degree angle (as opposed to directly, or nearly directly, out to the side where it may have been before). This will take a little of the external rotation out of your right hip, helping to re-align and stabilize your pelvis.<br>
Keep your two frontal “hip points” (often also referred to as “pelvic points,” technically known as your “anterior superior iliac spines,” or ASIS) pointing forward. With both of your hip points remaining straight forward (not rolling open to the right as your thigh turns out), pivot on your right heel as you externally rotate your right thigh. You'll likely feel a bit of engagement in the right side of your butt as you do this. Externally rotate only as much as you can without taking your hip points with you.<br>
Press your foot against your leg, and your leg against your foot.<br>
Un-grip the toes of your standing leg foot, and rest them on the mat (or, if you tend to roll to the inner edge of your standing foot, you may find it helpful to initially lift your toes away from the floor to give a little lift to your inner arch). Let the three “corners” of your feet (the mound below the big toe, the mound below the pinky toe, and the center of the heel) ground into the floor beneath you.</p>
</div>
<div class="pose">
<p class="pose__intro">Pose description</p>
<h2 class="pose__title">Shoulder Stand Pose</h2>
<p class="pose__description">Shoulder stand pose is an inversion that starts by lying backside-down on the floor. Bend the knees and place the feet on the floor as close to the buttocks as possible. On an exhale with a strong core, press the arms and upper body into the ground and lift the legs up overhead, moving the hips and legs off the floor. Bring the bent knees towards the head, and then lift the buttocks and hips up to bring the hips and torso perpendicular to the floor. To support the body, place the hands on the lower back with bent elbows. Once balance has been reached, hands can be removed from the back and should remain straight against the body, grounded on the floor with palms facing down. When you feel balanced and secure in the pose, inhale and lift the feet towards the ceiling, bringing the legs in line with the rest of the body and perpendicular to the floor. With your gaze towards your feet or chest, press the shoulder blades down into the ground and, if you are able, move the heart closer towards the chin and face.<br>
To exit the pose, exhale and bend the knees back towards the torso and face; and, keeping them bent, roll the spine onto the floor gently and gradually, one vertebrae at a time.</p>
</div>
<div class="pose">
<p class="pose__intro">Pose description</p>
<h2 class="pose__title">Chair Pose</h2>
<p class="pose__description">Stand in Tadasana. Inhale and raise your arms perpendicular to the floor. Either keep the arms parallel, palms facing inward, or join the palms. <br>
Exhale and bend your knees, trying to take the thighs as nearly parallel to the floor as possible. The knees will project out over the feet, and the torso will lean slightly <br>forward over the thighs until the front torso forms approximately a right angle with the tops of the thighs. Keep the inner thighs parallel to each other and press the heads of the thigh bones down toward the heels.<br>
Firm your shoulder blades against the back. Take your tailbone down toward the floor and in toward your pubis to keep the lower back long.<br>
Stay for 30 seconds to a minute. To come out of this pose straighten your knees with an inhalation, lifting strongly through the arms. Exhale and release your arms to your sides into Tadasana.
</p>
</div>
<div class="pose">
<p class="pose__intro">Pose description</p>
<h2 class="pose__title">Plow Pose</h2>
<p class="pose__description">From Salamba Sarvangasana, exhale and bend from the hip joints to slowly lower your toes to the floor above and beyond your head. As much as possible, keep your torso perpendicular to the floor and your legs fully extended.<br>
With your toes on the floor, lift your top thighs and tailbone toward the ceiling and draw your inner groins deep into the pelvis. Imagine that your torso is hanging from the height of your groins. Continue to draw your chin away from your sternum and soften your throat.<br>
You can continue to press your hands against the back torso, pushing the back up toward the ceiling as you press the backs of the upper arms down, onto your support. Or you can release your hands away from your back and stretch the arms out behind you on the floor, opposite the legs. Clasp the hands and press the arms actively down on the support as you lift the thighs toward the ceiling.<br>
Halasana is usually performed after Sarvangasana for anywhere from 1 to 5 minutes. To exit the pose bring your hands onto your back again, lift back into Sarvangasana with an exhalation, then roll down onto your back, or simply roll out of the pose on an exhalation.
</p>
</div>
<div class="pose">
<p class="pose__intro">Pose description</p>
<h2 class="pose__title">Downward-Facing Dog</h2>
<p class="pose__description">Come onto the floor on your hands and knees. Set your knees directly below your hips and your hands slightly forward of your shoulders. Spread your palms, index fingers parallel or slightly turned out, and turn your toes under.<br>
Exhale and lift your knees away from the floor. At first keep the knees slightly bent and the heels lifted away from the floor. Lengthen your tailbone away from the back of your pelvis and press it lightly toward the pubis. Against this resistance, lift the sitting bones toward the ceiling, and from your inner ankles draw the inner legs up into the groins.<br>
Then with an exhalation, push your top thighs back and stretch your heels onto or down toward the floor. Straighten your knees but be sure not to lock them. Firm the outer thighs and roll the upper thighs inward slightly. Narrow the front of the pelvis.<br>
Firm the outer arms and press the bases of the index fingers actively into the floor. From these two points lift along your inner arms from the wrists to the tops of the shoulders. Firm your shoulder blades against your back, then widen them and draw them toward the tailbone. Keep the head between the upper arms; don't let it hang.<br>
Adho Mukha Svanasana is one of the poses in the traditional Sun Salutation sequence. It's also an excellent yoga asana all on its own. Stay in this pose anywhere from 1 to 3 minutes.
</p>
</div>
<div class="pose">
<p class="pose__intro">Pose description</p>
<h2 class="pose__title">Easy Pose</h2>
<p class="pose__description">Fold a thick blanket or two into a firm support about six inches high. Sit close to one edge of this support and stretch your legs out in front of your torso on the floor.<br>
Cross your shins, widen your knees, and slip each foot beneath the opposite knee as you bend your knees and fold the legs in toward your torso.<br>
Relax the feet so their outer edges rest comfortably on the floor and the inner arches settle just below the opposite shin. You'll know you have the basic leg fold of Sukhasana when you look down and see a triangle, its three sides formed by the two thighs and the crossed shins. Don't confuse this position with that of other classic seated postures in which the ankles are tucked in close to the sitting bones. In Sukhasana, there should be a comfortable gap between the feet and the pelvis.<br>
As always, you should sit with your pelvis in a relatively neutral position. To find neutral, press your hands against the floor and lift your sitting bones slightly off the support. As you hang there for a few breaths, make your thigh bones heavy, then slowly lower your sit bones lightly back to the support. Try to balance your pubic bone and tail bone so they're equidistant from the floor.<br>
You can sit in this position for any length of time, but if you practice this pose regularly, be sure to alternate the cross of the legs. A good rule of thumb: On even-numbered days, cross the right shin in front of the left, and on odd-numbered days, do the opposite. Alternately, you can divide the practice time in half, and spend the first half with your right leg forward, and the second half with the left leg forward.
</p>
</div>
<div class="pose">
<p class="pose__intro">Pose description</p>
<h2 class="pose__title">Warrior Three Pose</h2>
<p class="pose__description">Stand in Tadasana (Mountain Pose), exhale and fold foward to Uttanasana. From Uttanasana, exhale and step your left foot back into a high lunge position. Your right knee should be more or less at a right angle. Lay the midline of your torso (from the pubis to the sternum) down on the midline of the right thigh (from the knee to the hip crease) and bring your hands to your right knee, right hand to the outer knee, left hand to the inner. Squeeze the knee with your hands, lift your torso slightly, and with an exhalation, turn it slightly to the right.<br>
Now from the lunge position, stretch your arms forward, parallel to the floor and parallel to each other, palms facing each other. Exhale and press the head of the right thighbone back and press the heel actively into the floor. Synchronize the straightening of the front leg and the lifting of the back leg. As you lift the back leg, resist by pressing the tailbone into the pelvis.<br>
Normally students come up into Virabhadrasana III by lunging the torso forward. This tends to shift the body weight onto the ball of the front foot and unbalance the position. Don't allow the torso to swing forward as you move into position; instead, as you straighten the front knee, think of pressing the head of the thighbone back. This centers the femur in the hip joint, grounds the heel into the floor, and stabilizes the position.<br>
The arms, torso, and raised leg should be positioned relatively parallel to the floor. For many students the pelvis tends to tilt. Release the hip [of the raised leg] toward the floor until the two hip points are even and parallel to the floor. Energize the back leg and extend it strongly toward the wall behind you; reach just as actively in the opposite direction with the arms. Bring the head up slightly and look forward, but be sure not to compress the back of your neck.<br>
Stay in this position for 30 seconds to a minute. Release back to the lunge on an exhalation. Bring your hands to the floor on either side of the right foot, and on an exhalation, step your left foot forward to meet your right. Stay in this forward bend for a few breaths, then repeat for the same length of time on the other side.
</p>
</div>
<div class="pose">
<p class="pose__intro">Pose description</p>
<h2 class="pose__title">Pigeon Pose</h2>
<p class="pose__description">Begin on all fours, with your knees directly below your hips, and your hands slightly ahead of your shoulders. Slide your right knee forward to the back of your right wrist; at the same time angle your right shin under your torso and bring your right foot to the front of your left knee. The outside of your right shin will now rest on the floor. Slowly slide your left leg back, straightening the knee and descending the front of the thigh to the floor. Lower the outside of your right buttock to the floor. Position the right heel just in front of the left hip.<br>
The right knee can angle slightly to the right, outside the line of the hip. Look back at your left leg. It should extend straight out of the hip (and not be angled off to the left), and rotated slightly inwardly, so its midline presses against the floor. Exhale and lay your torso down on the inner right thigh for a few breaths. Stretch your arms forward.<br>
Then slide your hands back toward the front shin and push your fingertips firmly to the floor. Lift your torso away from the thigh. Lengthen the lower back by pressing your tailbone down and forward; at the same time, and lift your pubis toward the navel. Roll your left hip point toward the right heel, and lengthen the left front groin.<br>
If you can maintain the upright position of your pelvis without the support of your hands on the floor, bring your hands to the top rim of your pelvis. Push heavily down. Against this pressure, lift the lower rim of your rib cage. The back ribs should lift a little faster than the front. Without shortening the back of your neck, drop your head back. To lift your chest, push the top of your sternum (at the manubrium) straight up toward the ceiling.
</p>
</div>
<div class="pose">
<p class="pose__intro">Pose description</p>
<h2 class="pose__title">Warrior II Pose</h2>
<p class="pose__description">Stand in Tadasana (Mountain Pose). With an exhalation, step or lightly jump your feet 3 1/2 to 4 feet apart. Raise your arms parallel to the floor and reach them actively out to the sides, shoulder blades wide, palms down.<br>
Turn your right foot slightly to the right and your left foot out to the left 90 degrees. Align the left heel with the right heel. Firm your thighs and turn your left thigh outward so that the center of the left knee cap is in line with the center of the left ankle.<br>
Exhale and bend your left knee over the left ankle, so that the shin is perpendicular to the floor. If possible, bring the left thigh parallel to the floor. Anchor this movement of the left knee by strengthening the right leg and pressing the outer right heel firmly to the floor.<br>
Stretch the arms away from the space between the shoulder blades, parallel to the floor. Don't lean the torso over the left thigh: Keep the sides of the torso equally long and the shoulders directly over the pelvis. Press the tailbone slightly toward the pubis. Turn the head to the left and look out over the fingers.<br>
Stay for 30 seconds to 1 minute. Inhale to come up. Reverse the feet and repeat for the same length of time to the left.
</p>
</div>
<div class="pose">
<p class="pose__intro">Pose description</p>
<h2 class="pose__title">Cobra Pose</h2>
<p class="pose__description">Lie prone on the floor. Stretch your legs back, tops of the feet on the floor. Spread your hands on the floor under your shoulders. Hug the elbows back into your body.<br>
Press the tops of the feet and thighs and the pubis firmly into the floor.<br>
On an inhalation, begin to straighten the arms to lift the chest off the floor, going only to the height at which you can maintain a connection through your pubis to your legs. Press the tailbone toward the pubis and lift the pubis toward the navel. Narrow the hip points. Firm but don't harden the buttocks.<br>
Firm the shoulder blades against the back, puffing the side ribs forward. Lift through the top of the sternum but avoid pushing the front ribs forward, which only hardens the lower back. Distribute the backbend evenly throughout the entire spine.<br>
Hold the pose anywhere from 15 to 30 seconds, breathing easily. Release back to the floor with an exhalation.
</p>
</div>
<div class="pose">
<p class="pose__intro">Pose description</p>
<h2 class="pose__title">Reclining Hero Pose</h2>
<p class="pose__description">Perform Virasana. Exhale and lower your back torso toward the floor. First lean onto your hands, then your forearms and elbows. Once you are on your elbows, place your hands on the back of the pelvis and release your lower back and upper buttocks by spreading the flesh down toward the tailbone. Then finish reclining, either onto the floor or a support blanket or bolster.<br>
If your front ribs jut up sharply toward the ceiling, it’s a sign of tight groins, which pulls your front pelvis toward your knees and causes your belly and lower back to tense. Use your hands to press your front ribs down slightly and lift your pubis toward your navel. This should lengthen your lower back and lower it toward the floor. If it does no’t, raise yourself onto a higher support. Then lay your arms and hands on the floor, angled about 45 degrees from the sides of your torso, palms up.<br>
Sink the heads of the thighbones deep into the back of the hip sockets. It’s alright to lift your knees a little away from the floor to help soften your groins; in fact, you can raise your knees a few inches on a thickly folded blanket. You can also allow a little bit of space between your knees as long as your thighs remain parallel to each other. Do not, however, allow the knees to splay apart wider than your hips – this will cause strain on the hips and lower back.<br>
To begin, stay in this pose for 30 seconds to 1 minute. Gradually extend your stay to 5 minutes. To come out, press your forearms against the floor and come onto your hands. Then use your hands to lift your torso into Virasana. As you come up, lead with your sternum, not your head or chin. Come out of Virasana in the recommended manner.
</p>
</div>
</article>
<!-- Scroll down encouragement -->
<button class="scroll-down__box isVisible" id="scrollArrows">
<div class="scroll-down__arrow"></div>
<div class="scroll-down__arrow"></div>
</button>
<!-- Scroll up encouragement -->
<button class="scroll-up__box" id="scrollArrowsUp">
<div class="scroll-up__arrow"></div>
<div class="scroll-up__arrow"></div>
</button>
</main>
<!-- Contact info -->
<footer class="footer" id="footer">
<p class="footer__credits">2019 © <a class="footer__credits__link" href="https://www.k-son.eu" target="_blank">k-son</a></p>
<p class="footer__credits">Illustrations designed by <a class="footer__credits__link" href="http://www.freepik.com" target="_blank">macrovector / Freepik</a></p>
<p class="footer__credits">Texts by <a class="footer__credits__link" href="https://yogainternational.com/" target="_blank">Yoga International</a></p>
</footer>
</body>
</html>