HTML Template
138 lines
6.2 KB
Coming Soon Page
Live Preview
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coming Soon Page</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1b69 100%);
color: #fff;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.container { text-align: center; z-index: 1; padding: 2rem; }
.logo {
font-size: 2rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(90deg, #6366f1, #a855f7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1 { font-size: 3rem; margin-bottom: 1rem; font-weight: 700; }
.subtitle { font-size: 1.2rem; color: #a5b4fc; margin-bottom: 3rem; }
.countdown { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 3rem; }
.countdown-item {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 12px;
padding: 1.5rem 1rem;
min-width: 100px;
backdrop-filter: blur(10px);
}
.countdown-item .number { font-size: 2.5rem; font-weight: 700; color: #818cf8; }
.countdown-item .label { font-size: 0.75rem; text-transform: uppercase; color: #94a3b8; margin-top: 0.5rem; }
.notify-form { display: flex; gap: 0.5rem; max-width: 400px; margin: 0 auto; }
.notify-form input {
flex: 1;
padding: 0.875rem 1rem;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 8px;
background: rgba(255,255,255,0.05);
color: #fff;
font-size: 0.9rem;
outline: none;
}
.notify-form input::placeholder { color: #64748b; }
.notify-form input:focus { border-color: #6366f1; }
.notify-form button {
padding: 0.875rem 1.5rem;
border: none;
border-radius: 8px;
background: linear-gradient(90deg, #6366f1, #7c3aed);
color: #fff;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s;
}
.notify-form button:hover { transform: translateY(-2px); }
.particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.particle { position: absolute; border-radius: 50%; background: rgba(129,140,248,0.3); animation: float 15s infinite ease-in-out; }
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); }
50% { transform: translateY(-100px) translateX(50px); }
}
.social { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; }
.social a { color: #94a3b8; font-size: 1.5rem; transition: color 0.3s; text-decoration: none; }
.social a:hover { color: #818cf8; }
@media (max-width: 600px) {
h1 { font-size: 2rem; }
.countdown { flex-wrap: wrap; gap: 0.75rem; }
.countdown-item { min-width: 70px; padding: 1rem 0.5rem; }
.countdown-item .number { font-size: 1.5rem; }
.notify-form { flex-direction: column; }
}
</style>
</head>
<body>
<div class="particles" id="particles"></div>
<div class="container">
<div class="logo">CDNSnippet</div>
<h1>We're Launching Soon</h1>
<p class="subtitle">Something amazing is on the way. Stay tuned!</p>
<div class="countdown" id="countdown">
<div class="countdown-item"><div class="number" id="days">00</div><div class="label">Days</div></div>
<div class="countdown-item"><div class="number" id="hours">00</div><div class="label">Hours</div></div>
<div class="countdown-item"><div class="number" id="minutes">00</div><div class="label">Minutes</div></div>
<div class="countdown-item"><div class="number" id="seconds">00</div><div class="label">Seconds</div></div>
</div>
<form class="notify-form" onsubmit="event.preventDefault(); alert('Thank you! We will notify you.');">
<input type="email" placeholder="Enter your email for updates" required>
<button type="submit">Notify Me</button>
</form>
<div class="social">
<a href="#">💬</a>
<a href="#">𝕏</a>
<a href="#">📱</a>
<a href="#">🌐</a>
</div>
</div>
<script>
const target = new Date();
target.setDate(target.getDate() + 30);
function updateCountdown() {
const now = new Date();
const diff = target - now;
if (diff <= 0) return;
const d = Math.floor(diff / 86400000);
const h = Math.floor((diff % 86400000) / 3600000);
const m = Math.floor((diff % 3600000) / 60000);
const s = Math.floor((diff % 60000) / 1000);
document.getElementById('days').textContent = String(d).padStart(2, '0');
document.getElementById('hours').textContent = String(h).padStart(2, '0');
document.getElementById('minutes').textContent = String(m).padStart(2, '0');
document.getElementById('seconds').textContent = String(s).padStart(2, '0');
}
updateCountdown();
setInterval(updateCountdown, 1000);
const pc = document.getElementById('particles');
for (let i = 0; i < 30; i++) {
const p = document.createElement('div');
p.className = 'particle';
p.style.width = p.style.height = Math.random() * 4 + 2 + 'px';
p.style.left = Math.random() * 100 + '%';
p.style.top = Math.random() * 100 + '%';
p.style.animationDelay = Math.random() * 5 + 's';
p.style.animationDuration = Math.random() * 10 + 10 + 's';
pc.appendChild(p);
}
</script>
</body>
</html>