Capstone-Project/capstone.html at main · HridayRaj02/Capstone-Project · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HealthNest - Your Wellness</title>
    <link rel="stylesheet" href="capstone.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- navbar section -->
<nav class="navbar">
    <div class="container nav-container">
        <a href="capstone.html" class="logo">HealthNest</a>
        <ul class="nav-menu">
            <li><a href="capstone.html" class="nav-link active">Home</a></li>
            <li><a href="about-us.html" class="nav-link">About</a></li>
            <li><a href="services.html" class="nav-link">Services</a></li>
            <li><a href="contact.html" class="nav-link">Contact</a></li>
        </ul>

        <button id="theme-toggle" class="theme-btn">Dark Mode</button>
    </div>
</nav>


    <!-- hero section -->
    <header class="hero">
        <div class="container">
            <h1 class="hero-title">Your Wellness.</h1>
            <p class="hero-subtitle">We make feeling good simple and elegant. Green is the new healthy.</p>
            <a href="#" class="btn btn-primary">Get Started</a>
        </div>
    </header>
    <!-- below hero section -->
    <section class="cta-section">
        <div class="container">
            <h2>Ready for a Healthier You?</h2>
            <a href="#" class="btn btn-secondary">Book Now</a>
        </div>
    </section>

    <!-- service cards -->
    <section class="services">
        <div class="container">
            <div class="service-grid">
                <div class="service-card">
                    <h3>Serene Care</h3>
                    <p>Experience tranquility with our calming, nature-inspired approach to your health.</p>
                </div>
                <div class="service-card">
                    <h3>Vibrant Health</h3>
                    <p>Achieve peak vitality through our refreshing and dynamic wellness programs.</p>
                    <a href="#" class="btn btn-outline">Learn More</a>
                </div>
            </div>
        </div>
    </section>

    <!-- testimonial section -->
    <section class="testimonial-featured">
        <div class="container">
            <p class="label">Testimonial</p>
            <h2>Simply Amazing!</h2>
            <p class="quote">HealthNest transformed my routine. I feel refreshed and more energetic than ever before.</p>
            <div class="testimonial-author">
                <div class="author-image"></div>
                <p class="author-name">Sarah K.</p>
            </div>
            <a href="#" class="btn btn-outline">Read More</a>
        </div>
    </section>

    <!-- below testimonial -->
    <section class="marquee-section">
        <div class="marquee">
            <div class="marquee-content">
                <span>Personalized Wellness Plans</span>
                <span>★</span>
                <span>Dynamic Health Solutions for Modern Life</span>
                <span>★</span>
                <span>Personalized Wellness Plans</span>
                <span>★</span>
                <span>Dynamic Health Solutions for Modern Life</span>
                <span>★</span>
            </div>
        </div>
    </section>

    <!-- our approach section -->
    <section class="approach">
        <div class="container">
            <h2>Our Approach</h2>
            <div class="approach-grid">
                <div class="approach-card">
                    <div class="approach-image gradient-1"></div>
                    <p>Minimalist design, maximum impact on your well-being.</p>
                    <a href="#" class="btn btn-outline">Join Us</a>
                </div>
                <div class="approach-card">
                    <div class="approach-image gradient-2"></div>
                    <p>Gradient hues that soothe the soul and energize the body.</p>
                    <a href="#" class="btn btn-outline">Join Us</a>
                </div>
                <div class="approach-card">
                    <div class="approach-image gradient-3"></div>
                    <p>Dynamic effects that keep your health journey exciting.</p>
                    <a href="#" class="btn btn-outline">Join Us</a>
                </div>
            </div>
        </div>
    </section>

    <!-- products section -->
    <section class="products">
        <div class="container">
            <h2>Our Remedies</h2>
            <div class="product-grid">
                <div class="product-card">
                    <div class="product-image nature-1"></div>
                    <p class="product-price">$49.99</p>
                    <h3>Vitality Elixir</h3>
                    <p>A potent blend to invigorate your senses and boost your daily energy. Feel the difference from the first drop.</p>
                    <a href="#" class="btn btn-primary">Get Yours</a>
                </div>
                <div class="product-card">
                    <div class="product-image nature-2"></div>
                    <p class="product-price">$79.99</p>
                    <h3>Serenity Drops</h3>
                    <p>Melt away stress and find your calm. This soothing formula promotes restful sleep and mental peace.</p>
                    <a href="#" class="btn btn-primary">Get Yours</a>
                </div>
            </div>
        </div>
    </section>

    <!-- prizing cards section -->
    <section class="pricing">
        <div class="container">
            <div class="pricing-grid">
                <div class="pricing-card">
                    <h4>Basic Care</h4>
                    <p class="pricing-subtitle">Essential wellness.</p>
                    <p class="pricing-amount">$19.99</p>
                    <a href="#" class="btn btn-outline">Sign Up</a>
                    <ul class="pricing-features">
                        <li>Daily Check-ins</li>
                        <li>Basic Support</li>
                        <li>Community Access</li>
                        <li>Resource Library</li>
                        <li>Weekly Newsletter</li>
                    </ul>
                </div>
                <div class="pricing-card featured">
                    <h4>Pro Health</h4>
                    <p class="pricing-subtitle">Advanced health.</p>
                    <p class="pricing-amount">$49.99</p>
                    <a href="#" class="btn btn-primary">Sign Up</a>
                    <ul class="pricing-features">
                        <li>All Basic Features</li>
                        <li>Personalized Plans</li>
                        <li>Priority Support</li>
                        <li>Exclusive Webinars</li>
                        <li>Monthly Consultations</li>
                    </ul>
                </div>
                <div class="pricing-card">
                    <h4>Elite Wellness</h4>
                    <p class="pricing-subtitle">Ultimate well-being.</p>
                    <p class="pricing-amount">$99.99</p>
                    <a href="#" class="btn btn-outline">Sign Up</a>
                    <ul class="pricing-features">
                        <li>All Pro Features</li>
                        <li>Dedicated Coach</li>
                        <li>24/7 Access</li>
                        <li>Advanced Analytics</li>
                        <li>Annual Retreats</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- health hub section -->
    <section class="health-hub">
        <div class="container">
            <h2>Your Health Hub</h2>
            <p class="hub-description">Welcome to HealthNest, where your well-being takes center stage. We offer a sanctuary for your health needs, providing peace of mind.</p>
            <a href="#" class="btn btn-primary">Get Started</a>
            <div class="mindful-section">
                <h4>Mindful Moments</h4>
                <p>Find tranquility with our guided meditation sessions. Perfect for de-stressing after a long day and reconnecting with yourself.</p>
            </div>
        </div>
    </section>

    <!-- doctor card -->
    <section class="team">
        <div class="container">
            <div class="team-card">
                <div class="team-image"></div>
                <div class="team-info">
                    <h3>Dr. Anya Sharma</h3>
                    <p class="team-role">Chief Wellness Officer</p>
                </div>
            </div>
        </div>
    </section>

    <!-- care section -->
    <section class="care-section">
        <div class="container">
            <div class="care-content">
                <div class="care-image nature-bg"></div>
                <div class="care-text">
                    <h2>Care</h2>
                    <p>We believe in proactive health management. Let us guide you to a healthier, happier existence.</p>
                    <a href="#" class="btn btn-primary">Learn More</a>
                </div>
            </div>
        </div>
    </section>

    <!-- <section class="holistic-health">
        <div class="container">
            <div class="section-header">
                <p class="label">Our Approach</p>
                <h2>Holistic Health Solutions</h2>
                <p>Experience comprehensive care designed for your unique needs. We focus on prevention and lasting well-being.</p>
            </div>
            <div class="tabs">
                <input type="radio" name="health-tabs" id="tab1" checked>
                <input type="radio" name="health-tabs" id="tab2">
                <input type="radio" name="health-tabs" id="tab3">
                <input type="radio" name="health-tabs" id="tab4">
                <input type="radio" name="health-tabs" id="tab5">
                <input type="radio" name="health-tabs" id="tab6">

                <div class="tab-labels">
                    <label for="tab1">Nutrition</label>
                    <label for="tab2">Fitness</label>
                    <label for="tab3">Mental</label>
                    <label for="tab4">Sleep</label>
                    <label for="tab5">Recovery</label>
                    <label for="tab6">Prevention</label>
                </div>

                <div class="tab-content">
                    <div class="tab-panel">
                        <div class="tab-image nature-3"></div>
                        <p>Tailored dietary plans to fuel your body optimally. We focus on whole foods and sustainable eating habits.</p>
                    </div>
                    <div class="tab-panel">
                        <div class="tab-image nature-4"></div>
                        <p>Personalized fitness routines that adapt to your progress and goals. Get stronger and more agile with expert guidance.</p>
                    </div>
                    <div class="tab-panel">
                        <div class="tab-image nature-5"></div>
                        <p>Techniques and support for emotional balance and mental clarity. Cultivate inner peace and resilience.</p>
                    </div>
                    <div class="tab-panel">
                        <div class="tab-image nature-6"></div>
                        <p>Strategies for achieving deep, restorative sleep. Wake up feeling refreshed and energized every single day.</p>
                    </div>
                    <div class="tab-panel">
                        <div class="tab-image nature-7"></div>
                        <p>Advanced methods for faster and more effective physical recovery. Get back to your best self quickly.</p>
                    </div>
                    <div class="tab-panel">
                        <div class="tab-image nature-8"></div>
                        <p>Proactive strategies to maintain peak health and prevent future issues. Stay ahead of potential health concerns.</p>
                    </div>
                </div>
            </div>
        </div>
    </section> -->

    <!-- glimpse section -->
    <section class="features">
        <div class="container">
            <div class="section-header">
                <p class="label">A Glimpse</p>
                <h2>Nature's Embrace</h2>
                <p>Tranquil green spaces promoting calm and healing.</p>
            </div>
            <div class="features-grid">
                <div class="feature-card">
                    <h4>Personalized Plans</h4>
                    <ul>
                        <li>Customized health roadmaps.</li>
                        <li>Goal-oriented strategies.</li>
                    </ul>
                </div>
                <div class="feature-card">
                    <h4>Expert Guidance</h4>
                    <ul>
                        <li>Access to certified professionals.</li>
                        <li>Evidence-based advice.</li>
                    </ul>
                </div>
                <div class="feature-card">
                    <h4>Community Support</h4>
                    <ul>
                        <li>Connect with like-minded individuals.</li>
                        <li>Shared experiences and encouragement.</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- happy patients section -->
    <section class="testimonials">
        <div class="container">
            <h2>Happy Patients</h2>
            <div class="testimonials-grid">
                <div class="testimonial-card">
                    <p>"HealthNest is a breath of fresh air! My health has never felt so vibrant."</p>
                    <div class="testimonial-avatar avatar-1"></div>
                    <p class="testimonial-name"><strong>Alice Smith</strong></p>
                    <p class="testimonial-role">Yoga Instructor</p>
                </div>
                <div class="testimonial-card">
                    <p>"Finally, a healthcare provider that gets it. Simple, effective, and stylish."</p>
                    <div class="testimonial-avatar avatar-2"></div>
                    <p class="testimonial-name"><strong>Bob Johnson</strong></p>
                    <p class="testimonial-role">Software Engineer</p>
                </div>
                <div class="testimonial-card">
                    <p>"I was skeptical, but HealthNest delivered. My energy levels are through the roof!"</p>
                    <div class="testimonial-avatar avatar-3"></div>
                    <p class="testimonial-name"><strong>Carol White</strong></p>
                    <p class="testimonial-role">Graphic Designer</p>
                </div>
                <div class="testimonial-card">
                    <p>"The aesthetic is amazing, and the results are even better. Highly recommend."</p>
                    <div class="testimonial-avatar avatar-4"></div>
                    <p class="testimonial-name"><strong>David Green</strong></p>
                    <p class="testimonial-role">Chef</p>
                </div>
                <div class="testimonial-card">
                    <p>"HealthNest makes wellness feel like a treat, not a chore. So chic!"</p>
                    <div class="testimonial-avatar avatar-5"></div>
                    <p class="testimonial-name"><strong>Eve Black</strong></p>
                    <p class="testimonial-role">Artist</p>
                </div>
                <div class="testimonial-card">
                    <p>"From the look to the feel, HealthNest is pure class. My well-being has transformed."</p>
                    <div class="testimonial-avatar avatar-6"></div>
                    <p class="testimonial-name"><strong>Frank Blue</strong></p>
                    <p class="testimonial-role">Architect</p>
                </div>
            </div>
        </div>
    </section>

    <!-- voices of health section -->
    <section class="final-cta">
        <div class="container">
            <p class="label">Voices of Health</p>
            <h2>Your Wellness</h2>
            <h3 class="cta-highlight">Elevated</h3>
            <div class="cta-buttons">
                <a href="#" class="btn btn-primary">Get Started</a>
                <a href="#" class="btn btn-outline">Learn More</a>
            </div>
        </div>
    </section>

    <!-- wellness-steps cards -->
    <section class="wellness-steps">
        <div class="container">
            <div class="steps-grid">
                <div class="step-card">
                    <div class="step-image step-1"></div>
                    <h4>Serenity</h4>
                    <span class="step-number">01</span>
                    <p>Experience a tranquil approach to your health. Our methods are designed for peace of mind.</p>
                </div>
                <div class="step-card">
                    <div class="step-image step-2"></div>
                    <h4>Vitality</h4>
                    <span class="step-number">02</span>
                    <p>Reclaim your energy and zest for life. We help you feel your absolute best, every single day.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- before footer section-->
    <section class="insight">
        <div class="container">
            <div class="insight-content">
                <div class="insight-avatar"></div>
                <div class="insight-text">
                    <p class="label">Insight</p>
                    <p class="insight-quote">"Health is wealth."</p>
                    <p class="insight-author"><strong>Dr. Anya Sharma</strong></p>
                    <p class="insight-role">Chief Wellness Officer</p>
                </div>
            </div>
        </div>
    </section>

    <!-- footer section -->
    <footer class="footer">
        <div class="container">
            <p>copy; 2024 HealthNest. All rights reserved.</p>
        </div>
    </footer>
    <script src="./capstone.js"></script>
</body>
</html>