Coming-soon page helps you to retain customers when you are busy in revamping your website or Creating new Website. It will help your visitors to revisit your site after a certain time. Even some of the websites manage to get as many leads as possible before launching their site using the under construction page. For new websites, it can help in SEO too if it includes rich content and META,

Create A  Under Construction / Coming Soon Page  To Engage Visitors  Even When Your Site is Down
I always recommend a Under-construction or Coming Soon page on a new/old Domain if website designing or development is still in process. It is very useful for visitors, if you are showing the actual Date of launching website. It is very unique if you care showing a Countdown till the launching Date. Here, I am showing you how to create a Under-Construction page with Count-Down timer. You get countdown timer showing days, hours, minutes and seconds.

The HTML

HTML of Coming-soon page is very simple. You can use a Background image to make it attractive.

<!DOCTYPE>
 <html>
  <head>
   <title>Under Construction</title>
  </head>
  <body>
    <p>This page is under construction. Please come back soon!</p>
  </body>
</html>

Trick – The Count-Down Timer

For Creating Count-Down Timer, I have included a Count-Down Plugin of “Robert Fleischmann”. It is based on jQuery. After including this file, we have to define the Upcoming Date till countdown will be run. So, the script will be like below,

$(function(){
  var endDate = "Dec 20, 2018 12:30:00";
  $('.countdown.styled').countdown({date:endDate,render:function(data) {
  $(this.el).html("<div class='date-block-1'>" + this.leadingZeros(data.days, 3) + " <span>days</span></div><p class='mt20 b'>/</p><div class='date-block-1'>" + this.leadingZeros(data.hours, 2) + " <span>hrs</span></div><p class='mt20 b'>:</p><div class='date-block-1'>" + this.leadingZeros(data.min, 2) + " <span>min</span></div><p class='mt20 b'>:</p><div class='date-block-1'>" + this.leadingZeros(data.sec, 2) + " <span>sec</span></div>");
  }
});
})

In this script, I have defined “endDate” as “Dec 20, 2018 12:30:00” which is the date till countdown will be run.

CSS – Beautify the Page

We will use CSS for beautifying each Blocks of Counter. It is very simple.

countdown.styled {
  text-align:center;
  width:300px;
  position:absolute;
  top:auto;
  bottom:10%;
  left:50%;
  right:50%;
  margin-left:-150px
}
.date-block-1{
  padding:8px;
  border:2px #e4eba5 solid;
  float:left;
  font-size:1.5em;
  color:#222;
  line-height:1.5em;
  border-radius:4px;
  width:21.2%;
  background:rgba(235,280,7,0.9)
}
.date-block-1 span{
  font-size:0.5em;
  display:block;
  line-height:0.8em;
  font-weight:bold
}
.countdown.styled p{
  float:left; 
  width:5%; 
  color:#333;
}

SEO Friendly Under-Construction Page

There are certain things to note before making an under construction pages. If you are building a new site or revamping your site, make some basic SEO for the under construction page. To gain better ranking in the search result. The message you show in the under construction plays a vital role in retaining the visitors and to collect new leads. So tailor the message to your audience and make a strong first impression for the new users.

There are other two web elements you must add in the under construction template. One is the signup form and the other is your social media profile links if you are very active in the social media.

That’s it!

please share your comments and questions below! If you liked this article, please share it by clicking on the share bar below. I’d appreciate it…

view demo

You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLJAVASCRIPTjQueryTutorialsadvance web technology,angle brackets,coming soon,countdown,CSS,CSS 3,CSS trick,css3,doctype html,graphical user interface,html basics,html5,javascript,javascript functions,jquery,open source javascript,plugin,SEO,settimeout function,settimeout method,setTimeout(),timer,tips and tricks,under constructionComing-soon page helps you to retain customers when you are busy in revamping your website or Creating new Website. It will help your visitors to revisit your site after a certain time. Even some of the websites manage to get as many leads as possible before launching their site...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.