R2P2/Yoga.html at main · ojsam77/R2P2 · GitHub

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
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/R2P2.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>R2P2 Services</title>
    <link type="text/css" rel="stylesheet" href="index.css">
</head>

<body class="jquery-ripples">
    <nav role="navigation" class="nav-menu-wrapper-three w-clearfix w-nav-menu">
        <a href="Quiz.html" class="button-primary w-button">Embark Now</a>
    </nav>
    <div class="logo"><a href="index.html"><img src="./src/assets/R2P2Logo.png" alt="R2P2Logo"></a></div>
    <nav class="navbar">
        <a onclick=showSidebar() href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="navbar-links">
            <ul>
                <li><a href="Abouts%20Us.html">About Us</a></li>
                <li><a href="Services.html">Services</a></li>
                <li><a href="Testimonial.html">Community Beat</a></li>
                <li><a href="Schedule.html">Schedule</a></li>
                <!-- <li><a href="Learn.html">Learn</a></li>
      <li><a href="Shop.html">Shop</a></li>-->
            </ul>
        </div>
        <ul class="sidebar">
            <li onclick=hideSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="24"
                        viewBox="0 -960 960 960" width="24" fill="#646cff">
                        <path
                            d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
                    </svg></a></li>
            <li><a href="Abouts%20Us.html">About Us</a></li>
            <li><a href="Services.html">Services</a></li>
            <li><a href="Testimonial.html">Community Beat</a></li>
            <li><a href="Schedule.html">Schedule</a></li>
            <!-- <li><a href="Learn.html">Learn</a></li>
      <li><a href="Shop.html">Shop</a></li>-->
        </ul>
    </nav>
    <div class="cf-features-section-2">
        <div class="cf-features-section-2-wrapper">
            <h2 class="cf-features-section-2-heading">Yoga</h2>
            <section class="gallery-scroll">
                <div class="container-2">
                    <div class="gallery-wrapper">
                        <div id="w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931d3-5611440b" class="n-sticky">
                            <div class="floater">
                                <a href="#Yoga 101" class="gallery-link">Yoga 101<br></a>
                                <a href="#Chair Flow" class="gallery-link">Chair Flow<br></a>
                                <a href="#Mommy Flow" class="gallery-link">Mommy Flow<br></a>
                                <a href="#Transformative" class="gallery-link">Transformative<br></a>
                                <a href="#Conditioning" class="gallery-link">Conditioning<br></a>
                                <a href="#Sunshine" class="gallery-link">Sunshine<br></a>
                                <a href="#Restorative" class="gallery-link">Restorative<br></a>
                                <a href="#Yoga Nidra" class="gallery-link">Yoga Nidra<br></a>
                            </div>
                        </div>
                        <div id="w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931e3-5611440b" class="gallery-grid">
                            <div id="Yoga 101"
                                class="gallery-image-wrapper w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931e4-5611440b">
                                <div class="gallery-image-overlay"></div>
                                <img
                                    src="src/assets/Yoga/vague yoga.jpg" loading="lazy"
                                    id="w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931e5-5611440b"
                                    alt="People in a yoga position" class="gallery-image shadow-two">
                                <h3 class="gallery-image-text">Yoga 101</h3>
                                <div class="gallery-image-description">An introductory class covering the basics of yoga
                                    philosophy and practice. Gentle and beginner-friendly, it ensures a comfortable
                                    entry into the world of yoga.</div>
                            </div>
                            <div id="Chair Flow"
                                class="gallery-image-wrapper w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931e8-5611440b">
                                <div class="gallery-image-overlay"></div>
                                <img
                                    src="src/assets/Yoga/online Yoga mod.jpg" loading="lazy"
                                    id="w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931e9-5611440b"
                                    alt="A man and a woman on a yoga mat, laughing" class="gallery-image shadow-two">
                                <h3 class="gallery-image-text">Chair Flow</h3>
                                <div class="gallery-image-description">Accessible and stabilizing, this class offers
                                    yoga from a chair. Ideal for seniors or those with mobility concerns, it enhances
                                    strength, relaxation, and spiritual awareness.</div>
                            </div>
                            <div id="Mommy Flow"
                                class="gallery-image-wrapper w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931ec-5611440b">
                                <div class="gallery-image-overlay"></div>
                                <img
                                    src="src/assets/Yoga/pregnant yoga mod.jpg" loading="lazy"
                                    id="w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931ed-5611440b"
                                    alt="A pregnant woman doing yoga in the sun" class="gallery-image shadow-two">
                                <h3 class="gallery-image-text">Mommy Flow</h3>
                                <div class="gallery-image-description">Designed for pregnant women, this class enhances
                                    physical health and fosters a deep bond with the unborn child. It focuses on easing
                                    tension and preparing the body for childbirth.</div>
                            </div>
                            <div id="Transformative"
                                class="gallery-image-wrapper w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931f0-5611440b">
                                <div class="gallery-image-overlay"></div>
                                <img
                                    src="src/assets/Yoga/wheel people.jpeg" loading="lazy"
                                    id="w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931f1-5611440b"
                                    alt="Three women doing yoga" class="gallery-image shadow-two">
                                <h3 class="gallery-image-text">Transformative</h3>
                                <div class="gallery-image-description">A balanced blend of dynamic and static postures,
                                    this class builds strength, relaxation, and spirituality. Perfect for all levels, it
                                    includes Sanskrit mantras and Chakra meditation.</div>
                            </div>
                            <div id="Conditioning"
                                class="gallery-image-wrapper w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931f4-5611440b">
                                <div class="gallery-image-overlay"></div>
                                <img
                                    src="src/assets/Yoga/happy fitness.jpg" loading="lazy"
                                    id="w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931f5-5611440b"
                                    alt="Two women high fiving while in a push up position, with a smile on their faces"
                                    class="gallery-image shadow-two">
                                <h3 class="gallery-image-text">Conditioning</h3>
                                <div class="gallery-image-description">Focus on physical strength with dynamic movements
                                    and weighted blocks. Great for beginners and advanced practitioners looking to
                                    enhance their practice.</div>
                            </div>
                            <div id="Sunshine"
                                class="gallery-image-wrapper w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931f4-5611440b">
                                <div class="gallery-image-overlay"></div>
                                <img
                                    src="src/assets/Yoga/amauri-mejia-GvF7RkA-E9Q-unsplash mod.jpg" loading="lazy"
                                    id="w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931f5-5611440b"
                                    alt="A small group of people practicing yoga on a sunny day"
                                    class="gallery-image shadow-two">
                                <h3 class="gallery-image-text">Sunshine</h3>
                                <div class="gallery-image-description">Start your day with a gentle flow of yoga
                                    postures designed to awaken body and mind. Connect with the sun's healing energy
                                    through a slow-paced warm-up and targeted postures that relieve work-related stress.
                                </div>
                            </div>
                            <div id="Restorative"
                                class="gallery-image-wrapper w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931f4-5611440b">
                                <div class="gallery-image-overlay"></div>
                                <img
                                    src="src/assets/Yoga/Group Yoga.jpg" loading="lazy"
                                    id="w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931f5-5611440b"
                                    alt="A large group of people during a yoga session"
                                    class="gallery-image shadow-two">
                                <h3 class="gallery-image-text">Restorative</h3>
                                <div class="gallery-image-description">A slow-paced, gentle class aimed at relaxation
                                    and recovery. Perfect for easing into yoga or unwinding after intense workouts.
                                </div>
                            </div>
                            <div id="Yoga Nidra"
                                class="gallery-image-wrapper w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931f4-5611440b">
                                <div class="gallery-image-overlay"></div>
                                <img
                                    src="src/assets/Yoga/desi people.jpg" loading="lazy"
                                    id="w-node-bcf2c4a0-89cc-d1b5-25cd-1076b7e931f5-5611440b"
                                    alt="Three people meditating in a lotus position" class="gallery-image shadow-two">
                                <h3 class="gallery-image-text">Yoga Nidra</h3>
                                <div class="gallery-image-description">Experience the profound relaxation of yogic
                                    sleep. This meditative practice requires no movement and fosters deep relaxation and
                                    self-awareness.</div>
                            </div>
                        </div>
                    </div>
            </section>
        </div>
    </div>
    <div class="footer">
        <div class="w-layout-grid cf-footer-grid">
            <div id="w-node-_3c611f58-b696-74f0-60bd-681ce825e9c1-996e4385" class="cf-footer-column">
                <p class="cf-footer-paragraph-18px heading black">Main Pages</p>
                <a href="Abouts%20Us.html" class="cf-footer-link-18px black">About Us</a>
                <a href="Services.html" class="cf-footer-link-18px black">Services</a>
                <a href="Testimonial.html" class="cf-footer-link-18px black">Community Beat</a>
                <a href="Schedule.html" class="cf-footer-link-18px black">Schedule</a>
            </div>
            <div id="w-node-_3c611f58-b696-74f0-60bd-681ce825e9d0-996e4385" class="cf-footer-column">
                <p class="cf-footer-paragraph-18px heading black">Services Pages</p>
                <a href="Nutrition.html" class="cf-footer-link-18px black">Nutrition</a>
                <a href="Healing.html" class="cf-footer-link-18px black">Healing</a>
                <a href="Movement.html" class="cf-footer-link-18px black">Movement</a>
            </div>
            <div id="w-node-_3c611f58-b696-74f0-60bd-681ce825e9db-996e4385" class="cf-footer-column">
                <p class="cf-footer-paragraph-18px heading black">Movement Pages</p>
                <a href="Yoga.html" class="cf-footer-link-18px black">Yoga</a>
                <a href="#" class="cf-footer-link-18px black">Pilates</a>
                <a href="Dance.html" class="cf-footer-link-18px black">Dance</a>
            </div>
        </div>
    </div>
    <script type="module" src="/src/main.jsx"></script>
    <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=65f1a2cb7e4b8f9c996e437e"
        type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script>
        function showSidebar() {
            const sidebar = document.querySelector('.sidebar')
            sidebar.style.display = 'flex'
        }

        function hideSidebar() {
            const sidebar = document.querySelector('.sidebar')
            sidebar.style.display = 'none'
        }
    </script>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
      const floater = document.querySelector('.floater');
      const footer = document.querySelector('.footer');

      function onScroll() {
        if (!floater || !footer) return;
        const footerRect = footer.getBoundingClientRect();
        const floaterRect = floater.getBoundingClientRect();

        // If the bottom of the floater touches or goes below the top of the footer
        if (floaterRect.bottom >= footerRect.top) {
          floater.classList.add('hide-on-footer');
        } else {
          floater.classList.remove('hide-on-footer');
        }
      }

      window.addEventListener('scroll', onScroll);
      window.addEventListener('resize', onScroll);
      onScroll();
    });
    </script>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
      const floater = document.querySelector('.floater');
      const floaterLinks = floater ? floater.querySelectorAll('.gallery-link') : [];
      const lastLink = floaterLinks.length ? floaterLinks[floaterLinks.length - 1] : null;

      document.querySelectorAll('.gallery-link').forEach(link => {
        link.addEventListener('click', function(e) {
          const href = this.getAttribute('href');
          if (href && href.startsWith('#')) {
            const target = document.getElementById(href.substring(1));
            if (target && lastLink) {
              e.preventDefault();
              // Remove bold from all links
              floaterLinks.forEach(l => l.classList.remove('active-gallery-link'));
              // Add bold to the clicked link
              this.classList.add('active-gallery-link');
              // Get the current scroll position
              const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
              // Get the bottom of the target relative to the document
              const targetRect = target.getBoundingClientRect();
              const targetBottom = targetRect.bottom + scrollTop;
              // Get the bottom of the last link relative to the document
              const lastLinkRect = lastLink.getBoundingClientRect();
              const lastLinkBottom = lastLinkRect.bottom + scrollTop;
              // Calculate the difference to move the menu up so the last link's bottom aligns with the target's bottom
              const delta = lastLinkBottom - scrollTop;
              window.scrollTo({
                top: targetBottom - delta,
                behavior: 'smooth'
              });
            }
          }
        });
      });
    });
    </script>
    <script>
    // Dynamically add overlay divs to each gallery-image-wrapper (JS approach)
    document.addEventListener("DOMContentLoaded", function() {
      document.querySelectorAll('.gallery-image-wrapper').forEach(wrapper => {
        if (!wrapper.querySelector('.gallery-image-overlay')) {
          const overlay = document.createElement('div');
          overlay.className = 'gallery-image-overlay';
          wrapper.insertBefore(overlay, wrapper.firstChild);
        }
      });
    });
    </script>
</body>

</html>