Create a Coming Soon Page with Countdown Timer

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

WordPress Portfolio Themes

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.

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

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

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

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!

Join our 356 subscribers and get the tutorials right from your inbox!

*I will not send spam message or affiliate offers.

I design / build Custom Wordpress Themes for different kinds of Clients, big or small, solo-prenuers or marketer. I've also worked with different design agencies as their 'web guy' for their Clients. I also enjoy writing tutorials and helping newbies so I can contribute to the community. Got a project in mind? Let's talk! | More about me?

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