mlbhlcdt commited on
Commit
e6da0c0
·
verified ·
1 Parent(s): 9a287fe

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +790 -0
  2. package.json +16 -0
index.html ADDED
@@ -0,0 +1,790 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Health & Wellness - Your Path to Better Living</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
+ }
15
+
16
+ :root {
17
+ --primary: #2e7d32;
18
+ --secondary: #4caf50;
19
+ --accent: #8bc34a;
20
+ --light: #e8f5e9;
21
+ --dark: #1b5e20;
22
+ --text: #333333;
23
+ --white: #ffffff;
24
+ --blue: #2196f3;
25
+ --orange: #ff9800;
26
+ }
27
+
28
+ body {
29
+ background-color: var(--light);
30
+ color: var(--text);
31
+ line-height: 1.6;
32
+ }
33
+
34
+ header {
35
+ background: linear-gradient(to right, var(--primary), var(--secondary));
36
+ color: var(--white);
37
+ padding: 1rem 0;
38
+ position: sticky;
39
+ top: 0;
40
+ z-index: 100;
41
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
42
+ }
43
+
44
+ .container {
45
+ width: 90%;
46
+ max-width: 1200px;
47
+ margin: 0 auto;
48
+ }
49
+
50
+ .nav-container {
51
+ display: flex;
52
+ justify-content: space-between;
53
+ align-items: center;
54
+ }
55
+
56
+ .logo {
57
+ display: flex;
58
+ align-items: center;
59
+ gap: 10px;
60
+ font-size: 1.8rem;
61
+ font-weight: 700;
62
+ }
63
+
64
+ .logo i {
65
+ font-size: 2rem;
66
+ }
67
+
68
+ nav ul {
69
+ display: flex;
70
+ list-style: none;
71
+ }
72
+
73
+ nav ul li {
74
+ margin-left: 2rem;
75
+ }
76
+
77
+ nav ul li a {
78
+ color: var(--white);
79
+ text-decoration: none;
80
+ font-weight: 500;
81
+ transition: all 0.3s ease;
82
+ padding: 0.5rem 0;
83
+ position: relative;
84
+ }
85
+
86
+ nav ul li a:hover {
87
+ color: var(--accent);
88
+ }
89
+
90
+ nav ul li a::after {
91
+ content: '';
92
+ position: absolute;
93
+ bottom: 0;
94
+ left: 0;
95
+ width: 0;
96
+ height: 2px;
97
+ background-color: var(--accent);
98
+ transition: width 0.3s ease;
99
+ }
100
+
101
+ nav ul li a:hover::after {
102
+ width: 100%;
103
+ }
104
+
105
+ .hero {
106
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1532938911079-1b06ac7ceec7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80');
107
+ background-size: cover;
108
+ background-position: center;
109
+ height: 80vh;
110
+ display: flex;
111
+ align-items: center;
112
+ text-align: center;
113
+ color: var(--white);
114
+ }
115
+
116
+ .hero-content {
117
+ max-width: 800px;
118
+ margin: 0 auto;
119
+ }
120
+
121
+ .hero h1 {
122
+ font-size: 3.5rem;
123
+ margin-bottom: 1rem;
124
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
125
+ }
126
+
127
+ .hero p {
128
+ font-size: 1.3rem;
129
+ margin-bottom: 2rem;
130
+ }
131
+
132
+ .btn {
133
+ display: inline-block;
134
+ background-color: var(--accent);
135
+ color: var(--white);
136
+ padding: 0.8rem 2rem;
137
+ border-radius: 50px;
138
+ text-decoration: none;
139
+ font-weight: 600;
140
+ transition: all 0.3s ease;
141
+ border: none;
142
+ cursor: pointer;
143
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
144
+ }
145
+
146
+ .btn:hover {
147
+ background-color: var(--primary);
148
+ transform: translateY(-3px);
149
+ box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
150
+ }
151
+
152
+ section {
153
+ padding: 5rem 0;
154
+ }
155
+
156
+ .section-title {
157
+ text-align: center;
158
+ margin-bottom: 3rem;
159
+ }
160
+
161
+ .section-title h2 {
162
+ font-size: 2.5rem;
163
+ color: var(--primary);
164
+ margin-bottom: 1rem;
165
+ position: relative;
166
+ display: inline-block;
167
+ }
168
+
169
+ .section-title h2::after {
170
+ content: '';
171
+ position: absolute;
172
+ bottom: -10px;
173
+ left: 50%;
174
+ transform: translateX(-50%);
175
+ width: 80px;
176
+ height: 4px;
177
+ background-color: var(--accent);
178
+ border-radius: 2px;
179
+ }
180
+
181
+ .section-title p {
182
+ color: var(--text);
183
+ max-width: 700px;
184
+ margin: 0 auto;
185
+ }
186
+
187
+ .about-content {
188
+ display: grid;
189
+ grid-template-columns: 1fr 1fr;
190
+ gap: 3rem;
191
+ align-items: center;
192
+ }
193
+
194
+ .about-img {
195
+ border-radius: 10px;
196
+ overflow: hidden;
197
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
198
+ }
199
+
200
+ .about-img img {
201
+ width: 100%;
202
+ height: auto;
203
+ display: block;
204
+ transition: transform 0.5s ease;
205
+ }
206
+
207
+ .about-img:hover img {
208
+ transform: scale(1.05);
209
+ }
210
+
211
+ .about-text h3 {
212
+ font-size: 1.8rem;
213
+ margin-bottom: 1.5rem;
214
+ color: var(--dark);
215
+ }
216
+
217
+ .about-text p {
218
+ margin-bottom: 1.5rem;
219
+ }
220
+
221
+ .stats {
222
+ display: grid;
223
+ grid-template-columns: repeat(4, 1fr);
224
+ gap: 2rem;
225
+ margin-top: 3rem;
226
+ }
227
+
228
+ .stat-item {
229
+ text-align: center;
230
+ padding: 2rem 1rem;
231
+ background-color: var(--white);
232
+ border-radius: 10px;
233
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
234
+ transition: transform 0.3s ease;
235
+ }
236
+
237
+ .stat-item:hover {
238
+ transform: translateY(-10px);
239
+ }
240
+
241
+ .stat-item i {
242
+ font-size: 2.5rem;
243
+ color: var(--primary);
244
+ margin-bottom: 1rem;
245
+ }
246
+
247
+ .stat-item h3 {
248
+ font-size: 2.5rem;
249
+ color: var(--dark);
250
+ margin-bottom: 0.5rem;
251
+ }
252
+
253
+ .stat-item p {
254
+ color: var(--text);
255
+ }
256
+
257
+ .services {
258
+ background-color: var(--white);
259
+ }
260
+
261
+ .services-grid {
262
+ display: grid;
263
+ grid-template-columns: repeat(3, 1fr);
264
+ gap: 2rem;
265
+ }
266
+
267
+ .service-card {
268
+ background-color: var(--light);
269
+ border-radius: 10px;
270
+ overflow: hidden;
271
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
272
+ transition: transform 0.3s ease;
273
+ }
274
+
275
+ .service-card:hover {
276
+ transform: translateY(-10px);
277
+ }
278
+
279
+ .service-img {
280
+ height: 200px;
281
+ overflow: hidden;
282
+ }
283
+
284
+ .service-img img {
285
+ width: 100%;
286
+ height: 100%;
287
+ object-fit: cover;
288
+ transition: transform 0.5s ease;
289
+ }
290
+
291
+ .service-card:hover .service-img img {
292
+ transform: scale(1.1);
293
+ }
294
+
295
+ .service-content {
296
+ padding: 1.5rem;
297
+ }
298
+
299
+ .service-content h3 {
300
+ font-size: 1.5rem;
301
+ margin-bottom: 1rem;
302
+ color: var(--dark);
303
+ }
304
+
305
+ .service-content p {
306
+ margin-bottom: 1.5rem;
307
+ }
308
+
309
+ .tips {
310
+ background: linear-gradient(to right, var(--primary), var(--secondary));
311
+ color: var(--white);
312
+ }
313
+
314
+ .tips-grid {
315
+ display: grid;
316
+ grid-template-columns: repeat(2, 1fr);
317
+ gap: 2rem;
318
+ }
319
+
320
+ .tip-card {
321
+ background-color: rgba(255, 255, 255, 0.1);
322
+ border-radius: 10px;
323
+ padding: 2rem;
324
+ backdrop-filter: blur(10px);
325
+ transition: transform 0.3s ease;
326
+ }
327
+
328
+ .tip-card:hover {
329
+ transform: translateY(-5px);
330
+ }
331
+
332
+ .tip-card h3 {
333
+ font-size: 1.5rem;
334
+ margin-bottom: 1rem;
335
+ display: flex;
336
+ align-items: center;
337
+ gap: 10px;
338
+ }
339
+
340
+ .tip-card h3 i {
341
+ color: var(--accent);
342
+ }
343
+
344
+ .cta {
345
+ background: linear-gradient(to right, var(--primary), var(--secondary));
346
+ color: var(--white);
347
+ text-align: center;
348
+ padding: 5rem 0;
349
+ }
350
+
351
+ .cta h2 {
352
+ font-size: 2.5rem;
353
+ margin-bottom: 1.5rem;
354
+ }
355
+
356
+ .cta p {
357
+ font-size: 1.2rem;
358
+ margin-bottom: 2rem;
359
+ max-width: 700px;
360
+ margin-left: auto;
361
+ margin-right: auto;
362
+ }
363
+
364
+ .cta .btn {
365
+ background-color: var(--white);
366
+ color: var(--primary);
367
+ }
368
+
369
+ .cta .btn:hover {
370
+ background-color: var(--accent);
371
+ color: var(--white);
372
+ }
373
+
374
+ footer {
375
+ background-color: var(--dark);
376
+ color: var(--white);
377
+ padding: 3rem 0 1rem;
378
+ }
379
+
380
+ .footer-content {
381
+ display: grid;
382
+ grid-template-columns: repeat(4, 1fr);
383
+ gap: 2rem;
384
+ margin-bottom: 2rem;
385
+ }
386
+
387
+ .footer-column h3 {
388
+ font-size: 1.3rem;
389
+ margin-bottom: 1.5rem;
390
+ position: relative;
391
+ padding-bottom: 10px;
392
+ }
393
+
394
+ .footer-column h3::after {
395
+ content: '';
396
+ position: absolute;
397
+ bottom: 0;
398
+ left: 0;
399
+ width: 40px;
400
+ height: 2px;
401
+ background-color: var(--accent);
402
+ }
403
+
404
+ .footer-column p {
405
+ margin-bottom: 1rem;
406
+ }
407
+
408
+ .footer-links {
409
+ list-style: none;
410
+ }
411
+
412
+ .footer-links li {
413
+ margin-bottom: 0.8rem;
414
+ }
415
+
416
+ .footer-links li a {
417
+ color: var(--light);
418
+ text-decoration: none;
419
+ transition: all 0.3s ease;
420
+ }
421
+
422
+ .footer-links li a:hover {
423
+ color: var(--accent);
424
+ padding-left: 5px;
425
+ }
426
+
427
+ .social-links {
428
+ display: flex;
429
+ gap: 1rem;
430
+ }
431
+
432
+ .social-links a {
433
+ display: inline-flex;
434
+ align-items: center;
435
+ justify-content: center;
436
+ width: 40px;
437
+ height: 40px;
438
+ background-color: rgba(255, 255, 255, 0.1);
439
+ border-radius: 50%;
440
+ color: var(--white);
441
+ text-decoration: none;
442
+ transition: all 0.3s ease;
443
+ }
444
+
445
+ .social-links a:hover {
446
+ background-color: var(--accent);
447
+ transform: translateY(-5px);
448
+ }
449
+
450
+ .copyright {
451
+ text-align: center;
452
+ padding-top: 2rem;
453
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
454
+ }
455
+
456
+ .mobile-menu {
457
+ display: none;
458
+ font-size: 1.5rem;
459
+ cursor: pointer;
460
+ }
461
+
462
+ @media (max-width: 992px) {
463
+ .about-content {
464
+ grid-template-columns: 1fr;
465
+ }
466
+
467
+ .services-grid {
468
+ grid-template-columns: repeat(2, 1fr);
469
+ }
470
+
471
+ .footer-content {
472
+ grid-template-columns: repeat(2, 1fr);
473
+ }
474
+
475
+ .stats {
476
+ grid-template-columns: repeat(2, 1fr);
477
+ }
478
+
479
+ .tips-grid {
480
+ grid-template-columns: 1fr;
481
+ }
482
+ }
483
+
484
+ @media (max-width: 768px) {
485
+ .hero h1 {
486
+ font-size: 2.5rem;
487
+ }
488
+
489
+ .hero p {
490
+ font-size: 1.1rem;
491
+ }
492
+
493
+ nav ul {
494
+ display: none;
495
+ position: absolute;
496
+ top: 100%;
497
+ left: 0;
498
+ width: 100%;
499
+ background-color: var(--primary);
500
+ flex-direction: column;
501
+ padding: 1rem 0;
502
+ text-align: center;
503
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
504
+ }
505
+
506
+ nav ul.active {
507
+ display: flex;
508
+ }
509
+
510
+ nav ul li {
511
+ margin: 0;
512
+ padding: 0.8rem 0;
513
+ }
514
+
515
+ .mobile-menu {
516
+ display: block;
517
+ }
518
+
519
+ .services-grid {
520
+ grid-template-columns: 1fr;
521
+ }
522
+
523
+ .footer-content {
524
+ grid-template-columns: 1fr;
525
+ }
526
+
527
+ .stats {
528
+ grid-template-columns: 1fr;
529
+ }
530
+ }
531
+
532
+ /* Animation for stats counter */
533
+ .counter {
534
+ transition: all 0.5s ease;
535
+ }
536
+ </style>
537
+ </head>
538
+ <body>
539
+ <!-- Header -->
540
+ <header>
541
+ <div class="container nav-container">
542
+ <div class="logo">
543
+ <i class="fas fa-heartbeat"></i>
544
+ <span>Health & Wellness</span>
545
+ </div>
546
+ <nav>
547
+ <div class="mobile-menu">
548
+ <i class="fas fa-bars"></i>
549
+ </div>
550
+ <ul>
551
+ <li><a href="#home">Home</a></li>
552
+ <li><a href="#about">About</a></li>
553
+ <li><a href="#services">Services</a></li>
554
+ <li><a href="#tips">Health Tips</a></li>
555
+ <li><a href="#contact">Contact</a></li>
556
+ </ul>
557
+ </nav>
558
+ </div>
559
+ </header>
560
+
561
+ <!-- Hero Section -->
562
+ <section class="hero" id="home">
563
+ <div class="container hero-content">
564
+ <h1>Your Journey to Better Health Starts Here</h1>
565
+ <p>Discover personalized wellness solutions and expert guidance for a healthier, happier life.</p>
566
+ <a href="#services" class="btn">Explore Our Services</a>
567
+ </div>
568
+ </section>
569
+
570
+ <!-- About Section -->
571
+ <section id="about">
572
+ <div class="container">
573
+ <div class="section-title">
574
+ <h2>About Health & Wellness</h2>
575
+ <p>We are dedicated to helping you achieve optimal health through personalized care and evidence-based practices.</p>
576
+ </div>
577
+ <div class="about-content">
578
+ <div class="about-img">
579
+ <img src="https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Healthcare professionals">
580
+ </div>
581
+ <div class="about-text">
582
+ <h3>Our Mission</h3>
583
+ <p>Health & Wellness is committed to empowering individuals to take control of their health through comprehensive wellness programs, expert guidance, and community support.</p>
584
+ <p>Founded in 2015, we've helped thousands of people improve their physical and mental wellbeing through our innovative approach to healthcare.</p>
585
+ <p>Our team of certified professionals includes nutritionists, fitness experts, mental health counselors, and wellness coaches dedicated to your success.</p>
586
+ <a href="#" class="btn">Learn More</a>
587
+ </div>
588
+ </div>
589
+ <div class="stats">
590
+ <div class="stat-item">
591
+ <i class="fas fa-user-md"></i>
592
+ <h3 class="counter" data-target="50">0</h3>
593
+ <p>Certified Experts</p>
594
+ </div>
595
+ <div class="stat-item">
596
+ <i class="fas fa-users"></i>
597
+ <h3 class="counter" data-target="10000">0</h3>
598
+ <p>Happy Clients</p>
599
+ </div>
600
+ <div class="stat-item">
601
+ <i class="fas fa-clipboard-check"></i>
602
+ <h3 class="counter" data-target="95">0</h3>
603
+ <p>Success Rate</p>
604
+ </div>
605
+ <div class="stat-item">
606
+ <i class="fas fa-award"></i>
607
+ <h3 class="counter" data-target="15">0</h3>
608
+ <p>Years Experience</p>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ </section>
613
+
614
+ <!-- Services Section -->
615
+ <section class="services" id="services">
616
+ <div class="container">
617
+ <div class="section-title">
618
+ <h2>Our Services</h2>
619
+ <p>Comprehensive health and wellness services tailored to your unique needs and goals.</p>
620
+ </div>
621
+ <div class="services-grid">
622
+ <div class="service-card">
623
+ <div class="service-img">
624
+ <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Nutrition Counseling">
625
+ </div>
626
+ <div class="service-content">
627
+ <h3>Nutrition Counseling</h3>
628
+ <p>Personalized nutrition plans designed to help you achieve your health goals, manage weight, and improve overall wellness.</p>
629
+ <a href="#" class="btn">Learn More</a>
630
+ </div>
631
+ </div>
632
+ <div class="service-card">
633
+ <div class="service-img">
634
+ <img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Fitness Training">
635
+ </div>
636
+ <div class="service-content">
637
+ <h3>Fitness Training</h3>
638
+ <p>Customized workout programs for all fitness levels, from beginners to advanced athletes.</p>
639
+ <a href="#" class="btn">Learn More</a>
640
+ </div>
641
+ </div>
642
+ <div class="service-card">
643
+ <div class="service-img">
644
+ <img src="https://images.unsplash.com/photo-1591348278863-a8fb3887e2aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Mental Wellness">
645
+ </div>
646
+ <div class="service-content">
647
+ <h3>Mental Wellness</h3>
648
+ <p>Counseling and mindfulness practices to reduce stress, improve mental clarity, and enhance emotional wellbeing.</p>
649
+ <a href="#" class="btn">Learn More</a>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ </section>
655
+
656
+ <!-- Health Tips Section -->
657
+ <section class="tips" id="tips">
658
+ <div class="container">
659
+ <div class="section-title">
660
+ <h2>Health Tips</h2>
661
+ <p>Practical advice to help you maintain a healthy lifestyle.</p>
662
+ </div>
663
+ <div class="tips-grid">
664
+ <div class="tip-card">
665
+ <h3><i class="fas fa-apple-alt"></i> Balanced Nutrition</h3>
666
+ <p>Focus on a diet rich in fruits, vegetables, lean proteins, and whole grains. Limit processed foods and added sugars for optimal health.</p>
667
+ </div>
668
+ <div class="tip-card">
669
+ <h3><i class="fas fa-running"></i> Regular Exercise</h3>
670
+ <p>Aim for at least 150 minutes of moderate-intensity exercise per week to maintain cardiovascular health and muscle strength.</p>
671
+ </div>
672
+ <div class="tip-card">
673
+ <h3><i class="fas fa-bed"></i> Quality Sleep</h3>
674
+ <p>Prioritize 7-9 hours of quality sleep each night to support physical recovery, mental clarity, and overall wellbeing.</p>
675
+ </div>
676
+ <div class="tip-card">
677
+ <h3><i class="fas fa-tint"></i> Stay Hydrated</h3>
678
+ <p>Drink plenty of water throughout the day to maintain proper bodily functions, energy levels, and skin health.</p>
679
+ </div>
680
+ </div>
681
+ </div>
682
+ </section>
683
+
684
+ <!-- CTA Section -->
685
+ <section class="cta" id="get-started">
686
+ <div class="container">
687
+ <h2>Start Your Wellness Journey Today</h2>
688
+ <p>Take the first step towards a healthier, happier you with our personalized health and wellness programs.</p>
689
+ <a href="#contact" class="btn">Get Started</a>
690
+ </div>
691
+ </section>
692
+
693
+ <!-- Footer -->
694
+ <footer id="contact">
695
+ <div class="container">
696
+ <div class="footer-content">
697
+ <div class="footer-column">
698
+ <h3>Health & Wellness</h3>
699
+ <p>Your partner in achieving optimal health and wellbeing through personalized care and evidence-based practices.</p>
700
+ <div class="social-links">
701
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
702
+ <a href="#"><i class="fab fa-twitter"></i></a>
703
+ <a href="#"><i class="fab fa-instagram"></i></a>
704
+ <a href="#"><i class="fab fa-linkedin-in"></i></a>
705
+ </div>
706
+ </div>
707
+ <div class="footer-column">
708
+ <h3>Quick Links</h3>
709
+ <ul class="footer-links">
710
+ <li><a href="#home">Home</a></li>
711
+ <li><a href="#about">About Us</a></li>
712
+ <li><a href="#services">Services</a></li>
713
+ <li><a href="#tips">Health Tips</a></li>
714
+ <li><a href="#contact">Contact</a></li>
715
+ </ul>
716
+ </div>
717
+ <div class="footer-column">
718
+ <h3>Our Services</h3>
719
+ <ul class="footer-links">
720
+ <li><a href="#">Nutrition Counseling</a></li>
721
+ <li><a href="#">Fitness Training</a></li>
722
+ <li><a href="#">Mental Wellness</a></li>
723
+ <li><a href="#">Weight Management</a></li>
724
+ <li><a href="#">Health Screening</a></li>
725
+ </ul>
726
+ </div>
727
+ <div class="footer-column">
728
+ <h3>Contact Us</h3>
729
+ <p><i class="fas fa-map-marker-alt"></i> 123 Wellness Street, Health City</p>
730
+ <p><i class="fas fa-phone"></i> +1 (555) 123-4567</p>
731
+ <p><i class="fas fa-envelope"></i> info@healthwellness.com</p>
732
+ </div>
733
+ </div>
734
+ <div class="copyright">
735
+ <p>&copy; 2023 Health & Wellness. All rights reserved.</p>
736
+ </div>
737
+ </div>
738
+ </footer>
739
+
740
+ <script>
741
+ // Mobile Menu Toggle
742
+ document.querySelector('.mobile-menu').addEventListener('click', function() {
743
+ document.querySelector('nav ul').classList.toggle('active');
744
+ });
745
+
746
+ // Counter Animation
747
+ function animateCounters() {
748
+ const counters = document.querySelectorAll('.counter');
749
+ const speed = 200; // The lower the slower
750
+
751
+ counters.forEach(counter => {
752
+ const target = +counter.getAttribute('data-target');
753
+ const count = +counter.innerText;
754
+
755
+ const inc = target / speed;
756
+
757
+ if(count < target) {
758
+ counter.innerText = Math.ceil(count + inc);
759
+ setTimeout(animateCounters, 1);
760
+ } else {
761
+ counter.innerText = target;
762
+ }
763
+ });
764
+ }
765
+
766
+ // Initialize counters when page loads
767
+ window.addEventListener('load', animateCounters);
768
+
769
+ // Smooth scrolling for navigation links
770
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
771
+ anchor.addEventListener('click', function(e) {
772
+ e.preventDefault();
773
+
774
+ const targetId = this.getAttribute('href');
775
+ if(targetId === '#') return;
776
+
777
+ const targetElement = document.querySelector(targetId);
778
+ if(targetElement) {
779
+ window.scrollTo({
780
+ top: targetElement.offsetTop - 80,
781
+ behavior: 'smooth'
782
+ });
783
+
784
+ document.querySelector('nav ul').classList.remove('active');
785
+ }
786
+ });
787
+ });
788
+ </script>
789
+ </body>
790
+ </html>
package.json ADDED
@@ -0,0 +1,16 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "proxy-app",
3
+ "version": "1.0.0",
4
+ "description": "Proxy application for port forwarding",
5
+ "main": "index.js",
6
+ "dependencies": {
7
+ "express": "^4.18.2",
8
+ "axios": "^1.4.0",
9
+ "http-proxy": "^1.18.1",
10
+ "pm2": "^5.3.0"
11
+ },
12
+ "scripts": {
13
+ "start": "node index.js",
14
+ "dev": "pm2-runtime start index.js"
15
+ }
16
+ }