Hugging Face's logo

Spaces:
hemoyt
/
anycoder-0442858c
Running

App Files Community
hemoyt commited on
Commit
4174f6d
·
verified ·
1 Parent(s): 6b553c7

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1196 -19
index.html CHANGED
@@ -1,19 +1,1196 @@
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>Nexus Agency - Digital Innovation Partner</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --primary: #667eea;
17
+ --secondary: #764ba2;
18
+ --dark: #0f0f1e;
19
+ --light: #ffffff;
20
+ --gray: #6b7280;
21
+ --success: #10b981;
22
+ --warning: #f59e0b;
23
+ --danger: #ef4444;
24
+ --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
25
+ --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
26
+ --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
27
+ }
28
+
29
+ body {
30
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
31
+ line-height: 1.6;
32
+ color: var(--dark);
33
+ overflow-x: hidden;
34
+ background: var(--light);
35
+ }
36
+
37
+ /* Smooth Scrolling */
38
+ html {
39
+ scroll-behavior: smooth;
40
+ }
41
+
42
+ /* Custom Scrollbar */
43
+ ::-webkit-scrollbar {
44
+ width: 10px;
45
+ }
46
+
47
+ ::-webkit-scrollbar-track {
48
+ background: #f1f1f1;
49
+ }
50
+
51
+ ::-webkit-scrollbar-thumb {
52
+ background: var(--gradient);
53
+ border-radius: 5px;
54
+ }
55
+
56
+ /* Navigation */
57
+ nav {
58
+ position: fixed;
59
+ top: 0;
60
+ width: 100%;
61
+ background: rgba(255, 255, 255, 0.95);
62
+ backdrop-filter: blur(10px);
63
+ z-index: 1000;
64
+ transition: all 0.3s ease;
65
+ box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
66
+ }
67
+
68
+ nav.scrolled {
69
+ padding: 0.5rem 0;
70
+ background: rgba(255, 255, 255, 0.98);
71
+ }
72
+
73
+ .nav-container {
74
+ max-width: 1200px;
75
+ margin: 0 auto;
76
+ padding: 1rem 2rem;
77
+ display: flex;
78
+ justify-content: space-between;
79
+ align-items: center;
80
+ }
81
+
82
+ .logo {
83
+ font-size: 1.5rem;
84
+ font-weight: 800;
85
+ background: var(--gradient);
86
+ -webkit-background-clip: text;
87
+ -webkit-text-fill-color: transparent;
88
+ display: flex;
89
+ align-items: center;
90
+ gap: 0.5rem;
91
+ }
92
+
93
+ .nav-links {
94
+ display: flex;
95
+ list-style: none;
96
+ gap: 2rem;
97
+ align-items: center;
98
+ }
99
+
100
+ .nav-links a {
101
+ text-decoration: none;
102
+ color: var(--dark);
103
+ font-weight: 500;
104
+ transition: all 0.3s ease;
105
+ position: relative;
106
+ }
107
+
108
+ .nav-links a::after {
109
+ content: '';
110
+ position: absolute;
111
+ bottom: -5px;
112
+ left: 0;
113
+ width: 0;
114
+ height: 2px;
115
+ background: var(--gradient);
116
+ transition: width 0.3s ease;
117
+ }
118
+
119
+ .nav-links a:hover::after {
120
+ width: 100%;
121
+ }
122
+
123
+ .nav-cta {
124
+ background: var(--gradient);
125
+ color: white;
126
+ padding: 0.5rem 1.5rem;
127
+ border-radius: 50px;
128
+ text-decoration: none;
129
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
130
+ }
131
+
132
+ .nav-cta:hover {
133
+ transform: translateY(-2px);
134
+ box-shadow: var(--shadow);
135
+ }
136
+
137
+ .menu-toggle {
138
+ display: none;
139
+ flex-direction: column;
140
+ cursor: pointer;
141
+ }
142
+
143
+ .menu-toggle span {
144
+ width: 25px;
145
+ height: 3px;
146
+ background: var(--dark);
147
+ margin: 3px 0;
148
+ transition: 0.3s;
149
+ }
150
+
151
+ /* Hero Section */
152
+ .hero {
153
+ min-height: 100vh;
154
+ display: flex;
155
+ align-items: center;
156
+ padding: 6rem 2rem 2rem;
157
+ background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
158
+ position: relative;
159
+ overflow: hidden;
160
+ }
161
+
162
+ .hero::before {
163
+ content: '';
164
+ position: absolute;
165
+ top: -50%;
166
+ right: -50%;
167
+ width: 200%;
168
+ height: 200%;
169
+ background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
170
+ animation: float 20s infinite ease-in-out;
171
+ }
172
+
173
+ @keyframes float {
174
+ 0%, 100% { transform: translate(0, 0) rotate(0deg); }
175
+ 33% { transform: translate(30px, -30px) rotate(120deg); }
176
+ 66% { transform: translate(-20px, 20px) rotate(240deg); }
177
+ }
178
+
179
+ .hero-container {
180
+ max-width: 1200px;
181
+ margin: 0 auto;
182
+ display: grid;
183
+ grid-template-columns: 1fr 1fr;
184
+ gap: 4rem;
185
+ align-items: center;
186
+ position: relative;
187
+ z-index: 1;
188
+ }
189
+
190
+ .hero-content h1 {
191
+ font-size: clamp(2rem, 5vw, 3.5rem);
192
+ font-weight: 800;
193
+ line-height: 1.2;
194
+ margin-bottom: 1.5rem;
195
+ background: var(--gradient);
196
+ -webkit-background-clip: text;
197
+ -webkit-text-fill-color: transparent;
198
+ animation: slideInLeft 0.8s ease;
199
+ }
200
+
201
+ @keyframes slideInLeft {
202
+ from {
203
+ opacity: 0;
204
+ transform: translateX(-50px);
205
+ }
206
+ to {
207
+ opacity: 1;
208
+ transform: translateX(0);
209
+ }
210
+ }
211
+
212
+ .hero-content p {
213
+ font-size: 1.25rem;
214
+ color: var(--gray);
215
+ margin-bottom: 2rem;
216
+ animation: slideInLeft 0.8s ease 0.2s backwards;
217
+ }
218
+
219
+ .hero-buttons {
220
+ display: flex;
221
+ gap: 1rem;
222
+ flex-wrap: wrap;
223
+ animation: slideInLeft 0.8s ease 0.4s backwards;
224
+ }
225
+
226
+ .btn-primary {
227
+ background: var(--gradient);
228
+ color: white;
229
+ padding: 1rem 2rem;
230
+ border-radius: 50px;
231
+ text-decoration: none;
232
+ font-weight: 600;
233
+ transition: all 0.3s ease;
234
+ display: inline-flex;
235
+ align-items: center;
236
+ gap: 0.5rem;
237
+ }
238
+
239
+ .btn-primary:hover {
240
+ transform: translateY(-3px);
241
+ box-shadow: var(--shadow-lg);
242
+ }
243
+
244
+ .btn-secondary {
245
+ background: transparent;
246
+ color: var(--primary);
247
+ padding: 1rem 2rem;
248
+ border-radius: 50px;
249
+ text-decoration: none;
250
+ font-weight: 600;
251
+ border: 2px solid var(--primary);
252
+ transition: all 0.3s ease;
253
+ display: inline-flex;
254
+ align-items: center;
255
+ gap: 0.5rem;
256
+ }
257
+
258
+ .btn-secondary:hover {
259
+ background: var(--primary);
260
+ color: white;
261
+ transform: translateY(-3px);
262
+ }
263
+
264
+ .hero-image {
265
+ position: relative;
266
+ animation: slideInRight 0.8s ease;
267
+ }
268
+
269
+ @keyframes slideInRight {
270
+ from {
271
+ opacity: 0;
272
+ transform: translateX(50px);
273
+ }
274
+ to {
275
+ opacity: 1;
276
+ transform: translateX(0);
277
+ }
278
+ }
279
+
280
+ .hero-image img {
281
+ width: 100%;
282
+ height: auto;
283
+ border-radius: 20px;
284
+ box-shadow: var(--shadow-lg);
285
+ }
286
+
287
+ .floating-cards {
288
+ position: absolute;
289
+ top: 50%;
290
+ left: 50%;
291
+ transform: translate(-50%, -50%);
292
+ width: 100%;
293
+ height: 100%;
294
+ pointer-events: none;
295
+ }
296
+
297
+ .floating-card {
298
+ position: absolute;
299
+ background: white;
300
+ padding: 1rem;
301
+ border-radius: 10px;
302
+ box-shadow: var(--shadow);
303
+ animation: floatCard 10s infinite ease-in-out;
304
+ }
305
+
306
+ @keyframes floatCard {
307
+ 0%, 100% { transform: translateY(0) rotate(0deg); }
308
+ 50% { transform: translateY(-20px) rotate(5deg); }
309
+ }
310
+
311
+ .floating-card:nth-child(1) {
312
+ top: 10%;
313
+ right: 10%;
314
+ animation-delay: 0s;
315
+ }
316
+
317
+ .floating-card:nth-child(2) {
318
+ bottom: 20%;
319
+ left: 5%;
320
+ animation-delay: 2s;
321
+ }
322
+
323
+ .floating-card:nth-child(3) {
324
+ top: 50%;
325
+ right: 5%;
326
+ animation-delay: 4s;
327
+ }
328
+
329
+ /* Stats Section */
330
+ .stats {
331
+ padding: 4rem 2rem;
332
+ background: var(--gradient);
333
+ color: white;
334
+ }
335
+
336
+ .stats-container {
337
+ max-width: 1200px;
338
+ margin: 0 auto;
339
+ display: grid;
340
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
341
+ gap: 2rem;
342
+ text-align: center;
343
+ }
344
+
345
+ .stat-item {
346
+ padding: 1rem;
347
+ }
348
+
349
+ .stat-number {
350
+ font-size: 2.5rem;
351
+ font-weight: 800;
352
+ margin-bottom: 0.5rem;
353
+ }
354
+
355
+ .stat-label {
356
+ font-size: 1rem;
357
+ opacity: 0.9;
358
+ }
359
+
360
+ /* Services Section */
361
+ .services {
362
+ padding: 5rem 2rem;
363
+ background: #f9fafb;
364
+ }
365
+
366
+ .section-header {
367
+ text-align: center;
368
+ max-width: 600px;
369
+ margin: 0 auto 3rem;
370
+ }
371
+
372
+ .section-header h2 {
373
+ font-size: 2.5rem;
374
+ font-weight: 800;
375
+ margin-bottom: 1rem;
376
+ background: var(--gradient);
377
+ -webkit-background-clip: text;
378
+ -webkit-text-fill-color: transparent;
379
+ }
380
+
381
+ .section-header p {
382
+ color: var(--gray);
383
+ font-size: 1.1rem;
384
+ }
385
+
386
+ .services-grid {
387
+ max-width: 1200px;
388
+ margin: 0 auto;
389
+ display: grid;
390
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
391
+ gap: 2rem;
392
+ }
393
+
394
+ .service-card {
395
+ background: white;
396
+ padding: 2rem;
397
+ border-radius: 15px;
398
+ box-shadow: var(--shadow);
399
+ transition: all 0.3s ease;
400
+ position: relative;
401
+ overflow: hidden;
402
+ }
403
+
404
+ .service-card::before {
405
+ content: '';
406
+ position: absolute;
407
+ top: 0;
408
+ left: 0;
409
+ width: 100%;
410
+ height: 4px;
411
+ background: var(--gradient);
412
+ transform: scaleX(0);
413
+ transition: transform 0.3s ease;
414
+ }
415
+
416
+ .service-card:hover::before {
417
+ transform: scaleX(1);
418
+ }
419
+
420
+ .service-card:hover {
421
+ transform: translateY(-10px);
422
+ box-shadow: var(--shadow-lg);
423
+ }
424
+
425
+ .service-icon {
426
+ width: 60px;
427
+ height: 60px;
428
+ background: var(--gradient);
429
+ border-radius: 15px;
430
+ display: flex;
431
+ align-items: center;
432
+ justify-content: center;
433
+ margin-bottom: 1.5rem;
434
+ font-size: 1.5rem;
435
+ color: white;
436
+ }
437
+
438
+ .service-card h3 {
439
+ font-size: 1.5rem;
440
+ margin-bottom: 1rem;
441
+ color: var(--dark);
442
+ }
443
+
444
+ .service-card p {
445
+ color: var(--gray);
446
+ line-height: 1.6;
447
+ }
448
+
449
+ /* Portfolio Section */
450
+ .portfolio {
451
+ padding: 5rem 2rem;
452
+ }
453
+
454
+ .portfolio-grid {
455
+ max-width: 1200px;
456
+ margin: 0 auto;
457
+ display: grid;
458
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
459
+ gap: 2rem;
460
+ }
461
+
462
+ .portfolio-item {
463
+ position: relative;
464
+ border-radius: 15px;
465
+ overflow: hidden;
466
+ box-shadow: var(--shadow);
467
+ transition: all 0.3s ease;
468
+ cursor: pointer;
469
+ background: white;
470
+ }
471
+
472
+ .portfolio-item:hover {
473
+ transform: scale(1.05);
474
+ box-shadow: var(--shadow-lg);
475
+ }
476
+
477
+ .portfolio-image {
478
+ width: 100%;
479
+ height: 250px;
480
+ background: var(--gradient);
481
+ position: relative;
482
+ overflow: hidden;
483
+ }
484
+
485
+ .portfolio-image img {
486
+ width: 100%;
487
+ height: 100%;
488
+ object-fit: cover;
489
+ }
490
+
491
+ .portfolio-overlay {
492
+ position: absolute;
493
+ top: 0;
494
+ left: 0;
495
+ width: 100%;
496
+ height: 100%;
497
+ background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
498
+ display: flex;
499
+ align-items: flex-end;
500
+ padding: 1.5rem;
501
+ opacity: 0;
502
+ transition: opacity 0.3s ease;
503
+ }
504
+
505
+ .portfolio-item:hover .portfolio-overlay {
506
+ opacity: 1;
507
+ }
508
+
509
+ .portfolio-info {
510
+ color: white;
511
+ }
512
+
513
+ .portfolio-info h3 {
514
+ font-size: 1.25rem;
515
+ margin-bottom: 0.5rem;
516
+ }
517
+
518
+ .portfolio-info p {
519
+ opacity: 0.9;
520
+ font-size: 0.9rem;
521
+ }
522
+
523
+ /* Testimonials */
524
+ .testimonials {
525
+ padding: 5rem 2rem;
526
+ background: #f9fafb;
527
+ }
528
+
529
+ .testimonials-container {
530
+ max-width: 800px;
531
+ margin: 0 auto;
532
+ }
533
+
534
+ .testimonial-card {
535
+ background: white;
536
+ padding: 2rem;
537
+ border-radius: 15px;
538
+ box-shadow: var(--shadow);
539
+ margin-bottom: 2rem;
540
+ }
541
+
542
+ .testimonial-content {
543
+ font-size: 1.1rem;
544
+ color: var(--gray);
545
+ margin-bottom: 1.5rem;
546
+ font-style: italic;
547
+ }
548
+
549
+ .testimonial-author {
550
+ display: flex;
551
+ align-items: center;
552
+ gap: 1rem;
553
+ }
554
+
555
+ .author-avatar {
556
+ width: 50px;
557
+ height: 50px;
558
+ border-radius: 50%;
559
+ background: var(--gradient);
560
+ display: flex;
561
+ align-items: center;
562
+ justify-content: center;
563
+ color: white;
564
+ font-weight: bold;
565
+ }
566
+
567
+ .author-info h4 {
568
+ color: var(--dark);
569
+ margin-bottom: 0.25rem;
570
+ }
571
+
572
+ .author-info p {
573
+ color: var(--gray);
574
+ font-size: 0.9rem;
575
+ }
576
+
577
+ /* Contact Section */
578
+ .contact {
579
+ padding: 5rem 2rem;
580
+ background: var(--gradient);
581
+ color: white;
582
+ }
583
+
584
+ .contact-container {
585
+ max-width: 800px;
586
+ margin: 0 auto;
587
+ text-align: center;
588
+ }
589
+
590
+ .contact h2 {
591
+ font-size: 2.5rem;
592
+ margin-bottom: 1rem;
593
+ }
594
+
595
+ .contact p {
596
+ font-size: 1.1rem;
597
+ margin-bottom: 2rem;
598
+ opacity: 0.9;
599
+ }
600
+
601
+ .contact-form {
602
+ background: white;
603
+ padding: 2rem;
604
+ border-radius: 15px;
605
+ box-shadow: var(--shadow-lg);
606
+ }
607
+
608
+ .form-group {
609
+ margin-bottom: 1.5rem;
610
+ text-align: left;
611
+ }
612
+
613
+ .form-group label {
614
+ display: block;
615
+ color: var(--dark);
616
+ margin-bottom: 0.5rem;
617
+ font-weight: 500;
618
+ }
619
+
620
+ .form-group input,
621
+ .form-group textarea {
622
+ width: 100%;
623
+ padding: 0.75rem;
624
+ border: 2px solid #e5e7eb;
625
+ border-radius: 10px;
626
+ font-size: 1rem;
627
+ transition: border-color 0.3s ease;
628
+ }
629
+
630
+ .form-group input:focus,
631
+ .form-group textarea:focus {
632
+ outline: none;
633
+ border-color: var(--primary);
634
+ }
635
+
636
+ .form-group textarea {
637
+ resize: vertical;
638
+ min-height: 120px;
639
+ }
640
+
641
+ .submit-btn {
642
+ background: var(--gradient);
643
+ color: white;
644
+ padding: 1rem 2rem;
645
+ border: none;
646
+ border-radius: 50px;
647
+ font-size: 1rem;
648
+ font-weight: 600;
649
+ cursor: pointer;
650
+ transition: all 0.3s ease;
651
+ width: 100%;
652
+ }
653
+
654
+ .submit-btn:hover {
655
+ transform: translateY(-2px);
656
+ box-shadow: var(--shadow);
657
+ }
658
+
659
+ /* Footer */
660
+ footer {
661
+ background: var(--dark);
662
+ color: white;
663
+ padding: 3rem 2rem 1rem;
664
+ }
665
+
666
+ .footer-container {
667
+ max-width: 1200px;
668
+ margin: 0 auto;
669
+ display: grid;
670
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
671
+ gap: 2rem;
672
+ margin-bottom: 2rem;
673
+ }
674
+
675
+ .footer-section h3 {
676
+ margin-bottom: 1rem;
677
+ background: var(--gradient);
678
+ -webkit-background-clip: text;
679
+ -webkit-text-fill-color: transparent;
680
+ }
681
+
682
+ .footer-section ul {
683
+ list-style: none;
684
+ }
685
+
686
+ .footer-section ul li {
687
+ margin-bottom: 0.5rem;
688
+ }
689
+
690
+ .footer-section a {
691
+ color: #9ca3af;
692
+ text-decoration: none;
693
+ transition: color 0.3s ease;
694
+ }
695
+
696
+ .footer-section a:hover {
697
+ color: white;
698
+ }
699
+
700
+ .social-links {
701
+ display: flex;
702
+ gap: 1rem;
703
+ margin-top: 1rem;
704
+ }
705
+
706
+ .social-links a {
707
+ width: 40px;
708
+ height: 40px;
709
+ background: rgba(255, 255, 255, 0.1);
710
+ border-radius: 50%;
711
+ display: flex;
712
+ align-items: center;
713
+ justify-content: center;
714
+ transition: all 0.3s ease;
715
+ }
716
+
717
+ .social-links a:hover {
718
+ background: var(--gradient);
719
+ transform: translateY(-3px);
720
+ }
721
+
722
+ .footer-bottom {
723
+ text-align: center;
724
+ padding-top: 2rem;
725
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
726
+ color: #9ca3af;
727
+ }
728
+
729
+ .anycoder-link {
730
+ color: var(--primary);
731
+ text-decoration: none;
732
+ font-weight: 600;
733
+ }
734
+
735
+ /* Responsive Design */
736
+ @media (max-width: 768px) {
737
+ .nav-links {
738
+ display: none;
739
+ position: absolute;
740
+ top: 100%;
741
+ left: 0;
742
+ width: 100%;
743
+ background: white;
744
+ flex-direction: column;
745
+ padding: 2rem;
746
+ box-shadow: var(--shadow);
747
+ }
748
+
749
+ .nav-links.active {
750
+ display: flex;
751
+ }
752
+
753
+ .menu-toggle {
754
+ display: flex;
755
+ }
756
+
757
+ .hero-container {
758
+ grid-template-columns: 1fr;
759
+ text-align: center;
760
+ }
761
+
762
+ .hero-buttons {
763
+ justify-content: center;
764
+ }
765
+
766
+ .stats-container {
767
+ grid-template-columns: repeat(2, 1fr);
768
+ }
769
+
770
+ .portfolio-grid {
771
+ grid-template-columns: 1fr;
772
+ }
773
+ }
774
+
775
+ /* Loading Animation */
776
+ .fade-in {
777
+ animation: fadeIn 1s ease;
778
+ }
779
+
780
+ @keyframes fadeIn {
781
+ from {
782
+ opacity: 0;
783
+ transform: translateY(20px);
784
+ }
785
+ to {
786
+ opacity: 1;
787
+ transform: translateY(0);
788
+ }
789
+ }
790
+
791
+ /* Notification Toast */
792
+ .toast {
793
+ position: fixed;
794
+ bottom: 20px;
795
+ right: 20px;
796
+ background: var(--gradient);
797
+ color: white;
798
+ padding: 1rem 1.5rem;
799
+ border-radius: 10px;
800
+ box-shadow: var(--shadow-lg);
801
+ transform: translateX(400px);
802
+ transition: transform 0.3s ease;
803
+ z-index: 2000;
804
+ }
805
+
806
+ .toast.show {
807
+ transform: translateX(0);
808
+ }
809
+ </style>
810
+ </head>
811
+ <body>
812
+ <!-- Navigation -->
813
+ <nav id="navbar">
814
+ <div class="nav-container">
815
+ <div class="logo">
816
+ <i class="fas fa-rocket"></i>
817
+ Nexus Agency
818
+ </div>
819
+ <ul class="nav-links" id="navLinks">
820
+ <li><a href="#home">Home</a></li>
821
+ <li><a href="#services">Services</a></li>
822
+ <li><a href="#portfolio">Portfolio</a></li>
823
+ <li><a href="#testimonials">Testimonials</a></li>
824
+ <li><a href="#contact">Contact</a></li>
825
+ <li><a href="#" class="nav-cta">Get Started</a></li>
826
+ </ul>
827
+ <div class="menu-toggle" id="menuToggle">
828
+ <span></span>
829
+ <span></span>
830
+ <span></span>
831
+ </div>
832
+ </div>
833
+ </nav>
834
+
835
+ <!-- Hero Section -->
836
+ <section class="hero" id="home">
837
+ <div class="hero-container">
838
+ <div class="hero-content">
839
+ <h1>Transform Your Digital Presence with Innovation</h1>
840
+ <p>We create stunning digital experiences that drive growth and engagement for your business.</p>
841
+ <div class="hero-buttons">
842
+ <a href="#contact" class="btn-primary">
843
+ Start Your Project
844
+ <i class="fas fa-arrow-right"></i>
845
+ </a>
846
+ <a href="#portfolio" class="btn-secondary">
847
+ View Our Work
848
+ <i class="fas fa-eye"></i>
849
+ </a>
850
+ </div>
851
+ </div>
852
+ <div class="hero-image">
853
+ <div class="floating-cards">
854
+ <div class="floating-card">
855
+ <i class="fas fa-chart-line" style="color: var(--success); font-size: 1.5rem;"></i>
856
+ </div>
857
+ <div class="floating-card">
858
+ <i class="fas fa-code" style="color: var(--primary); font-size: 1.5rem;"></i>
859
+ </div>
860
+ <div class="floating-card">
861
+ <i class="fas fa-mobile-alt" style="color: var(--warning); font-size: 1.5rem;"></i>
862
+ </div>
863
+ </div>
864
+ <img src="https://picsum.photos/seed/agency-hero/600/400" alt="Digital Agency">
865
+ </div>
866
+ </div>
867
+ </section>
868
+
869
+ <!-- Stats Section -->
870
+ <section class="stats">
871
+ <div class="stats-container">
872
+ <div class="stat-item">
873
+ <div class="stat-number" data-target="150">0</div>
874
+ <div class="stat-label">Projects Completed</div>
875
+ </div>
876
+ <div class="stat-item">
877
+ <div class="stat-number" data-target="98">0</div>
878
+ <div class="stat-label">Happy Clients</div>
879
+ </div>
880
+ <div class="stat-item">
881
+ <div class="stat-number" data-target="12">0</div>
882
+ <div class="stat-label">Years Experience</div>
883
+ </div>
884
+ <div class="stat-item">
885
+ <div class="stat-number" data-target="24">0</div>
886
+ <div class="stat-label">Team Members</div>
887
+ </div>
888
+ </div>
889
+ </section>
890
+
891
+ <!-- Services Section -->
892
+ <section class="services" id="services">
893
+ <div class="section-header fade-in">
894
+ <h2>Our Services</h2>
895
+ <p>We offer comprehensive digital solutions to help your business thrive in the modern world.</p>
896
+ </div>
897
+ <div class="services-grid">
898
+ <div class="service-card fade-in">
899
+ <div class="service-icon">
900
+ <i class="fas fa-palette"></i>
901
+ </div>
902
+ <h3>Web Design</h3>
903
+ <p>Creating beautiful, user-centered designs that captivate your audience and drive engagement.</p>
904
+ </div>
905
+ <div class="service-card fade-in">
906
+ <div class="service-icon">
907
+ <i class="fas fa-laptop-code"></i>
908
+ </div>
909
+ <h3>Web Development</h3>
910
+ <p>Building robust, scalable websites and applications with cutting-edge technologies.</p>
911
+ </div>
912
+ <div class="service-card fade-in">
913
+ <div class="service-icon">
914
+ <i class="fas fa-mobile-alt"></i>
915
+ </div>
916
+ <h3>Mobile Apps</h3>
917
+ <p>Developing intuitive mobile applications for iOS and Android platforms.</p>
918
+ </div>
919
+ <div class="service-card fade-in">
920
+ <div class="service-icon">
921
+ <i class="fas fa-chart-line"></i>
922
+ </div>
923
+ <h3>Digital Marketing</h3>
924
+ <p>Strategic marketing solutions to increase your online visibility and reach.</p>
925
+ </div>
926
+ <div class="service-card fade-in">
927
+ <div class="service-icon">
928
+ <i class="fas fa-search"></i>
929
+ </div>
930
+ <h3>SEO Optimization</h3>
931
+ <p>Improving your search engine rankings to drive organic traffic to your website.</p>
932
+ </div>
933
+ <div class="service-card fade-in">
934
+ <div class="service-icon">
935
+ <i class="fas fa-cloud"></i>
936
+ </div>
937
+ <h3>Cloud Solutions</h3>
938
+ <p>Providing scalable cloud infrastructure and migration services for modern businesses.</p>
939
+ </div>
940
+ </div>
941
+ </section>
942
+
943
+ <!-- Portfolio Section -->
944
+ <section class="portfolio" id="portfolio">
945
+ <div class="section-header fade-in">
946
+ <h2>Recent Projects</h2>
947
+ <p>Explore our latest work and see how we've helped businesses achieve their goals.</p>
948
+ </div>
949
+ <div class="portfolio-grid">
950
+ <div class="portfolio-item fade-in">
951
+ <div class="portfolio-image">
952
+ <img src="https://picsum.photos/seed/project1/400/250" alt="E-commerce Platform">
953
+ <div class="portfolio-overlay">
954
+ <div class="portfolio-info">
955
+ <h3>E-commerce Platform</h3>
956
+ <p>Modern online shopping experience</p>
957
+ </div>
958
+ </div>
959
+ </div>
960
+ </div>
961
+ <div class="portfolio-item fade-in">
962
+ <div class="portfolio-image">
963
+ <img src="https://picsum.photos/seed/project2/400/250" alt="Banking App">
964
+ <div class="portfolio-overlay">
965
+ <div class="portfolio-info">
966
+ <h3>Banking App</h3>
967
+ <p>Secure financial management solution</p>
968
+ </div>
969
+ </div>
970
+ </div>
971
+ </div>
972
+ <div class="portfolio-item fade-in">
973
+ <div class="portfolio-image">
974
+ <img src="https://picsum.photos/seed/project3/400/250" alt="Healthcare Portal">
975
+ <div class="portfolio-overlay">
976
+ <div class="portfolio-info">
977
+ <h3>Healthcare Portal</h3>
978
+ <p>Comprehensive patient management system</p>
979
+ </div>
980
+ </div>
981
+ </div>
982
+ </div>
983
+ </div>
984
+ </section>
985
+
986
+ <!-- Testimonials Section -->
987
+ <section class="testimonials" id="testimonials">
988
+ <div class="section-header fade-in">
989
+ <h2>Client Testimonials</h2>
990
+ <p>Don't just take our word for it - hear what our clients have to say.</p>
991
+ </div>
992
+ <div class="testimonials-container">
993
+ <div class="testimonial-card fade-in">
994
+ <div class="testimonial-content">
995
+ "Nexus Agency transformed our online presence completely. Their innovative approach and attention to detail resulted in a 200% increase in our conversion rates. Highly recommend!"
996
+ </div>
997
+ <div class="testimonial-author">
998
+ <div class="author-avatar">JD</div>
999
+ <div class="author-info">
1000
+ <h4>John Davidson</h4>
1001
+ <p>CEO, TechStart Inc.</p>
1002
+ </div>
1003
+ </div>
1004
+ </div>
1005
+ <div class="testimonial-card fade-in">
1006
+ <div class="testimonial-content">
1007
+ "Working with Nexus Agency was a game-changer for our business. They delivered exceptional results on time and within budget. Their ongoing support is invaluable."
1008
+ </div>
1009
+ <div class="testimonial-author">
1010
+ <div class="author-avatar">SM</div>
1011
+ <div class="author-info">
1012
+ <h4>Sarah Mitchell</h4>
1013
+ <p>Marketing Director, Global Retail</p>
1014
+ </div>
1015
+ </div>
1016
+ </div>
1017
+ </div>
1018
+ </section>
1019
+
1020
+ <!-- Contact Section -->
1021
+ <section class="contact" id="contact">
1022
+ <div class="contact-container">
1023
+ <h2>Let's Work Together</h2>
1024
+ <p>Ready to start your next project? Get in touch with us today.</p>
1025
+ <form class="contact-form" id="contactForm">
1026
+ <div class="form-group">
1027
+ <label for="name">Your Name</label>
1028
+ <input type="text" id="name" name="name" required>
1029
+ </div>
1030
+ <div class="form-group">
1031
+ <label for="email">Email Address</label>
1032
+ <input type="email" id="email" name="email" required>
1033
+ </div>
1034
+ <div class="form-group">
1035
+ <label for="project">Project Type</label>
1036
+ <input type="text" id="project" name="project" placeholder="e.g., Web Design, Mobile App">
1037
+ </div>
1038
+ <div class="form-group">
1039
+ <label for="message">Message</label>
1040
+ <textarea id="message" name="message" required></textarea>
1041
+ </div>
1042
+ <button type="submit" class="submit-btn">
1043
+ Send Message
1044
+ <i class="fas fa-paper-plane"></i>
1045
+ </button>
1046
+ </form>
1047
+ </div>
1048
+ </section>
1049
+
1050
+ <!-- Footer -->
1051
+ <footer>
1052
+ <div class="footer-container">
1053
+ <div class="footer-section">
1054
+ <h3>Nexus Agency</h3>
1055
+ <p>Your trusted partner for digital transformation and innovation.</p>
1056
+ <div class="social-links">
1057
+ <a href="#"><i class="fab fa-facebook-f"></i></a>
1058
+ <a href="#"><i class="fab fa-twitter"></i></a>
1059
+ <a href="#"><i class="fab fa-linkedin-in"></i></a>
1060
+ <a href="#"><i class="fab fa-instagram"></i></a>
1061
+ </div>
1062
+ </div>
1063
+ <div class="footer-section">
1064
+ <h3>Quick Links</h3>
1065
+ <ul>
1066
+ <li><a href="#home">Home</a></li>
1067
+ <li><a href="#services">Services</a></li>
1068
+ <li><a href="#portfolio">Portfolio</a></li>
1069
+ <li><a href="#testimonials">Testimonials</a></li>
1070
+ <li><a href="#contact">Contact</a></li>
1071
+ </ul>
1072
+ </div>
1073
+ <div class="footer-section">
1074
+ <h3>Services</h3>
1075
+ <ul>
1076
+ <li><a href="#">Web Design</a></li>
1077
+ <li><a href="#">Web Development</a></li>
1078
+ <li><a href="#">Mobile Apps</a></li>
1079
+ <li><a href="#">Digital Marketing</a></li>
1080
+ <li><a href="#">SEO Optimization</a></li>
1081
+ </ul>
1082
+ </div>
1083
+ <div class="footer-section">
1084
+ <h3>Contact Info</h3>
1085
+ <ul>
1086
+ <li><i class="fas fa-envelope"></i> hello@nexusagency.com</li>
1087
+ <li><i class="fas fa-phone"></i> +1 (555) 123-4567</li>
1088
+ <li><i class="fas fa-map-marker-alt"></i> 123 Tech Street, Digital City</li>
1089
+ </ul>
1090
+ </div>
1091
+ </div>
1092
+ <div class="footer-bottom">
1093
+ <p>&copy; 2024 Nexus Agency. All rights reserved. | Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">anycoder</a></p>
1094
+ </div>
1095
+ </footer>
1096
+
1097
+ <!-- Toast Notification -->
1098
+ <div class="toast" id="toast">
1099
+ <i class="fas fa-check-circle"></i> Message sent successfully!
1100
+ </div>
1101
+
1102
+ <script>
1103
+ // Mobile Menu Toggle
1104
+ const menuToggle = document.getElementById('menuToggle');
1105
+ const navLinks = document.getElementById('navLinks');
1106
+
1107
+ menuToggle.addEventListener('click', () => {
1108
+ navLinks.classList.toggle('active');
1109
+ });
1110
+
1111
+ // Close mobile menu when clicking on a link
1112
+ document.querySelectorAll('.nav-links a').forEach(link => {
1113
+ link.addEventListener('click', () => {
1114
+ navLinks.classList.remove('active');
1115
+ });
1116
+ });
1117
+
1118
+ // Navbar scroll effect
1119
+ window.addEventListener('scroll', () => {
1120
+ const navbar = document.getElementById('navbar');
1121
+ if (window.scrollY > 50) {
1122
+ navbar.classList.add('scrolled');
1123
+ } else {
1124
+ navbar.classList.remove('scrolled');
1125
+ }
1126
+ });
1127
+
1128
+ // Counter Animation
1129
+ const counters = document.querySelectorAll('.stat-number');
1130
+ const speed = 200;
1131
+
1132
+ const countUp = () => {
1133
+ counters.forEach(counter => {
1134
+ const target = +counter.getAttribute('data-target');
1135
+ const count = +counter.innerText;
1136
+ const increment = target / speed;
1137
+
1138
+ if (count < target) {
1139
+ counter.innerText = Math.ceil(count + increment);
1140
+ setTimeout(countUp, 10);
1141
+ } else {
1142
+ counter.innerText = target;
1143
+ }
1144
+ });
1145
+ };
1146
+
1147
+ // Trigger counter animation when stats section is in view
1148
+ const statsSection = document.querySelector('.stats');
1149
+ const observerOptions = {
1150
+ threshold: 0.5
1151
+ };
1152
+
1153
+ const observer = new IntersectionObserver((entries) => {
1154
+ entries.forEach(entry => {
1155
+ if (entry.isIntersecting) {
1156
+ countUp();
1157
+ observer.unobserve(entry.target);
1158
+ }
1159
+ });
1160
+ }, observerOptions);
1161
+
1162
+ observer.observe(statsSection);
1163
+
1164
+ // Fade in animation on scroll
1165
+ const fadeElements = document.querySelectorAll('.fade-in');
1166
+
1167
+ const fadeObserver = new IntersectionObserver((entries) => {
1168
+ entries.forEach(entry => {
1169
+ if (entry.isIntersecting) {
1170
+ entry.target.style.opacity = '1';
1171
+ entry.target.style.transform = 'translateY(0)';
1172
+ }
1173
+ });
1174
+ }, {
1175
+ threshold: 0.1
1176
+ });
1177
+
1178
+ fadeElements.forEach(element => {
1179
+ element.style.opacity = '0';
1180
+ element.style.transform = 'translateY(20px)';
1181
+ element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
1182
+ fadeObserver.observe(element);
1183
+ });
1184
+
1185
+ // Contact Form Submission
1186
+ const contactForm = document.getElementById('contactForm');
1187
+ const toast = document.getElementById('toast');
1188
+
1189
+ contactForm.addEventListener('submit', (e) => {
1190
+ e.preventDefault();
1191
+
1192
+ // Get form data
1193
+ const formData = new FormData(contactForm);
1194
+ const data = Object.fromEntries(formData);
1195
+
1196
+ // Show success