Online coming soon page generator. Enter project name, tagline, launch date and email to generate a complete HTML template. Choose from minimal/gradient/dark themes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyApp — Coming Soon</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #3B82F6, #3B82F6dd); color: white; }
.container { text-align: center; padding: 2rem; max-width: 480px; }
h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
p { font-size: 1.125rem; opacity: 0.8; margin-bottom: 2rem; line-height: 1.6; }
#countdown { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }
#countdown span { font-size: 2.5rem; font-weight: 700; display: block; }
#countdown small { font-size: 0.75rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; display: block; }
.email-form { display: flex; gap: 0.5rem; max-width: 360px; margin: 0 auto; }
.email-form input { flex: 1; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: inherit; font-size: 0.875rem; }
.email-form input::placeholder { opacity: 0.5; }
.email-form button { padding: 0.75rem 1.5rem; border-radius: 8px; border: none; background: rgba(255,255,255,0.2); color: inherit; font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.email-form button:hover { background: rgba(255,255,255,0.3); }
footer { margin-top: 3rem; font-size: 0.75rem; opacity: 0.4; }
</style>
</head>
<body>
<div class="container">
<h1>MyApp</h1>
<p>Something amazing is coming</p>
<div id="countdown"><span>0</span><small>days</small> <span>0</span><small>hrs</small> <span>0</span><small>min</small> <span>0</span><small>sec</small></div>
<div class="email-form">
<input type="email" placeholder="your@email.com" />
<button>Notify Me</button>
</div>
<footer>© 2026 MyApp. Coming soon.</footer>
</div>
<script>
(function() {
var target = new Date('2026-06-01T00:00:00').getTime();
function update() {
var now = Date.now(), diff = Math.max(0, target - now);
var d = Math.floor(diff / 86400000), h = Math.floor((diff % 86400000) / 3600000);
var m = Math.floor((diff % 3600000) / 60000), s = Math.floor((diff % 60000) / 1000);
var el = document.getElementById('countdown');
if (el) el.innerHTML = '<span>' + d + '</span><small>days</small> <span>' + h + '</span><small>hrs</small> <span>' + m + '</span><small>min</small> <span>' + s + '</span><small>sec</small>';
}
update(); setInterval(update, 1000);
})();
</script>
</body>
</html>