Hugging Face's logo

Spaces:
ssassxxaa002
/
testno
Paused

App Files Community
ssassxxaa002 commited on
Commit
a0b90ff
·
verified ·
1 Parent(s): 5f0d763

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +247 -665
index.html CHANGED
@@ -1,10 +1,9 @@
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;
@@ -12,777 +11,360 @@
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>
 
1
  <!DOCTYPE html>
2
+ <html lang="zh">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>和平 - Peace</title>
 
7
  <style>
8
  * {
9
  margin: 0;
 
11
  box-sizing: border-box;
12
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13
  }
14
+
 
 
 
 
 
 
 
 
 
 
 
 
15
  body {
16
+ background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
17
+ color: #333;
18
  line-height: 1.6;
19
+ min-height: 100vh;
20
+ display: flex;
21
+ flex-direction: column;
22
  }
23
+
24
  header {
25
+ background-color: rgba(255, 255, 255, 0.9);
26
+ padding: 1rem 2rem;
27
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
28
  position: sticky;
29
  top: 0;
30
  z-index: 100;
 
31
  }
32
+
33
+ .header-content {
 
34
  max-width: 1200px;
35
  margin: 0 auto;
 
 
 
36
  display: flex;
37
  justify-content: space-between;
38
  align-items: center;
39
  }
40
+
41
  .logo {
42
  display: flex;
43
  align-items: center;
44
  gap: 10px;
 
 
45
  }
46
+
47
+ .dove-icon {
48
  font-size: 2rem;
49
+ color: #4a90e2;
50
  }
51
+
52
+ h1 {
53
+ font-size: 1.8rem;
54
+ color: #2c3e50;
55
  }
56
+
57
+ .lang-switch {
58
+ display: flex;
59
+ gap: 10px;
60
  }
61
+
62
+ .lang-btn {
63
+ padding: 8px 15px;
64
+ border: none;
65
+ border-radius: 20px;
66
+ background-color: #f1f8ff;
67
+ color: #4a90e2;
68
+ cursor: pointer;
69
  transition: all 0.3s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
70
  }
71
+
72
+ .lang-btn.active {
73
+ background-color: #4a90e2;
74
+ color: white;
75
  }
76
+
77
  .hero {
 
 
 
 
 
 
78
  text-align: center;
79
+ padding: 4rem 2rem;
80
+ background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50,20 C60,20 70,30 70,40 C70,50 60,60 50,60 C40,60 30,50 30,40 C30,30 40,20 50,20 Z" fill="none" stroke="%234a90e2" stroke-width="2"/><path d="M40,35 L45,40 L60,25" fill="none" stroke="%234a90e2" stroke-width="2"/></svg>');
81
+ background-size: 200px;
82
  }
83
+
84
  .hero-content {
85
  max-width: 800px;
86
  margin: 0 auto;
87
  }
88
+
89
+ .hero h2 {
90
+ font-size: 2.5rem;
91
+ margin-bottom: 1.5rem;
92
+ color: #2c3e50;
93
  }
94
+
95
  .hero p {
96
+ font-size: 1.2rem;
97
  margin-bottom: 2rem;
98
+ color: #555;
99
  }
100
+
101
+ .content-section {
102
+ max-width: 1200px;
103
+ margin: 0 auto;
104
+ padding: 3rem 2rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  }
106
+
107
  .section-title {
108
  text-align: center;
109
+ margin-bottom: 2rem;
110
+ color: #2c3e50;
 
 
 
 
 
111
  position: relative;
 
112
  }
113
+
114
+ .section-title::after {
115
  content: '';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  display: block;
117
+ width: 80px;
118
+ height: 3px;
119
+ background-color: #4a90e2;
120
+ margin: 10px auto;
 
 
 
 
 
 
 
 
 
 
 
121
  }
122
+
123
+ .cards {
124
  display: grid;
125
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
126
  gap: 2rem;
 
127
  }
128
+
129
+ .card {
130
+ background-color: white;
 
 
131
  border-radius: 10px;
132
+ padding: 2rem;
133
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
134
  transition: transform 0.3s ease;
135
  }
136
+
137
+ .card:hover {
138
+ transform: translateY(-5px);
139
  }
140
+
141
+ .card-icon {
142
  font-size: 2.5rem;
143
+ color: #4a90e2;
144
  margin-bottom: 1rem;
145
  }
146
+
147
+ .card h3 {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
  margin-bottom: 1rem;
149
+ color: #2c3e50;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
150
  }
