Bootstrap Coming Soon Page — Free HTML CSS JS Snippet

<div class="bscs-wrap d-flex flex-column align-items-center justify-content-center text-center text-white py-5">
  <span class="badge bg-light text-dark mb-3">Launching Soon</span>
  <h1 class="fw-bold mb-2">Something great is on the way</h1>
  <p class="text-white-50 mb-4">Be the first to know when we launch. Leave your email below.</p>

  <div class="d-flex gap-3 mb-4" id="bscsBoxes">
    <div class="text-center">
      <div class="bscs-box" id="bscsDays">00</div>
      <div class="small text-white-50">Days</div>
    </div>
    <div class="text-center">
      <div class="bscs-box" id="bscsHours">00</div>
      <div class="small text-white-50">Hours</div>
    </div>
    <div class="text-center">
      <div class="bscs-box" id="bscsMinutes">00</div>
      <div class="small text-white-50">Minutes</div>
    </div>
    <div class="text-center">
      <div class="bscs-box" id="bscsSeconds">00</div>
      <div class="small text-white-50">Seconds</div>
    </div>
  </div>

  <form class="bscs-form w-100" id="bscsForm">
    <div class="input-group">
      <input type="email" class="form-control" id="bscsEmail" placeholder="[email protected]" required>
      <button class="btn btn-primary" type="submit">Notify Me</button>
    </div>
    <div class="small text-danger mt-2 d-none" id="bscsError">Please enter a valid email address.</div>
  </form>

  <div class="alert alert-success bscs-form w-100 d-none" id="bscsSuccess">You're on the list! We'll email you at launch.</div>
</div>

.bscs-wrap { min-height: 480px; background: linear-gradient(135deg, #1e1b4b, #4c1d95, #0f172a); border-radius: 14px; padding-left: 20px; padding-right: 20px; }
.bscs-box { min-width: 60px; padding: 10px 6px; background: rgba(255,255,255,.12); border-radius: 8px; font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.bscs-form { max-width: 380px; }

const TARGET = new Date(Date.now() + (12 * 24 * 60 * 60 + 6 * 60 * 60) * 1000).getTime();

const boxes = {
  days: document.getElementById('bscsDays'),
  hours: document.getElementById('bscsHours'),
  minutes: document.getElementById('bscsMinutes'),
  seconds: document.getElementById('bscsSeconds'),
};

function pad(n) {
  return String(n).padStart(2, '0');
}

function tick() {
  const remaining = Math.max(0, TARGET - Date.now());
  const totalSeconds = Math.floor(remaining / 1000);

  boxes.days.textContent = pad(Math.floor(totalSeconds / 86400));
  boxes.hours.textContent = pad(Math.floor((totalSeconds % 86400) / 3600));
  boxes.minutes.textContent = pad(Math.floor((totalSeconds % 3600) / 60));
  boxes.seconds.textContent = pad(totalSeconds % 60);

  if (remaining <= 0) clearInterval(intervalId);
}

tick();
const intervalId = setInterval(tick, 1000);

const form = document.getElementById('bscsForm');
const emailInput = document.getElementById('bscsEmail');
const errorMsg = document.getElementById('bscsError');
const success = document.getElementById('bscsSuccess');

function isValidEmail(value) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
}

form.addEventListener('submit', e => {
  e.preventDefault();
  const value = emailInput.value.trim();

  if (!isValidEmail(value)) {
    errorMsg.classList.remove('d-none');
    emailInput.classList.add('is-invalid');
    return;
  }

  errorMsg.classList.add('d-none');
  emailInput.classList.remove('is-invalid');
  form.classList.add('d-none');
  success.classList.remove('d-none');
});

emailInput.addEventListener('input', () => {
  if (emailInput.classList.contains('is-invalid') && isValidEmail(emailInput.value.trim())) {
    emailInput.classList.remove('is-invalid');
    errorMsg.classList.add('d-none');
  }
});