→ Anonymous
→ Coming Soon Page with Countdown Timer

Coming Soon Page with Countdown Timer

This Example is contributed by Anonymous, on 26-Feb-2025. It is responsive. similar terms for this example are Coming Soon Page,upcoming,Pre-launch page,Teaser page,Under construction page,Placeholder page,Sneak peek page,Launch page

Coming Soon

Author Anonymous

Fork Fullscreen

<div class="coming-soon-container">
  <div class="content-wrapper">
    <div class="logo">YOURLOGO</div>
    <h1>Coming Soon</h1>
    <p>We're working hard to bring you something amazing. Stay tuned!</p>
    
    <div class="countdown-container">
      <div class="countdown-box">
        <div class="number" id="days">00</div>
        <div class="label">Days</div>
      </div>
      <div class="countdown-box">
        <div class="number" id="hours">00</div>
        <div class="label">Hours</div>
      </div>
      <div class="countdown-box">
        <div class="number" id="minutes">00</div>
        <div class="label">Minutes</div>
      </div>
      <div class="countdown-box">
        <div class="number" id="seconds">00</div>
        <div class="label">Seconds</div>
      </div>
    </div>
    
    <div class="signup-form">
      <p>Get notified when we launch:</p>
      <form id="email-form">
        <input type="email" placeholder="Enter your email address" required>
        <button type="submit">Notify Me</button>
      </form>
    </div>
    
    <div class="social-icons">
      <a href="#" class="social-icon"><i class="fa fa-facebook"></i></a>
      <a href="#" class="social-icon"><i class="fa fa-twitter"></i></a>
      <a href="#" class="social-icon"><i class="fa fa-instagram"></i></a>
      <a href="#" class="social-icon"><i class="fa fa-linkedin"></i></a>
    </div>
  </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

Related Examples