How to Create a Minimalist Coming Soon Page in HTML5 and CSS3

On 16 May, 2012 By With 5 Comments

On our last tutorial we created a coming soon page in photoshop. Today we will convert it to a fully working HTML5 and CSS3, and a little bit of Jquery for our timer. We can apply this when we have a newly acquired domain and we are still working on the design on our site.

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

Let’s get down to business, open the PSD and we will crop those images that we will use on the page.

How to Create a Minimalist Coming Soon Page in HTML5 and CSS3

First is the background on the header, I grab the Crop Tool (C) and cropped a smaller part of the header. We will repeat this in CSS, save it as .png and named it bg

How to Create a Minimalist Coming Soon Page in HTML5 and CSS3

Next is the timer image, save it as png and name it timer.

You can view the demo here.

Now open your editor, mine is Dreamweaver. First thing that we will do is create the HTML before the CSS styling.

Next, we will download a couple of fonts that we will use as font-face. [listing]

[/listing] Our folder structure should be like this: We should practice to always organize our folders and files, here is what our fonts folder looks like: As you can see, our fonts has it’s own folder. We copied all the web fonts files and saved it in here from the downloaded fonts. Next is the CSS, just copy the codes below and I’ll explain those new to you.

Most of the stuff here are pretty self-explanatory, if you’re not familiar with CSS3 I used a couple of them, like the double text-shadow (  text-shadow:0 1px 1px #000, 2px 5px 6px #093356;) and a couple of drop shadow and border radius. Moving on, we have a timer on our coming soon page. We will use Jquery on this one, I found a really neat tutorial that does that. You can find it here, I suggest that you download the jquery.lwtCountdown-1.0.js. Save the file on our js folder and insert the HTML on our page.

Insert this inside #countdown. Next is the script that we will put on the footer.

Just after the closing #wrapper, put this script. Also add this following on the header after css  styles link.

Make sure that you saved those files on js folder. You can check the page now, and see if the timer is working (I know it does! :D)

Like I said, you can use this on your personal project or client’s website, no attribution required but linkback is always nice :)

You can view the demo here.

Hope you learned and gained a useful resources that you can use today or in the future, I also use this page several times, just changing the name of the site. If you have other suggestion so we can make it flexible and easier to the community, don’t hesitate to ask in the comments.

5 Responses to “How to Create a Minimalist Coming Soon Page in HTML5 and CSS3”