Spaces:
Running
Running
File size: 12,814 Bytes
9647aff 4c85281 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Binary Guardian 010io</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<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>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
body {
font-family: 'JetBrains Mono', monospace;
}
.binary-bg {
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
}
.glitch-text {
position: relative;
color: #00ff41;
text-shadow: 0.05em 0 0 #ff00c1, -0.05em -0.025em 0 #00ffff;
animation: glitch 2s infinite;
}
@keyframes glitch {
0% { text-shadow: 0.05em 0 0 #ff00c1, -0.05em -0.025em 0 #00ffff; }
14% { text-shadow: 0.05em 0 0 #ff00c1, -0.05em -0.025em 0 #00ffff; }
15% { text-shadow: -0.05em -0.025em 0 #ff00c1, 0.025em 0.025em 0 #00ffff; }
49% { text-shadow: -0.05em -0.025em 0 #ff00c1, 0.025em 0.025em 0 #00ffff; }
50% { text-shadow: 0.025em 0.05em 0 #ff00c1, 0.05em 0 0 #00ffff; }
99% { text-shadow: 0.025em 0.05em 0 #ff00c1, 0.05em 0 0 #00ffff; }
100% { text-shadow: -0.025em 0 0 #ff00c1, -0.025em -0.025em 0 #00ffff; }
}
.hex-grid {
background-image:
linear-gradient(rgba(0, 255, 65, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 65, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
</style>
</head>
<body class="binary-bg text-white min-h-screen">
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
<!-- Navigation -->
<nav class="relative z-10 border-b border-green-500/20 bg-black/30 backdrop-blur-lg">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="shield" class="text-green-500"></i>
<span class="glitch-text text-xl font-bold">010io</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#about" class="hover:text-green-400 transition-colors">About</a>
<a href="#services" class="hover:text-green-400 transition-colors">Services</a>
<a href="#team" class="hover:text-green-400 transition-colors">Team</a>
<a href="#contact" class="hover:text-green-400 transition-colors">Contact</a>
</div>
<button class="md:hidden">
<i data-feather="menu"></i>
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative z-10 min-h-screen flex items-center justify-center hex-grid">
<div class="container mx-auto px-4 text-center">
<h1 class="glitch-text text-5xl md:text-7xl font-bold mb-6">
010<span class="text-red-500">io</span>
</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
Cybersecurity excellence powered by Omelchenko Ihor. Protecting digital assets with cutting-edge binary defense systems.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
Get Protected
</button>
<button class="border border-green-500 hover:bg-green-500/10 text-green-400 px-8 py-3 rounded-lg font-semibold transition-all">
Learn More
</button>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="relative z-10 py-20 bg-black/40">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16 glitch-text">About 010io</h2>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div>
<h3 class="text-2xl font-semibold mb-4 text-green-400">Binary Security Specialists</h3>
<p class="text-gray-300 mb-6 leading-relaxed">
010io represents the pinnacle of cybersecurity expertise, founded by Omelchenko Ihor.
We specialize in binary-level security analysis, reverse engineering, and advanced threat protection.
</p>
<p class="text-gray-300 mb-6 leading-relaxed">
Our name "010io" reflects our core philosophy: understanding systems at the most fundamental
binary level to provide unparalleled security solutions.
</p>
<div class="grid grid-cols-2 gap-4 mt-8">
<div class="text-center p-4 bg-green-900/20 rounded-lg">
<i data-feather="code" class="mx-auto mb-2 text-green-400"></i>
<p class="text-sm">Binary Analysis</p>
</div>
<div class="text-center p-4 bg-green-900/20 rounded-lg">
<i data-feather="shield" class="mx-auto mb-2 text-green-400"></i>
<p class="text-sm">Threat Protection</p>
</div>
<div class="text-center p-4 bg-green-900/20 rounded-lg">
<i data-feather="eye" class="mx-auto mb-2 text-green-400"></i>
<p class="text-sm">24/7 Monitoring</p>
</div>
<div class="text-center p-4 bg-green-900/20 rounded-lg">
<i data-feather="cpu" class="mx-auto mb-2 text-green-400"></i>
<p class="text-sm">Reverse Engineering</p>
</div>
</div>
</div>
<div class="relative">
<img src="http://static.photos/technology/640x360/42" alt="Cybersecurity" class="rounded-lg shadow-2xl">
<div class="absolute -inset-4 border border-green-500/30 rounded-lg -z-10"></div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="relative z-10 py-20">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16 glitch-text">Our Services</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-black/30 p-6 rounded-lg border border-green-500/20 hover:border-green-500/50 transition-all">
<i data-feather="lock" class="text-green-400 mb-4 h-12 w-12"></i>
<h3 class="text-xl font-semibold mb-3">Binary Security</h3>
<p class="text-gray-300">Deep-level binary analysis and protection for critical systems and applications.</p>
</div>
<div class="bg-black/30 p-6 rounded-lg border border-green-500/20 hover:border-green-500/50 transition-all">
<i data-feather="search" class="text-green-400 mb-4 h-12 w-12"></i>
<h3 class="text-xl font-semibold mb-3">Vulnerability Research</h3>
<p class="text-gray-300">Comprehensive vulnerability assessment and penetration testing services.</p>
</div>
<div class="bg-black/30 p-6 rounded-lg border border-green-500/20 hover:border-green-500/50 transition-all">
<i data-feather="activity" class="text-green-400 mb-4 h-12 w-12"></i>
<h3 class="text-xl font-semibold mb-3">Incident Response</h3>
<p class="text-gray-300">24/7 incident response and digital forensics for security breaches.</p>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section id="team" class="relative z-10 py-20 bg-black/40">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16 glitch-text">Our Team</h2>
<div class="max-w-2xl mx-auto text-center">
<div class="bg-black/30 p-8 rounded-lg border border-green-500/20">
<img src="http://static.photos/people/200x200/101" alt="Omelchenko Ihor" class="w-32 h-32 rounded-full mx-auto mb-6 border-2 border-green-500">
<h3 class="text-2xl font-semibold mb-2">Omelchenko Ihor</h3>
<p class="text-green-400 mb-4">Founder & Lead Security Researcher</p>
<p class="text-gray-300">
With extensive experience in binary analysis and cybersecurity, Ihor leads 010io's mission
to provide world-class security solutions. His expertise in reverse engineering and system
architecture forms the foundation of our innovative protection systems.
</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="relative z-10 py-20">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-16 glitch-text">Get in Touch</h2>
<div class="max-w-2xl mx-auto">
<form class="space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<input type="text" placeholder="Name" class="bg-black/30 border border-green-500/20 rounded-lg px-4 py-3 focus:outline-none focus:border-green-500 transition-colors">
<input type="email" placeholder="Email" class="bg-black/30 border border-green-500/20 rounded-lg px-4 py-3 focus:outline-none focus:border-green-500 transition-colors">
</div>
<input type="text" placeholder="Subject" class="w-full bg-black/30 border border-green-500/20 rounded-lg px-4 py-3 focus:outline-none focus:border-green-500 transition-colors">
<textarea placeholder="Message" rows="6" class="w-full bg-black/30 border border-green-500/20 rounded-lg px-4 py-3 focus:outline-none focus:border-green-500 transition-colors"></textarea>
<button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-semibold transition-colors">
Send Secure Message
</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="relative z-10 border-t border-green-500/20 bg-black/30 py-8">
<div class="container mx-auto px-4 text-center">
<div class="flex justify-center space-x-6 mb-4">
<a href="#" class="text-gray-400 hover:text-green-400 transition-colors">
<i data-feather="github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-green-400 transition-colors">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-green-400 transition-colors">
<i data-feather="linkedin"></i>
</a>
</div>
<p class="text-gray-400">© 2024 010io Cybersecurity. All rights reserved.</p>
</div>
</footer>
<script>
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x00ff41,
backgroundColor: 0x0f0f23
});
feather.replace();
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
|