Hugging Face's logo

Spaces:
vivekrp
/
anycoder-e2ba1d89
Running

App Files Community
vivekrp commited on
Commit
a2e364c
·
verified ·
1 Parent(s): 2e03795

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +772 -19
index.html CHANGED
@@ -1,19 +1,772 @@
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>Hi | Creative Developer</title>
7
+
8
+ <!-- Import Google Fonts -->
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=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
12
+
13
+ <!-- Import RemixIcon for Icons -->
14
+ <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
15
+
16
+ <style>
17
+ /* --- CSS VARIABLES & THEME --- */
18
+ :root {
19
+ --primary: #6366f1;
20
+ --secondary: #ec4899;
21
+ --accent: #8b5cf6;
22
+ --bg-color: #0f172a;
23
+ --card-bg: rgba(30, 41, 59, 0.7);
24
+ --text-main: #f8fafc;
25
+ --text-muted: #94a3b8;
26
+ --border-color: rgba(255, 255, 255, 0.1);
27
+ --glass: blur(12px);
28
+ --gradient-main: linear-gradient(135deg, var(--primary), var(--secondary));
29
+ --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
30
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
31
+ }
32
+
33
+ [data-theme="light"] {
34
+ --bg-color: #f1f5f9;
35
+ --card-bg: rgba(255, 255, 255, 0.8);
36
+ --text-main: #1e293b;
37
+ --text-muted: #64748b;
38
+ --border-color: rgba(0, 0, 0, 0.05);
39
+ --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
40
+ }
41
+
42
+ /* --- GLOBAL RESET --- */
43
+ * {
44
+ margin: 0;
45
+ padding: 0;
46
+ box-sizing: border-box;
47
+ }
48
+
49
+ html {
50
+ scroll-behavior: smooth;
51
+ }
52
+
53
+ body {
54
+ font-family: 'Outfit', sans-serif;
55
+ background-color: var(--bg-color);
56
+ color: var(--text-main);
57
+ line-height: 1.6;
58
+ overflow-x: hidden;
59
+ transition: background-color 0.5s ease, color 0.5s ease;
60
+ }
61
+
62
+ a {
63
+ text-decoration: none;
64
+ color: inherit;
65
+ }
66
+
67
+ ul {
68
+ list-style: none;
69
+ }
70
+
71
+ /* --- UTILITIES --- */
72
+ .container {
73
+ max-width: 1200px;
74
+ margin: 0 auto;
75
+ padding: 0 2rem;
76
+ }
77
+
78
+ .gradient-text {
79
+ background: var(--gradient-main);
80
+ -webkit-background-clip: text;
81
+ -webkit-text-fill-color: transparent;
82
+ background-clip: text;
83
+ }
84
+
85
+ .btn {
86
+ display: inline-flex;
87
+ align-items: center;
88
+ gap: 0.5rem;
89
+ padding: 0.8rem 1.8rem;
90
+ border-radius: 50px;
91
+ font-weight: 600;
92
+ cursor: pointer;
93
+ transition: var(--transition);
94
+ border: none;
95
+ font-size: 1rem;
96
+ }
97
+
98
+ .btn-primary {
99
+ background: var(--gradient-main);
100
+ color: white;
101
+ box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
102
+ }
103
+
104
+ .btn-primary:hover {
105
+ transform: translateY(-2px);
106
+ box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
107
+ }
108
+
109
+ .btn-outline {
110
+ background: transparent;
111
+ border: 2px solid var(--primary);
112
+ color: var(--primary);
113
+ }
114
+
115
+ .btn-outline:hover {
116
+ background: var(--primary);
117
+ color: white;
118
+ }
119
+
120
+ /* --- HEADER --- */
121
+ header {
122
+ position: fixed;
123
+ top: 0;
124
+ width: 100%;
125
+ z-index: 1000;
126
+ background: rgba(15, 23, 42, 0.8);
127
+ backdrop-filter: var(--glass);
128
+ border-bottom: 1px solid var(--border-color);
129
+ padding: 1rem 0;
130
+ transition: background 0.3s;
131
+ }
132
+
133
+ [data-theme="light"] header {
134
+ background: rgba(241, 245, 249, 0.8);
135
+ }
136
+
137
+ .nav-wrapper {
138
+ display: flex;
139
+ justify-content: space-between;
140
+ align-items: center;
141
+ }
142
+
143
+ .logo {
144
+ font-family: 'Space Grotesk', sans-serif;
145
+ font-size: 1.5rem;
146
+ font-weight: 700;
147
+ letter-spacing: -1px;
148
+ }
149
+
150
+ .nav-links {
151
+ display: flex;
152
+ gap: 2rem;
153
+ align-items: center;
154
+ }
155
+
156
+ .nav-links a {
157
+ font-weight: 500;
158
+ color: var(--text-muted);
159
+ transition: var(--transition);
160
+ position: relative;
161
+ }
162
+
163
+ .nav-links a:hover, .nav-links a.active {
164
+ color: var(--primary);
165
+ }
166
+
167
+ .nav-links a::after {
168
+ content: '';
169
+ position: absolute;
170
+ width: 0;
171
+ height: 2px;
172
+ bottom: -4px;
173
+ left: 0;
174
+ background: var(--gradient-main);
175
+ transition: width 0.3s ease;
176
+ }
177
+
178
+ .nav-links a:hover::after {
179
+ width: 100%;
180
+ }
181
+
182
+ .theme-toggle {
183
+ cursor: pointer;
184
+ font-size: 1.2rem;
185
+ padding: 0.5rem;
186
+ border-radius: 50%;
187
+ display: flex;
188
+ align-items: center;
189
+ justify-content: center;
190
+ transition: var(--transition);
191
+ }
192
+
193
+ .theme-toggle:hover {
194
+ background: rgba(255, 255, 255, 0.1);
195
+ color: var(--primary);
196
+ }
197
+
198
+ /* Mobile Menu */
199
+ .hamburger {
200
+ display: none;
201
+ cursor: pointer;
202
+ font-size: 1.5rem;
203
+ }
204
+
205
+ /* --- HERO SECTION --- */
206
+ .hero {
207
+ min-height: 100vh;
208
+ display: flex;
209
+ align-items: center;
210
+ justify-content: center;
211
+ position: relative;
212
+ padding-top: 80px;
213
+ overflow: hidden;
214
+ }
215
+
216
+ /* Background Blobs */
217
+ .blob {
218
+ position: absolute;
219
+ border-radius: 50%;
220
+ filter: blur(80px);
221
+ opacity: 0.4;
222
+ z-index: -1;
223
+ animation: float 10s infinite alternate;
224
+ }
225
+
226
+ .blob-1 {
227
+ width: 400px;
228
+ height: 400px;
229
+ background: var(--primary);
230
+ top: -100px;
231
+ left: -100px;
232
+ }
233
+
234
+ .blob-2 {
235
+ width: 300px;
236
+ height: 300px;
237
+ background: var(--secondary);
238
+ bottom: 10%;
239
+ right: -50px;
240
+ animation-delay: -5s;
241
+ }
242
+
243
+ .hero-content {
244
+ text-align: center;
245
+ max-width: 800px;
246
+ z-index: 1;
247
+ }
248
+
249
+ .hero h1 {
250
+ font-family: 'Space Grotesk', sans-serif;
251
+ font-size: clamp(4rem, 10vw, 8rem);
252
+ font-weight: 800;
253
+ line-height: 1;
254
+ margin-bottom: 1rem;
255
+ letter-spacing: -2px;
256
+ }
257
+
258
+ .hero-subtitle {
259
+ font-size: clamp(1.2rem, 3vw, 1.5rem);
260
+ color: var(--text-muted);
261
+ margin-bottom: 2.5rem;
262
+ min-height: 1.6em; /* Prevent layout shift on typing */
263
+ }
264
+
265
+ .cursor {
266
+ display: inline-block;
267
+ width: 3px;
268
+ background-color: var(--primary);
269
+ animation: blink 1s infinite;
270
+ }
271
+
272
+ .hero-btns {
273
+ display: flex;
274
+ gap: 1rem;
275
+ justify-content: center;
276
+ }
277
+
278
+ /* --- SECTIONS COMMON --- */
279
+ section {
280
+ padding: 6rem 0;
281
+ }
282
+
283
+ .section-header {
284
+ text-align: center;
285
+ margin-bottom: 4rem;
286
+ }
287
+
288
+ .section-header h2 {
289
+ font-size: 2.5rem;
290
+ margin-bottom: 1rem;
291
+ }
292
+
293
+ .section-header p {
294
+ color: var(--text-muted);
295
+ max-width: 600px;
296
+ margin: 0 auto;
297
+ }
298
+
299
+ /* --- CARDS GRID --- */
300
+ .grid-3 {
301
+ display: grid;
302
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
303
+ gap: 2rem;
304
+ }
305
+
306
+ .card {
307
+ background: var(--card-bg);
308
+ border: 1px solid var(--border-color);
309
+ padding: 2rem;
310
+ border-radius: 20px;
311
+ transition: var(--transition);
312
+ backdrop-filter: blur(5px);
313
+ position: relative;
314
+ overflow: hidden;
315
+ }
316
+
317
+ .card:hover {
318
+ transform: translateY(-10px);
319
+ border-color: var(--primary);
320
+ box-shadow: var(--shadow);
321
+ }
322
+
323
+ .card-icon {
324
+ font-size: 2.5rem;
325
+ color: var(--primary);
326
+ margin-bottom: 1.5rem;
327
+ background: rgba(99, 102, 241, 0.1);
328
+ width: 70px;
329
+ height: 70px;
330
+ display: flex;
331
+ align-items: center;
332
+ justify-content: center;
333
+ border-radius: 15px;
334
+ }
335
+
336
+ .card h3 {
337
+ margin-bottom: 1rem;
338
+ font-size: 1.5rem;
339
+ }
340
+
341
+ .card p {
342
+ color: var(--text-muted);
343
+ }
344
+
345
+ /* --- CONTACT SECTION --- */
346
+ .contact-wrapper {
347
+ display: grid;
348
+ grid-template-columns: 1fr 1fr;
349
+ gap: 4rem;
350
+ align-items: center;
351
+ }
352
+
353
+ .contact-form {
354
+ background: var(--card-bg);
355
+ padding: 2.5rem;
356
+ border-radius: 20px;
357
+ border: 1px solid var(--border-color);
358
+ }
359
+
360
+ .form-group {
361
+ margin-bottom: 1.5rem;
362
+ }
363
+
364
+ .form-group label {
365
+ display: block;
366
+ margin-bottom: 0.5rem;
367
+ font-weight: 500;
368
+ }
369
+
370
+ .form-control {
371
+ width: 100%;
372
+ padding: 1rem;
373
+ background: rgba(255, 255, 255, 0.05);
374
+ border: 1px solid var(--border-color);
375
+ border-radius: 10px;
376
+ color: var(--text-main);
377
+ font-family: inherit;
378
+ transition: var(--transition);
379
+ }
380
+
381
+ .form-control:focus {
382
+ outline: none;
383
+ border-color: var(--primary);
384
+ background: rgba(255, 255, 255, 0.1);
385
+ }
386
+
387
+ /* --- FOOTER --- */
388
+ footer {
389
+ border-top: 1px solid var(--border-color);
390
+ padding: 3rem 0;
391
+ text-align: center;
392
+ color: var(--text-muted);
393
+ }
394
+
395
+ .social-links {
396
+ display: flex;
397
+ justify-content: center;
398
+ gap: 1.5rem;
399
+ margin-bottom: 1.5rem;
400
+ }
401
+
402
+ .social-links a {
403
+ font-size: 1.5rem;
404
+ transition: var(--transition);
405
+ }
406
+
407
+ .social-links a:hover {
408
+ color: var(--primary);
409
+ transform: scale(1.1);
410
+ }
411
+
412
+ /* --- ANIMATIONS --- */
413
+ @keyframes float {
414
+ 0% { transform: translate(0, 0); }
415
+ 100% { transform: translate(20px, 40px); }
416
+ }
417
+
418
+ @keyframes blink {
419
+ 0%, 100% { opacity: 1; }
420
+ 50% { opacity: 0; }
421
+ }
422
+
423
+ .reveal {
424
+ opacity: 0;
425
+ transform: translateY(30px);
426
+ transition: all 0.8s ease;
427
+ }
428
+
429
+ .reveal.active {
430
+ opacity: 1;
431
+ transform: translateY(0);
432
+ }
433
+
434
+ /* --- TOAST --- */
435
+ .toast {
436
+ position: fixed;
437
+ bottom: 20px;
438
+ right: 20px;
439
+ background: var(--gradient-main);
440
+ color: white;
441
+ padding: 1rem 2rem;
442
+ border-radius: 10px;
443
+ box-shadow: var(--shadow);
444
+ transform: translateY(100px);
445
+ opacity: 0;
446
+ transition: var(--transition);
447
+ z-index: 2000;
448
+ display: flex;
449
+ align-items: center;
450
+ gap: 10px;
451
+ }
452
+
453
+ .toast.show {
454
+ transform: translateY(0);
455
+ opacity: 1;
456
+ }
457
+
458
+ /* --- RESPONSIVE --- */
459
+ @media (max-width: 768px) {
460
+ .nav-links {
461
+ position: fixed;
462
+ top: 70px;
463
+ left: 0;
464
+ width: 100%;
465
+ background: var(--bg-color);
466
+ flex-direction: column;
467
+ padding: 2rem;
468
+ border-bottom: 1px solid var(--border-color);
469
+ transform: translateY(-150%);
470
+ transition: transform 0.3s ease;
471
+ }
472
+
473
+ .nav-links.open {
474
+ transform: translateY(0);
475
+ }
476
+
477
+ .hamburger {
478
+ display: block;
479
+ }
480
+
481
+ .contact-wrapper {
482
+ grid-template-columns: 1fr;
483
+ }
484
+
485
+ .hero h1 {
486
+ font-size: 4rem;
487
+ }
488
+ }
489
+ </style>
490
+ </head>
491
+ <body data-theme="dark">
492
+
493
+ <!-- Header -->
494
+ <header>
495
+ <div class="container nav-wrapper">
496
+ <div class="logo">
497
+ <span class="gradient-text">Hi.</span>
498
+ </div>
499
+
500
+ <nav>
501
+ <ul class="nav-links" id="navLinks">
502
+ <li><a href="#home">Home</a></li>
503
+ <li><a href="#about">About</a></li>
504
+ <li><a href="#services">Services</a></li>
505
+ <li><a href="#contact">Contact</a></li>
506
+ <!-- Mandatory Link -->
507
+ <li>
508
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="gradient-text" style="font-weight: 700;">
509
+ Built with anycoder
510
+ </a>
511
+ </li>
512
+ </ul>
513
+ </nav>
514
+
515
+ <div style="display: flex; align-items: center; gap: 1rem;">
516
+ <div class="theme-toggle" id="themeToggle">
517
+ <i class="ri-sun-line"></i>
518
+ </div>
519
+ <div class="hamburger" id="hamburger">
520
+ <i class="ri-menu-3-line"></i>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </header>
525
+
526
+ <!-- Hero Section -->
527
+ <section id="home" class="hero">
528
+ <div class="blob blob-1"></div>
529
+ <div class="blob blob-2"></div>
530
+
531
+ <div class="container hero-content">
532
+ <h1 class="reveal">Hi, I'm <span class="gradient-text">Alex</span></h1>
533
+ <div class="hero-subtitle reveal">
534
+ I <span id="typewriter"></span><span class="cursor"></span>
535
+ </div>
536
+ <div class="hero-btns reveal">
537
+ <a href="#contact" class="btn btn-primary">
538
+ Get in Touch <i class="ri-arrow-right-line"></i>
539
+ </a>
540
+ <a href="#services" class="btn btn-outline">
541
+ View Work
542
+ </a>
543
+ </div>
544
+ </div>
545
+ </section>
546
+
547
+ <!-- About Section -->
548
+ <section id="about">
549
+ <div class="container">
550
+ <div class="section-header reveal">
551
+ <h2>Who I Am</h2>
552
+ <p>A passionate creator building digital experiences that matter.</p>
553
+ </div>
554
+ <div class="grid-3">
555
+ <div class="card reveal">
556
+ <div class="card-icon"><i class="ri-code-s-slash-line"></i></div>
557
+ <h3>Clean Code</h3>
558
+ <p>I write efficient, maintainable, and scalable code using modern best practices and semantic HTML5.</p>
559
+ </div>
560
+ <div class="card reveal">
561
+ <div class="card-icon"><i class="ri-paint-brush-line"></i></div>
562
+ <h3>Modern Design</h3>
563
+ <p>Creating visually stunning interfaces with attention to typography, color theory, and micro-interactions.</p>
564
+ </div>
565
+ <div class="card reveal">
566
+ <div class="card-icon"><i class="ri-rocket-line"></i></div>
567
+ <h3>Performance</h3>
568
+ <p>Optimizing for speed and SEO to ensure your application loads instantly and reaches the right audience.</p>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </section>
573
+
574
+ <!-- Services Section -->
575
+ <section id="services" style="background: rgba(255,255,255,0.02);">
576
+ <div class="container">
577
+ <div class="section-header reveal">
578
+ <h2>What I Do</h2>
579
+ <p>Turning complex problems into simple, beautiful solutions.</p>
580
+ </div>
581
+ <div class="grid-3">
582
+ <div class="card reveal">
583
+ <h3>Web Development</h3>
584
+ <p>Full-stack development using the latest technologies. From simple landing pages to complex web apps.</p>
585
+ </div>
586
+ <div class="card reveal">
587
+ <h3>UI/UX Design</h3>
588
+ <p>Designing intuitive user interfaces and experiences that delight users and drive engagement.</p>
589
+ </div>
590
+ <div class="card reveal">
591
+ <h3>Mobile Apps</h3>
592
+ <p>Cross-platform mobile application development that works seamlessly on iOS and Android devices.</p>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </section>
597
+
598
+ <!-- Contact Section -->
599
+ <section id="contact">
600
+ <div class="container">
601
+ <div class="contact-wrapper">
602
+ <div class="reveal">
603
+ <h2>Let's Work Together</h2>
604
+ <p style="color: var(--text-muted); margin: 1rem 0 2rem;">
605
+ Have a project in mind? Fill out the form or send me an email. I'm currently open to new opportunities.
606
+ </p>
607
+ <div style="display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem;">
608
+ <i class="ri-mail-send-line" style="color: var(--primary); font-size: 1.2rem;"></i>
609
+ <span>hello@example.com</span>
610
+ </div>
611
+ <div style="display: flex; gap: 1rem; align-items: center;">
612
+ <i class="ri-map-pin-line" style="color: var(--primary); font-size: 1.2rem;"></i>
613
+ <span>New York, USA</span>
614
+ </div>
615
+ </div>
616
+
617
+ <form class="contact-form reveal" id="contactForm">
618
+ <div class="form-group">
619
+ <label for="name">Name</label>
620
+ <input type="text" id="name" class="form-control" placeholder="Your Name" required>
621
+ </div>
622
+ <div class="form-group">
623
+ <label for="email">Email</label>
624
+ <input type="email" id="email" class="form-control" placeholder="your@email.com" required>
625
+ </div>
626
+ <div class="form-group">
627
+ <label for="message">Message</label>
628
+ <textarea id="message" rows="4" class="form-control" placeholder="Tell me about your project..." required></textarea>
629
+ </div>
630
+ <button type="submit" class="btn btn-primary" style="width: 100%;">
631
+ Send Message <i class="ri-send-plane-fill"></i>
632
+ </button>
633
+ </form>
634
+ </div>
635
+ </div>
636
+ </section>
637
+
638
+ <!-- Footer -->
639
+ <footer>
640
+ <div class="container">
641
+ <div class="social-links">
642
+ <a href="#"><i class="ri-github-fill"></i></a>
643
+ <a href="#"><i class="ri-linkedin-fill"></i></a>
644
+ <a href="#"><i class="ri-twitter-x-fill"></i></a>
645
+ <a href="#"><i class="ri-dribbble-line"></i></a>
646
+ </div>
647
+ <p>&copy; 2023 Alex Creative. All rights reserved.</p>
648
+ </div>
649
+ </footer>
650
+
651
+ <!-- Toast Notification -->
652
+ <div class="toast" id="toast">
653
+ <i class="ri-checkbox-circle-line"></i>
654
+ <span>Message sent successfully!</span>
655
+ </div>
656
+
657
+ <!-- JavaScript -->
658
+ <script>
659
+ // --- 1. Theme Toggle Logic ---
660
+ const themeToggle = document.getElementById('themeToggle');
661
+ const body = document.body;
662
+ const icon = themeToggle.querySelector('i');
663
+
664
+ themeToggle.addEventListener('click', () => {
665
+ if (body.getAttribute('data-theme') === 'dark') {
666
+ body.setAttribute('data-theme', 'light');
667
+ icon.classList.replace('ri-sun-line', 'ri-moon-line');
668
+ } else {
669
+ body.setAttribute('data-theme', 'dark');
670
+ icon.classList.replace('ri-moon-line', 'ri-sun-line');
671
+ }
672
+ });
673
+
674
+ // --- 2. Mobile Menu Logic ---
675
+ const hamburger = document.getElementById('hamburger');
676
+ const navLinks = document.getElementById('navLinks');
677
+ const links = navLinks.querySelectorAll('a');
678
+
679
+ hamburger.addEventListener('click', () => {
680
+ navLinks.classList.toggle('open');
681
+ const icon = hamburger.querySelector('i');
682
+ if (navLinks.classList.contains('open')) {
683
+ icon.classList.replace('ri-menu-3-line', 'ri-close-line');
684
+ } else {
685
+ icon.classList.replace('ri-close-line', 'ri-menu-3-line');
686
+ }
687
+ });
688
+
689
+ // Close menu when clicking a link
690
+ links.forEach(link => {
691
+ link.addEventListener('click', () => {
692
+ navLinks.classList.remove('open');
693
+ hamburger.querySelector('i').classList.replace('ri-close-line', 'ri-menu-3-line');
694
+ });
695
+ });
696
+
697
+ // --- 3. Typewriter Effect ---
698
+ const textElement = document.getElementById('typewriter');
699
+ const texts = ["build websites.", "design interfaces.", "solve problems."];
700
+ let count = 0;
701
+ let index = 0;
702
+ let currentText = '';
703
+ let letter = '';
704
+
705
+ (function type() {
706
+ if (count === texts.length) {
707
+ count = 0;
708
+ }
709
+ currentText = texts[count];
710
+ letter = currentText.slice(0, ++index);
711
+
712
+ textElement.textContent = letter;
713
+
714
+ if (letter.length === currentText.length) {
715
+ count++;
716
+ index = 0;
717
+ setTimeout(type, 2000); // Wait before next word
718
+ } else {
719
+ setTimeout(type, 100); // Typing speed
720
+ }
721
+ }());
722
+
723
+ // --- 4. Scroll Reveal Animation ---
724
+ const revealElements = document.querySelectorAll('.reveal');
725
+
726
+ const revealOnScroll = () => {
727
+ const windowHeight = window.innerHeight;
728
+ const elementVisible = 150;
729
+
730
+ revealElements.forEach((reveal) => {
731
+ const elementTop = reveal.getBoundingClientRect().top;
732
+ if (elementTop < windowHeight - elementVisible) {
733
+ reveal.classList.add('active');
734
+ }
735
+ });
736
+ };
737
+
738
+ window.addEventListener('scroll', revealOnScroll);
739
+ // Trigger once on load
740
+ revealOnScroll();
741
+
742
+ // --- 5. Contact Form Handling ---
743
+ const contactForm = document.getElementById('contactForm');
744
+ const toast = document.getElementById('toast');
745
+
746
+ contactForm.addEventListener('submit', (e) => {
747
+ e.preventDefault();
748
+
749
+ // Simulate form submission
750
+ const btn = contactForm.querySelector('button');
751
+ const originalText = btn.innerHTML;
752
+ btn.innerHTML = 'Sending...';
753
+ btn.disabled = true;
754
+
755
+ setTimeout(() => {
756
+ // Show Toast
757
+ toast.classList.add('show');
758
+
759
+ // Reset Form
760
+ contactForm.reset();
761
+ btn.innerHTML = originalText;
762
+ btn.disabled = false;
763
+
764
+ // Hide Toast after 3 seconds
765
+ setTimeout(() => {
766
+ toast.classList.remove('show');
767
+ }, 3000);
768
+ }, 1500);
769
+ });
770
+ </script>
771
+ </body>
772
+ </html>