Coming Soon HTML Template
Create anticipation with a bold headline, countdown, and signup form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Northwind · Coming Soon</title>
<style>
body { font-family: 'Space Grotesk', sans-serif; margin: 0; background: #020617; color: white; min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.card { text-align: center; max-width: 520px; }
h1 { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: 0.06em; }
p { color: rgba(255,255,255,0.75); margin-bottom: 2rem; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 2rem; }
.countdown div { background: rgba(148,163,184,0.15); padding: 1rem; border-radius: 1rem; }
.countdown strong { display: block; font-size: 2rem; }
form { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
input { flex: 1 1 240px; border-radius: 999px; border: none; padding: 0.9rem 1.1rem; }
button { border: none; border-radius: 999px; padding: 0.9rem 1.6rem; background: #38bdf8; color: #0f172a; font-weight: 600; }
</style>
</head>
<body>
<section class="card">
<p>Launching April 2024</p>
<h1>Northwind Workbench</h1>
<p>Powerful planning tools for remote product teams. Reserve your workspace early.</p>
<div class="countdown">
<div><strong>42</strong><span>Days</span></div>
<div><strong>12</strong><span>Hours</span></div>
<div><strong>18</strong><span>Minutes</span></div>
<div><strong>22</strong><span>Seconds</span></div>
</div>
<form>
<input type="email" placeholder="Work email" required />
<button type="submit">Join waitlist</button>
</form>
</section>
</body>
</html>