<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spiritel - Corporate Security Solutions</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0d1229 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
overflow-x: hidden;
}
.container {
text-align: center;
padding: 40px;
max-width: 800px;
position: relative;
z-index: 10;
}
.logo {
font-size: 3.5rem;
font-weight: 700;
letter-spacing: 4px;
margin-bottom: 10px;
background: linear-gradient(45deg, #00d4ff, #0099cc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;
}
.tagline {
font-size: 1.2rem;
color: #8892b0;
margin-bottom: 50px;
letter-spacing: 2px;
text-transform: uppercase;
}
.coming-soon {
font-size: 2.5rem;
font-weight: 300;
margin-bottom: 30px;
color: #e6f1ff;
}
.description {
font-size: 1.1rem;
line-height: 1.8;
color: #a8b2d1;
margin-bottom: 50px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.services {
display: flex;
justify-content: center;
gap: 40px;
margin-bottom: 50px;
flex-wrap: wrap;
}
.service-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.service-icon {
width: 60px;
height: 60px;
border: 2px solid #00d4ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #00d4ff;
transition: all 0.3s ease;
}
.service-item:hover .service-icon {
background: rgba(0, 212, 255, 0.1);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
}
.service-text {
font-size: 0.9rem;
color: #8892b0;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact {
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid rgba(136, 146, 176, 0.2);
}
.contact-title {
font-size: 1rem;
color: #8892b0;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
.contact-email {
font-size: 1.2rem;
color: #00d4ff;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-email:hover {
color: #ffffff;
}
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.particle {
position: absolute;
width: 2px;
height: 2px;
background: rgba(0, 212, 255, 0.5);
border-radius: 50%;
animation: float 20s infinite linear;
}
@keyframes float {
from {
transform: translateY(100vh) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
to {
transform: translateY(-100vh) translateX(100px);
opacity: 0;
}
}
.security-grid {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
z-index: 0;
}
@media (max-width: 600px) {
.logo {
font-size: 2.5rem;
}
.coming-soon {
font-size: 1.8rem;
}
.services {
gap: 20px;
}
}
</style>
</head>
<body>
<div class="security-grid"></div>
<div class="particles" id="particles"></div>
<div class="container">
<div class="logo">Spiritel</div>
<div class="tagline">Advanced Security Solutions</div>
<h1 class="coming-soon">Coming Soon</h1>
<p class="description">
We are building the next generation of corporate security infrastructure.
From hardware to software, our comprehensive solutions protect what matters most.
</p>
<div class="services">
<div class="service-item">
<div class="service-icon">🔒</div>
<span class="service-text">Hardware Security</span>
</div>
<div class="service-item">
<div class="service-icon">💻</div>
<span class="service-text">Software Solutions</span>
</div>
<div class="service-item">
<div class="service-icon">🛡️</div>
<span class="service-text">Network Protection</span>
</div>
<div class="service-item">
<div class="service-icon">📹</div>
<span class="service-text">Surveillance Systems</span>
</div>
</div>
<div class="contact">
<div class="contact-title">Get in Touch</div>
<a href="mailto:info@spiritel.net" class="contact-email">info@spiritel.net</a>
</div>
</div>
<script>
// Create floating particles
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 20 + 's';
particle.style.animationDuration = (15 + Math.random() * 10) + 's';
particlesContainer.appendChild(particle);
}
</script>
</body>
</html>