Making a “Coming Soon” HTML website with a timer is a smart way to make people excited for your site to start. Here is an easy guide to help you make one:

Steps to Make a “Coming Soon” HTML Template with a Countdown

1. Make the Basic HTML Setup

Begin by making the simple HTML setup for your “Coming Soon” page. This has the DOCTYPE line, HTML tags, head, and body.

TML tags coming

2. Add CSS for Look

Make a basic style.css file for the Coming Soon page. You can change the styles to match your brand.

/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}

.container {
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

p {
  font-size: 18px;
  margin-bottom: 30px;
}

#countdown {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

form input {
  padding: 10px;
  font-size: 16px;
  margin-right: 10px;
  width: 250px;
}

form button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

form button:hover {
  background-color: #0056b3;
}

3. Set up the Timer in JavaScript

Next, make the timer count down with JavaScript. In the script.js file, type out how to show a timer that counts how many days, hours, minutes, and seconds are left before the website starts.

// Set the date we're counting down to
var launchDate = new Date("Jan 1, 2025 00:00:00").getTime();

// Update the countdown every 1 second
var x = setInterval(function() {

  // Get the current date and time
  var now = new Date().getTime();

  // Find the distance between now and the launch date
  var distance = launchDate - now;

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

  // Display the countdown in the element with id="countdown"
  document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

  // If the countdown is over, display a message
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "We're Live!";
  }
}, 1000);

How It Works:

HTML Parts: The HTML has

  • A big text line to let people know a new site is on the way.
  • A time ticker (#countdown div) where the JavaScript will change the time left.
  • A place where folks can drop their email to get news.

CSS Looks

The CSS makes the page look good with a middle block, paints it with a color, and makes the email box look nice.

JavaScript Timer: The JavaScript does

  • Picks a future date (launchDate).
  • Changes the ticker each tick.
  • Shows how many days, hours, minutes, and seconds are left.
  • Puts up a “We’re Live!” note when the count hits zero.

Outcome:

  • Coming Soon Page: An easy but working Coming Soon page with a timer to count down and a place to sign up with your email.
  • Responsive Design: This page works well on phones, making sure it shows well on all screens.

ucoming free html templateDownload Demo

Extra Changes

  • Extra Picture: You can put a picture at the back of your page by changing the body CSS or by using a background-image setup in the .container class.
  • Email Sign-up: Link the email form with a tool like MailChimp, Sendinblue, or any other email tool to get user email info.
  • Moving Parts: Use CSS moves to draw more eyes to the page (like fade-in tricks or moves on the countdown).

This easy setup works well to tell people about your soon-to-come site and keep them hooked while they wait for the start.

Other Articles