Hugging Face's logo

Spaces:
DimaFX
/
forest
Running

App Files Community
DimaFX commited on
Commit
20d3d9b
·
verified ·
1 Parent(s): 9b0605a

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +899 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Forest
3
- emoji: ⚡
4
- colorFrom: pink
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: forest
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,899 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Eternal Forest | Nature's Sanctuary</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ /* Base Styles */
10
+ :root {
11
+ --primary: #2e7d32;
12
+ --primary-dark: #1b5e20;
13
+ --primary-light: #81c784;
14
+ --secondary: #8d6e63;
15
+ --light: #f5f5f5;
16
+ --dark: #263238;
17
+ --text-dark: #37474f;
18
+ --text-light: #eceff1;
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
+ }
27
+
28
+ html {
29
+ scroll-behavior: smooth;
30
+ }
31
+
32
+ body {
33
+ background-color: var(--light);
34
+ color: var(--text-dark);
35
+ overflow-x: hidden;
36
+ }
37
+
38
+ /* Parallax Background */
39
+ .parallax {
40
+ height: 100vh;
41
+ background-attachment: fixed;
42
+ background-position: center;
43
+ background-repeat: no-repeat;
44
+ background-size: cover;
45
+ position: relative;
46
+ }
47
+
48
+ .parallax::before {
49
+ content: '';
50
+ position: absolute;
51
+ top: 0;
52
+ left: 0;
53
+ width: 100%;
54
+ height: 100%;
55
+ background-color: rgba(0, 0, 0, 0.4);
56
+ z-index: 1;
57
+ }
58
+
59
+ .parallax-inner {
60
+ position: relative;
61
+ z-index: 2;
62
+ height: 100%;
63
+ display: flex;
64
+ flex-direction: column;
65
+ justify-content: center;
66
+ align-items: center;
67
+ text-align: center;
68
+ color: white;
69
+ padding: 0 20px;
70
+ }
71
+
72
+ /* Typography */
73
+ h1 {
74
+ font-size: 4rem;
75
+ margin-bottom: 1rem;
76
+ letter-spacing: 2px;
77
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
78
+ opacity: 0;
79
+ transform: translateY(50px);
80
+ animation: fadeInUp 1s ease forwards 0.5s;
81
+ }
82
+
83
+ h2 {
84
+ font-size: 2.5rem;
85
+ margin-bottom: 1.5rem;
86
+ color: var(--primary-dark);
87
+ }
88
+
89
+ h3 {
90
+ font-size: 1.8rem;
91
+ margin-bottom: 1rem;
92
+ color: var(--primary);
93
+ }
94
+
95
+ p {
96
+ font-size: 1.1rem;
97
+ line-height: 1.6;
98
+ margin-bottom: 1.5rem;
99
+ }
100
+
101
+ .subtitle {
102
+ font-size: 1.5rem;
103
+ font-weight: 300;
104
+ margin-bottom: 2rem;
105
+ opacity: 0;
106
+ transform: translateY(50px);
107
+ animation: fadeInUp 1s ease forwards 0.8s;
108
+ max-width: 800px;
109
+ }
110
+
111
+ /* Header */
112
+ header {
113
+ position: fixed;
114
+ top: 0;
115
+ left: 0;
116
+ width: 100%;
117
+ padding: 20px 50px;
118
+ display: flex;
119
+ justify-content: space-between;
120
+ align-items: center;
121
+ z-index: 1000;
122
+ transition: all 0.5s ease;
123
+ }
124
+
125
+ header.scrolled {
126
+ background-color: rgba(46, 125, 50, 0.9);
127
+ padding: 15px 50px;
128
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
129
+ }
130
+
131
+ .logo {
132
+ font-size: 1.8rem;
133
+ font-weight: 700;
134
+ color: white;
135
+ text-decoration: none;
136
+ display: flex;
137
+ align-items: center;
138
+ }
139
+
140
+ .logo i {
141
+ margin-right: 10px;
142
+ font-size: 2.2rem;
143
+ }
144
+
145
+ nav ul {
146
+ display: flex;
147
+ list-style: none;
148
+ }
149
+
150
+ nav ul li {
151
+ margin-left: 30px;
152
+ }
153
+
154
+ nav ul li a {
155
+ color: white;
156
+ text-decoration: none;
157
+ font-weight: 500;
158
+ transition: all 0.3s ease;
159
+ padding: 5px 10px;
160
+ border-radius: 5px;
161
+ }
162
+
163
+ nav ul li a:hover {
164
+ background-color: rgba(255, 255, 255, 0.2);
165
+ }
166
+
167
+ /* Hero Section */
168
+ .hero {
169
+ background-image: url('https://images.unsplash.com/photo-1476231682828-37e571bc172f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
170
+ }
171
+
172
+ .btn {
173
+ display: inline-block;
174
+ padding: 12px 30px;
175
+ background-color: var(--primary);
176
+ color: white;
177
+ text-decoration: none;
178
+ border-radius: 30px;
179
+ font-weight: 600;
180
+ transition: all 0.3s ease;
181
+ border: 2px solid var(--primary);
182
+ opacity: 0;
183
+ transform: translateY(50px);
184
+ animation: fadeInUp 1s ease forwards 1s;
185
+ }
186
+
187
+ .btn:hover {
188
+ background-color: transparent;
189
+ color: white;
190
+ }
191
+
192
+ .btn-secondary {
193
+ background-color: transparent;
194
+ border-color: white;
195
+ margin-left: 20px;
196
+ }
197
+
198
+ .btn-secondary:hover {
199
+ background-color: white;
200
+ color: var(--primary);
201
+ }
202
+
203
+ /* Sections */
204
+ section {
205
+ padding: 100px 50px;
206
+ }
207
+
208
+ .section-title {
209
+ text-align: center;
210
+ margin-bottom: 60px;
211
+ }
212
+
213
+ .underline {
214
+ height: 3px;
215
+ width: 100px;
216
+ background-color: var(--primary);
217
+ margin: 10px auto 30px;
218
+ position: relative;
219
+ }
220
+
221
+ .underline::after {
222
+ content: '';
223
+ position: absolute;
224
+ left: 0;
225
+ top: -3px;
226
+ height: 9px;
227
+ width: 9px;
228
+ background-color: var(--primary);
229
+ border-radius: 50%;
230
+ animation: dotMove 2s infinite ease-in-out;
231
+ }
232
+
233
+ /* Features */
234
+ .features {
235
+ display: flex;
236
+ flex-wrap: wrap;
237
+ justify-content: center;
238
+ gap: 30px;
239
+ margin-top: 50px;
240
+ }
241
+
242
+ .feature-card {
243
+ flex: 1 1 300px;
244
+ max-width: 350px;
245
+ background-color: white;
246
+ border-radius: 10px;
247
+ padding: 30px;
248
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
249
+ transition: all 0.3s ease;
250
+ text-align: center;
251
+ }
252
+
253
+ .feature-card:hover {
254
+ transform: translateY(-10px);
255
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
256
+ }
257
+
258
+ .feature-icon {
259
+ font-size: 3rem;
260
+ color: var(--primary);
261
+ margin-bottom: 20px;
262
+ }
263
+
264
+ /* Gallery */
265
+ .gallery {
266
+ background-color: var(--primary-light);
267
+ }
268
+
269
+ .gallery-grid {
270
+ display: grid;
271
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
272
+ gap: 20px;
273
+ }
274
+
275
+ .gallery-item {
276
+ height: 250px;
277
+ overflow: hidden;
278
+ border-radius: 10px;
279
+ position: relative;
280
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
281
+ transition: all 0.3s ease;
282
+ }
283
+
284
+ .gallery-item:hover {
285
+ transform: scale(1.03);
286
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
287
+ }
288
+
289
+ .gallery-item img {
290
+ width: 100%;
291
+ height: 100%;
292
+ object-fit: cover;
293
+ transition: all 0.5s ease;
294
+ }
295
+
296
+ .gallery-item:hover img {
297
+ transform: scale(1.1);
298
+ }
299
+
300
+ .gallery-caption {
301
+ position: absolute;
302
+ bottom: 0;
303
+ left: 0;
304
+ width: 100%;
305
+ padding: 20px;
306
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
307
+ color: white;
308
+ opacity: 0;
309
+ transition: all 0.3s ease;
310
+ transform: translateY(20px);
311
+ }
312
+
313
+ .gallery-item:hover .gallery-caption {
314
+ opacity: 1;
315
+ transform: translateY(0);
316
+ }
317
+
318
+ /* Testimonials */
319
+ .testimonials {
320
+ background-color: var(--light);
321
+ }
322
+
323
+ .testimonial-slider {
324
+ max-width: 800px;
325
+ margin: 0 auto;
326
+ position: relative;
327
+ }
328
+
329
+ .testimonial {
330
+ padding: 30px;
331
+ background-color: white;
332
+ border-radius: 10px;
333
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
334
+ text-align: center;
335
+ display: none;
336
+ }
337
+
338
+ .testimonial.active {
339
+ display: block;
340
+ animation: fadeIn 0.5s ease;
341
+ }
342
+
343
+ .testimonial-content {
344
+ margin-bottom: 20px;
345
+ font-style: italic;
346
+ position: relative;
347
+ }
348
+
349
+ .testimonial-content::before,
350
+ .testimonial-content::after {
351
+ content: '"';
352
+ font-size: 2rem;
353
+ color: var(--primary-light);
354
+ position: absolute;
355
+ }
356
+
357
+ .testimonial-content::before {
358
+ top: -15px;
359
+ left: 0;
360
+ }
361
+
362
+ .testimonial-content::after {
363
+ bottom: -30px;
364
+ right: 0;
365
+ }
366
+
367
+ .testimonial-author {
368
+ display: flex;
369
+ align-items: center;
370
+ justify-content: center;
371
+ }
372
+
373
+ .author-img {
374
+ width: 60px;
375
+ height: 60px;
376
+ border-radius: 50%;
377
+ overflow: hidden;
378
+ margin-right: 15px;
379
+ border: 3px solid var(--primary);
380
+ }
381
+
382
+ .author-img img {
383
+ width: 100%;
384
+ height: 100%;
385
+ object-fit: cover;
386
+ }
387
+
388
+ .author-info {
389
+ text-align: left;
390
+ }
391
+
392
+ .author-name {
393
+ font-weight: 700;
394
+ color: var(--primary-dark);
395
+ }
396
+
397
+ .author-title {
398
+ font-size: 0.9rem;
399
+ color: var(--text-dark);
400
+ opacity: 0.7;
401
+ }
402
+
403
+ .slider-nav {
404
+ display: flex;
405
+ justify-content: center;
406
+ margin-top: 30px;
407
+ }
408
+
409
+ .slider-dot {
410
+ width: 12px;
411
+ height: 12px;
412
+ border-radius: 50%;
413
+ background-color: var(--primary-light);
414
+ margin: 0 5px;
415
+ cursor: pointer;
416
+ transition: all 0.3s ease;
417
+ }
418
+
419
+ .slider-dot.active {
420
+ background-color: var(--primary-dark);
421
+ transform: scale(1.2);
422
+ }
423
+
424
+ /* CTA */
425
+ .cta {
426
+ background-image: url('https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
427
+ text-align: center;
428
+ color: white;
429
+ }
430
+
431
+ .cta h2 {
432
+ color: white;
433
+ margin-bottom: 30px;
434
+ }
435
+
436
+ /* Footer */
437
+ footer {
438
+ background-color: var(--dark);
439
+ color: var(--text-light);
440
+ padding: 70px 50px 30px;
441
+ }
442
+
443
+ .footer-content {
444
+ display: flex;
445
+ flex-wrap: wrap;
446
+ justify-content: space-between;
447
+ margin-bottom: 50px;
448
+ }
449
+
450
+ .footer-column {
451
+ flex: 1 1 250px;
452
+ margin-bottom: 30px;
453
+ }
454
+
455
+ .footer-column h3 {
456
+ color: var(--primary-light);
457
+ margin-bottom: 20px;
458
+ font-size: 1.3rem;
459
+ }
460
+
461
+ .footer-column ul {
462
+ list-style: none;
463
+ }
464
+
465
+ .footer-column ul li {
466
+ margin-bottom: 10px;
467
+ }
468
+
469
+ .footer-column ul li a {
470
+ color: var(--text-light);
471
+ text-decoration: none;
472
+ transition: all 0.3s ease;
473
+ opacity: 0.8;
474
+ }
475
+
476
+ .footer-column ul li a:hover {
477
+ opacity: 1;
478
+ padding-left: 5px;
479
+ }
480
+
481
+ .social-links {
482
+ display: flex;
483
+ gap: 15px;
484
+ margin-top: 20px;
485
+ }
486
+
487
+ .social-links a {
488
+ display: flex;
489
+ align-items: center;
490
+ justify-content: center;
491
+ width: 40px;
492
+ height: 40px;
493
+ background-color: var(--primary);
494
+ border-radius: 50%;
495
+ color: white;
496
+ text-decoration: none;
497
+ transition: all 0.3s ease;
498
+ }
499
+
500
+ .social-links a:hover {
501
+ transform: translateY(-5px);
502
+ background-color: var(--primary-light);
503
+ }
504
+
505
+ .copyright {
506
+ text-align: center;
507
+ padding-top: 20px;
508
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
509
+ opacity: 0.6;
510
+ }
511
+
512
+ /* Animations */
513
+ @keyframes fadeInUp {
514
+ from {
515
+ opacity: 0;
516
+ transform: translateY(50px);
517
+ }
518
+ to {
519
+ opacity: 1;
520
+ transform: translateY(0);
521
+ }
522
+ }
523
+
524
+ @keyframes fadeIn {
525
+ from {
526
+ opacity: 0;
527
+ }
528
+ to {
529
+ opacity: 1;
530
+ }
531
+ }
532
+
533
+ @keyframes dotMove {
534
+ 0%, 100% {
535
+ left: 0;
536
+ }
537
+ 50% {
538
+ left: calc(100% - 9px);
539
+ }
540
+ }
541
+
542
+ /* Responsive */
543
+ @media (max-width: 768px) {
544
+ h1 {
545
+ font-size: 2.5rem;
546
+ }
547
+
548
+ .subtitle {
549
+ font-size: 1.2rem;
550
+ }
551
+
552
+ header {
553
+ padding: 15px 20px;
554
+ }
555
+
556
+ nav ul li {
557
+ margin-left: 15px;
558
+ }
559
+
560
+ section {
561
+ padding: 70px 20px;
562
+ }
563
+
564
+ .btn-container {
565
+ display: flex;
566
+ flex-direction: column;
567
+ gap: 15px;
568
+ }
569
+
570
+ .btn {
571
+ width: 100%;
572
+ margin-left: 0;
573
+ }
574
+
575
+ .feature-card {
576
+ flex: 1 1 100%;
577
+ }
578
+ }
579
+ </style>
580
+ </head>
581
+ <body>
582
+ <!-- Header -->
583
+ <header>
584
+ <a href="#" class="logo"><i class="fas fa-tree"></i> Eternal Forest</a>
585
+ <nav>
586
+ <ul>
587
+ <li><a href="#about">About</a></li>
588
+ <li><a href="#features">Features</a></li>
589
+ <li><a href="#gallery">Gallery</a></li>
590
+ <li><a href="#testimonials">Testimonials</a></li>
591
+ <li><a href="#contact">Contact</a></li>
592
+ </ul>
593
+ </nav>
594
+ </header>
595
+
596
+ <!-- Hero Section -->
597
+ <section class="parallax hero">
598
+ <div class="parallax-inner">
599
+ <h1>Discover the Magic of Eternal Forest</h1>
600
+ <p class="subtitle">Immerse yourself in nature's wonderland where ancient trees whisper secrets and wildlife thrives in harmony</p>
601
+ <div class="btn-container">
602
+ <a href="#about" class="btn">Explore More</a>
603
+ <a href="#" class="btn btn-secondary">Plan Your Visit</a>
604
+ </div>
605
+ </div>
606
+ </section>
607
+
608
+ <!-- About Section -->
609
+ <section id="about">
610
+ <div class="section-title">
611
+ <h2>Our Ancient Woodland</h2>
612
+ <div class="underline"></div>
613
+ </div>
614
+ <p>Eternal Forest spans over 50,000 acres of pristine wilderness, home to ancient oaks that have stood for centuries and a rich ecosystem that supports countless species. Our forest is a living museum, where every tree has a story to tell and every path leads to discovery.</p>
615
+ <p>Established in 1892 as a protected sanctuary, Eternal Forest has been carefully preserved to maintain its natural beauty while allowing visitors to experience the healing power of nature. The forest is a designated UNESCO Biosphere Reserve, recognized for its unique biodiversity and conservation efforts.</p>
616
+ </section>
617
+
618
+ <!-- Features Section -->
619
+ <section id="features" class="bg-light">
620
+ <div class="section-title">
621
+ <h2>Forest Features</h2>
622
+ <div class="underline"></div>
623
+ </div>
624
+ <div class="features">
625
+ <div class="feature-card">
626
+ <div class="feature-icon">
627
+ <i class="fas fa-hiking"></i>
628
+ </div>
629
+ <h3>Trails & Hikes</h3>
630
+ <p>Explore over 200 miles of well-maintained trails ranging from easy walks to challenging backcountry routes. Our trails are designed to immerse you in nature while preserving the delicate ecosystem.</p>
631
+ </div>
632
+ <div class="feature-card">
633
+ <div class="feature-icon">
634
+ <i class="fas fa-binoculars"></i>
635
+ </div>
636
+ <h3>Wildlife Watching</h3>
637
+ <p>Home to over 300 bird species, 50 mammal species, and countless insects and reptiles. Our wildlife observation decks offer perfect vantage points to observe nature without disturbance.</p>
638
+ </div>
639
+ <div class="feature-card">
640
+ <div class="feature-icon">
641
+ <i class="fas fa-graduation-cap"></i>
642
+ </div>
643
+ <h3>Education Programs</h3>
644
+ <p>Daily guided tours, night walks, school programs, and expert-led workshops teach visitors of all ages about forest ecology, conservation efforts, and sustainable practices.</p>
645
+ </div>
646
+ </div>
647
+ </section>
648
+
649
+ <!-- Gallery Section -->
650
+ <section id="gallery" class="gallery">
651
+ <div class="section-title">
652
+ <h2>Forest Gallery</h2>
653
+ <div class="underline"></div>
654
+ </div>
655
+ <div class="gallery-grid">
656
+ <div class="gallery-item">
657
+ <img src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Forest path">
658
+ <div class="gallery-caption">
659
+ <h3>Sunlit Trails</h3>
660
+ <p>Morning light filtering through ancient oaks</p>
661
+ </div>
662
+ </div>
663
+ <div class="gallery-item">
664
+ <img src="https://images.unsplash.com/photo-1476231682828-37e571bc172f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Dense forest">
665
+ <div class="gallery-caption">
666
+ <h3>Ancient Woodland</h3>
667
+ <p>Our oldest section with 500-year-old trees</p>
668
+ </div>
669
+ </div>
670
+ <div class="gallery-item">
671
+ <img src="https://images.unsplash.com/photo-1588392382834-a891154bca4d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Forest stream">
672
+ <div class="gallery-caption">
673
+ <h3>Crystal Waters</h3>
674
+ <p>Pristine streams nourish the ecosystem</p>
675
+ </div>
676
+ </div>
677
+ <div class="gallery-item">
678
+ <img src="https://images.unsplash.com/photo-1470114716159-e389f8712fda?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Autumn forest">
679
+ <div class="gallery-caption">
680
+ <h3>Seasonal Colors</h3>
681
+ <p>The forest transforms with each season</p>
682
+ </div>
683
+ </div>
684
+ <div class="gallery-item">
685
+ <img src="https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Misty forest">
686
+ <div class="gallery-caption">
687
+ <h3>Mystical Mornings</h3>
688
+ <p>Early morning fog creates magical scenes</p>
689
+ </div>
690
+ </div>
691
+ <div class="gallery-item">
692
+ <img src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Mushrooms">
693
+ <div class="gallery-caption">
694
+ <h3>Micro Worlds</h3>
695
+ <p>Discover the tiny ecosystems beneath our feet</p>
696
+ </div>
697
+ </div>
698
+ </div>
699
+ </section>
700
+
701
+ <!-- Testimonials Section -->
702
+ <section id="testimonials" class="testimonials">
703
+ <div class="section-title">
704
+ <h2>Visitor Experiences</h2>
705
+ <div class="underline"></div>
706
+ </div>
707
+ <div class="testimonial-slider">
708
+ <div class="testimonial active">
709
+ <div class="testimonial-content">
710
+ Visiting Eternal Forest changed my perspective on nature. The ancient trees seem to whisper wisdom if you listen closely. The guided night walk was particularly magical, revealing an entire world that comes alive after dark.
711
+ </div>
712
+ <div class="testimonial-author">
713
+ <div class="author-img">
714
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sarah Johnson">
715
+ </div>
716
+ <div class="author-info">
717
+ <div class="author-name">Sarah Johnson</div>
718
+ <div class="author-title">Nature Photographer</div>
719
+ </div>
720
+ </div>
721
+ </div>
722
+ <div class="testimonial">
723
+ <div class="testimonial-content">
724
+ As a biologist, I've visited many forests worldwide, but Eternal Forest stands out for its remarkable biodiversity. The conservation programs here are exemplary. I spotted three rare bird species in just one morning!
725
+ </div>
726
+ <div class="testimonial-author">
727
+ <div class="author-img">
728
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Dr. Michael Chen">
729
+ </div>
730
+ <div class="author-info">
731
+ <div class="author-name">Dr. Michael Chen</div>
732
+ <div class="author-title">Ecologist</div>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ <div class="testimonial">
737
+ <div class="testimonial-content">
738
+ Our family visits Eternal Forest every season to witness nature's changes. The children's education programs are fantastic - my kids now know more about forest ecology than I do! The accessibility of trails means everyone can enjoy this treasure.
739
+ </div>
740
+ <div class="testimonial-author">
741
+ <div class="author-img">
742
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="The Patel Family">
743
+ </div>
744
+ <div class="author-info">
745
+ <div class="author-name">The Patel Family</div>
746
+ <div class="author-title">Regular Visitors</div>
747
+ </div>
748
+ </div>
749
+ </div>
750
+ <div class="slider-nav">
751
+ <div class="slider-dot active" data-index="0"></div>
752
+ <div class="slider-dot" data-index="1"></div>
753
+ <div class="slider-dot" data-index="2"></div>
754
+ </div>
755
+ </div>
756
+ </section>
757
+
758
+ <!-- CTA Section -->
759
+ <section class="parallax cta">
760
+ <div class="parallax-inner">
761
+ <h2>Ready to Experience Eternal Forest?</h2>
762
+ <p>Plan your visit today and immerse yourself in nature's grandeur.</p>
763
+ <a href="#" class="btn">Book Your Visit</a>
764
+ </div>
765
+ </section>
766
+
767
+ <!-- Contact Section -->
768
+ <section id="contact">
769
+ <div class="section-title">
770
+ <h2>Get in Touch</h2>
771
+ <div class="underline"></div>
772
+ </div>
773
+ <p>Have questions about visiting Eternal Forest or want to learn more about our conservation efforts? We'd love to hear from you. Use the form below to connect with our team, or check out our FAQ page for quick answers to common questions.</p>
774
+ <form style="max-width: 600px; margin: 30px auto;">
775
+ <div style="margin-bottom: 20px;">
776
+ <input type="text" placeholder="Your Name" style="width: 100%; padding: 12px 15px; border-radius: 5px; border: 1px solid #ddd; font-size: 1rem;">
777
+ </div>
778
+ <div style="margin-bottom: 20px;">
779
+ <input type="email" placeholder="Your Email" style="width: 100%; padding: 12px 15px; border-radius: 5px; border: 1px solid #ddd; font-size: 1rem;">
780
+ </div>
781
+ <div style="margin-bottom: 20px;">
782
+ <textarea placeholder="Your Message" rows="5" style="width: 100%; padding: 12px 15px; border-radius: 5px; border: 1px solid #ddd; font-size: 1rem;"></textarea>
783
+ </div>
784
+ <button type="submit" style="background-color: var(--primary); color: white; padding: 12px 30px; border: none; border-radius: 30px; font-weight: 600; cursor: pointer; transition: all 0.3s ease;">Send Message</button>
785
+ </form>
786
+ </section>
787
+
788
+ <!-- Footer -->
789
+ <footer>
790
+ <div class="footer-content">
791
+ <div class="footer-column">
792
+ <h3>About Eternal Forest</h3>
793
+ <p>Dedicated to preserving ancient woodland and educating visitors about sustainable coexistence with nature since 1892.</p>
794
+ <div class="social-links">
795
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
796
+ <a href="#"><i class="fab fa-twitter"></i></a>
797
+ <a href="#"><i class="fab fa-instagram"></i></a>
798
+ <a href="#"><i class="fab fa-youtube"></i></a>
799
+ </div>
800
+ </div>
801
+ <div class="footer-column">
802
+ <h3>Quick Links</h3>
803
+ <ul>
804
+ <li><a href="#">Home</a></li>
805
+ <li><a href="#about">About</a></li>
806
+ <li><a href="#features">Features</a></li>
807
+ <li><a href="#gallery">Gallery</a></li>
808
+ <li><a href="#testimonials">Testimonials</a></li>
809
+ <li><a href="#contact">Contact</a></li>
810
+ </ul>
811
+ </div>
812
+ <div class="footer-column">
813
+ <h3>Visitor Info</h3>
814
+ <ul>
815
+ <li><a href="#">Hours & Admission</a></li>
816
+ <li><a href="#">Map & Directions</a></li>
817
+ <li><a href="#">Accessibility</a></li>
818
+ <li><a href="#">Visitor Guidelines</a></li>
819
+ <li><a href="#">Events Calendar</a></li>
820
+ <li><a href="#">FAQs</a></li>
821
+ </ul>
822
+ </div>
823
+ <div class="footer-column">
824
+ <h3>Conservation</h3>
825
+ <ul>
826
+ <li><a href="#">Research Programs</a></li>
827
+ <li><a href="#">Volunteer Opportunities</a></li>
828
+ <li><a href="#">Donation Options</a></li>
829
+ <li><a href="#">Species Protection</a></li>
830
+ <li><a href="#">Sustainability Plans</a></li>
831
+ </ul>
832
+ </div>
833
+ </div>
834
+ <div class="copyright">
835
+ <p>&copy; 2023 Eternal Forest Nature Reserve. All Rights Reserved.</p>
836
+ </div>
837
+ </footer>
838
+
839
+ <script>
840
+ // Header scroll effect
841
+ window.addEventListener('scroll', function() {
842
+ const header = document.querySelector('header');
843
+ header.classList.toggle('scrolled', window.scrollY > 50);
844
+ });
845
+
846
+ // Testimonial slider
847
+ const testimonials = document.querySelectorAll('.testimonial');
848
+ const dots = document.querySelectorAll('.slider-dot');
849
+
850
+ dots.forEach(dot => {
851
+ dot.addEventListener('click', function() {
852
+ const index = this.getAttribute('data-index');
853
+
854
+ // Remove active classes
855
+ testimonials.forEach(testimonial => testimonial.classList.remove('active'));
856
+ dots.forEach(dot => dot.classList.remove('active'));
857
+
858
+ // Add active classes
859
+ testimonials[index].classList.add('active');
860
+ this.classList.add('active');
861
+ });
862
+ });
863
+
864
+ // Auto rotate testimonials
865
+ let currentTestimonial = 0;
866
+ function rotateTestimonials() {
867
+ currentTestimonial = (currentTestimonial + 1) % testimonials.length;
868
+
869
+ // Remove active classes
870
+ testimonials.forEach(testimonial => testimonial.classList.remove('active'));
871
+ dots.forEach(dot => dot.classList.remove('active'));
872
+
873
+ // Add active classes
874
+ testimonials[currentTestimonial].classList.add('active');
875
+ dots[currentTestimonial].classList.add('active');
876
+ }
877
+
878
+ setInterval(rotateTestimonials, 5000);
879
+
880
+ // Smooth scroll for navigation
881
+ document.querySelectorAll('nav ul li a').forEach(anchor => {
882
+ anchor.addEventListener('click', function(e) {
883
+ e.preventDefault();
884
+
885
+ const targetId = this.getAttribute('href');
886
+ if(targetId === '#') return;
887
+
888
+ const targetElement = document.querySelector(targetId);
889
+ if(targetElement) {
890
+ window.scrollTo({
891
+ top: targetElement.offsetTop - 80,
892
+ behavior: 'smooth'
893
+ });
894
+ }
895
+ });
896
+ });
897
+ </script>
898
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
899
+ </html>