Create a Coming Soon Page with Countdown Timer

P On 4 Sep, 2012 • + By 9 With 13 Comments

This is the second part of our tutorial about Create a Simple Coming Soon Page Design in Photoshop, on this one we will convert this PSD to a working HTML with Jquery for the Countdown timer.

Today we will create starting from our previous psd and convert it into a  coming soon page with countdown timer,  so let’s get down to business and download the things that we needed.

You can download this HTML zip at the bottom of this tutorial!

Fonts & Images

Final Product

Click here to view the demo

Let’s Begin

First download the psd from the previous tutorial, since we are going to cut some image from that file. Go and download it here.

Select the Cropping tool (C) and crop the bottom part of the background

Next is crop the logo, make sure that the bg folder is disabled

On the timer shadow, crop the shadow below it. After that disable the bg folder and save

On the email form, disable the button and text same with bg folder and save it

Crop the button and save it

Next is crop the two social media buttons, and save it. You should put everything in one folder called images, and now we will start to convert it in html.

PSD Conversation

Go to Instantblueprint and select html5 and download the file.

Now open your code editor and let’s start the conversion, let’s start with the index.

<div><!-- wide -->
      <div>&nbsp;</div>

                <div><!-- container -->
                    <header>
                        <div> <h1> <img src="images/logo.png"> Coming Soon </h1> </div>
                    </header>
                        <div><!-- timer -->
                            timer here
                        </div><!-- timer -->
                        <div></div>
                </div><!-- container -->

                <div> 
                    <input type="email" placeholder="Email here.." value=""> 
                    <input type="submit" value="submit">
                </div>

        </div>    <!-- wide -->

    <footer>
        <div><!-- footer wide -->
            <div><!-- container -->
                <div> <a href="#"><img src="images/fb.png"></a> </div>
                <div> <a href="#"><img src="images/twitter.png"></a> </div>
            </div><!-- container -->
        </div><!-- footer wide -->
    </footer>

Now check your html on a browser, it will look disorganized and ugly. Time for some styling, for the CSS copy this code.

 /*
CSS file created with:Instantblueprint - Create a web project framework in seconds.

http://instantblueprint.com

Project: coming soon page
Author: Sanjay Khemlani
Author URL: http://sanjaykhemlani.com
File: css/style.css
Last edited: August 17, 2012, 8:34 pm
*/

