Hugging Face's logo

Spaces:
Tejas123we
/
code
Running

App Files Community
code
File size: 40,711 Bytes
ead792e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code-Genexis Corp - IT Education & Courses</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .hero-gradient {
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
        }
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .nav-link {
            position: relative;
        }
        .nav-link:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #3b82f6;
            transition: width 0.3s ease;
        }
        .nav-link:hover:after {
            width: 100%;
        }
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        .course-details {
            display: none;
        }
        .course-details.active {
            display: block;
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="font-sans antialiased text-gray-800">
    <!-- Navigation -->
    <nav class="bg-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <a href="#" class="text-2xl font-bold text-indigo-600">CODE-GENEXIS CORP</a>
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="#home" class="nav-link text-gray-700 hover:text-indigo-600">Home</a>
                    <a href="#courses" class="nav-link text-gray-700 hover:text-indigo-600">Courses</a>
                    <a href="#about" class="nav-link text-gray-700 hover:text-indigo-600">About</a>
                    <a href="#portfolio" class="nav-link text-gray-700 hover:text-indigo-600">Portfolio</a>
                    <a href="#contact" class="nav-link text-gray-700 hover:text-indigo-600">Contact</a>
                </div>
                <div class="md:hidden">
                    <button id="mobile-menu-button" class="text-gray-700 focus:outline-none">
                        <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>
            <!-- Mobile menu -->
            <div id="mobile-menu" class="hidden md:hidden mt-4">
                <a href="#home" class="block py-2 text-gray-700 hover:text-indigo-600">Home</a>
                <a href="#courses" class="block py-2 text-gray-700 hover:text-indigo-600">Courses</a>
                <a href="#about" class="block py-2 text-gray-700 hover:text-indigo-600">About</a>
                <a href="#portfolio" class="block py-2 text-gray-700 hover:text-indigo-600">Portfolio</a>
                <a href="#contact" class="block py-2 text-gray-700 hover:text-indigo-600">Contact</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="hero-gradient text-white py-20 md:py-32">
        <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-12 md:mb-0">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">Empowering Your Tech Journey</h1>
                <p class="text-xl mb-8">Master in-demand IT skills with our comprehensive courses in programming, AI tools, LLMs, ethical hacking, and web development.</p>
                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                    <a href="#contact" class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-semibold text-center transition duration-300">Get Started</a>
                    <a href="#courses" class="border-2 border-white text-white hover:bg-white hover:text-indigo-600 px-8 py-3 rounded-lg font-semibold text-center transition duration-300">Our Courses</a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="IT Solutions" class="rounded-lg shadow-2xl animate-float max-w-full h-auto">
            </div>
        </div>
    </section>

    <!-- Courses Section -->
    <section id="courses" class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Courses</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Comprehensive IT education programs designed to make you industry-ready.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Course 1 -->
                <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetails('ethical-hacking')">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-user-secret text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Ethical Hacking</h3>
                    <p class="text-gray-600">Learn to think like a hacker to protect systems from cyber threats.</p>
                    <div id="ethical-hacking" class="course-details mt-4">
                        <h4 class="font-semibold mb-2">Course Details:</h4>
                        <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                            <li>Penetration testing methodologies</li>
                            <li>Network security fundamentals</li>
                            <li>Vulnerability assessment</li>
                            <li>Cryptography techniques</li>
                            <li>Security tools like Kali Linux, Metasploit</li>
                            <li>Certification preparation (CEH, OSCP)</li>
                        </ul>
                        <p class="mt-3 text-sm font-medium">Duration: 12 weeks | Level: Intermediate to Advanced</p>
                    </div>
                </div>
                <!-- Course 2 -->
                <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetails('coding')">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-code text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Coding Mastery</h3>
                    <p class="text-gray-600">Become proficient in 10+ programming languages and frameworks.</p>
                    <div id="coding" class="course-details mt-4">
                        <h4 class="font-semibold mb-2">Languages Covered:</h4>
                        <div class="grid grid-cols-2 gap-2">
                            <div class="flex items-center">
                                <i class="fab fa-python text-indigo-600 mr-2"></i>
                                <span>Python</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fab fa-java text-indigo-600 mr-2"></i>
                                <span>Java</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fab fa-js text-indigo-600 mr-2"></i>
                                <span>JavaScript</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-code text-indigo-600 mr-2"></i>
                                <span>C++</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fab fa-swift text-indigo-600 mr-2"></i>
                                <span>Swift</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fab fa-php text-indigo-600 mr-2"></i>
                                <span>PHP</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fab fa-rust text-indigo-600 mr-2"></i>
                                <span>Rust</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-database text-indigo-600 mr-2"></i>
                                <span>SQL</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fab fa-r-project text-indigo-600 mr-2"></i>
                                <span>R</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fab fa-golang text-indigo-600 mr-2"></i>
                                <span>Go</span>
                            </div>
                        </div>
                        <p class="mt-3 text-sm font-medium">Duration: 6 months | Level: Beginner to Advanced</p>
                    </div>
                </div>
                <!-- Course 3 -->
                <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetails('web-building')">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-laptop-code text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">Website Building</h3>
                    <p class="text-gray-600">From basic HTML to full-stack development - build professional websites.</p>
                    <div id="web-building" class="course-details mt-4">
                        <h4 class="font-semibold mb-2">Course Curriculum:</h4>
                        <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                            <li>HTML5 & CSS3 fundamentals</li>
                            <li>JavaScript and modern frameworks (React, Vue, Angular)</li>
                            <li>Responsive design principles</li>
                            <li>Backend development with Node.js</li>
                            <li>Database integration (MongoDB, MySQL)</li>
                            <li>Deployment and hosting solutions</li>
                            <li>E-commerce website development</li>
                            <li>SEO optimization techniques</li>
                        </ul>
                        <p class="mt-3 text-sm font-medium">Duration: 16 weeks | Level: Beginner to Intermediate</p>
                    </div>
                </div>
                <!-- Course 4 -->
                <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetails('ai-tools')">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-robot text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">AI Tools Mastery</h3>
                    <p class="text-gray-600">Learn to leverage cutting-edge AI tools for various applications.</p>
                    <div id="ai-tools" class="course-details mt-4">
                        <h4 class="font-semibold mb-2">Course Content:</h4>
                        <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                            <li>Introduction to AI and machine learning</li>
                            <li>Popular AI tools and frameworks</li>
                            <li>Natural language processing applications</li>
                            <li>Computer vision tools</li>
                            <li>AI for data analysis</li>
                            <li>Automation with AI</li>
                            <li>Ethical considerations in AI</li>
                        </ul>
                        <p class="mt-3 text-sm font-medium">Duration: 10 weeks | Level: Intermediate</p>
                    </div>
                </div>
                <!-- Course 5 -->
                <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300 cursor-pointer" onclick="showCourseDetails('llm')">
                    <div class="text-indigo-600 mb-4">
                        <i class="fas fa-brain text-4xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">LLM Technologies</h3>
                    <p class="text-gray-600">Master Large Language Models and their practical applications.</p>
                    <div id="llm" class="course-details mt-4">
                        <h4 class="font-semibold mb-2">Course Modules:</h4>
                        <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
                            <li>Fundamentals of LLMs</li>
                            <li>Working with GPT models</li>
                            <li>Fine-tuning language models</li>
                            <li>Building LLM-powered applications</li>
                            <li>Prompt engineering techniques</li>
                            <li>Ethical considerations in LLM usage</li>
                            <li>Deployment strategies</li>
                        </ul>
                        <p class="mt-3 text-sm font-medium">Duration: 8 weeks | Level: Intermediate to Advanced</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-20">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">About Code-Genexis Corp</h2>
                    <div class="w-24 h-1 bg-indigo-600 mb-6"></div>
                    <p class="text-gray-600 mb-6">Founded in 2015, Code-Genexis Corp has been empowering individuals and businesses with cutting-edge IT education and solutions. Our mission is to bridge the gap between academic knowledge and real-world tech skills.</p>
                    <p class="text-gray-600 mb-8">We believe in hands-on, practical learning that prepares our students for the challenges of the modern tech industry. Our instructors are industry professionals with years of practical experience.</p>
                    <div class="flex space-x-4">
                        <div class="text-center">
                            <div class="text-3xl font-bold text-indigo-600">5,000+</div>
                            <div class="text-gray-600">Students Trained</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold text-indigo-600">15+</div>
                            <div class="text-gray-600">Cutting-edge Courses</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold text-indigo-600">98%</div>
                            <div class="text-gray-600">Satisfaction Rate</div>
                        </div>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Team" class="rounded-lg shadow-lg max-w-full h-auto">
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section id="portfolio" class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Student Projects</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">See what our students have built after completing our courses.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Project 1 -->
                <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 1" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">E-Commerce Platform</h3>
                        <p class="text-gray-600 mb-4">Built by our Web Development students using MERN stack.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">React</span>
                            <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Node.js</span>
                            <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">MongoDB</span>
                        </div>
                    </div>
                </div>
                <!-- Project 2 -->
                <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
                    <img src="https://images.unsplash.com/photo-1512941937669-90a1b58eaf91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 2" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Security Dashboard</h3>
                        <p class="text-gray-600 mb-4">Developed by our Ethical Hacking students to monitor network vulnerabilities.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Python</span>
                            <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Django</span>
                            <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Security</span>
                        </div>
                    </div>
                </div>
                <!-- Project 3 -->
                <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
                    <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1415&q=80" alt="Project 3" class="w-full h-48 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">AI Chatbot</h3>
                        <p class="text-gray-600 mb-4">Created by our AI Tools students using natural language processing.</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Python</span>
                            <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">NLP</span>
                            <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">AI</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center mt-12">
                <a href="#contact" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3 rounded-lg font-semibold transition duration-300">View More Projects</a>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="py-20 bg-indigo-600 text-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Students Say</h2>
                <div class="w-24 h-1 bg-white mx-auto mb-6"></div>
                <p class="text-lg max-w-2xl mx-auto">Hear from individuals who transformed their careers with our courses.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Testimonial 1 -->
                <div class="bg-white bg-opacity-10 p-8 rounded-lg backdrop-filter backdrop-blur-sm">
                    <div class="flex items-center mb-4">
                        <div class="text-yellow-400 text-xl mr-2">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                    <p class="mb-6">"The Ethical Hacking course at Code-Genexis Corp completely changed my career trajectory. I landed a cybersecurity job just 2 months after completing the program."</p>
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4 object-cover">
                        <div>
                            <h4 class="font-bold">Sarah Johnson</h4>
                            <p class="text-sm opacity-80">Security Analyst, TechSecure</p>
                        </div>
                    </div>
                </div>
                <!-- Testimonial 2 -->
                <div class="bg-white bg-opacity-10 p-8 rounded-lg backdrop-filter backdrop-blur-sm">
                    <div class="flex items-center mb-4">
                        <div class="text-yellow-400 text-xl mr-2">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                    <p class="mb-6">"I went from zero coding knowledge to building my own web applications thanks to the comprehensive Coding Mastery program. The instructors are phenomenal!"</p>
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4 object-cover">
                        <div>
                            <h4 class="font-bold">Michael Chen</h4>
                            <p class="text-sm opacity-80">Junior Developer, WebCraft</p>
                        </div>
                    </div>
                </div>
                <!-- Testimonial 3 -->
                <div class="bg-white bg-opacity-10 p-8 rounded-lg backdrop-filter backdrop-blur-sm">
                    <div class="flex items-center mb-4">
                        <div class="text-yellow-400 text-xl mr-2">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                    </div>
                    <p class="mb-6">"The AI Tools course gave me practical skills that I use daily in my data science job. The hands-on projects were particularly valuable for my career growth."</p>
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4 object-cover">
                        <div>
                            <h4 class="font-bold">Emily Rodriguez</h4>
                            <p class="text-sm opacity-80">Data Scientist, AI Solutions</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-20">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In Touch</h2>
                <div class="w-24 h-1 bg-indigo-600 mx-auto mb-6"></div>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Ready to start your learning journey or have questions about our courses? Contact us today.</p>
            </div>
            <div class="flex flex-col md:flex-row">
                <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
                    <h3 class="text-2xl font-bold mb-6">Contact Information</h3>
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="text-indigo-600 mr-4 mt-1">
                                <i class="fas fa-envelope text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Email</h4>
                                <p class="text-gray-600">tejas256k@gmail.com</p>
                                <p class="text-gray-600">cgc.yatharth@hotmail.com</p>
                                <p class="text-gray-600">pappoor470@gmail.com</p>
                                <p class="text-gray-600">wwc2.hi@hotmail.com</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="text-indigo-600 mr-4 mt-1">
                                <i class="fas fa-phone-alt text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Phone</h4>
                                <p class="text-gray-600">+1 (555) 123-4567</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-12">
                        <h3 class="text-2xl font-bold mb-6">Follow Us</h3>
                        <div class="flex space-x-4">
                            <a href="#" class="bg-gray-100 hover:bg-indigo-600 hover:text-white w-12 h-12 rounded-full flex items-center justify-center text-gray-700 transition duration-300">
                                <i class="fab fa-facebook-f text-xl"></i>
                            </a>
                            <a href="#" class="bg-gray-100 hover:bg-indigo-600 hover:text-white w-12 h-12 rounded-full flex items-center justify-center text-gray-700 transition duration-300">
                                <i class="fab fa-twitter text-xl"></i>
                            </a>
                            <a href="#" class="bg-gray-100 hover:bg-indigo-600 hover:text-white w-12 h-12 rounded-full flex items-center justify-center text-gray-700 transition duration-300">
                                <i class="fab fa-linkedin-in text-xl"></i>
                            </a>
                            <a href="#" class="bg-gray-100 hover:bg-indigo-600 hover:text-white w-12 h-12 rounded-full flex items-center justify-center text-gray-700 transition duration-300">
                                <i class="fab fa-instagram text-xl"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <form id="contact-form" class="bg-white p-8 rounded-lg shadow-md">
                        <div class="mb-6">
                            <label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label>
                            <input type="text" id="name" name="name" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" required>
                        </div>
                        <div class="mb-6">
                            <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
                            <input type="email" id="email" name="email" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" required>
                        </div>
                        <div class="mb-6">
                            <label for="course" class="block text-gray-700 font-medium mb-2">Course Interest</label>
                            <select id="course" name="course" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" required>
                                <option value="">Select a course</option>
                                <option value="ethical-hacking">Ethical Hacking</option>
                                <option value="coding">Coding Mastery</option>
                                <option value="web-building">Website Building</option>
                                <option value="ai-tools">AI Tools Mastery</option>
                                <option value="llm">LLM Technologies</option>
                            </select>
                        </div>
                        <div class="mb-6">
                            <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
                            <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" required></textarea>
                        </div>
                        <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-semibold transition duration-300">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">CODE-GENEXIS CORP</h3>
                    <p class="text-gray-400">Empowering the next generation of tech professionals through comprehensive IT education.</p>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#home" class="text-gray-400 hover:text-white transition">Home</a></li>
                        <li><a href="#courses" class="text-gray-400 hover:text-white transition">Courses</a></li>
                        <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li>
                        <li><a href="#portfolio" class="text-gray-400 hover:text-white transition">Portfolio</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">Courses</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Ethical Hacking</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Coding Mastery</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Website Building</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">AI Tools Mastery</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">LLM Technologies</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">Newsletter</h4>
                    <p class="text-gray-400 mb-4">Subscribe to our newsletter for course updates and tech insights.</p>
                    <form class="flex">
                        <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r-lg transition">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 mb-4 md:mb-0">© 2023 Code-Genexis Corp. All rights reserved.</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a>
                    <a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a>
                    <a href="#" class="text-gray-400 hover:text-white transition">Sitemap</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Back to Top Button -->
    <button id="back-to-top" class="fixed bottom-8 right-8 bg-indigo-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition duration-300 opacity-0 invisible">
        <i class="fas fa-arrow-up"></i>
    </button>

    <script>
        // Mobile menu toggle
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    mobileMenu.classList.add('hidden');
                }
            });
        });

        // Back to top button
        const backToTopButton = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible');
                backToTopButton.classList.add('opacity-100', 'visible');
            } else {
                backToTopButton.classList.remove('opacity-100', 'visible');
                backToTopButton.classList.add('opacity-0', 'invisible');
            }
        });
        
        backToTopButton.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Form submission
        const contactForm = document.getElementById('contact-form');
        
        contactForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // Get form values
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const course = document.getElementById('course').value;
            const message = document.getElementById('message').value;
            
            // Prepare email content
            const subject = `Interest in ${course} course`;
            const body = `Name: ${name}\nEmail: ${email}\nCourse: ${course}\nMessage: ${message}`;
            
            // Send to all email addresses
            const emails = [
                'tejas256k@gmail.com',
                'cgc.yatharth@hotmail.com',
                'pappoor470@gmail.com',
                'wwc2.hi@hotmail.com'
            ];
            
            emails.forEach(emailAddress => {
                // In a real implementation, you would send this to your server
                // which would then email all recipients
                console.log(`Email would be sent to: ${emailAddress}`);
                console.log(`Subject: ${subject}`);
                console.log(`Body: ${body}\n`);
            });
            
            // Show success message to user
            alert(`Thank you, ${name}! We've received your interest in our ${course} course. We'll contact you at ${email} soon.`);
            
            // Reset form
            contactForm.reset();
        });

        // Show course details
        let activeCourse = null;
        
        function showCourseDetails(courseId) {
            const courseElement = document.getElementById(courseId);
            
            // If clicking the same course, toggle it
            if (activeCourse === courseId) {
                courseElement.classList.toggle('active');
                return;
            }
            
            // Hide any currently active course
            if (activeCourse) {
                document.getElementById(activeCourse).classList.remove('active');
            }
            
            // Show the clicked course
            courseElement.classList.add('active');
            activeCourse = courseId;
        }

        // Animation on scroll
        const animateOnScroll = () => {
            const elements = document.querySelectorAll('.service-card, .animate-float');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.2;
                
                if (elementPosition < screenPosition) {
                    element.style.opacity = '1';
                    element.style.transform = 'translateY(0)';
                }
            });
        };

        // Set initial state for animated elements
        document.querySelectorAll('.service-card').forEach(card => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        });

        // Run animation check on load and scroll
        window.addEventListener('load', animateOnScroll);
        window.addEventListener('scroll', animateOnScroll);
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Tejas123we/code" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>