How To Create A Coming Soon Page Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coming Soon | Launchpad</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    color: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
  }
  .logo { font-size: 2em; font-weight: 800; letter-spacing: -1px; margin-bottom: 40px; color: #a78bfa; }
  h1 { font-size: clamp(2.5em, 6vw, 4em); font-weight: 800; margin-bottom: 16px; }
  h1 span { color: #a78bfa; }
  p.lead { color: rgba(255,255,255,0.7); font-size: 1.1em; max-width: 500px; margin-bottom: 48px; }

/* ---- COUNTDOWN ---- */
  .countdown { display: flex; gap: 24px; justify-content: center; margin-bottom: 56px; }
  .countdown-unit { display: flex; flex-direction: column; align-items: center; }
  .countdown-number {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    width: 80px; height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: 8px;
    backdrop-filter: blur(6px);
  }
  .countdown-label { font-size: 0.75em; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.5); }

/* ---- EMAIL FORM ---- */
  .email-form { display: flex; gap: 12px; width: 100%; max-width: 480px; margin-bottom: 24px; }
  .email-form input {
    flex: 1; padding: 14px 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    color: white;
    font-size: 1em;
    outline: none;
    transition: border-color 0.2s;
  }
  .email-form input::placeholder { color: rgba(255,255,255,0.45); }
  .email-form input:focus { border-color: #a78bfa; }
  .email-form button {
    padding: 14px 28px;
    background: #7c3aed;
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
  }
  .email-form button:hover { background: #6d28d9; transform: translateY(-2px); }
  .subscribers { font-size: 0.85em; color: rgba(255,255,255,0.5); }
</style>
</head>
<body>

<div class="logo">&#128640; Launchpad</div>

<h1>Something Big Is <span>Coming</span></h1>
<p class="lead">We're putting the finishing touches on something amazing. Be the first to know when we launch.</p>

<div class="countdown">
  <div class="countdown-unit">
    <div class="countdown-number" id="days">14</div>
    <div class="countdown-label">Days</div>
  </div>
  <div class="countdown-unit">
    <div class="countdown-number" id="hours">09</div>
    <div class="countdown-label">Hours</div>
  </div>
  <div class="countdown-unit">
    <div class="countdown-number" id="mins">42</div>
    <div class="countdown-label">Mins</div>
  </div>
  <div class="countdown-unit">
    <div class="countdown-number" id="secs">30</div>
    <div class="countdown-label">Secs</div>
  </div>
</div>

<form class="email-form" onsubmit="event.preventDefault(); alert('Thanks! We will notify you at launch.');">
  <input type="email" placeholder="Enter your email address..." required>
  <button type="submit">Notify Me</button>
</form>

<p class="subscribers">&#x2713; Join 2,140 others on the early access list</p>

function tick() {
    const now = new Date();
    const diff = target - now;
    if (diff <= 0) return;
    document.getElementById('days').textContent = String(Math.floor(diff / 86400000)).padStart(2, '0');
    document.getElementById('hours').textContent = String(Math.floor((diff % 86400000) / 3600000)).padStart(2, '0');
    document.getElementById('mins').textContent = String(Math.floor((diff % 3600000) / 60000)).padStart(2, '0');
    document.getElementById('secs').textContent = String(Math.floor((diff % 60000) / 1000)).padStart(2, '0');
  }
  tick();
  setInterval(tick, 1000);
</script>

</body>
</html>