Create a Coming Soon Page with Countdown Timer

On 4 Sep, 2012 By 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.

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

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