How to create: "coming soon" page

How to create a "coming soon" page

Step 1 - Add HTML:

In our example, we will use a background image that covers the entire page and place some text inside the image to let the user know what is happening.

This example demonstrates how to use HTML and CSS to create a "coming soon" page. Please see the next example to learn how to use JavaScript to add a "countdown timer".

<div class="bgimg">
  <div class="topleft">
    <p>Logo</p>
  </div>
  <div class="middle">
    <h1>COMING SOON</h1>
    <hr>
    <p id="demo">35 days</p>
  </div>
  <div class="bottomleft">
    <p>Some text</p>
  </div>
</div>

Step 2 - Add CSS:

/* Set the height of body and html to 100% to make the background image cover the entire page: */
body, html {
  height: 100%
}
.bgimg {
  /* Background image */
  background-image: url('/w3images/forestbridge.jpg');
  /* Full screen */
  height: 100%;
  /* Center the background image */
  background-position: center;
  /* Enlarge the image */
  background-size: cover;
  /* Add position: relative to enable absolute positioning elements inside the image (place text) */
  position: relative;
  /* Add white text color for all elements within the .bgimg container */
  color: white;
  /* Add font */
  font-family: "Courier New", Courier, monospace;
  /* Set font size to 25 pixels */
  font-size: 25px;
}
/* Position text at the top left corner */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}
/* Position text at the bottom left corner */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
}
/* Position text in the center */
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
/* Set the style of the <hr> element */
hr {
  margin: auto;
  width: 40%;
}

Try it yourself

Step 3 - Add JavaScript:

Add JavaScript to create a countdown timer:

// Set the date we are counting down to
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Update the countdown every 1 second
var x = setInterval(function() {
  // Get today's date and time
  var now = new Date().getTime();
  // Calculate the distance between the current time and the countdown date
  var distance = countDownDate - now;
  // Calculate the time calculation for 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 result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
  // If the countdown ends, write some text.
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }

Try it yourself