1stwebdesigner

Final Countdown: Adding a Countdown Timer on the Coming Soon Page

Posted: 10 Jun 2014 06:00 AM PDT

A website that is not yet ready to be launched needs a “Coming Soon” Page to notify the visitors that it would be soon launched on a specific time frame. As the modern web development evolved, this page is more than just a simple text page or an under construction image.

Designing the “Coming Soon” page increases the level of expectation of the visitors, thus, giving them the thrill of what will be soon published on the site. Aside from the design, you can also collect information of interested users by inserting a "Notify Me" textbox and a "Subscription Button" on the page.

In today’s tutorial, we are going to create a coming soon page that has a countdown timer on it using jQuery Countdown plugin by Keith Wood

Resource You Need to Complete This Tutorial:

Open Sans (Google Font)
Montserrat (Google Font)
Reset.css
jQuery Library
jQuery Countdown Plugin
Any background image
Time and Patience

File Structure

file-strucuture

Our file structure will consist of four folders and one html file:

index.html – this will serve as our main file all of our design will be utilize on this file
js folder – for our JavaScript/jQuery
img folder – for our images
css folder – for our styling (css)

What We Are Going to Do

final-product

Download Source Files View Demo

Getting Started

Before we start, we're going to add first the necessary libraries and links to our Head section. This will include our CSS and JavaScript libraries.

  <!DOCTYPE html>  <html lang="en">  <head>      <meta content="width=device-width, initial-scale=1, maximum-scale=1" name=      "viewport">        <title>Coming Soon with Counter</title>      <link href=      'http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,300,700,800'      rel='stylesheet' type='text/css'>      <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel=      'stylesheet' type='text/css'>      <link href="css/reset.css" media="screen" rel="stylesheet">      <link href="css/style.css" media="screen" rel="stylesheet">      <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>  </head>

The HTML

For our markup, we’re going to wrap everything into a class container which will hold all of our elements. This will include header and section elements that will hold our basic tags with their respective IDs and classes. We will also include a simple footer element which will contain our copyright text.

  <body>      <div class="container">          <header>              <h1>Our website is Coming Soon</h1>          </header>            <section>              <h2>WE APOLOGIZE FOR INCONVENIENCE</h2>                <p class="details">YOU NEED TO WAIT...</p>                <div id="counter"></div>                <p class="details">SEND ME DETAILS ABOUT IT</p>                <div id="subscribe">                  <form action="" id="subscribe-form" method="post" name=                  "newsletter-form">                      <p class="form-field"><input id="subcribe_email" name=                      "subscribe_email" placeholder="Your email" type="email"                      value=""></p>                        <p class="form-submit"><input id="subscribe_submit" name=                      "subscribe_submit" type="submit" value="Notify Me"></p>                  </form>              </div>          </section>            <footer>              <a href="http://www.1stwebdesigner.com/" target="_blank">Copyright              - 1stwebdesigner.com - 2014</a>          </footer>      </div>

Notice that we used the ID counter before the "Notify Me" form. This will hold our counter and will be used by our jQuery code. We will also style this later on style.css file.

By this time, you will have same output like the image below.

html-strucute

The CSS

