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
- Distant Galaxy from Fontsquirrel
- League Gothic from Fontsquirrel
- Social Media Buttons from 365psd.com
- Countdown Timer Jquery from jCounter
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.
<div><!-- wide --> <div> </div> <div><!-- container --> <header> <div> <h1> <img src="images/logo.png"> Coming Soon </h1> </div> </header> <div><!-- timer --> timer here </div><!-- timer --> <div></div> </div><!-- container --> <div> <input type="email" placeholder="Email here.." value=""> <input type="submit" value="submit"> </div> </div> <!-- wide --> <footer> <div><!-- footer wide --> <div><!-- container --> <div> <a href="#"><img src="images/fb.png"></a> </div> <div> <a href="#"><img src="images/twitter.png"></a> </div> </div><!-- container --> </div><!-- footer wide --> </footer>
Now check your html on a browser, it will look disorganized and ugly. Time for some styling, for the CSS copy this code.
/*
CSS file created with:Instantblueprint - Create a web project framework in seconds.
http://instantblueprint.com
Project: coming soon page
Author: Sanjay Khemlani
Author URL: https://sanjaykhemlani.com
File: css/style.css
Last edited: August 17, 2012, 8:34 pm
*/
/* Font face */
@font-face {
font-family: 'DistantGalaxyRegular';
src: url('fonts/DISTGRG_-webfont.eot');
src: url('fonts/DISTGRG_-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/DISTGRG_-webfont.woff') format('woff'),
url('fonts/DISTGRG_-webfont.ttf') format('truetype'),
url('fonts/DISTGRG_-webfont.svg#DistantGalaxyRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LeagueGothicRegular';
src: url('fonts/League_Gothic-webfont.eot');
src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/League_Gothic-webfont.woff') format('woff'),
url('fonts/League_Gothic-webfont.ttf') format('truetype'),
url('fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Main */
body {
background: url(../images/bg.png) repeat;
color:#333;
text-shadow:0 1px 1px #fff;
font-family: Arial, Helvetica, sans-serif;
padding:0;
margin:0;
}
.body:before {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
content: "";
height: 15px;
left: 0;
position: fixed;
top: -15px;
width: 100%;
z-index: 100;
}
.top{
background:url(../images/top.png) repeat-x;
height: 53px;
border-bottom:1px solid #333131;
box-shadow:0 1px 4px #605F5F;
}
.container{
margin: 80px auto 0;
width: 980px;
}
.logo{
padding-left:130px;
}
.logo img{
vertical-align: middle;
}
h1{
font-family: 'DistantGalaxyRegular';
font-size:80px;
}
.timer{
overflow: hidden;
background: #fff;
border:1px solid #ABABAB;
width: 600px;
margin: 40px auto 0 auto;
padding:0 10px;
}
.shadow {
background: url(../images/shadow.png) no-repeat scroll center center transparent;
content: "";
height: 47px;
position: absolute;
width: 551px;
padding-left:420px;
}
.timer ul{
overflow: hidden;
}
.timer li{
display: inline;
float: left;
margin-right:70px;
}
.timer li:last-child{margin-right:0;}
.timer li .big{
font-family: 'LeagueGothicRegular';
font-size:100px;
}
.timer li .small{
font-family: Arial;
font-size:12px;
text-transform: uppercase;
text-align: center;
}
.subscribe{
overflow: hidden;
margin-top:30px;
margin: 50px auto 0 auto;
width: 353px;
height: 66px;
background: url(../images/email.png) no-repeat;
}
.subscribe input[type="email"] {
background: none repeat scroll 0 0 transparent;
border: 0 none;
height: 29px;
margin-left: 18px;
margin-top: 16px;
width: 225px;
padding-left: 3px;
color:#999;
font-family: 'LeagueGothicRegular';
font-size:20px;
}
.subscribe input[type="submit"] {
background: url(../images/submit.png) no-repeat;
height: 35px;
width:83px;
text-indent: -9999px;
margin-top:13px;
border:0;
cursor: pointer;
}
footer{
background:#3E3E3E;
margin-top:80px;
}
.container-foot{
margin: 0 auto;
overflow: hidden;
padding:15px 0 15px 150px;
width: 800px;
}
.left{
float: left;
width: 311px;
margin-right:30px
}
.left:last-child{
margin-right:0;
}
Next is to add the jquery countdown timer on the header tag, make sure that include them on the right folder.
<!-- JS -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.jCounter-0.1.3.js"></script>
<script>
$(document).ready(function(){
$("#countdown").jCounter({
date: "25 december 2013 12:00:00",
format: "dd:hh:mm:ss",
twoDigits: 'on',
fallback: function() { console.log("Counter finished!") }
});
});
</script>
The styling is done, and we can add the function for countdown timer, add this inside the timer class.
<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 -->
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
