Ajmax commited on
Commit
cebbbfc
Β·
verified Β·
1 Parent(s): cd62205

make this website look more professional, add more animations and transitions when scrolling, change the color scheme to something dark

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +733 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🐠
4
- colorFrom: pink
5
- colorTo: green
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: undefined
3
+ colorFrom: yellow
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,733 @@
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>NexaTech Solutions | Innovative Technology Services</title>
7
+ <meta name="description" content="NexaTech Solutions provides cutting-edge technology services and digital solutions to help businesses grow and thrive in the modern landscape.">
8
+ <style>
9
+ /* Reset and Base Styles */
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ :root {
17
+ --primary: #2563eb;
18
+ --primary-dark: #1d4ed8;
19
+ --secondary: #f59e0b;
20
+ --dark: #1e293b;
21
+ --light: #f8fafc;
22
+ --gray: #64748b;
23
+ }
24
+
25
+ body {
26
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
27
+ line-height: 1.6;
28
+ color: var(--dark);
29
+ background-color: #ffffff;
30
+ }
31
+
32
+ .container {
33
+ max-width: 1200px;
34
+ margin: 0 auto;
35
+ padding: 0 20px;
36
+ }
37
+
38
+ .btn {
39
+ display: inline-block;
40
+ padding: 12px 32px;
41
+ background: var(--primary);
42
+ color: white;
43
+ text-decoration: none;
44
+ border-radius: 8px;
45
+ font-weight: 600;
46
+ transition: all 0.3s ease;
47
+ border: none;
48
+ cursor: pointer;
49
+ }
50
+
51
+ .btn:hover {
52
+ background: var(--primary-dark);
53
+ transform: translateY(-2px);
54
+ box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2);
55
+ }
56
+
57
+ .btn-secondary {
58
+ background: transparent;
59
+ border: 2px solid var(--primary);
60
+ color: var(--primary);
61
+ }
62
+
63
+ .btn-secondary:hover {
64
+ background: var(--primary);
65
+ color: white;
66
+ }
67
+
68
+ .section {
69
+ padding: 80px 0;
70
+ }
71
+
72
+ .section-title {
73
+ text-align: center;
74
+ margin-bottom: 60px;
75
+ }
76
+
77
+ .section-title h2 {
78
+ font-size: 2.5rem;
79
+ color: var(--dark);
80
+ margin-bottom: 16px;
81
+ }
82
+
83
+ .section-title p {
84
+ font-size: 1.1rem;
85
+ color: var(--gray);
86
+ max-width: 600px;
87
+ margin: 0 auto;
88
+ }
89
+
90
+ /* Header & Navigation */
91
+ header {
92
+ background: rgba(255, 255, 255, 0.95);
93
+ backdrop-filter: blur(10px);
94
+ position: fixed;
95
+ width: 100%;
96
+ top: 0;
97
+ z-index: 1000;
98
+ border-bottom: 1px solid rgba(0,0,0,0.1);
99
+ }
100
+
101
+ nav {
102
+ display: flex;
103
+ justify-content: space-between;
104
+ align-items: center;
105
+ padding: 1rem 0;
106
+ }
107
+
108
+ .logo {
109
+ font-size: 1.8rem;
110
+ font-weight: 700;
111
+ color: var(--primary);
112
+ text-decoration: none;
113
+ }
114
+
115
+ .nav-links {
116
+ display: flex;
117
+ list-style: none;
118
+ gap: 2rem;
119
+ }
120
+
121
+ .nav-links a {
122
+ text-decoration: none;
123
+ color: var(--dark);
124
+ font-weight: 500;
125
+ transition: color 0.3s;
126
+ position: relative;
127
+ }
128
+
129
+ .nav-links a:hover {
130
+ color: var(--primary);
131
+ }
132
+
133
+ .nav-links a::after {
134
+ content: '';
135
+ position: absolute;
136
+ bottom: -5px;
137
+ left: 0;
138
+ width: 0;
139
+ height: 2px;
140
+ background: var(--primary);
141
+ transition: width 0.3s;
142
+ }
143
+
144
+ .nav-links a:hover::after {
145
+ width: 100%;
146
+ }
147
+
148
+ .mobile-menu {
149
+ display: none;
150
+ font-size: 1.5rem;
151
+ background: none;
152
+ border: none;
153
+ cursor: pointer;
154
+ color: var(--dark);
155
+ }
156
+
157
+ /* Hero Section */
158
+ .hero {
159
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
160
+ color: white;
161
+ padding: 160px 0 100px;
162
+ text-align: center;
163
+ position: relative;
164
+ overflow: hidden;
165
+ }
166
+
167
+ .hero::before {
168
+ content: '';
169
+ position: absolute;
170
+ top: 0;
171
+ left: 0;
172
+ right: 0;
173
+ bottom: 0;
174
+ background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="%23ffffff" opacity="0.1"><polygon points="1000,100 1000,0 0,100"/></svg>');
175
+ background-size: cover;
176
+ }
177
+
178
+ .hero-content {
179
+ position: relative;
180
+ z-index: 2;
181
+ max-width: 800px;
182
+ margin: 0 auto;
183
+ }
184
+
185
+ .hero h1 {
186
+ font-size: 3.5rem;
187
+ margin-bottom: 1.5rem;
188
+ font-weight: 700;
189
+ }
190
+
191
+ .hero p {
192
+ font-size: 1.3rem;
193
+ margin-bottom: 2.5rem;
194
+ opacity: 0.9;
195
+ }
196
+
197
+ .hero-buttons {
198
+ display: flex;
199
+ gap: 1rem;
200
+ justify-content: center;
201
+ flex-wrap: wrap;
202
+ }
203
+
204
+ /* Services Section */
205
+ .services {
206
+ background: var(--light);
207
+ }
208
+
209
+ .services-grid {
210
+ display: grid;
211
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
212
+ gap: 2rem;
213
+ }
214
+
215
+ .service-card {
216
+ background: white;
217
+ padding: 2.5rem;
218
+ border-radius: 12px;
219
+ box-shadow: 0 5px 20px rgba(0,0,0,0.08);
220
+ text-align: center;
221
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
222
+ border: 1px solid rgba(0,0,0,0.05);
223
+ }
224
+
225
+ .service-card:hover {
226
+ transform: translateY(-10px);
227
+ box-shadow: 0 20px 40px rgba(0,0,0,0.15);
228
+ }
229
+
230
+ .service-icon {
231
+ width: 80px;
232
+ height: 80px;
233
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
234
+ border-radius: 50%;
235
+ display: flex;
236
+ align-items: center;
237
+ justify-content: center;
238
+ margin: 0 auto 1.5rem;
239
+ font-size: 2rem;
240
+ color: white;
241
+ }
242
+
243
+ .service-card h3 {
244
+ font-size: 1.5rem;
245
+ margin-bottom: 1rem;
246
+ color: var(--dark);
247
+ }
248
+
249
+ .service-card p {
250
+ color: var(--gray);
251
+ margin-bottom: 1.5rem;
252
+ }
253
+
254
+ /* Products Section */
255
+ .products-grid {
256
+ display: grid;
257
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
258
+ gap: 2rem;
259
+ }
260
+
261
+ .product-card {
262
+ background: white;
263
+ border-radius: 12px;
264
+ overflow: hidden;
265
+ box-shadow: 0 5px 20px rgba(0,0,0,0.08);
266
+ transition: transform 0.3s ease;
267
+ }
268
+
269
+ .product-card:hover {
270
+ transform: translateY(-5px);
271
+ }
272
+
273
+ .product-image {
274
+ height: 200px;
275
+ background: linear-gradient(135deg, #667eea, #764ba2);
276
+ display: flex;
277
+ align-items: center;
278
+ justify-content: center;
279
+ color: white;
280
+ font-size: 3rem;
281
+ }
282
+
283
+ .product-content {
284
+ padding: 1.5rem;
285
+ }
286
+
287
+ .product-content h3 {
288
+ margin-bottom: 0.5rem;
289
+ font-size: 1.3rem;
290
+ }
291
+
292
+ .product-content p {
293
+ color: var(--gray);
294
+ margin-bottom: 1rem;
295
+ }
296
+
297
+ /* Contact Section */
298
+ .contact {
299
+ background: var(--light);
300
+ }
301
+
302
+ .contact-grid {
303
+ display: grid;
304
+ grid-template-columns: 1fr 1fr;
305
+ gap: 3rem;
306
+ }
307
+
308
+ .contact-info {
309
+ display: flex;
310
+ flex-direction: column;
311
+ gap: 2rem;
312
+ }
313
+
314
+ .contact-item {
315
+ display: flex;
316
+ align-items: flex-start;
317
+ gap: 1rem;
318
+ }
319
+
320
+ .contact-icon {
321
+ width: 50px;
322
+ height: 50px;
323
+ background: var(--primary);
324
+ border-radius: 50%;
325
+ display: flex;
326
+ align-items: center;
327
+ justify-content: center;
328
+ color: white;
329
+ font-size: 1.2rem;
330
+ }
331
+
332
+ .contact-form {
333
+ background: white;
334
+ padding: 2rem;
335
+ border-radius: 12px;
336
+ box-shadow: 0 5px 20px rgba(0,0,0,0.08);
337
+ }
338
+
339
+ .form-group {
340
+ margin-bottom: 1.5rem;
341
+ }
342
+
343
+ .form-group label {
344
+ display: block;
345
+ margin-bottom: 0.5rem;
346
+ font-weight: 500;
347
+ color: var(--dark);
348
+ }
349
+
350
+ .form-group input,
351
+ .form-group textarea,
352
+ .form-group select {
353
+ width: 100%;
354
+ padding: 12px;
355
+ border: 1px solid #ddd;
356
+ border-radius: 8px;
357
+ font-size: 1rem;
358
+ transition: border-color 0.3s;
359
+ }
360
+
361
+ .form-group input:focus,
362
+ .form-group textarea:focus,
363
+ .form-group select:focus {
364
+ outline: none;
365
+ border-color: var(--primary);
366
+ }
367
+
368
+ .form-group textarea {
369
+ height: 120px;
370
+ resize: vertical;
371
+ }
372
+
373
+ /* Footer */
374
+ footer {
375
+ background: var(--dark);
376
+ color: white;
377
+ padding: 60px 0 30px;
378
+ }
379
+
380
+ .footer-grid {
381
+ display: grid;
382
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
383
+ gap: 2rem;
384
+ margin-bottom: 3rem;
385
+ }
386
+
387
+ .footer-column h3 {
388
+ margin-bottom: 1.5rem;
389
+ font-size: 1.3rem;
390
+ }
391
+
392
+ .footer-links {
393
+ list-style: none;
394
+ }
395
+
396
+ .footer-links li {
397
+ margin-bottom: 0.8rem;
398
+ }
399
+
400
+ .footer-links a {
401
+ color: #cbd5e1;
402
+ text-decoration: none;
403
+ transition: color 0.3s;
404
+ }
405
+
406
+ .footer-links a:hover {
407
+ color: white;
408
+ }
409
+
410
+ .copyright {
411
+ text-align: center;
412
+ padding-top: 2rem;
413
+ border-top: 1px solid #334155;
414
+ color: #94a3b8;
415
+ }
416
+
417
+ /* Responsive Design */
418
+ @media (max-width: 768px) {
419
+ .nav-links {
420
+ display: none;
421
+ position: absolute;
422
+ top: 100%;
423
+ left: 0;
424
+ width: 100%;
425
+ background: white;
426
+ flex-direction: column;
427
+ padding: 1rem;
428
+ box-shadow: 0 5px 10px rgba(0,0,0,0.1);
429
+ }
430
+
431
+ .nav-links.active {
432
+ display: flex;
433
+ }
434
+
435
+ .mobile-menu {
436
+ display: block;
437
+ }
438
+
439
+ .hero h1 {
440
+ font-size: 2.5rem;
441
+ }
442
+
443
+ .hero p {
444
+ font-size: 1.1rem;
445
+ }
446
+
447
+ .contact-grid {
448
+ grid-template-columns: 1fr;
449
+ }
450
+
451
+ .section-title h2 {
452
+ font-size: 2rem;
453
+ }
454
+ }
455
+
456
+ @media (max-width: 480px) {
457
+ .hero h1 {
458
+ font-size: 2rem;
459
+ }
460
+
461
+ .services-grid,
462
+ .products-grid {
463
+ grid-template-columns: 1fr;
464
+ }
465
+
466
+ .hero-buttons {
467
+ flex-direction: column;
468
+ align-items: center;
469
+ }
470
+
471
+ .btn {
472
+ width: 100%;
473
+ text-align: center;
474
+ }
475
+ }
476
+ </style>
477
+ </head>
478
+ <body>
479
+ <!-- Header -->
480
+ <header>
481
+ <div class="container">
482
+ <nav>
483
+ <a href="#" class="logo">NexaTech</a>
484
+ <button class="mobile-menu">☰</button>
485
+ <ul class="nav-links">
486
+ <li><a href="#home">Home</a></li>
487
+ <li><a href="#services">Services</a></li>
488
+ <li><a href="#products">Products</a></li>
489
+ <li><a href="#about">About</a></li>
490
+ <li><a href="#contact">Contact</a></li>
491
+ </ul>
492
+ </nav>
493
+ </div>
494
+ </header>
495
+
496
+ <!-- Hero Section -->
497
+ <section class="hero" id="home">
498
+ <div class="container">
499
+ <div class="hero-content">
500
+ <h1>Innovative Solutions for Modern Businesses</h1>
501
+ <p>We provide cutting-edge technology services and digital solutions to help your business thrive in the digital age. Experience the future today.</p>
502
+ <div class="hero-buttons">
503
+ <a href="#contact" class="btn">Get Started</a>
504
+ <a href="#services" class="btn btn-secondary">Our Services</a>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </section>
509
+
510
+ <!-- Services Section -->
511
+ <section class="section services" id="services">
512
+ <div class="container">
513
+ <div class="section-title">
514
+ <h2>Our Premium Services</h2>
515
+ <p>Comprehensive solutions designed to drive your business forward</p>
516
+ </div>
517
+ <div class="services-grid">
518
+ <div class="service-card">
519
+ <div class="service-icon">πŸ’»</div>
520
+ <h3>Web Development</h3>
521
+ <p>Custom websites and web applications built with modern technologies, responsive design, and optimal performance.</p>
522
+ <a href="#contact" class="btn btn-secondary">Learn More</a>
523
+ </div>
524
+ <div class="service-card">
525
+ <div class="service-icon">πŸ“±</div>
526
+ <h3>Mobile App Development</h3>
527
+ <p>Native and cross-platform mobile applications that deliver exceptional user experiences across all devices.</p>
528
+ <a href="#contact" class="btn btn-secondary">Learn More</a>
529
+ </div>
530
+ <div class="service-card">
531
+ <div class="service-icon">☁️</div>
532
+ <h3>Cloud Solutions</h3>
533
+ <p>Scalable cloud infrastructure, migration services, and management solutions for businesses of all sizes.</p>
534
+ <a href="#contact" class="btn btn-secondary">Learn More</a>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </section>
539
+
540
+ <!-- Products Section -->
541
+ <section class="section" id="products">
542
+ <div class="container">
543
+ <div class="section-title">
544
+ <h2>Featured Products</h2>
545
+ <p>Discover our innovative product lineup designed to solve real business challenges</p>
546
+ </div>
547
+ <div class="products-grid">
548
+ <div class="product-card">
549
+ <div class="product-image">πŸ“Š</div>
550
+ <div class="product-content">
551
+ <h3>Analytics Pro</h3>
552
+ <p>Advanced business intelligence platform with real-time analytics and predictive insights.</p>
553
+ <a href="#contact" class="btn">View Details</a>
554
+ </div>
555
+ </div>
556
+ <div class="product-card">
557
+ <div class="product-image">πŸ”’</div>
558
+ <div class="product-content">
559
+ <h3>SecureConnect</h3>
560
+ <p>Enterprise-grade security solution with end-to-end encryption and threat protection.</p>
561
+ <a href="#contact" class="btn">View Details</a>
562
+ </div>
563
+ </div>
564
+ <div class="product-card">
565
+ <div class="product-image">πŸ€–</div>
566
+ <div class="product-content">
567
+ <h3>AutoFlow</h3>
568
+ <p>Intelligent workflow automation platform that streamlines your business processes.</p>
569
+ <a href="#contact" class="btn">View Details</a>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </section>
575
+
576
+ <!-- Contact Section -->
577
+ <section class="section contact" id="contact">
578
+ <div class="container">
579
+ <div class="section-title">
580
+ <h2>Get In Touch</h2>
581
+ <p>Ready to transform your business? Contact us today for a free consultation</p>
582
+ </div>
583
+ <div class="contact-grid">
584
+ <div class="contact-info">
585
+ <div class="contact-item">
586
+ <div class="contact-icon">πŸ“§</div>
587
+ <div>
588
+ <h3>Email Us</h3>
589
+ <p>info@nexatech.com</p>
590
+ </div>
591
+ </div>
592
+ <div class="contact-item">
593
+ <div class="contact-icon">πŸ“ž</div>
594
+ <div>
595
+ <h3>Call Us</h3>
596
+ <p>+1 (555) 123-4567</p>
597
+ </div>
598
+ </div>
599
+ <div class="contact-item">
600
+ <div class="contact-icon">πŸ“</div>
601
+ <div>
602
+ <h3>Visit Us</h3>
603
+ <p>123 Tech Avenue, Suite 100<br>San Francisco, CA 94107</p>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ <form class="contact-form" id="contactForm">
608
+ <div class="form-group">
609
+ <label for="name">Full Name</label>
610
+ <input type="text" id="name" name="name" required>
611
+ </div>
612
+ <div class="form-group">
613
+ <label for="email">Email Address</label>
614
+ <input type="email" id="email" name="email" required>
615
+ </div>
616
+ <div class="form-group">
617
+ <label for="service">Service Interest</label>
618
+ <select id="service" name="service">
619
+ <option value="">Select a service</option>
620
+ <option value="web-dev">Web Development</option>
621
+ <option value="mobile-dev">Mobile App Development</option>
622
+ <option value="cloud">Cloud Solutions</option>
623
+ <option value="consulting">Consulting</option>
624
+ </select>
625
+ </div>
626
+ <div class="form-group">
627
+ <label for="message">Message</label>
628
+ <textarea id="message" name="message" required></textarea>
629
+ </div>
630
+ <button type="submit" class="btn">Send Message</button>
631
+ </form>
632
+ </div>
633
+ </div>
634
+ </section>
635
+
636
+ <!-- Footer -->
637
+ <footer>
638
+ <div class="container">
639
+ <div class="footer-grid">
640
+ <div class="footer-column">
641
+ <h3>NexaTech</h3>
642
+ <p>Innovative technology solutions for modern businesses. We help you stay ahead in the digital landscape.</p>
643
+ </div>
644
+ <div class="footer-column">
645
+ <h3>Quick Links</h3>
646
+ <ul class="footer-links">
647
+ <li><a href="#home">Home</a></li>
648
+ <li><a href="#services">Services</a></li>
649
+ <li><a href="#products">Products</a></li>
650
+ <li><a href="#about">About Us</a></li>
651
+ <li><a href="#contact">Contact</a></li>
652
+ </ul>
653
+ </div>
654
+ <div class="footer-column">
655
+ <h3>Services</h3>
656
+ <ul class="footer-links">
657
+ <li><a href="#">Web Development</a></li>
658
+ <li><a href="#">Mobile Apps</a></li>
659
+ <li><a href="#">Cloud Solutions</a></li>
660
+ <li><a href="#">Digital Consulting</a></li>
661
+ <li><a href="#">Support & Maintenance</a></li>
662
+ </ul>
663
+ </div>
664
+ <div class="footer-column">
665
+ <h3>Connect With Us</h3>
666
+ <ul class="footer-links">
667
+ <li><a href="#">LinkedIn</a></li>
668
+ <li><a href="#">Twitter</a></li>
669
+ <li><a href="#">Facebook</a></li>
670
+ <li><a href="#">Instagram</a></li>
671
+ <li><a href="#">GitHub</a></li>
672
+ </ul>
673
+ </div>
674
+ </div>
675
+ <div class="copyright">
676
+ <p>&copy; 2024 NexaTech Solutions. All rights reserved.</p>
677
+ </div>
678
+ </div>
679
+ </footer>
680
+
681
+ <script>
682
+ // Mobile Menu Toggle
683
+ document.querySelector('.mobile-menu').addEventListener('click', function() {
684
+ document.querySelector('.nav-links').classList.toggle('active');
685
+ });
686
+
687
+ // Smooth Scroll
688
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
689
+ anchor.addEventListener('click', function (e) {
690
+ e.preventDefault();
691
+ const target = document.querySelector(this.getAttribute('href'));
692
+ if (target) {
693
+ target.scrollIntoView({
694
+ behavior: 'smooth',
695
+ block: 'start'
696
+ });
697
+ }
698
+ });
699
+ });
700
+
701
+ // Contact Form Handling
702
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
703
+ e.preventDefault();
704
+
705
+ // Get form data
706
+ const formData = new FormData(this);
707
+ const name = formData.get('name');
708
+ const email = formData.get('email');
709
+
710
+ // Simulate form submission
711
+ alert(`Thank you, ${name}! We have received your message and will contact you at ${email} shortly.`);
712
+ this.reset();
713
+ });
714
+
715
+ // Close mobile menu when clicking on a link
716
+ document.querySelectorAll('.nav-links a').forEach(link => {
717
+ link.addEventListener('click', () => {
718
+ document.querySelector('.nav-links').classList.remove('active');
719
+ });
720
+ });
721
+
722
+ // Add scroll effect to header
723
+ window.addEventListener('scroll', function() {
724
+ const header = document.querySelector('header');
725
+ if (window.scrollY > 100) {
726
+ header.style.background = 'rgba(255, 255, 255, 0.98)';
727
+ } else {
728
+ header.style.background = 'rgba(255, 255, 255, 0.95)';
729
+ }
730
+ });
731
+ </script>
732
+ </body>
733
+ </html>