How to Create Clean Coming Soon Page in HTML5 (part 2)

November 5, 2012 · 4 comments

by sanjay

photoshop-psd-coming-soon-page

This is the second part of our Clean Coming Soon Page tutorial series. On the first part of this tutorial we created a PSD mock up using Photoshop. On this second part we will convert it into a HTML5 page with a working countdown timer. The purpose of this article series is to show you the techniques needed and provide you with a freebie solution. You will be able to use it as is and you can easily alter it to fit your needs.

Today we will do a couple things like cropping the images, converting the PSD into HTML5, setting up the countdown timer, and validating our HTML file, so get ready and let’s go!


ElegantThemes
ThemeForest

Advertisement

This is the end result of this tutorial. At the end of the article you can see a demo and download the source code.

Getting started

Start collecting the resources you need.

Create a folder structure like this to hold the files:

– root
– – css
– – images
– – js

Cutting the images

Before we start we will grab some images from the PSD (get it from the first part of this tutorial). Open it in Photoshop and let’s start!

We will start with the holder layer, disable the time and seconds text and use the crop tool (C). Make sure that when you crop it you will only leave a small margin, and disable the bg folder too. I am just showing you a preview of crop tool. Save the images as “holder.gif”.

Disable input layer and button, crop the form holder. Save it as “form-bg.gif”

Disable form holder and enable the button layer, make sure you leave a little room for margin, like 1px on each side. Save it as “button.gif”

Here are the cropped images as they should look; make sure you save this in images folder.

PSD to HTML – coding it

Next, we will start our coding. Go to InstantBluePrint.com and select html5 as a doc type, and click done. You can follow the screenshot below. Reason for using this service is to get started faster with a well formed HTML5 page.

We will start the HTML5 first, so our structure is already set up before we move to CSS. We will break it down into three parts, header, article and footer. As for the CSS it’ll be one part.

Header Code


<!DOCTYPE HTML>
<head>
<meta name="generator" content="Instantblueprint.com - Create a web project framework in seconds.">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Tripwire Magazine Coming Soon Page with Countdown Timer</title>
<meta name="description" content="Add your sites description here">
<meta name="keywords" content="Add,your,site,keywords,here">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

</head>
<body>

<div id="wrapper"><!-- wrapper -->

<header>
<h1>Coming Soon!</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</header>

Article Code

The article section contains the timer. The code is structured as a list with spans for the count down numbers.


<article>
<div><!-- timer -->
<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 -->
</div><!-- timer -->
</article>

Footer Code

The get notified form was added to the footer. It could as well have been placed in the article section, but for the purpose of the tutorial it is not important. Keep in mind though that to have a working submit form you need to insert an HTML form around the input tags.


<footer>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<div>
<input type="email" placeholder="Email here.." value="">
<input type="submit" value="submit">
</div>
<div>
<ul>
<li><a href=""><img src="images/facebook.png"></a></li>
<li><a href=""><img src="images/twitter.png"></a></li>
<li><a href=""><img src="images/linkedin.png"></a></li>
<li><a href=""><img src="images/skype.png"></a></li>
<li><a href=""><img src="images/youtube.png"></a></li>
<li><a href=""><img src="images/rss.png"></a></li>
</ul>
</div>
</footer>

</div><!-- wrapper -->

</body>
</html>

CSS code


/*  Main  */
body {
background: url(../images/bg-1.jpg) repeat;
color:#313132;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
text-shadow:0 1px 1px #fff;
}

#wrapper {
margin:60px auto 0 auto;
width:800px;
}

header h1{
font-family: 'ArvoBold';
font-size:80px;
text-transform:uppercase;
text-align:center;
margin-bottom:10px;
}
header p{
text-align:center;
}

article{}

.timer ul{
overflow: hidden;
margin:30px auto 0 auto;
width:450px;
}
.timer-area{
overflow:hidden;
}
.timer li{
display: inline;
float: left;
margin-right:10px;
width:80px;
height:115px;
background:url(../images/holder.gif) no-repeat;
padding:5px;
}
.timer li:last-child{margin-right:0;}
.timer li .big{
font-family: 'ArvoBold';
font-size:50px;
color:#598FA6;
text-align:center;
padding-left:10px;
position:relative;
top:20px;
}

.timer li .small{
font-family: Arial;
font-size:12px;
text-transform: uppercase;
text-align: center;
position:relative;
top:35px;
color:#598FA6;
}

footer{}
footer p{text-align:center;margin-top:20px;}

.subscribe{
overflow: hidden;
margin: 10px auto 0 auto;
width: 529px;
height: 80px;
background: url(../images/form-bg.gif) no-repeat;
}
.subscribe input[type="email"] {
background: none repeat scroll 0 0 transparent;
border: 0 none;
height: 42px;
margin-left: 18px;
margin-top: 16px;
width: 330px;
padding-left: 3px;
color:#d3d3d3;
font-size:20px;
border:1px solid #BABABA;
}

.subscribe input[type="submit"] {
background: url(../images/button.gif) no-repeat;
height: 48px;
width:152px;
text-indent: -9999px;
margin-top:13px;
border:0;
cursor: pointer;
}
.social{
float:right;
width:400px;
margin:30px 0 0 0;
}
.social ul{
list-style-type:none;
}
.social li a{
display:inline;
float:left;
width:48px;
}
.social li a:hover{
margin-top:-2px;
}

To add our @font-face, we will put this code at the beginning of body. Make sure our font folder is inside the css folder.


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

}

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

}

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

}

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

}

The countdown timer

For the countdown timer, put the jCounter plugin file inside the js folder, file should be jquery.jCounter-0.1.2.js. Next is to attached the code inside the header of our HTML file where it says “js here”. Code should look like this:

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

<script>

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

</script>

If you want to change the countdown date, look for date: “25 december 2012 12:00:00”, right now I set it up until Christmas. So we have a little countdown for the season :)

Markup Validation

After that, we will check it on our W3C markup validator to make sure the HTML is well formed.

html5-w3c

Great! We passed 😀

Here is the demo page if you want to see a working example.

And we are done!

Converting a PSD to HTML is really an easy job, you just have to make sure that cropping images is a way to go instead of slicing them, and also practice a lot so you can remember different HTML5 elements. Hope you learned something new, and don’t forget to share it with your friends!


Author : Sanjay Khemlani

Sanjay is a Web Designer from Philippines, he is dedicated to clean coding and effective design. He also writes tutorials about Web IU and Web Design on his blog.

first part of this tutorial

{ 4 comments… read them below or add one }

widyan November 29, 2012 at 2:31 pm

nice share sir, i get easier after read your tutorial. but can you give me trick that can be approved if i sell cooming soon design in themeforest ?

Reply

Anonymous November 13, 2012 at 10:04 am

Wonderful web site. Plenty of useful information here. I am sending it to some pals ans additionally sharing in delicious. And naturally, thank you on your sweat!

Reply

Mars October 26, 2012 at 6:59 pm

That was a cool design and coding. Thank you for sharing

Reply

annesofie October 29, 2012 at 10:03 am

Hi Mars, thank you for your nice feedback.

Best regards,
Sofie

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous post:

Next post:


Web Analytics