Hugging Face's logo

Spaces:
nkjoy
/
anycoder-0550837d
Running

App Files Community
nkjoy commited on
Commit
c01c7e0
ยท
verified ยท
1 Parent(s): 0ceca12

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1090 -19
index.html CHANGED
@@ -1,19 +1,1090 @@
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="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ํ•˜๋Š˜์˜ˆ์ˆ ๋‹จ | ์˜ํ˜ผ์„ ์šธ๋ฆฌ๋Š” ์˜ˆ์ˆ ์˜ ํ–ฅ์—ฐ</title>
7
+
8
+ <!-- Google Fonts: Noto Sans KR -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
12
+
13
+ <!-- Remix Icons -->
14
+ <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
15
+
16
+ <style>
17
+ /* --- CSS Variables & Reset --- */
18
+ :root {
19
+ --bg-color: #0f0f11;
20
+ --surface-color: #1a1a1e;
21
+ --surface-hover: #25252a;
22
+ --primary-color: #7c4dff;
23
+ --secondary-color: #ff4081;
24
+ --text-main: #ffffff;
25
+ --text-muted: #b0b0b0;
26
+ --font-main: 'Noto Sans KR', sans-serif;
27
+ --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
28
+ --container-width: 1200px;
29
+ --header-height: 80px;
30
+ }
31
+
32
+ * {
33
+ margin: 0;
34
+ padding: 0;
35
+ box-sizing: border-box;
36
+ }
37
+
38
+ html {
39
+ scroll-behavior: smooth;
40
+ }
41
+
42
+ body {
43
+ font-family: var(--font-main);
44
+ background-color: var(--bg-color);
45
+ color: var(--text-main);
46
+ line-height: 1.6;
47
+ overflow-x: hidden;
48
+ }
49
+
50
+ a {
51
+ text-decoration: none;
52
+ color: inherit;
53
+ transition: var(--transition);
54
+ }
55
+
56
+ ul {
57
+ list-style: none;
58
+ }
59
+
60
+ img {
61
+ max-width: 100%;
62
+ display: block;
63
+ object-fit: cover;
64
+ }
65
+
66
+ /* --- Utility Classes --- */
67
+ .container {
68
+ max-width: var(--container-width);
69
+ margin: 0 auto;
70
+ padding: 0 20px;
71
+ }
72
+
73
+ .section-title {
74
+ font-size: 2.5rem;
75
+ font-weight: 700;
76
+ text-align: center;
77
+ margin-bottom: 1rem;
78
+ background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
79
+ -webkit-background-clip: text;
80
+ -webkit-text-fill-color: transparent;
81
+ }
82
+
83
+ .section-subtitle {
84
+ text-align: center;
85
+ color: var(--text-muted);
86
+ margin-bottom: 4rem;
87
+ font-size: 1.1rem;
88
+ }
89
+
90
+ .btn {
91
+ display: inline-block;
92
+ padding: 12px 30px;
93
+ border-radius: 50px;
94
+ font-weight: 500;
95
+ cursor: pointer;
96
+ border: none;
97
+ transition: var(--transition);
98
+ }
99
+
100
+ .btn-primary {
101
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
102
+ color: white;
103
+ box-shadow: 0 4px 15px rgba(124, 77, 255, 0.4);
104
+ }
105
+
106
+ .btn-primary:hover {
107
+ transform: translateY(-3px);
108
+ box-shadow: 0 8px 25px rgba(124, 77, 255, 0.6);
109
+ }
110
+
111
+ .btn-outline {
112
+ background: transparent;
113
+ border: 2px solid white;
114
+ color: white;
115
+ }
116
+
117
+ .btn-outline:hover {
118
+ background: white;
119
+ color: var(--bg-color);
120
+ }
121
+
122
+ /* --- Header --- */
123
+ header {
124
+ position: fixed;
125
+ top: 0;
126
+ left: 0;
127
+ width: 100%;
128
+ height: var(--header-height);
129
+ background: rgba(15, 15, 17, 0.85);
130
+ backdrop-filter: blur(10px);
131
+ z-index: 1000;
132
+ display: flex;
133
+ align-items: center;
134
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
135
+ }
136
+
137
+ .nav-container {
138
+ display: flex;
139
+ justify-content: space-between;
140
+ align-items: center;
141
+ width: 100%;
142
+ }
143
+
144
+ .logo {
145
+ font-size: 1.8rem;
146
+ font-weight: 900;
147
+ letter-spacing: -1px;
148
+ display: flex;
149
+ align-items: center;
150
+ gap: 10px;
151
+ }
152
+
153
+ .logo i {
154
+ color: var(--secondary-color);
155
+ }
156
+
157
+ .nav-links {
158
+ display: flex;
159
+ gap: 40px;
160
+ }
161
+
162
+ .nav-links a {
163
+ font-size: 1rem;
164
+ font-weight: 500;
165
+ color: var(--text-muted);
166
+ position: relative;
167
+ }
168
+
169
+ .nav-links a:hover, .nav-links a.active {
170
+ color: var(--text-main);
171
+ }
172
+
173
+ .nav-links a::after {
174
+ content: '';
175
+ position: absolute;
176
+ bottom: -5px;
177
+ left: 0;
178
+ width: 0;
179
+ height: 2px;
180
+ background: var(--secondary-color);
181
+ transition: var(--transition);
182
+ }
183
+
184
+ .nav-links a:hover::after {
185
+ width: 100%;
186
+ }
187
+
188
+ .anycoder-credit {
189
+ font-size: 0.85rem;
190
+ color: var(--text-muted);
191
+ margin-left: 20px;
192
+ padding-left: 20px;
193
+ border-left: 1px solid rgba(255,255,255,0.1);
194
+ }
195
+
196
+ .anycoder-credit:hover {
197
+ color: var(--primary-color);
198
+ }
199
+
200
+ .menu-toggle {
201
+ display: none;
202
+ font-size: 1.5rem;
203
+ cursor: pointer;
204
+ color: var(--text-main);
205
+ }
206
+
207
+ /* --- Hero Section --- */
208
+ .hero {
209
+ height: 100vh;
210
+ display: flex;
211
+ align-items: center;
212
+ justify-content: center;
213
+ position: relative;
214
+ background: url('https://picsum.photos/seed/artshero/1920/1080') no-repeat center center/cover;
215
+ padding-top: var(--header-height);
216
+ }
217
+
218
+ .hero::before {
219
+ content: '';
220
+ position: absolute;
221
+ top: 0;
222
+ left: 0;
223
+ width: 100%;
224
+ height: 100%;
225
+ background: linear-gradient(to bottom, rgba(15,15,17,0.3), var(--bg-color));
226
+ }
227
+
228
+ .hero-content {
229
+ position: relative;
230
+ z-index: 1;
231
+ text-align: center;
232
+ max-width: 800px;
233
+ padding: 0 20px;
234
+ }
235
+
236
+ .hero-title {
237
+ font-size: 4rem;
238
+ font-weight: 900;
239
+ margin-bottom: 1.5rem;
240
+ line-height: 1.2;
241
+ opacity: 0;
242
+ transform: translateY(30px);
243
+ animation: fadeUp 1s ease forwards 0.5s;
244
+ }
245
+
246
+ .hero-desc {
247
+ font-size: 1.25rem;
248
+ color: #d0d0d0;
249
+ margin-bottom: 2.5rem;
250
+ opacity: 0;
251
+ transform: translateY(30px);
252
+ animation: fadeUp 1s ease forwards 0.7s;
253
+ }
254
+
255
+ .hero-btns {
256
+ opacity: 0;
257
+ transform: translateY(30px);
258
+ animation: fadeUp 1s ease forwards 0.9s;
259
+ }
260
+
261
+ @keyframes fadeUp {
262
+ to {
263
+ opacity: 1;
264
+ transform: translateY(0);
265
+ }
266
+ }
267
+
268
+ /* --- About Section --- */
269
+ .about {
270
+ padding: 100px 0;
271
+ background-color: var(--bg-color);
272
+ }
273
+
274
+ .about-content {
275
+ display: grid;
276
+ grid-template-columns: 1fr 1fr;
277
+ gap: 60px;
278
+ align-items: center;
279
+ }
280
+
281
+ .about-img-wrapper {
282
+ position: relative;
283
+ border-radius: 20px;
284
+ overflow: hidden;
285
+ box-shadow: 0 20px 40px rgba(0,0,0,0.4);
286
+ }
287
+
288
+ .about-img-wrapper img {
289
+ width: 100%;
290
+ height: auto;
291
+ transition: transform 0.5s ease;
292
+ }
293
+
294
+ .about-img-wrapper:hover img {
295
+ transform: scale(1.05);
296
+ }
297
+
298
+ .about-text h3 {
299
+ font-size: 2rem;
300
+ margin-bottom: 1.5rem;
301
+ }
302
+
303
+ .about-text p {
304
+ color: var(--text-muted);
305
+ margin-bottom: 1.5rem;
306
+ font-size: 1.05rem;
307
+ }
308
+
309
+ .stats {
310
+ display: flex;
311
+ gap: 40px;
312
+ margin-top: 2rem;
313
+ }
314
+
315
+ .stat-item h4 {
316
+ font-size: 2.5rem;
317
+ color: var(--primary-color);
318
+ font-weight: 700;
319
+ }
320
+
321
+ .stat-item span {
322
+ color: var(--text-muted);
323
+ font-size: 0.9rem;
324
+ }
325
+
326
+ /* --- Performances Section --- */
327
+ .performances {
328
+ padding: 100px 0;
329
+ background-color: var(--surface-color);
330
+ }
331
+
332
+ .performance-grid {
333
+ display: grid;
334
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
335
+ gap: 30px;
336
+ }
337
+
338
+ .card {
339
+ background-color: var(--bg-color);
340
+ border-radius: 15px;
341
+ overflow: hidden;
342
+ transition: var(--transition);
343
+ border: 1px solid rgba(255,255,255,0.05);
344
+ position: relative;
345
+ }
346
+
347
+ .card:hover {
348
+ transform: translateY(-10px);
349
+ box-shadow: 0 15px 30px rgba(0,0,0,0.3);
350
+ border-color: rgba(124, 77, 255, 0.3);
351
+ }
352
+
353
+ .card-image {
354
+ height: 250px;
355
+ width: 100%;
356
+ position: relative;
357
+ overflow: hidden;
358
+ }
359
+
360
+ .card-image img {
361
+ width: 100%;
362
+ height: 100%;
363
+ transition: transform 0.5s ease;
364
+ }
365
+
366
+ .card:hover .card-image img {
367
+ transform: scale(1.1);
368
+ }
369
+
370
+ .card-tag {
371
+ position: absolute;
372
+ top: 15px;
373
+ right: 15px;
374
+ background: rgba(0,0,0,0.7);
375
+ color: white;
376
+ padding: 5px 12px;
377
+ border-radius: 20px;
378
+ font-size: 0.8rem;
379
+ backdrop-filter: blur(5px);
380
+ }
381
+
382
+ .card-content {
383
+ padding: 25px;
384
+ }
385
+
386
+ .card-date {
387
+ color: var(--secondary-color);
388
+ font-size: 0.9rem;
389
+ font-weight: 500;
390
+ margin-bottom: 8px;
391
+ display: block;
392
+ }
393
+
394
+ .card-title {
395
+ font-size: 1.4rem;
396
+ margin-bottom: 10px;
397
+ font-weight: 700;
398
+ }
399
+
400
+ .card-desc {
401
+ color: var(--text-muted);
402
+ font-size: 0.95rem;
403
+ margin-bottom: 20px;
404
+ display: -webkit-box;
405
+ -webkit-line-clamp: 2;
406
+ -webkit-box-orient: vertical;
407
+ overflow: hidden;
408
+ }
409
+
410
+ .card-link {
411
+ color: var(--primary-color);
412
+ font-weight: 500;
413
+ display: flex;
414
+ align-items: center;
415
+ gap: 5px;
416
+ }
417
+
418
+ .card-link:hover {
419
+ gap: 10px;
420
+ }
421
+
422
+ /* --- Members Section --- */
423
+ .members {
424
+ padding: 100px 0;
425
+ }
426
+
427
+ .members-grid {
428
+ display: grid;
429
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
430
+ gap: 40px;
431
+ }
432
+
433
+ .member-card {
434
+ text-align: center;
435
+ group: 1;
436
+ }
437
+
438
+ .member-img {
439
+ width: 180px;
440
+ height: 180px;
441
+ border-radius: 50%;
442
+ margin: 0 auto 20px;
443
+ overflow: hidden;
444
+ border: 3px solid transparent;
445
+ transition: var(--transition);
446
+ position: relative;
447
+ }
448
+
449
+ .member-card:hover .member-img {
450
+ border-color: var(--secondary-color);
451
+ transform: rotate(5deg);
452
+ }
453
+
454
+ .member-img img {
455
+ width: 100%;
456
+ height: 100%;
457
+ }
458
+
459
+ .member-name {
460
+ font-size: 1.3rem;
461
+ font-weight: 700;
462
+ margin-bottom: 5px;
463
+ }
464
+
465
+ .member-role {
466
+ color: var(--primary-color);
467
+ font-size: 0.9rem;
468
+ font-weight: 500;
469
+ }
470
+
471
+ /* --- Gallery Section --- */
472
+ .gallery {
473
+ padding: 100px 0;
474
+ background-color: var(--surface-color);
475
+ }
476
+
477
+ .gallery-grid {
478
+ display: grid;
479
+ grid-template-columns: repeat(4, 1fr);
480
+ grid-auto-rows: 250px;
481
+ gap: 15px;
482
+ }
483
+
484
+ .gallery-item {
485
+ position: relative;
486
+ overflow: hidden;
487
+ border-radius: 10px;
488
+ cursor: pointer;
489
+ }
490
+
491
+ /* Masonry-like effect with spans */
492
+ .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
493
+ .gallery-item:nth-child(4) { grid-column: span 2; }
494
+
495
+ .gallery-item img {
496
+ width: 100%;
497
+ height: 100%;
498
+ transition: transform 0.5s ease;
499
+ }
500
+
501
+ .gallery-overlay {
502
+ position: absolute;
503
+ top: 0;
504
+ left: 0;
505
+ width: 100%;
506
+ height: 100%;
507
+ background: rgba(0,0,0,0.6);
508
+ display: flex;
509
+ align-items: center;
510
+ justify-content: center;
511
+ opacity: 0;
512
+ transition: var(--transition);
513
+ }
514
+
515
+ .gallery-overlay i {
516
+ font-size: 2rem;
517
+ color: white;
518
+ transform: scale(0);
519
+ transition: var(--transition);
520
+ }
521
+
522
+ .gallery-item:hover img {
523
+ transform: scale(1.1);
524
+ }
525
+
526
+ .gallery-item:hover .gallery-overlay {
527
+ opacity: 1;
528
+ }
529
+
530
+ .gallery-item:hover .gallery-overlay i {
531
+ transform: scale(1);
532
+ }
533
+
534
+ /* --- Contact Section --- */
535
+ .contact {
536
+ padding: 100px 0;
537
+ }
538
+
539
+ .contact-wrapper {
540
+ display: grid;
541
+ grid-template-columns: 1fr 1.5fr;
542
+ gap: 60px;
543
+ background: var(--surface-color);
544
+ padding: 50px;
545
+ border-radius: 20px;
546
+ }
547
+
548
+ .contact-info h3 {
549
+ font-size: 1.8rem;
550
+ margin-bottom: 20px;
551
+ }
552
+
553
+ .info-item {
554
+ display: flex;
555
+ align-items: flex-start;
556
+ gap: 15px;
557
+ margin-bottom: 25px;
558
+ }
559
+
560
+ .info-item i {
561
+ font-size: 1.5rem;
562
+ color: var(--primary-color);
563
+ margin-top: 3px;
564
+ }
565
+
566
+ .info-content h5 {
567
+ font-size: 1.1rem;
568
+ margin-bottom: 5px;
569
+ }
570
+
571
+ .info-content p {
572
+ color: var(--text-muted);
573
+ }
574
+
575
+ .contact-form {
576
+ display: flex;
577
+ flex-direction: column;
578
+ gap: 20px;
579
+ }
580
+
581
+ .form-row {
582
+ display: grid;
583
+ grid-template-columns: 1fr 1fr;
584
+ gap: 20px;
585
+ }
586
+
587
+ .form-group input, .form-group textarea {
588
+ width: 100%;
589
+ padding: 15px;
590
+ background: var(--bg-color);
591
+ border: 1px solid rgba(255,255,255,0.1);
592
+ border-radius: 8px;
593
+ color: white;
594
+ font-family: var(--font-main);
595
+ font-size: 1rem;
596
+ transition: var(--transition);
597
+ }
598
+
599
+ .form-group input:focus, .form-group textarea:focus {
600
+ outline: none;
601
+ border-color: var(--primary-color);
602
+ background: #151518;
603
+ }
604
+
605
+ .form-group textarea {
606
+ resize: vertical;
607
+ height: 150px;
608
+ }
609
+
610
+ /* --- Footer --- */
611
+ footer {
612
+ background: #050506;
613
+ padding: 60px 0 20px;
614
+ border-top: 1px solid rgba(255,255,255,0.05);
615
+ }
616
+
617
+ .footer-content {
618
+ display: flex;
619
+ justify-content: space-between;
620
+ align-items: center;
621
+ flex-wrap: wrap;
622
+ margin-bottom: 40px;
623
+ gap: 20px;
624
+ }
625
+
626
+ .footer-logo {
627
+ font-size: 1.5rem;
628
+ font-weight: 700;
629
+ display: flex;
630
+ align-items: center;
631
+ gap: 8px;
632
+ }
633
+
634
+ .social-links {
635
+ display: flex;
636
+ gap: 15px;
637
+ }
638
+
639
+ .social-link {
640
+ width: 40px;
641
+ height: 40px;
642
+ border-radius: 50%;
643
+ background: rgba(255,255,255,0.1);
644
+ display: flex;
645
+ align-items: center;
646
+ justify-content: center;
647
+ transition: var(--transition);
648
+ }
649
+
650
+ .social-link:hover {
651
+ background: var(--primary-color);
652
+ transform: translateY(-3px);
653
+ }
654
+
655
+ .copyright {
656
+ text-align: center;
657
+ color: var(--text-muted);
658
+ font-size: 0.9rem;
659
+ padding-top: 20px;
660
+ border-top: 1px solid rgba(255,255,255,0.05);
661
+ }
662
+
663
+ /* --- Animations --- */
664
+ .reveal {
665
+ opacity: 0;
666
+ transform: translateY(50px);
667
+ transition: all 0.8s ease;
668
+ }
669
+
670
+ .reveal.active {
671
+ opacity: 1;
672
+ transform: translateY(0);
673
+ }
674
+
675
+ /* --- Responsive Design --- */
676
+ @media (max-width: 1024px) {
677
+ .gallery-grid {
678
+ grid-template-columns: repeat(2, 1fr);
679
+ }
680
+ .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
681
+ .gallery-item:nth-child(4) { grid-column: span 1; }
682
+ }
683
+
684
+ @media (max-width: 768px) {
685
+ .nav-links, .anycoder-credit {
686
+ display: none;
687
+ }
688
+
689
+ .menu-toggle {
690
+ display: block;
691
+ }
692
+
693
+ .hero-title {
694
+ font-size: 2.5rem;
695
+ }
696
+
697
+ .about-content {
698
+ grid-template-columns: 1fr;
699
+ }
700
+
701
+ .contact-wrapper {
702
+ grid-template-columns: 1fr;
703
+ padding: 30px;
704
+ }
705
+
706
+ .form-row {
707
+ grid-template-columns: 1fr;
708
+ }
709
+
710
+ /* Mobile Menu Active State */
711
+ .nav-mobile-active {
712
+ position: fixed;
713
+ top: var(--header-height);
714
+ left: 0;
715
+ width: 100%;
716
+ height: calc(100vh - var(--header-height));
717
+ background: var(--bg-color);
718
+ flex-direction: column;
719
+ align-items: center;
720
+ justify-content: center;
721
+ display: flex;
722
+ gap: 30px;
723
+ border-top: 1px solid rgba(255,255,255,0.1);
724
+ }
725
+
726
+ .nav-mobile-active a {
727
+ font-size: 1.5rem;
728
+ }
729
+ }
730
+ </style>
731
+ </head>
732
+ <body>
733
+
734
+ <!-- Header -->
735
+ <header>
736
+ <div class="container nav-container">
737
+ <a href="#" class="logo">
738
+ <i class="ri-brush-2-fill"></i> ํ•˜๋Š˜์˜ˆ์ˆ ๋‹จ
739
+ </a>
740
+ <nav>
741
+ <ul class="nav-links" id="navLinks">
742
+ <li><a href="#about" class="active">์†Œ๊ฐœ</a></li>
743
+ <li><a href="#performances">๊ณต์—ฐ</a></li>
744
+ <li><a href="#members">๋ฉค๋ฒ„</a></li>
745
+ <li><a href="#gallery">๊ฐค๋Ÿฌ๋ฆฌ</a></li>
746
+ <li><a href="#contact">๋ฌธ์˜</a></li>
747
+ </ul>
748
+ </nav>
749
+ <div style="display: flex; align-items: center;">
750
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-credit">Built with anycoder</a>
751
+ <div class="menu-toggle" id="menuToggle">
752
+ <i class="ri-menu-4-line"></i>
753
+ </div>
754
+ </div>
755
+ </div>
756
+ </header>
757
+
758
+ <main>
759
+ <!-- Hero Section -->
760
+ <section class="hero" id="home">
761
+ <div class="hero-content">
762
+ <h1 class="hero-title">์˜ํ˜ผ์„ ์šธ๋ฆฌ๋Š”<br>์˜ˆ์ˆ ์˜ ํ–ฅ์—ฐ</h1>
763
+ <p class="hero-desc">ํ•˜๋Š˜์˜ˆ์ˆ ๋‹จ์€ ๋ฌด๋Œ€ ์œ„์—์„œ ๊ฐ๋™์„ ๋„˜์–ด ๊นŠ์€ ์šธ๋ฆผ์„ ์ „ํ•ฉ๋‹ˆ๋‹ค.<br>์šฐ๋ฆฌ์™€ ํ•จ๊ป˜ ํŠน๋ณ„ํ•œ ์ˆœ๊ฐ„์„ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”.</p>
764
+ <div class="hero-btns">
765
+ <a href="#performances" class="btn btn-primary">๊ณต์—ฐ ๋ณด๊ธฐ</a>
766
+ <a href="#contact" class="btn btn-outline" style="margin-left: 15px;">๋ฌธ์˜ํ•˜๊ธฐ</a>
767
+ </div>
768
+ </div>
769
+ </section>
770
+
771
+ <!-- About Section -->
772
+ <section class="about" id="about">
773
+ <div class="container">
774
+ <div class="about-content reveal">
775
+ <div class="about-img-wrapper">
776
+ <img src="https://picsum.photos/seed/artsabout/600/700" alt="์˜ˆ์ˆ ๋‹จ ๋ฆฌํ—ˆ์„ค ์‚ฌ์ง„">
777
+ </div>
778
+ <div class="about-text">
779
+ <h3>์šฐ๋ฆฌ๋Š” ์ด์•ผ๊ธฐ๋ฅผ ๋งํ•ฉ๋‹ˆ๋‹ค</h3>
780
+ <p>ํ•˜๋Š˜์˜ˆ์ˆ ๋‹จ์€ 2010๋…„์— ์„ค๋ฆฝ๋œ ์˜ˆ์ˆ  ๋‹จ์ฒด๋กœ, ์ „ํ†ต ์˜ˆ์ˆ ๊ณผ ํ˜„๋Œ€์  ๊ฐ๊ฐ์„ ์กฐํ™”๋กญ๊ฒŒ ์œตํ•ฉํ•˜์—ฌ ๋…์ฐฝ์ ์ธ ๋ฌด๋Œ€๋ฅผ ์„ ๋ณด์ž…๋‹ˆ๋‹ค. ์ถค, ์Œ์•…, ์—ฐ๊ทน์„ ๋„˜๋‚˜๋“ค๋ฉฐ ๊ด€๊ฐ๋“ค์—๊ฒŒ ์žŠ์ง€ ๋ชปํ•  ๊ฐ๋™์„ ์„ ๋ฌผํ•˜๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ ํ•ฉ๋‹ˆ๋‹ค.</p>
781
+ <p>๋‹จ์ˆœํ•œ ๊ณต์—ฐ์„ ๋„˜์–ด, ๊ด€๊ฐ๊ณผ ํ˜ธํกํ•˜๋ฉฐ ํ•จ๊ป˜ ๋งŒ๋“ค์–ด๊ฐ€๋Š” ์˜ˆ์ˆ ์„ ์ง€ํ–ฅํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ์˜ ๋ฌด๋Œ€๋Š” ๋์ด ๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค, ์—ฌ๋Ÿฌ๋ถ„์˜ ๋งˆ์Œ์†์—์„œ ๊ณ„์†๋ฉ๋‹ˆ๋‹ค.</p>
782
+
783
+ <div class="stats">
784
+ <div class="stat-item">
785
+ <h4>14+</h4>
786
+ <span>๋…„์˜ ์—ญ์‚ฌ</span>
787
+ </div>
788
+ <div class="stat-item">
789
+ <h4>500+</h4>
790
+ <span>๊ณต์—ฐ ํšŸ์ˆ˜</span>
791
+ </div>
792
+ <div class="stat-item">
793
+ <h4>30+</h4>
794
+ <span>์†Œ์† ์•„ํ‹ฐ์ŠคํŠธ</span>
795
+ </div>
796
+ </div>
797
+ </div>
798
+ </div>
799
+ </div>
800
+ </section>
801
+
802
+ <!-- Performances Section -->
803
+ <section class="performances" id="performances">
804
+ <div class="container">
805
+ <h2 class="section-title reveal">์ตœ์‹  ๊ณต์—ฐ ์•ˆ๋‚ด</h2>
806
+ <p class="section-subtitle reveal">๋‹ค๊ฐ€์˜ค๋Š” ํ•˜๋Š˜์˜ˆ์ˆ ๋‹จ์˜ ํŠน๋ณ„ํ•œ ๋ฌด๋Œ€๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”.</p>
807
+
808
+ <div class="performance-grid">
809
+ <!-- Card 1 -->
810
+ <article class="card reveal">
811
+ <div class="card-image">
812
+ <span class="card-tag">์ •๊ธฐ ๊ณต์—ฐ</span>
813
+ <img src="https://picsum.photos/seed/artperf1/500/350" alt="๊ณต์—ฐ ํฌ์Šคํ„ฐ">
814
+ </div>
815
+ <div class="card-content">
816
+ <span class="card-date">2023. 11. 15 - 11. 20</span>
817
+ <h3 class="card-title">๋ฐ”๋žŒ์˜ ๋…ธ๋ž˜</h3>
818
+ <p class="card-desc">์ž์—ฐ์˜ ์†Œ๋ฆฌ์™€ ํ˜„๋Œ€ ๋ฌด์šฉ์ด ์–ด์šฐ๋Ÿฌ์ง€๋Š” ์‹คํ—˜์ ์ธ ํผํฌ๋จผ์Šค. ๊ด€๊ฐ์€ ์‹œ๊ฐ๊ณผ ์ฒญ๊ฐ์˜ ์ž์œ ๋ฅผ ๊ฒฝํ—˜ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.</p>
819
+ <a href="#" class="card-link">์ƒ์„ธ ๋ณด๊ธฐ <i class="ri-arrow-right-line"></i></a>
820
+ </div>
821
+ </article>
822
+
823
+ <!-- Card 2 -->
824
+ <article class="card reveal">
825
+ <div class="card-image">
826
+ <span class="card-tag">์ดˆ์ฒญ ๊ณต์—ฐ</span>
827
+ <img src="https://picsum.photos/seed/artperf2/500/350" alt="๊ณต์—ฐ ํฌ์Šคํ„ฐ">
828
+ </div>
829
+ <div class="card-content">
830
+ <span class="card-date">2023. 12. 05</span>
831
+ <h3 class="card-title">๊ฒจ์šธ ๋ฐค์˜ ๊ฟˆ</h3>
832
+ <p class="card-desc">์…ฐ์ต์Šคํ”ผ์–ด์˜ ๊ณ ์ „์„ ํ•œ๊ตญ์  ์ •์„œ๋กœ ์žฌํ•ด์„ํ•œ ์Œ์•…๊ทน. ๋”ฐ๋œปํ•œ ํ•˜๋ชจ๋‹ˆ๊ฐ€ ๊ฒจ์šธ ๋ฐค์„ ๊ฐ์‹ธ์•ˆ์Šต๋‹ˆ๋‹ค.</p>
833
+ <a href="#" class="card-link">์ƒ์„ธ ๋ณด๊ธฐ <i class="ri-arrow-right-line"></i></a>
834
+ </div>
835
+ </article>
836
+
837
+ <!-- Card 3 -->
838
+ <article class="card reveal">
839
+ <div class="card-image">
840
+ <span class="card-tag">ํŠน๋ณ„ ์›Œํฌ์ƒต</span>
841
+ <img src="https://picsum.photos/seed/artperf3/500/350" alt="๊ณต์—ฐ ํฌ์Šคํ„ฐ">
842
+ </div>
843
+ <div class="card-content">
844
+ <span class="card-date">2024. 01. 10</span>
845
+ <h3 class="card-title">์•„ํ‹ฐ์ŠคํŠธ์™€์˜ ๋Œ€ํ™”</h3>
846
+ <p class="card-desc">ํ•˜๋Š˜์˜ˆ์ˆ ๋‹จ์˜ ์•„ํ‹ฐ์ŠคํŠธ๋“ค๊ณผ ํ•จ๊ป˜ํ•˜๋Š” ์ฐธ์—ฌํ˜• ์›Œํฌ์ƒต. ์ผ๋ฐ˜์ธ๋„ ์˜ˆ์ˆ ๊ฐ€๊ฐ€ ๋˜์–ด๋ณด๋Š” ์‹œ๊ฐ„.</p>
847
+ <a href="#" class="card-link">์ƒ์„ธ ๋ณด๊ธฐ <i class="ri-arrow-right-line"></i></a>
848
+ </div>
849
+ </article>
850
+ </div>
851
+ </div>
852
+ </section>
853
+
854
+ <!-- Members Section -->
855
+ <section class="members" id="members">
856
+ <div class="container">
857
+ <h2 class="section-title reveal">์•„ํ‹ฐ์ŠคํŠธ ์†Œ๊ฐœ</h2>
858
+ <p class="section-subtitle reveal">ํ•˜๋Š˜์˜ˆ์ˆ ๋‹จ์„ ์ด๋„๋Š” ๊ฟˆ์˜ ์—ฐ์ฃผ์ž๋“ค์ž…๋‹ˆ๋‹ค.</p>
859
+
860
+ <div class="members-grid">
861
+ <div class="member-card reveal">
862
+ <div class="member-img">
863
+ <img src="https://picsum.photos/seed/artist1/300/300" alt="์˜ˆ์ˆ  ์ด๊ฐ๋…">
864
+ </div>
865
+ <h3 class="member-name">๊น€์ง€ํ›ˆ</h3>
866
+ <p class="member-role">์˜ˆ์ˆ  ์ด๊ฐ๋…</p>
867
+ </div>
868
+ <div class="member-card reveal">
869
+ <div class="member-img">
870
+ <img src="https://picsum.photos/seed/artist2/300/300" alt="์•ˆ๋ฌด๊ฐ€">
871
+ </div>
872
+ <h3 class="member-name">์ด์ˆ˜์•„</h3>
873
+ <p class="member-role">์ˆ˜์„ ์•ˆ๋ฌด๊ฐ€</p>
874
+ </div>
875
+ <div class="member-card reveal">
876
+ <div class="member-img">
877
+ <img src="https://picsum.photos/seed/artist3/300/300" alt="์ž‘๊ณก๊ฐ€">
878
+ </div>
879
+ <h3 class="member-name">๋ฐ•๋ฏผ์ค€</h3>
880
+ <p class="member-role">์ž‘๊ณก ๋ฐ ์—ฐ์ถœ</p>
881
+ </div>
882
+ <div class="member-card reveal">
883
+ <div class="member-img">
884
+ <img src="https://picsum.photos/seed/artist4/300/300" alt="์ฃผ์—ฐ ๋ฌด์šฉ์ˆ˜">
885
+ </div>
886
+ <h3 class="member-name">์ตœ์œค์„œ</h3>
887
+ <p class="member-role">์ฃผ์—ฐ ๋ฌด์šฉ์ˆ˜</p>
888
+ </div>
889
+ </div>
890
+ </div>
891
+ </section>
892
+
893
+ <!-- Gallery Section -->
894
+ <section class="gallery" id="gallery">
895
+ <div class="container">
896
+ <h2 class="section-title reveal">ํ•˜์ด๋ผ์ดํŠธ ๊ฐค๋Ÿฌ๋ฆฌ</h2>
897
+ <p class="section-subtitle reveal">์ง€๋‚œ ๊ณต์—ฐ๋“ค์˜ ์ƒ์ƒํ•œ ์ˆœ๊ฐ„๋“ค์„ ๋‹ด์•˜์Šต๋‹ˆ๋‹ค.</p>
898
+
899
+ <div class="gallery-grid">
900
+ <div class="gallery-item reveal">
901
+ <img src="https://picsum.photos/seed/gallery1/600/600" alt="๊ณต์—ฐ ์‚ฌ์ง„">
902
+ <div class="gallery-overlay"><i class="ri-zoom-in-line"></i></div>
903
+ </div>
904
+ <div class="gallery-item reveal">
905
+ <img src="https://picsum.photos/seed/gallery2/400/400" alt="๊ณต์—ฐ ์‚ฌ์ง„">
906
+ <div class="gallery-overlay"><i class="ri-zoom-in-line"></i></div>
907
+ </div>
908
+ <div class="gallery-item reveal">
909
+ <img src="https://picsum.photos/seed/gallery3/400/400" alt="๊ณต์—ฐ ์‚ฌ์ง„">
910
+ <div class="gallery-overlay"><i class="ri-zoom-in-line"></i></div>
911
+ </div>
912
+ <div class="gallery-item reveal">
913
+ <img src="https://picsum.photos/seed/gallery4/600/300" alt="๊ณต์—ฐ ์‚ฌ์ง„">
914
+ <div class="gallery-overlay"><i class="ri-zoom-in-line"></i></div>
915
+ </div>
916
+ <div class="gallery-item reveal">
917
+ <img src="https://picsum.photos/seed/gallery5/400/400" alt="๊ณต์—ฐ ์‚ฌ์ง„">
918
+ <div class="gallery-overlay"><i class="ri-zoom-in-line"></i></div>
919
+ </div>
920
+ <div class="gallery-item reveal">
921
+ <img src="https://picsum.photos/seed/gallery6/400/400" alt="๊ณต์—ฐ ์‚ฌ์ง„">
922
+ <div class="gallery-overlay"><i class="ri-zoom-in-line"></i></div>
923
+ </div>
924
+ </div>
925
+ </div>
926
+ </section>
927
+
928
+ <!-- Contact Section -->
929
+ <section class="contact" id="contact">
930
+ <div class="container">
931
+ <h2 class="section-title reveal">๋ฌธ์˜ํ•˜๊ธฐ</h2>
932
+ <p class="section-subtitle reveal">๊ณต์—ฐ ๋ฌธ์˜, ํ˜‘์ฐฌ ์ œ์•ˆ ๋“ฑ ์–ด๋–ค ๋‚ด์šฉ์ด๋“  ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.</p>
933
+
934
+ <div class="contact-wrapper reveal">
935
+ <div class="contact-info">
936
+ <h3>์—ฐ๋ฝ์ฒ˜ ์ •๋ณด</h3>
937
+ <div class="info-item">
938
+ <i class="ri-map-pin-line"></i>
939
+ <div class="info-content">
940
+ <h5>์ฃผ์†Œ</h5>
941
+ <p>์„œ์šธํŠน๋ณ„์‹œ ๋งˆํฌ๊ตฌ ์˜ˆ์ˆ ์˜๋กœ 123<br>ํ•˜๋Š˜๋นŒ๋”ฉ 5์ธต</p>
942
+ </div>
943
+ </div>
944
+ <div class="info-item">
945
+ <i class="ri-mail-send-line"></i>
946
+ <div class="info-content">
947
+ <h5>์ด๋ฉ”์ผ</h5>
948
+ <p>contact@skyarts.or.kr</p>
949
+ </div>
950
+ </div>
951
+ <div class="info-item">
952
+ <i class="ri-phone-line"></i>
953
+ <div class="info-content">
954
+ <h5>์ „ํ™”</h5>
955
+ <p>02-1234-5678</p>
956
+ </div>
957
+ </div>
958
+ <div class="info-item">
959
+ <i class="ri-time-line"></i>
960
+ <div class="info-content">
961
+ <h5>์šด์˜ ์‹œ๊ฐ„</h5>
962
+ <p>์›” - ๊ธˆ: 09:00 - 18:00</p>
963
+ </div>
964
+ </div>
965
+ </div>
966
+
967
+ <form class="contact-form" onsubmit="event.preventDefault(); alert('๋ฌธ์˜๊ฐ€ ์ ‘์ˆ˜๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋น ๋ฅธ ์‹œ์ผ ๋‚ด์— ๋‹ต๋ณ€ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.');">
968
+ <div class="form-row">
969
+ <div class="form-group">
970
+ <input type="text" placeholder="์ด๋ฆ„" required>
971
+ </div>
972
+ <div class="form-group">
973
+ <input type="email" placeholder="์ด๋ฉ”์ผ" required>
974
+ </div>
975
+ </div>
976
+ <div class="form-group">
977
+ <input type="text" placeholder="์ œ๋ชฉ" required>
978
+ </div>
979
+ <div class="form-group">
980
+ <textarea placeholder="๋ฌธ์˜ ๋‚ด์šฉ์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”." required></textarea>
981
+ </div>
982
+ <button type="submit" class="btn btn-primary" style="align-self: flex-start;">๋ณด๋‚ด๊ธฐ</button>
983
+ </form>
984
+ </div>
985
+ </div>
986
+ </section>
987
+ </main>
988
+
989
+ <!-- Footer -->
990
+ <footer>
991
+ <div class="container">
992
+ <div class="footer-content">
993
+ <div class="footer-logo">
994
+ <i class="ri-brush-2-fill"></i> ํ•˜๋Š˜์˜ˆ์ˆ ๋‹จ
995
+ </div>
996
+ <div class="social-links">
997
+ <a href="#" class="social-link"><i class="ri-instagram-line"></i></a>
998
+ <a href="#" class="social-link"><i class="ri-youtube-fill"></i></a>
999
+ <a href="#" class="social-link"><i class="ri-facebook-fill"></i></a>
1000
+ <a href="#" class="social-link"><i class="ri-twitter-x-line"></i></a>
1001
+ </div>
1002
+ </div>
1003
+ <p class="copyright">
1004
+ &copy; 2023 ํ•˜๋Š˜์˜ˆ์ˆ ๋‹จ Sky Arts Group. All rights reserved.
1005
+ </p>
1006
+ </div>
1007
+ </footer>
1008
+
1009
+ <!-- JavaScript -->
1010
+ <script>
1011
+ // Mobile Menu Toggle
1012
+ const menuToggle = document.getElementById('menuToggle');
1013
+ const navLinks = document.getElementById('navLinks');
1014
+
1015
+ menuToggle.addEventListener('click', () => {
1016
+ navLinks.classList.toggle('nav-mobile-active');
1017
+
1018
+ // Toggle icon
1019
+ const icon = menuToggle.querySelector('i');
1020
+ if (navLinks.classList.contains('nav-mobile-active')) {
1021
+ icon.classList.remove('ri-menu-4-line');
1022
+ icon.classList.add('ri-close-line');
1023
+ } else {
1024
+ icon.classList.remove('ri-close-line');
1025
+ icon.classList.add('ri-menu-4-line');
1026
+ }
1027
+ });
1028
+
1029
+ // Close mobile menu when a link is clicked
1030
+ document.querySelectorAll('.nav-links a').forEach(link => {
1031
+ link.addEventListener('click', () => {
1032
+ navLinks.classList.remove('nav-mobile-active');
1033
+ const icon = menuToggle.querySelector('i');
1034
+ icon.classList.remove('ri-close-line');
1035
+ icon.classList.add('ri-menu-4-line');
1036
+ });
1037
+ });
1038
+
1039
+ // Scroll Animation (Intersection Observer)
1040
+ const revealElements = document.querySelectorAll('.reveal');
1041
+
1042
+ const revealObserver = new IntersectionObserver((entries, observer) => {
1043
+ entries.forEach(entry => {
1044
+ if (entry.isIntersecting) {
1045
+ entry.target.classList.add('active');
1046
+ observer.unobserve(entry.target); // Only animate once
1047
+ }
1048
+ });
1049
+ }, {
1050
+ root: null,
1051
+ threshold: 0.15, // Trigger when 15% of element is visible
1052
+ rootMargin: "0px 0px -50px 0px"
1053
+ });
1054
+
1055
+ revealElements.forEach(el => {
1056
+ revealObserver.observe(el);
1057
+ });
1058
+
1059
+ // Active Nav Link on Scroll
1060
+ const sections = document.querySelectorAll('section');
1061
+ const navItems = document.querySelectorAll('.nav-links a');
1062
+
1063
+ window.addEventListener('scroll', () => {
1064
+ let current = '';
1065
+
1066
+ sections.forEach(section => {
1067
+ const sectionTop = section.offsetTop;
1068
+ const sectionHeight = section.clientHeight;
1069
+ if (scrollY >= (sectionTop - 150)) {
1070
+ current = section.getAttribute('id');
1071
+ }
1072
+ });
1073
+
1074
+ navItems.forEach(li => {
1075
+ li.classList.remove('active');
1076
+ if (li.getAttribute('href').includes(current)) {
1077
+ li.classList.add('active');
1078
+ }
1079
+ });
1080
+ });
1081
+
1082
+ // Header Background on Scroll
1083
+ const header = document.querySelector('header');
1084
+ window.addEventListener('scroll', () => {
1085
+ if (window.scrollY > 50) {
1086
+ header.style.background = 'rgba(15, 15, 17, 0.95)';
1087
+ header.style.boxShadow = '0 5px 20px rgba(0,0,0,0.5)';
1088
+ } else {
1089
+ header.style.background = 'rgba(15, 15, 17, 0.85)';
1090
+ header.style.boxShadow =