coming-soon countdown launch dark email-signup timer dark
Coming Soon Countdown
Dark-themed coming soon page with live countdown timer and email signup.
dark Responsive Vanilla JS
Live Preview
Sections
logoheadingcountdownemail-signupsocial-linksfooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coming Soon — Launch Countdown</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
/* Brand tokens */
:root {
--ws-color-accent: oklch(0.58 0.22 285);
--ws-color-accent-light: oklch(0.68 0.18 285);
--ws-color-accent-dim: oklch(0.58 0.22 285 / 0.15);
--ws-color-accent-border: oklch(0.58 0.22 285 / 0.25);
}
/* Template-specific helpers */
.glow { box-shadow: 0 0 40px oklch(0.58 0.22 285 / 0.15); }
.feature-card { transition: border-color 0.3s ease, transform 0.3s ease; }
.feature-card:hover { border-color: oklch(0.58 0.22 285 / 0.4); transform: translateY(-2px); }
</style>
</head>
<body class="bg-slate-950 text-white antialiased">
<!-- Background effects -->
<div class="fixed inset-0 pointer-events-none">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full blur-3xl" style="background: var(--ws-color-dim, oklch(0.58 0.22 285 / 0.1));"></div>
<div class="absolute bottom-0 right-0 w-[400px] h-[400px] rounded-full blur-3xl" style="background: oklch(0.52 0.2 300 / 0.1);"></div>
<div class="absolute top-1/2 left-0 w-[300px] h-[300px] rounded-full blur-3xl" style="background: oklch(0.55 0.16 270 / 0.05);"></div>
</div>
<!-- Minimal Navbar -->
<nav class="ws-navbar relative z-10 flex items-center justify-between px-6 py-5 max-w-6xl mx-auto" aria-label="Main navigation">
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background: var(--ws-color-accent-dim); border: 1px solid var(--ws-color-accent-border);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--ws-color-accent-light);"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
<span class="text-lg font-bold">NovaPulse</span>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-slate-400 hover:text-white text-sm transition-colors hidden sm:block">About</a>
<a href="#notify" class="px-4 py-2 text-sm font-medium rounded-lg transition-colors" style="background: var(--ws-color-accent-dim); border: 1px solid var(--ws-color-accent-border); color: var(--ws-color-accent-light);">Get Notified</a>
</div>
</nav>
<!-- Hero with Countdown -->
<section class="ws-hero relative min-h-[70vh] flex items-center justify-center px-4 py-16">
<div class="max-w-2xl w-full text-center">
<!-- Badge -->
<div class="inline-flex items-center px-3 py-1 rounded-full mb-8" style="background: var(--ws-color-accent-dim); border: 1px solid var(--ws-color-accent-border);">
<span class="w-2 h-2 rounded-full mr-2 animate-pulse" style="background: var(--ws-color-accent-light);"></span>
<span class="text-xs font-medium uppercase tracking-wider" style="color: var(--ws-color-accent-light);">Launching Soon</span>
</div>
<!-- Heading -->
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">
Something Big<br>
<span style="background: linear-gradient(to right, var(--ws-color-accent-light), oklch(0.72 0.18 320)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Is Coming</span>
</h1>
<p class="text-slate-400 text-lg sm:text-xl max-w-md mx-auto mb-14 leading-relaxed">We're building something extraordinary. Be the first to know when we launch.</p>
<!-- Countdown -->
<div class="grid grid-cols-4 gap-3 sm:gap-6 max-w-lg mx-auto mb-14">
<div class="glow bg-slate-900/80 border border-slate-800 rounded-2xl p-4 sm:p-6">
<span id="days" class="block text-3xl sm:text-5xl font-extrabold tabular-nums text-white">14</span>
<span class="text-slate-500 text-xs sm:text-sm uppercase tracking-wider mt-1 block">Days</span>
</div>
<div class="glow bg-slate-900/80 border border-slate-800 rounded-2xl p-4 sm:p-6">
<span id="hours" class="block text-3xl sm:text-5xl font-extrabold tabular-nums text-white">08</span>
<span class="text-slate-500 text-xs sm:text-sm uppercase tracking-wider mt-1 block">Hours</span>
</div>
<div class="glow bg-slate-900/80 border border-slate-800 rounded-2xl p-4 sm:p-6">
<span id="minutes" class="block text-3xl sm:text-5xl font-extrabold tabular-nums text-white">42</span>
<span class="text-slate-500 text-xs sm:text-sm uppercase tracking-wider mt-1 block">Minutes</span>
</div>
<div class="glow bg-slate-900/80 border border-slate-800 rounded-2xl p-4 sm:p-6">
<span id="seconds" class="block text-3xl sm:text-5xl font-extrabold tabular-nums text-white">17</span>
<span class="text-slate-500 text-xs sm:text-sm uppercase tracking-wider mt-1 block">Seconds</span>
</div>
</div>
<!-- Email signup -->
<form id="notify" class="ws-forms flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-4">
<label for="email" class="sr-only">Email address</label>
<input id="email" type="email" placeholder="Enter your email" required class="flex-1 px-5 py-3.5 bg-slate-900 border border-slate-700 rounded-xl text-sm text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:border-transparent transition"
style="--tw-ring-color: var(--ws-color-accent);" />
<button type="submit" class="px-6 py-3.5 text-sm font-semibold rounded-xl transition-colors" style="background: var(--ws-color-accent);">Notify Me</button>
</form>
<p class="text-slate-600 text-xs">Join 1,200+ people already on the waitlist</p>
</div>
</section>
<!-- Feature Teasers -->
<section class="ws-features relative py-24 px-4">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-16">
<p class="text-sm font-medium uppercase tracking-widest mb-3" style="color: var(--ws-color-accent-light);">What's Coming</p>
<h2 class="text-2xl sm:text-3xl font-bold">A Sneak Peek</h2>
</div>
<div class="grid sm:grid-cols-3 gap-6">
<div class="feature-card p-6 bg-slate-900/50 border border-slate-800 rounded-2xl">
<div class="w-10 h-10 flex items-center justify-center rounded-xl mb-4" style="background: var(--ws-color-accent-dim); color: var(--ws-color-accent-light);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
<h3 class="font-semibold mb-2">Lightning Fast</h3>
<p class="text-slate-400 text-sm leading-relaxed">Built from the ground up for speed. Sub-millisecond response times that feel instantaneous.</p>
</div>
<div class="feature-card p-6 bg-slate-900/50 border border-slate-800 rounded-2xl">
<div class="w-10 h-10 flex items-center justify-center rounded-xl mb-4" style="background: var(--ws-color-accent-dim); color: var(--ws-color-accent-light);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
</div>
<h3 class="font-semibold mb-2">Secure by Default</h3>
<p class="text-slate-400 text-sm leading-relaxed">End-to-end encryption, SOC 2 compliance, and zero-knowledge architecture. Your data stays yours.</p>
</div>
<div class="feature-card p-6 bg-slate-900/50 border border-slate-800 rounded-2xl">
<div class="w-10 h-10 flex items-center justify-center rounded-xl mb-4" style="background: var(--ws-color-accent-dim); color: var(--ws-color-accent-light);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/></svg>
</div>
<h3 class="font-semibold mb-2">Beautiful Interface</h3>
<p class="text-slate-400 text-sm leading-relaxed">A carefully crafted experience that puts content first. Minimalist design, maximum productivity.</p>
</div>
</div>
</div>
</section>
<!-- Testimonial / Social proof -->
<section class="ws-testimonials relative py-20 px-4">
<div class="max-w-2xl mx-auto text-center">
<div class="p-8 bg-slate-900/50 border border-slate-800 rounded-2xl">
<p class="text-slate-300 text-lg leading-relaxed italic mb-6">"I've been following NovaPulse's development for months. The early previews are incredibly promising — this is going to change how we work."</p>
<div class="flex items-center justify-center gap-3">
<div class="w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold text-sm" style="background: linear-gradient(135deg, var(--ws-color-accent-light), oklch(0.62 0.2 300));">AK</div>
<div class="text-left">
<p class="font-medium text-sm">Alex Kim</p>
<p class="text-slate-500 text-xs">CTO, StartupCo</p>
</div>
</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="ws-cta relative py-20 px-4">
<div class="max-w-lg mx-auto text-center">
<h2 class="text-2xl sm:text-3xl font-bold mb-4">Don't Miss Out</h2>
<p class="text-slate-400 mb-8">Early subscribers get exclusive access and a lifetime discount. No spam, just one email on launch day.</p>
<form class="ws-forms flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
<label for="email-cta" class="sr-only">Email address</label>
<input id="email-cta" type="email" placeholder="your@email.com" required class="flex-1 px-5 py-3.5 bg-slate-900 border border-slate-700 rounded-xl text-sm text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:border-transparent transition" />
<button type="submit" class="px-6 py-3.5 text-sm font-semibold rounded-xl transition-colors" style="background: var(--ws-color-accent);">Join Waitlist</button>
</form>
</div>
</section>
<!-- Social links -->
<section class="relative py-10 px-4">
<div class="flex items-center justify-center gap-6">
<a href="#" class="text-slate-500 transition-colors hover:text-[oklch(0.68_0.18_285)]" aria-label="Twitter / X">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="#" class="text-slate-500 transition-colors hover:text-[oklch(0.68_0.18_285)]" aria-label="GitHub">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
<a href="#" class="text-slate-500 transition-colors hover:text-[oklch(0.68_0.18_285)]" aria-label="Discord">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/></svg>
</a>
<a href="#" class="text-slate-500 transition-colors hover:text-[oklch(0.68_0.18_285)]" aria-label="LinkedIn">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer relative border-t border-slate-800/50 py-8 px-4">
<div class="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2 text-sm font-bold">
<div class="w-6 h-6 rounded-md flex items-center justify-center" style="background: var(--ws-color-accent-dim); border: 1px solid var(--ws-color-accent-border);">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--ws-color-accent-light);"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
NovaPulse
</div>
<p class="text-slate-600 text-sm">© 2026 NovaPulse. All rights reserved.</p>
</div>
</footer>
<!-- Countdown script -->
<script>
(function() {
// Set launch date to 14 days from now
var launchDate = new Date();
launchDate.setDate(launchDate.getDate() + 14);
launchDate.setHours(0, 0, 0, 0);
function pad(n) {
return String(n).padStart(2, '0');
}
function updateCountdown() {
var now = new Date().getTime();
var distance = launchDate.getTime() - now;
if (distance <= 0) {
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
return;
}
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById('days').textContent = pad(days);
document.getElementById('hours').textContent = pad(hours);
document.getElementById('minutes').textContent = pad(minutes);
document.getElementById('seconds').textContent = pad(seconds);
}
updateCountdown();
setInterval(updateCountdown, 1000);
})();
</script>
</body>
</html>
Dark, atmospheric coming soon page with a live JavaScript countdown timer. Features gradient text, glowing countdown boxes, email notification signup, and social media links. The countdown auto-calculates from a configurable launch date.