For our CSS file, we’re going to add styles first on our basic elements such as the body, H1, H2 and the container class. The container class will have a width in the form of percentage to create a responsive effect. Notice that the CSS3 transform property was used on the H1 tag, the title tag. This will enable our title tag to rotate 360 degrees on the x-axis position. To learn more about this you can check this resource.

    body {      color: #dadada;      line-height: 1.75;      width: 100%;      background: url(../img/background.jpg)center;      font-family: 'Open Sans';  }    h1,h2{      color: #fff;      line-height: 1.16667;      text-align: center;      text-transform: uppercase;      text-shadow: 2px 2px 2px rgba(150,150,150,1);  }    h1 {      font-size: 43px;      font-family: Montserrat;      font-weight: 700;      border: 2px dashed #fff;      margin-top: 50px;      padding: 10px;      cursor: pointer;      -webkit-transition: all .8s ease;      -moz-transition: all .8s ease;      -o-transition: all .8s ease;      transition: all .8s ease;  }    h1:hover {      -webkit-transform: rotateX(360deg);      -moz-transform: rotateX(360deg);      -ms-transform: rotateX(360deg);      -o-transform: rotateX(360deg);      transform: rotateX(360deg);  }    h2 {      font-size: 30px;      font-weight: 300;      margin-top: 30px;  }    .container {      width: 58%;      margin: 40px auto 0;  }    .details {      margin-top: 30px;      color: #fff;      text-align: center;      text-shadow: 2px 2px 2px rgba(150,150,150,1);  }

Next, let’s put a basic style to our forms. This will add basic styles on our text box and button.

    button,input,textarea {      font-size: 16px;      max-width: 100%;      margin: 0;      border-radius: 0;      vertical-align: baseline;      -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;      box-sizing: border-box;  }    textarea {      overflow: auto;      vertical-align: top;  }    input,textarea {      background: #6e6e6e;      background: rgba(169,169,169,0.3);      border: 1px solid #f4f4f4;      color: #fff;      font-weight: 700;      letter-spacing: 1px;      padding: 12px;      text-transform: uppercase;  }    input:focus,textarea:focus {      outline: 0;  }    button:hover,button:focus,input[type=submit]:focus,input[type=submit]:hover {      background: #ff8721;      color: #fff;      outline: 0;  }    button,input[type=submit] {      -webkit-appearance: button;      cursor: pointer;  }    button,input[type=submit] {      background: #ffab00;      -webkit-transition: all .5s;      -moz-transition: all .5s;      transition: all .5s;  }    .form-field {      position: relative;  }

Our next target will be the placeholder for our text box. Vendor prefixes will be used to target specific browsers styles.

    ::-webkit-input-placeholder {  	color: #fff;  }    ::-moz-placeholder {  	color: #fff;  	opacity: 1;  }    ::-ms-input-placeholder {  	color: #fff;  	opacity: 1;  }    .placeholder {  	color: #ff;  }

After styling the placeholder, let’s now move to our counter. If you remember, the counter ID was used to specify the position of the counter on the markup.

Now, to style the counter, you will be using the default classes of the jQuery Countdown plugin countdown_section and countdown_amount. count_section will hold the label of counter (e.g. days, hours, minutes, seconds) while the countdown_amount will hold the numeric value of the counter. To divide each section, choose a border dashed with a 1px width and the color of white.

    #counter {      margin-top: 28px;  }    .countdown_section {      color: #dadada;      display: inline-block;      font-size: 12px;      text-align: center;      width: 25%;      letter-spacing: 1px;      border-left: 1px dashed #dadada;      border-color: rgba(218,218,218,0.8);      padding: 42px 12px 28px;      -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;      box-sizing: border-box;      text-shadow: 2px 2px 2px rgba(150,150,150,1);      text-transform: uppercase;  }    .countdown_section:first-child {      border-left: 0;  }    .countdown_amount {      color: #fff;      display: block;      font-family: 'Open Sans';      font-size: 60px;      font-weight: 700;      letter-spacing: normal;      line-height: 1;  }

Next, let's add further styles to the "Notify Me Form" section. Add a maximum width of 610px for this section and set the position to relative. Align the Submit button to right side of the text box and give it a position absolute.

    #subscribe {      max-width: 610px;      position: relative;  	margin: 20px auto 0;  }    #subscribe-form .form-field {      margin-right: 180px;  }    #subcribe_email {      border-right: 0;  }    #subscribe-form .form-submit {      height: 50px;      position: absolute;      right: 0;      top: 0;      width: 180px;  }    #subcribe_email,#subscribe_submit {      width: 100%;      display: block;      height: 55px;  }

Finally, add some basic style to our footer element.

    footer {      font-size: 13px;      text-align: center;      margin-top: 25px;      text-transform: uppercase;      text-shadow: 2px 2px 2px rgba(150,150,150,1);  }    footer a {      color: #fff;  }

To make the whole site responsive, add media queries to style specific elements on different view ports. If you want to learn how media queries work, you can check here.

    @media only screen and (max-width: 720px) {    	footer{margin-bottom: 40px; }  }    @media only screen and (max-width: 680px) {    	.countdown_amount {  		font-size: 48px;  	}  }    @media only screen and (max-width: 540px) {  	.one-half {  		width: 100%;  	}    	.countdown_section {  		padding: 28px 6px 20px;  	}    	#subcribe_email{border: 1px solid #fff;}    	#subscribe-form .form-submit {  		margin: 0 auto;  		right: auto;  		position: static;  	}    	#subscribe-form .form-field {  		margin: 0 0 14px;  	}  }    @media only screen and (max-width: 480px) {  	h1 {  		font-size: 30px;  	}    	 h2{font-size: 25px;}    	.countdown_section {  	border: none;  		padding: 20px 20px;  		font-size: 13px;  		text-align: center;  	}  	.countdown_amount {  		font-size: 40px;  		padding: 0 0 10px 0;    	}    	#counter{width: 30%;  margin:0 auto;}  }    @media only screen and (max-width: 360px) {       h2{font-size: 22px;}    	.countdown_section {  		padding: 21px 26px 21px 15px;  	}  	.countdown_amount {  		font-size: 36px;  	}  }

If you are going to check the output on your browser. You will get similar results like the image below.

with-css

The jQuery

Notice that the counter is not yet showing on the page. To make it appear, add our jQuery codes before the closing body tag. First, load our jQuery Countdown plugin by specifying the link of the script.

  <script type="text/javascript" src="js/jquery.countdown.min.js"></script>

Next, add the following code to display our counter. Copy the code below under the script link of our jQuery countdown plugin. In the code below, a variable launchdate to hold and to instantiate a new date was used.

You can change the launch date according to the date you want it to be set (according to YYYY,M-1,D calendar format). Just take note that months range from 0 -11 like an array setup and then subtract it to 1.

For this example, the launch date of the site will be on June 7, 2014. Finally use the ID counter to call our launchdate variable.

    $(document).ready(function() {          var launchdate = new Date(2014, 6 - 1, 7);          $('#counter').countdown({              until: launchdate          });      })(jQuery);

Conclusion

Congratulations! You just created a fantastic “Coming Soon” page with counter. When visitors land on coming soon page, usually they’re not coming back again to check the page, especially if doesn’t have enough information about the site or the launch date.

Adding a counter will make inform them about the date wherein they can check the site live. A Coming Soon page, when created properly, will loop visitors by getting them to subscribe to the news update and will keep on coming back.

Hope you enjoyed this tutorial and see you again next time.