151
+
152
+ .quote-section {
153
+ background-color: #4a90e2;
154
+ color: white;
155
+ padding: 4rem 2rem;
156
+ text-align: center;
 
 
 
 
 
157
  }
158
+
159
+ .quote {
160
+ max-width: 800px;
161
+ margin: 0 auto;
162
  font-size: 1.5rem;
163
+ font-style: italic;
 
 
 
164
  }
165
+
166
+ .quote-author {
167
+ margin-top: 1rem;
168
+ font-weight: bold;
169
  }
170
+
171
+ .action-section {
 
 
172
  text-align: center;
173
+ padding: 3rem 2rem;
174
  }
175
+
176
+ .cta-button {
177
+ display: inline-block;
178
+ padding: 12px 30px;
179
+ background-color: #4a90e2;
180
+ color: white;
181
+ border-radius: 30px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
182
  text-decoration: none;
183
+ font-weight: bold;
184
  transition: all 0.3s ease;
185
+ border: 2px solid #4a90e2;
186
  }
187
+
188
+ .cta-button:hover {
189
+ background-color: white;
190
+ color: #4a90e2;
191
  }
192
+
193
+ footer {
194
+ background-color: #2c3e50;
195
+ color: white;
196
  text-align: center;
197
+ padding: 2rem;
198
+ margin-top: auto;
199
  }
200
+
201
+ .footer-content {
202
+ max-width: 1200px;
203
+ margin: 0 auto;
 
204
  }
205
+
206
+ /* 语言切换样式 */
207
+ .lang-en {
208
+ display: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
209
  }
210
+
211
+ /* 响应式设计 */
212
  @media (max-width: 768px) {
213
+ .header-content {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
214
  flex-direction: column;
215
+ gap: 15px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
  }
217
 
218
+ .hero h2 {
219
+ font-size: 2rem;
 
 
 
 
220
  }
221
 
222
+ .cards {
223
  grid-template-columns: 1fr;
224
  }
225
  }
 
 
 
 
 
226
  </style>
227
  </head>
228
  <body>
 
229
  <header>
230
+ <div class="header-content">
231
  <div class="logo">
232
+ <div class="dove-icon">🕊️</div>
233
+ <h1 class="lang-zh">和平</h1>
234
+ <h1 class="lang-en">Peace</h1>
235
+ </div>
236
+ <div class="lang-switch">
237
+ <button class="lang-btn active" data-lang="zh">中文</button>
238
+ <button class="lang-btn" data-lang="en">English</button>
239
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
240
  </div>
241
  </header>
242
+
243
+ <section class="hero">
244
+ <div class="hero-content">
245
+ <h2 class="lang-zh">和平 - 人类共同的梦想</h2>
246
+ <h2 class="lang-en">Peace - A Shared Dream of Humanity</h2>
247
+ <p class="lang-zh">和平不仅仅是没有战争，更是人类尊严、合作与繁荣的基石。</p>
248
+ <p class="lang-en">Peace is not just the absence of war, but the foundation of human dignity, cooperation, and prosperity.</p>
249
  </div>
250
  </section>
251
+
252
+ <section class="content-section">
253
+ <h2 class="section-title lang-zh">和平的重要性</h2>
254
+ <h2 class="section-title lang-en">The Importance of Peace</h2>
255
+
256
+ <div class="cards">
257
+ <div class="card">
258
+ <div class="card-icon">🌍</div>
259
+ <h3 class="lang-zh">全球稳定</h3>
260
+ <h3 class="lang-en">Global Stability</h3>
261
+ <p class="lang-zh">和平为各国发展提供了稳定的环境，促进经济增长和文化交流。</p>
262
+ <p class="lang-en">Peace provides a stable environment for national development, promoting economic growth and cultural exchange.</p>
263
  </div>
264
+
265
+ <div class="card">
266
+ <div class="card-icon">👨‍👩‍👧‍👦</div>
267
+ <h3 class="lang-zh">人类福祉</h3>
268
+ <h3 class="lang-en">Human Well-being</h3>
269
+ <p class="lang-zh">在和平的环境中，人们能够追求教育、健康和幸福生活。</p>
270
+ <p class="lang-en">In peaceful environments, people can pursue education, health, and a happy life.</p>
 
 
 
 
271
  </div>
272
+
273
+ <div class="card">
274
+ <div class="card-icon">🌱</div>
275
+ <h3 class="lang-zh">可持续发展</h3>
276
+ <h3 class="lang-en">Sustainable Development</h3>
277
+ <p class="lang-zh">和平是实现可持续发展目标的前提，确保资源的公平分配。</p>
278
+ <p class="lang-en">Peace is a prerequisite for achieving sustainable development goals, ensuring equitable distribution of resources.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
279
  </div>
