Responsive Coming Soon Template with Countdown | Modern Design

Explore our sleek and responsive 'Coming Soon' template with a stylish countdown timer. Perfect for pre-launch websites, this template features Bootstrap design, social media integration, and easy customization.

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
body {
  font-family: "Roboto", sans-serif;
}
#fwa_coming_4 {
  position: relative;
  color: #fff;
  background: #222222;
  height: 100%;
  min-height: 100vh;
}
#fwa_coming_4 header {
  padding: 20px 0;
  position: relative;
  z-index: 1;
}
#fwa_coming_4 header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#fwa_coming_4 header .logo a {
  text-transform: capitalize;
  text-decoration: none;
  color: tomato;
  font-size: 30px;
  font-weight: 700;
}
#fwa_coming_4 header .contact span {
  padding: 0 7px;
}
#fwa_coming_4 .content {
  position: relative;
  z-index: 1;
}
#fwa_coming_4 .content h2 {
  font-size: 4rem;
  margin-bottom: 20px;
  font-weight: 900;
  text-transform: capitalize;
}
#fwa_coming_4 .content .countdown {
  display: flex;
  justify-content: center;
  width: fit-content;
  align-items: center;
}
#fwa_coming_4 .content .countdown .day,
#fwa_coming_4 .content .countdown .hours,
#fwa_coming_4 .content .countdown .minutes,
#fwa_coming_4 .content .countdown .seconds {
  padding: 25px;
  text-align: center;
}
#fwa_coming_4 .content .countdown h3 {
  margin: 0;
  font-size: 35px;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
}
#fwa_coming_4 .content .countdown span {
  text-transform: capitalize;
  font-size: 14px;
}
#fwa_coming_4 .content .countdown > span {
  color: tomato;
  font-size: 24px;
}
@media (max-width: 991px) {
  #fwa_coming_4 .content .countdown {
    margin-bottom: 20px;
  }
}
@media (max-width: 576px) {
  #fwa_coming_4 .content h2 {
    font-size: 2.5rem;
  }
  #fwa_coming_4 header .contact span {
    display: none;
  }
  #fwa_coming_4 header .contact span:first-child {
    display: block;
  }
  #fwa_coming_4 .content .countdown .day,
  #fwa_coming_4 .content .countdown .hours,
  #fwa_coming_4 .content .countdown .minutes,
  #fwa_coming_4 .content .countdown .seconds {
    padding: 20px 15px;
  }
  #fwa_coming_4 .content .countdown {
    flex-wrap: wrap;
  }
}

JS

$(document).ready(function () {
    // Set the target date for the countdown
    var targetDate = new Date("Jan 01, 2026 23:59:59").getTime();

// Update the countdown every second
    var countdown = setInterval(function () {
        var now = new Date().getTime();
        var timeLeft = targetDate - now;

// Calculate days, hours, minutes and seconds left
        var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

// Display the result in the corresponding elements
        $('.day_count').text(days < 10 ? '0' + days : days);
        $('.hours_count').text(hours < 10 ? '0' + hours : hours);
        $('.minutes_count').text(minutes < 10 ? '0' + minutes : minutes);
        $('.seconds_count').text(seconds < 10 ? '0' + seconds : seconds);

// If the countdown is finished, display a message
        if (timeLeft < 0) {
            clearInterval(countdown);
            $('.day_count, .hours_count, .minutes_count, .seconds_count').text('00');
            $('h2').text('We are live!');
        }
    }, 1000);
});

Width:

Height:

Looking for a modern and engaging way to announce your upcoming website or app? Our 'Coming Soon 4' template is the perfect solution. It features a sleek, minimalist design with a bold, eye-catching countdown timer that keeps visitors informed about your launch date.

Built with Bootstrap 5, this template is fully responsive, ensuring a seamless experience on all devices. The Roboto font adds a professional touch, while the dark background gives it a modern, sophisticated look.

Key Features:

▹ Responsive Design: Looks great on both desktop and mobile devices.

▹ Countdown Timer: Build anticipation with a clear and customizable countdown to your launch.

▹ Social Media Links: Easily integrate your social media profiles to stay connected with your audience.

▹ Customizable Layout: Modify the template to match your brand by adjusting the colors, fonts, and content.

▹ Bootstrap Icons: Includes ready-to-use Bootstrap icons for easy integration.

Whether you're preparing for a website launch or an app debut, this Coming Soon page provides an elegant and functional way to keep your audience informed. Customize it effortlessly and start building excitement for your new project!