Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cryptic Shield - Home</title> | |
| <link rel="icon" type="image/x-icon" href="https://drehsec.tk/images/drehsec_bg.png"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| html { scroll-behavior: smooth; } | |
| .vanta-canvas { z-index: -1 ; } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-900 to-black text-white undefined-mode overflow-x-hidden"> | |
| <!-- Vanta Background --> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script> | |
| VANTA.NET({ | |
| el: "body", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x0080ff, | |
| backgroundColor: 0x0, | |
| points: 8.00, | |
| maxDistance: 23.00, | |
| spacing: 17.00 | |
| }); | |
| </script> | |
| <!-- Navigation --> | |
| <header class="fixed top-0 w-full bg-black/60 backdrop-blur-lg z-50 border-b border-cyan-400/20"> | |
| <nav class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between"> | |
| <a href="index.html" class="flex items-center gap-3"> | |
| <img src="https://drehsec.tk/images/drehsec_bg.png" alt="Cryptic Shield" class="h-10 w-auto object-contain"> | |
| <span class="text-xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">Cryptic Shield</span> | |
| </a> | |
| <ul class="hidden md:flex items-center gap-6"> | |
| <li><a href="about.html" class="text-gray-300 hover:text-cyan-400 transition">About Us</a></li> | |
| <li><a href="services.html" class="text-gray-300 hover:text-cyan-400 transition">Services</a></li> | |
| <li><a href="contact.html" class="text-gray-300 hover:text-cyan-400 transition">Contact</a></li> | |
| </ul> | |
| <button id="mobileMenuBtn" class="md:hidden text-gray-300 hover:text-cyan-400"><i data-feather="menu"></i></button> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="hidden md:hidden absolute top-full left-0 w-full bg-black/80 backdrop-blur-lg px-6 pb-4 space-y-4"> | |
| <a href="about.html" class="block text-gray-300 hover:text-cyan-400">About Us</a> | |
| <a href="services.html" class="block text-gray-300 hover:text-cyan-400">Services</a> | |
| <a href="contact.html" class="block text-gray-300 hover:text-cyan-400">Contact</a> | |
| </div> | |
| </header> | |
| <!-- Hero --> | |
| <main class="min-h-screen flex items-center justify-center px-6 pt-20"> | |
| <div class="max-w-5xl text-center space-y-8 animate-in"> | |
| <h1 class="text-4xl sm:text-6xl md:text-7xl font-extrabold tracking-tight"> | |
| <span class="bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 bg-clip-text text-transparent">DREHSEC</span> | |
| </h1> | |
| <p class="text-lg sm:text-xl md:text-2xl text-gray-300">Information Security & Research</p> | |
| <p class="text-sm sm:text-base text-gray-400 max-w-3xl mx-auto"> | |
| Empowering organizations with elite cybersecurity research, penetration testing, and threat intelligence. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center mt-8"> | |
| <a href="services.html" class="px-6 py-3 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white font-semibold transition shadow-lg hover:shadow-cyan-500/30"> | |
| Explore Services | |
| </a> | |
| <a href="about.html" class="px-6 py-3 rounded-lg border border-cyan-600 text-cyan-400 hover:bg-cyan-600/10 font-semibold transition"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="relative z-10 bg-black/40 border-t border-cyan-400/10 py-6"> | |
| <div class="max-w-7xl mx-auto px-6 text-center text-gray-400 text-sm"> | |
| © <span id="year"></span> Cryptic Shield - research@drehsec.tk | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| document.getElementById('year').textContent = new Date().getFullYear(); | |
| document.getElementById('mobileMenuBtn').onclick = () => { | |
| document.getElementById('mobileMenu').classList.toggle('hidden'); | |
| }; | |
| </script> | |
| </body> | |
| </html> | |