280
  </div>
281
  </section>
282
+
283
+ <section class="quote-section">
284
+ <div class="quote lang-zh">
285
+ "和平不能靠武力来维持，它只能通过理解来实现。"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
286
  </div>
287
+ <div class="quote lang-en">
288
+ "Peace cannot be kept by force; it can only be achieved by understanding."
289
+ </div>
290
+ <div class="quote-author lang-zh">- 阿尔伯特·爱因斯坦</div>
291
+ <div class="quote-author lang-en">- Albert Einstein</div>
292
  </section>
293
+
294
+ <section class="content-section">
295
+ <h2 class="section-title lang-zh">如何促进和平</h2>
296
+ <h2 class="section-title lang-en">How to Promote Peace</h2>
297
+
298
+ <div class="cards">
299
+ <div class="card">
300
+ <div class="card-icon">🤝</div>
301
+ <h3 class="lang-zh">对话与理解</h3>
302
+ <h3 class="lang-en">Dialogue & Understanding</h3>
303
+ <p class="lang-zh">通过跨文化对话增进相互理解，减少误解和偏见。</p>
304
+ <p class="lang-en">Promote mutual understanding through cross-cultural dialogue to reduce misunderstandings and prejudices.</p>
305
  </div>
306
+
307
+ <div class="card">
308
+ <div class="card-icon">📚</div>
309
+ <h3 class="lang-zh">和平教育</h3>
310
+ <h3 class="lang-en">Peace Education</h3>
311
+ <p class="lang-zh">在学校和社区推广和平教育，培养下一代的和平价值观。</p>
312
+ <p class="lang-en">Promote peace education in schools and communities to cultivate peace values in the next generation.</p>
313
+ </div>
314
+
315
+ <div class="card">
316
+ <div class="card-icon">⚖️</div>
317
+ <h3 class="lang-zh">公正与平等</h3>
318
+ <h3 class="lang-en">Justice & Equality</h3>
319
+ <p class="lang-zh">建立公正的社会制度，确保所有人的权利和尊严得到尊重。</p>
320
+ <p class="lang-en">Establish just social systems to ensure that everyone's rights and dignity are respected.</p>
 
 
321
  </div>
322
  </div>
323
  </section>
324
+
325
+ <section class="action-section">
326
+ <h2 class="lang-zh" style="margin-bottom: 1.5rem;">加入和平行动</h2>
327
+ <h2 class="lang-en" style="margin-bottom: 1.5rem;">Join the Peace Movement</h2>
328
+ <p class="lang-zh" style="margin-bottom: 2rem;">每个人都可以为和平做出贡献，从小事做起，从身边做起。</p>
329
+ <p class="lang-en" style="margin-bottom: 2rem;">Everyone can contribute to peace, starting with small actions in their own communities.</p>
330
+ <a href="#" class="cta-button lang-zh">了解更多</a>
331
+ <a href="#" class="cta-button lang-en">Learn More</a>
332
  </section>
333
+
334
+ <footer>
335
+ <div class="footer-content">
336
+ <p class="lang-zh">© 2023 和平倡议 - 共创美好未来</p>
337
+ <p class="lang-en">© 2023 Peace Initiative - Creating a Better Future Together</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
338
  </div>
339
  </footer>
340
 
341
  <script>
342
+ // 语言切换功能
343
+ document.addEventListener('DOMContentLoaded', function() {
344
+ const langButtons = document.querySelectorAll('.lang-btn');
 
 
 
 
 
 
345
 
346
+ langButtons.forEach(button => {
347
+ button.addEventListener('click', function() {
348
+ // 移除所有按钮的active类
349
+ langButtons.forEach(btn => btn.classList.remove('active'));
350
+ // 为当前点击的按钮添加active类
351
+ this.classList.add('active');
352
+
353
+ // 获取选择的语言
354
+ const selectedLang = this.getAttribute('data-lang');
355
+
356
+ // 显示/隐藏对应语言的内容
357
+ const zhElements = document.querySelectorAll('.lang-zh');
358
+ const enElements = document.querySelectorAll('.lang-en');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
359
 
360
+ if (selectedLang === 'zh') {
361
+ zhElements.forEach(el => el.style.display = 'block');
362
+ enElements.forEach(el => el.style.display = 'none');
363
+ } else {
364
+ zhElements.forEach(el => el.style.display = 'none');
365
+ enElements.forEach(el => el.style.display = 'block');
366
+ }
367
+ });
368
  });
369
  });
370
  </script>