Hugging Face's logo

Spaces:
Tejas123we
/
code
Running

App Files Community
code / index.html
Tejas123we's picture
Tejas123we
Add 3 files
ead792e verified
Raw
History Blame Contribute Delete
40.7 kB
<!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>