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!
[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]
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.
- PSD file; you can (get it from the first part of this tutorial)
- HTML5 Template from InstantBluePrint
- Countdown timer called jCounter
- Arvo font from Fontsquirrel
- Social Media icons from Purty Pixels
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
[html]
<!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>
[/html]
Article Code
The article section contains the timer. The code is structured as a list with spans for the count down numbers.
[html]
<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>
[/html]
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.
[html]
<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>
[/html]
CSS code
[css]
/* 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;
}
[/css]
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.
[css]
/* 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;
}
[/css]
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]
<!– 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>
[/js]
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.
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!
[wp-like-locker]
Thanks for liking this article. To be updated whenever we release new freebies and tutorials please like our Facebook page now. You can find the like button on top in the right side. We appreciate your support!
Download the file here.
[/wp-like-locker]
Alex Naz is a professional writer with a proven track record. He is a creative blogger who is passionate about web design, SEO and web development. He is also a family man and has a passion for the outdoors.
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 ?
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!
That was a cool design and coding. Thank you for sharing
Hi Mars, thank you for your nice feedback.
Best regards,
Sofie