Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ethical Hacking Academy | Learn Cybersecurity</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); | |
| } | |
| .card-hover: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); | |
| } | |
| .typewriter h1 { | |
| overflow: hidden; | |
| border-right: .15em solid #3b82f6; | |
| white-space: nowrap; | |
| margin: 0 auto; | |
| letter-spacing: .15em; | |
| animation: | |
| typing 3.5s steps(40, end), | |
| blink-caret .75s step-end infinite; | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: #3b82f6; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans antialiased"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-6 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-shield-alt text-2xl text-blue-400"></i> | |
| <span class="font-semibold text-xl">Ethical<span class="text-blue-400">Hack</span></span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#home" class="hover:text-blue-300 transition">Home</a> | |
| <a href="#courses" class="hover:text-blue-300 transition">Courses</a> | |
| <a href="#resources" class="hover:text-blue-300 transition">Resources</a> | |
| <a href="#about" class="hover:text-blue-300 transition">About</a> | |
| <a href="#contact" class="hover:text-blue-300 transition">Contact</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <div class="typewriter mb-6"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight">Become an Ethical Hacker</h1> | |
| </div> | |
| <p class="text-xl mb-8 text-gray-300">Learn cybersecurity skills the right way. Our comprehensive courses teach you how to protect systems by understanding how attackers think.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#courses" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 text-center"> | |
| Explore Courses | |
| </a> | |
| <a href="#resources" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 text-center"> | |
| Free Resources | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Ethical Hacking" class="rounded-lg shadow-xl w-full max-w-md"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- What is Ethical Hacking --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">What is Ethical Hacking?</h2> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=camp&w=1470&q=80" alt="Ethical Hacking Concept" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <p class="text-lg text-gray-700 mb-6"> | |
| Ethical hacking involves an authorized attempt to gain unauthorized access to a computer system, application, or data. Ethical hackers use the same techniques as malicious hackers but with permission to improve security. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> | |
| <i class="fas fa-check-circle text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-medium text-gray-900">Legal and Authorized</h3> | |
| <p class="text-gray-600">Ethical hackers have explicit permission to test systems and find vulnerabilities.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> | |
| <i class="fas fa-shield-alt text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-medium text-gray-900">Improves Security</h3> | |
| <p class="text-gray-600">Identifies weaknesses before malicious hackers can exploit them.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> | |
| <i class="fas fa-certificate text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 class="text-lg font-medium text-gray-900">Certified Professionals</h3> | |
| <p class="text-gray-600">Many ethical hackers hold certifications like CEH, OSCP, or CISSP.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Courses Section --> | |
| <section id="courses" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Our Ethical Hacking Courses</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Course 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="h-48 bg-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-lock-open text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Introduction to Ethical Hacking</h3> | |
| <p class="text-gray-600 mb-4">Learn the fundamentals of ethical hacking, penetration testing, and cybersecurity principles.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-blue-500 font-medium">Beginner</span> | |
| <span class="text-gray-500">4 Weeks</span> | |
| </div> | |
| <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition duration-300"> | |
| Enroll Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Course 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="h-48 bg-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-network-wired text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Network Security & Penetration Testing</h3> | |
| <p class="text-gray-600 mb-4">Master network security concepts and learn to identify vulnerabilities in network infrastructure.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-purple-500 font-medium">Intermediate</span> | |
| <span class="text-gray-500">6 Weeks</span> | |
| </div> | |
| <button class="mt-4 w-full bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded transition duration-300"> | |
| Enroll Now | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Course 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="h-48 bg-red-600 flex items-center justify-center"> | |
| <i class="fas fa-code text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Web Application Security</h3> | |
| <p class="text-gray-600 mb-4">Learn to find and exploit vulnerabilities in web applications using ethical hacking techniques.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-red-500 font-medium">Advanced</span> | |
| <span class="text-gray-500">8 Weeks</span> | |
| </div> | |
| <button class="mt-4 w-full bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded transition duration-300"> | |
| Enroll Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-gray-800 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300"> | |
| View All Courses | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Learn Ethical Hacking --> | |
| <section class="py-16 bg-blue-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Learn Ethical Hacking?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center transition duration-300 card-hover"> | |
| <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-briefcase text-blue-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">High Demand Careers</h3> | |
| <p class="text-gray-600">Cybersecurity professionals are in high demand with competitive salaries and job security.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center transition duration-300 card-hover"> | |
| <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-globe text-green-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Protect Digital Assets</h3> | |
| <p class="text-gray-600">Help organizations protect their sensitive data and critical infrastructure from cyber threats.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center transition duration-300 card-hover"> | |
| <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-lightbulb text-purple-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Continuous Learning</h3> | |
| <p class="text-gray-600">Stay engaged with a field that's constantly evolving and presents new challenges daily.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resources Section --> | |
| <section id="resources" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Free Learning Resources</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Resource 1 --> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200 transition duration-300 hover:border-blue-300 card-hover"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-book-open text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Ethical Hacking Guide</h3> | |
| <p class="text-gray-600 mb-4">Comprehensive PDF guide covering the basics of ethical hacking.</p> | |
| <a href="#" class="text-blue-500 font-medium inline-flex items-center"> | |
| Download <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Resource 2 --> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200 transition duration-300 hover:border-blue-300 card-hover"> | |
| <div class="text-green-500 mb-4"> | |
| <i class="fas fa-video text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Video Tutorials</h3> | |
| <p class="text-gray-600 mb-4">Collection of free ethical hacking tutorial videos for beginners.</p> | |
| <a href="#" class="text-green-500 font-medium inline-flex items-center"> | |
| Watch Now <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Resource 3 --> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200 transition duration-300 hover:border-blue-300 card-hover"> | |
| <div class="text-purple-500 mb-4"> | |
| <i class="fas fa-tools text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Toolkit Collection</h3> | |
| <p class="text-gray-600 mb-4">Essential ethical hacking tools with setup guides and documentation.</p> | |
| <a href="#" class="text-purple-500 font-medium inline-flex items-center"> | |
| Explore <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Resource 4 --> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200 transition duration-300 hover:border-blue-300 card-hover"> | |
| <div class="text-red-500 mb-4"> | |
| <i class="fas fa-laptop-code text-3xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">Practice Labs</h3> | |
| <p class="text-gray-600 mb-4">Hands-on virtual labs to practice your ethical hacking skills safely.</p> | |
| <a href="#" class="text-red-500 font-medium inline-flex items-center"> | |
| Start Practicing <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-3xl font-bold mb-6">About EthicalHack Academy</h2> | |
| <p class="text-gray-300 mb-6"> | |
| Founded in 2015, EthicalHack Academy has trained thousands of cybersecurity professionals worldwide. Our mission is to make ethical hacking education accessible to everyone while maintaining the highest ethical standards. | |
| </p> | |
| <p class="text-gray-300 mb-6"> | |
| All our instructors are certified cybersecurity professionals with real-world experience in penetration testing, vulnerability assessment, and security consulting. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-blue-400">10K+</div> | |
| <div class="text-gray-400">Students</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-blue-400">50+</div> | |
| <div class="text-gray-400">Countries</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-blue-400">98%</div> | |
| <div class="text-gray-400">Satisfaction</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <img src="https://images.unsplash.com/photo-1573164713988-8665fc963095?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="About Us" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">What Our Students Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Sarah Johnson</h4> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "The Network Security course completely changed my career trajectory. Within 6 months of completing it, I landed my dream job as a penetration tester." | |
| </p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Michael Chen</h4> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "The hands-on labs were incredible. I learned more in 8 weeks here than in my entire college cybersecurity program." | |
| </p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Student" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Jessica Williams</h4> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "The instructors are knowledgeable and patient. They made complex topics easy to understand and always provided practical examples." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Get In Touch</h2> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h3 class="text-xl font-semibold mb-4">Contact Information</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-map-marker-alt text-blue-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Address</h4> | |
| <p class="text-gray-600">123 Security Avenue, Cyber City, 10001</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-envelope text-blue-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Email</h4> | |
| <p class="text-gray-600">info@ethicalhack.edu</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-phone-alt text-blue-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Phone</h4> | |
| <p class="text-gray-600">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-semibold mb-4">Follow Us</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-200 hover:bg-blue-500 hover:text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-gray-200 hover:bg-blue-700 hover:text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-gray-200 hover:bg-red-600 hover:text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="bg-gray-200 hover:bg-purple-600 hover:text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-gray-200 hover:bg-pink-600 hover:text-white w-10 h-10 rounded-full flex items-center justify-center transition duration-300"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <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" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </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" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Frequently Asked Questions</h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="space-y-4"> | |
| <!-- FAQ Item 1 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="flex justify-between items-center w-full p-4 text-left bg-gray-50 hover:bg-gray-100 transition duration-300"> | |
| <span class="font-medium text-gray-800">Is ethical hacking legal?</span> | |
| <i class="fas fa-chevron-down text-blue-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="p-4 bg-white hidden"> | |
| <p class="text-gray-600"> | |
| Ethical hacking is completely legal when performed with proper authorization. Ethical hackers must have written permission to test systems and must operate within defined boundaries. Unauthorized hacking is illegal and punishable by law. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="flex justify-between items-center w-full p-4 text-left bg-gray-50 hover:bg-gray-100 transition duration-300"> | |
| <span class="font-medium text-gray-800">What skills do I need to start learning ethical hacking?</span> | |
| <i class="fas fa-chevron-down text-blue-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="p-4 bg-white hidden"> | |
| <p class="text-gray-600"> | |
| Basic computer skills are essential. Familiarity with operating systems (especially Linux), networking concepts, and at least one programming language (Python is highly recommended) will give you a strong foundation. Our beginner courses cover all these prerequisites. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="flex justify-between items-center w-full p-4 text-left bg-gray-50 hover:bg-gray-100 transition duration-300"> | |
| <span class="font-medium text-gray-800">How long does it take to become an ethical hacker?</span> | |
| <i class="fas fa-chevron-down text-blue-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="p-4 bg-white hidden"> | |
| <p class="text-gray-600"> | |
| The timeline varies based on your background and dedication. With consistent study (10-15 hours per week), you can gain entry-level skills in 6-12 months. Becoming proficient typically takes 2-3 years of continuous learning and practice. Certifications can help accelerate your career. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 4 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="flex justify-between items-center w-full p-4 text-left bg-gray-50 hover:bg-gray-100 transition duration-300"> | |
| <span class="font-medium text-gray-800">What certifications should I pursue?</span> | |
| <i class="fas fa-chevron-down text-blue-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="p-4 bg-white hidden"> | |
| <p class="text-gray-600"> | |
| Popular entry-level certifications include CEH (Certified Ethical Hacker) and CompTIA Security+. For intermediate level, consider OSCP (Offensive Security Certified Professional). Advanced professionals often pursue CISSP (Certified Information Systems Security Professional) or specialized certifications like GIAC. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 5 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="flex justify-between items-center w-full p-4 text-left bg-gray-50 hover:bg-gray-100 transition duration-300"> | |
| <span class="font-medium text-gray-800">Can I learn ethical hacking online?</span> | |
| <i class="fas fa-chevron-down text-blue-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="p-4 bg-white hidden"> | |
| <p class="text-gray-600"> | |
| Absolutely! Our online courses provide comprehensive training with hands-on labs. Many cybersecurity professionals are self-taught through online resources. The key is practical application - make sure to practice what you learn in controlled environments like virtual labs or platforms like Hack The Box. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 gradient-bg text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Stay Updated with Cybersecurity News</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-300"> | |
| Subscribe to our newsletter for the latest ethical hacking techniques, security alerts, and course updates. | |
| </p> | |
| <form class="max-w-md mx-auto flex"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800"> | |
| <button type="submit" class="bg-blue-500 hover:bg-blue-600 px-6 py-3 rounded-r-lg font-medium transition duration-300"> | |
| Subscribe | |
| </button> | |
| </form> | |
| </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> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-shield-alt text-2xl text-blue-400"></i> | |
| <span class="font-semibold text-xl">Ethical<span class="text-blue-400">Hack</span></span> | |
| </div> | |
| <p class="text-gray-400"> | |
| Empowering the next generation of cybersecurity professionals through ethical hacking education. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-blue-300 transition">Home</a></li> | |
| <li><a href="#courses" class="text-gray-400 hover:text-blue-300 transition">Courses</a></li> | |
| <li><a href="#resources" class="text-gray-400 hover:text-blue-300 transition">Resources</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-blue-300 transition">About Us</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-blue-300 transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Courses</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Beginner Courses</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Intermediate Courses</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Advanced Courses</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Certification Prep</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Corporate Training</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Ethical Guidelines</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Refund Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-blue-300 transition">Disclaimer</a></li> | |
| </ul> | |
| </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 EthicalHack Academy. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-blue-300 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-300 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-300 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-300 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-300 transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // FAQ toggle functionality | |
| document.querySelectorAll('.border button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('fa-chevron-down'); | |
| icon.classList.toggle('fa-chevron-up'); | |
| }); | |
| }); | |
| // Mobile menu toggle (would need more implementation) | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| // Implementation for mobile menu would go here | |
| console.log('Mobile menu clicked'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </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=Atarioch/get-go-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |