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

P On 16 May, 2012 • + By 9 With 5 Comments

WordPress Portfolio Themes

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.

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?

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

  1. SandyMag says:

    I love seeing this Inspiration articles and resources on Page in HTML5 and CSS3 , you have mentioned here.They are really great compilation a source of inspiration.This type of great resources and articles are very useful and i am deeply very thanks for such an nice article and resources you have cover in your blog

    Thanks

  2. [...] 98. How to Create a Minimalist Coming Soon Page in HTML5 and CSS3 [...]

  3. [...] 98. How to Create a Minimalist Coming Soon Page in HTML5 and CSS3 [...]

  4. [...] 98. COMO CRIAR UM MINIMALISTA VINDO PÁGINA LOGO EM HTML5 E CSS3 [...]

  5. spider web designs says:

    It will help me to create this page for my website. very appreciated to share this type of information.

Leave a Reply