Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CyberDojo - Practice Cybersecurity Skills</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%); | |
| } | |
| .challenge-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); | |
| } | |
| .typewriter { | |
| 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"> | |
| <!-- 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-bold text-xl">CyberDojo</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="hover:text-blue-300 transition">Home</a> | |
| <a href="#challenges" class="hover:text-blue-300 transition">Challenges</a> | |
| <a href="#ctf" class="hover:text-blue-300 transition">CTFs</a> | |
| <a href="#resources" class="hover:text-blue-300 transition">Resources</a> | |
| <a href="#about" class="hover:text-blue-300 transition">About</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-btn" class="text-white focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden mt-4 pb-4"> | |
| <a href="#" class="block py-2 hover:text-blue-300 transition">Home</a> | |
| <a href="#challenges" class="block py-2 hover:text-blue-300 transition">Challenges</a> | |
| <a href="#ctf" class="block py-2 hover:text-blue-300 transition">CTFs</a> | |
| <a href="#resources" class="block py-2 hover:text-blue-300 transition">Resources</a> | |
| <a href="#about" class="block py-2 hover:text-blue-300 transition">About</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Hone Your <span class="text-blue-400">Cybersecurity</span> Skills</h1> | |
| <p class="text-xl md:text-2xl mb-8 typewriter">Practice ethical hacking in a safe, legal environment.</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <a href="#challenges" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"> | |
| Start Challenges | |
| </a> | |
| <a href="#ctf" class="bg-transparent hover:bg-blue-800 text-white font-bold py-3 px-6 border border-blue-400 rounded-lg transition duration-300 transform hover:scale-105"> | |
| Join CTF | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features 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">Why Practice With Us?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-lock text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Legal Environment</h3> | |
| <p class="text-gray-600">Practice hacking techniques legally on our intentionally vulnerable systems designed for learning.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-trophy text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Real-World Scenarios</h3> | |
| <p class="text-gray-600">Challenges based on actual vulnerabilities found in the wild, updated regularly.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-users text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Community Support</h3> | |
| <p class="text-gray-600">Join our active community to discuss techniques, get hints, and share knowledge.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Challenges Section --> | |
| <section id="challenges" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Practice Challenges</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Challenge Card 1 --> | |
| <div class="challenge-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">Beginner</span> | |
| <span class="text-yellow-500"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Web Security Basics</h3> | |
| <p class="text-gray-600 mb-4">Learn about XSS, SQLi, and CSRF vulnerabilities in a controlled environment.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">XSS</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">SQLi</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">CSRF</span> | |
| </div> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition"> | |
| Start Challenge | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Challenge Card 2 --> | |
| <div class="challenge-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded">Intermediate</span> | |
| <span class="text-yellow-500"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Network Penetration</h3> | |
| <p class="text-gray-600 mb-4">Practice network scanning, enumeration, and exploitation techniques.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Nmap</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Metasploit</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Wireshark</span> | |
| </div> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition"> | |
| Start Challenge | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Challenge Card 3 --> | |
| <div class="challenge-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded">Advanced</span> | |
| <span class="text-yellow-500"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Binary Exploitation</h3> | |
| <p class="text-gray-600 mb-4">Dive into buffer overflows, ROP chains, and format string vulnerabilities.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">GDB</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Pwntools</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Assembly</span> | |
| </div> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition"> | |
| Start Challenge | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center"> | |
| View All Challenges | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTF Section --> | |
| <section id="ctf" 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">Capture The Flag Events</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-4 text-gray-800">Upcoming CTF Competition</h3> | |
| <p class="text-gray-600 mb-6">Join our monthly CTF competition to test your skills against other cybersecurity enthusiasts. Solve challenges across multiple categories including web, crypto, forensics, and more.</p> | |
| <div class="bg-blue-50 p-6 rounded-lg mb-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-flag text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">CyberDojo CTF #42</h4> | |
| <p class="text-sm text-gray-600">Starts in 3 days, 12 hours</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-center"> | |
| <div> | |
| <div class="text-2xl font-bold text-blue-600">24</div> | |
| <div class="text-xs text-gray-500">HOURS</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-blue-600">5</div> | |
| <div class="text-xs text-gray-500">CATEGORIES</div> | |
| </div> | |
| <div> | |
| <div class="text-2xl font-bold text-blue-600">30+</div> | |
| <div class="text-xs text-gray-500">CHALLENGES</div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300"> | |
| Register Now | |
| </button> | |
| </div> | |
| <div class="bg-gray-100 p-8 rounded-xl"> | |
| <h4 class="font-semibold mb-4 text-gray-800">Previous CTF Winners</h4> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-100 text-yellow-800 font-bold w-8 h-8 flex items-center justify-center rounded-full mr-3">1</div> | |
| <div> | |
| <div class="font-medium">h4x0r_elite</div> | |
| <div class="text-xs text-gray-500">1250 points</div> | |
| </div> | |
| </div> | |
| <span class="text-sm font-semibold text-blue-600">CTF #41</span> | |
| </div> | |
| <div class="flex items-center justify-between bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center"> | |
| <div class="bg-gray-200 text-gray-800 font-bold w-8 h-8 flex items-center justify-center rounded-full mr-3">2</div> | |
| <div> | |
| <div class="font-medium">crypto_knight</div> | |
| <div class="text-xs text-gray-500">1180 points</div> | |
| </div> | |
| </div> | |
| <span class="text-sm font-semibold text-blue-600">CTF #41</span> | |
| </div> | |
| <div class="flex items-center justify-between bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center"> | |
| <div class="bg-amber-600 text-white font-bold w-8 h-8 flex items-center justify-center rounded-full mr-3">3</div> | |
| <div> | |
| <div class="font-medium">web_wizard</div> | |
| <div class="text-xs text-gray-500">1120 points</div> | |
| </div> | |
| </div> | |
| <span class="text-sm font-semibold text-blue-600">CTF #41</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resources Section --> | |
| <section id="resources" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Learning Resources</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 mb-4 text-3xl"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Guides & Tutorials</h3> | |
| <p class="text-gray-600 mb-4">Step-by-step guides for various cybersecurity concepts and tools.</p> | |
| <a href="#" class="text-blue | |
| </html> |