/* Font face */
@font-face {
    font-family: 'DistantGalaxyRegular';
    src: url('fonts/DISTGRG_-webfont.eot');
    src: url('fonts/DISTGRG_-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/DISTGRG_-webfont.woff') format('woff'),
         url('fonts/DISTGRG_-webfont.ttf') format('truetype'),
         url('fonts/DISTGRG_-webfont.svg#DistantGalaxyRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('fonts/League_Gothic-webfont.eot');
    src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/League_Gothic-webfont.woff') format('woff'),
         url('fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*  Main  */
body {
 background: url(../images/bg.png) repeat;
 color:#333;
 text-shadow:0 1px 1px #fff;
 font-family: Arial, Helvetica, sans-serif;
 padding:0;
 margin:0;
}
.body:before {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    content: "";
    height: 15px;
    left: 0;
    position: fixed;
    top: -15px;
    width: 100%;
    z-index: 100;
}

.top{
    background:url(../images/top.png) repeat-x;
    height: 53px;
    border-bottom:1px solid #333131;
    box-shadow:0 1px 4px #605F5F;
}

.container{
    margin: 80px auto 0;
    width: 980px;
}

.logo{
    padding-left:130px;
}

.logo img{
    vertical-align: middle;
}

h1{
    font-family: 'DistantGalaxyRegular';
    font-size:80px;
}

.timer{
    overflow: hidden;
    background: #fff;
    border:1px solid #ABABAB;
    width: 600px;
    margin: 40px auto 0 auto;
    padding:0 10px;
}
.shadow {
    background: url(../images/shadow.png) no-repeat scroll center center transparent;
    content: "";
    height: 47px;
    position: absolute;
    width: 551px;
    padding-left:420px;
}

.timer ul{
   overflow: hidden;
}
.timer li{
    display: inline;
    float: left;
    margin-right:70px;
}
.timer li:last-child{margin-right:0;}
.timer li .big{
    font-family: 'LeagueGothicRegular';
    font-size:100px;
}

.timer li .small{
    font-family: Arial;
    font-size:12px;
    text-transform: uppercase;
    text-align: center;
}

.subscribe{
    overflow: hidden;
    margin-top:30px;
    margin: 50px auto 0 auto;
    width: 353px;
    height: 66px;
    background: url(../images/email.png) no-repeat;
}
.subscribe input[type="email"] {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    height: 29px;
    margin-left: 18px;
    margin-top: 16px;
    width: 225px;
    padding-left: 3px;
    color:#999;
    font-family: 'LeagueGothicRegular';
    font-size:20px;
}

.subscribe input[type="submit"] {
    background: url(../images/submit.png) no-repeat;
    height: 35px;
    width:83px;
    text-indent: -9999px;
    margin-top:13px;
    border:0;
    cursor: pointer;
}

footer{
    background:#3E3E3E;
    margin-top:80px;
}

.container-foot{
    margin: 0 auto;
    overflow: hidden;
    padding:15px 0 15px 150px;
    width: 800px;
}
.left{
    float: left;
    width: 311px;
    margin-right:30px
}
.left:last-child{
    margin-right:0;
}

Next is to add the jquery countdown timer on the header tag, make sure that include them on the right folder.

 <!-- JS -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/jquery.jCounter-0.1.3.js"></script>

    <script>

       $(document).ready(function(){
        $("#countdown").jCounter({
          date: "25 december 2013 12:00:00",
          format: "dd:hh:mm:ss",
          twoDigits: 'on',
          fallback: function() { console.log("Counter finished!") }
        });
    });

    </script>

The styling is done, and we can add the function for countdown timer, add this inside the timer class.

 <div>
                                <ul id="countdown">
                                    <li>
                                        <span>00</span>
                                        <p>days</p>
                                    </li>
                                    <li>
                                        <span>00</span>
                                        <p>hours</p>
                                    </li>
                                    <li>
                                        <span>00</span>
                                        <p>minutes</p>
                                    </li>
                                    <li>
                                        <span>00</span>
                                        <p>seconds</p>
                                    </li>
                                </ul>
                            </div> <!-- end timer-area -->

Next is to refresh the page and see how it turned out. If you want to change the countdown timer time settings, look at the header part and edit this line date: “17 august 2013 12:00:00″, and you’re good to go.

Things you can do is put a working opt-in form and change the social media links.

Click here to view the demo

C Tags: , ,


Show some love and share!


is a Web & Graphic Designer from Philippines, he is passionate about Wordpress, Responsive Design and Open Source. He is helping small to medium size business to market their products, you can contact him here.
50% of Hosting for your Website at GoDaddy.com!

13 Responses to “Create a Coming Soon Page with Countdown Timer”

  1. [...] Create a Coming Soon Page with Countdown Timer 1 Upvotes Discuss Flag Submitted 1 min ago sanjay Web Development sanjaykhemlani.com Comments [...]

  2. Joe Seals says:

    This is a great step-by-step guide on how to create a “Coming Soon” page. I will be creating a few new websites in the very soon future so this is very helpful.

    Thanks!

  3. [...] Create a Coming Soon Page with Countdown Timer in HTML & Jquery [...]

  4. Sweet step by step tutorial my friend – have a few websites that could make use of this for the near future :-)

  5. Dan G says:

    Hey Man!, awesome tutorial. It was alot simpler than I thought it would be. You explained it very well and will be using these concepts for future sites. Thank you so much!

  6. [...] Create a Coming Soon Page with Countdown Timer [...]

  7. [...] In this tutorial, you will learn how to create a coming soon page with countdown timer. Source [...]

  8. Michel says:

    AWESOME clean looking countdown

  9. Wonderful Tutorial with clean and simple countdown timer. Well explained in a simple way.

  10. […] In this tutorial, you will learn how to create a coming soon page with a countdown timer. Source […]

  11. […] In this tutorial, you will learn how to create a coming soon page with countdown timer. Source […]

Leave a Reply

  • (will not be published)