Coming Soon Page :: PSD to HTML

Good evening everybody, today I’ll be walking you through the process of coding your “Coming Soon Page” into a working HTML/CSS Template. Lets get started.

The Live Version

You can check out the Live Version of the template by clicking here. The template has been tested in the following browsers without any problems.

Firefox 2.0, 3.0 and 3.5
Internet Explorer 7 and 8
Chrome 3.0
Safari 3.0 and 4.0

Preparing Your Files

You will need to create a new folder on your desktop titled “Coming Soon”. Please create the following files: index.html, style.css, countdown.js, a folder titled signup, and a folder titled images. It should be set up like below:

Slicing Our Photoshop Document

Start out by slicing your background image like so and saving it as background.PNG. The selection doesn’t have to be exactly the same but you may need to play with it a bit to avoid a white line around the edge.

Now we will slice our header like the following image, hide the background, and save it as header.PNG:

Time to slice our time line, like the following, and save it as timeline.PNG. We will be including our text in the time line image to save time and future coding. Rather than having to update the CSS to get the font to fit each time we will simply change the image.

Slice your wooden cup like the following image, hide your background layer, and save it is wooden_cup.PNG:

Now to slice the background for our email sign up input layer. You will not need to hide the background on this image as we will not be including any background. If you do get a background, however, you can always fix it in the CSS later on where any problems crop up. Save it as input_bg.PNG.

And to save our submit button. Again you will not need to hide the background layer because you will be getting rid of all the background. Save it as input_submit.PNG:

Setting Up Our CSS

Setting up our CSS will require very little. All the measurements come from our images and our photoshop document. The one area that I want to draw your attention to is that we will be using @font face in this document. We will only be using our Qlassik Medium font in one area, to minimize the effect on people viewing without compatible browsers. I like to use the Coming Soon page to see how many of our visitors are effected by browser compatibility (such as CSS3).

Here is our CSS for the @fontface.

@font-face {
 font-family: Qlassik Medium;
 src: url(http://www.yourwebsite.com/webfonts/qlassik_medium.otf);
}

You will obviously want to change the source url to whatever URL you have your font located at. Again the rest of our CSS is simple, drawn from measurements in Photoshop.

body {
 background-image: url(images/background.png);
 background-repeat: repeat;
 background-color: #000;
 font-family: "Qlassik Medium";
}
.container{
 height: 618px;
 width: 1100px;
 margin-right: auto;
 margin-left: auto;
}
.header {
 margin-top: 40px;
 margin-left: 125px;
 background-image: url(images/header.PNG);
 background-repeat: no-repeat;
 float: left;
 height: 118px;
 width: 850px;
 text-indent: -999in;
}
.timeline {
 background-image: url(images/timeline.PNG);
 background-repeat: no-repeat;
 float: left;
 height: 74px;
 width: 940px;
 margin-top: 100px;
 margin-left: 80px;
 text-indent: -999in;
}
.countdown {
 float: left;
 height: 55px;
 width: 560px;
 font-family: "Qlassik Medium";
 font-size: 36px;
 color: #FFF;
 margin-top: 25px;
 margin-left: 285px;
}
.information_overall {
 float: left;
 height: 100px;
 width: 450px;
 margin-top: 70px;
 margin-left: 35px;
}
#information_woodencup {
 background-image: url(images/wooden_cup.PNG);
 background-repeat: no-repeat;
 float: left;
 height: 92px;
 width: 50px;
 margin-right: 10px;
}
#information_text {
 float: left;
 height: 75px;
 width: 390px;
 color: #FFF;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 14px;
 margin-top: 20px;
}
#resume-link {
 font-weight: bold;
 color: #F00;
 text-decoration: none;
}
#deviantart-link{
 color: #0F0;
 font-weight: bold;
 text-decoration: none;
}
#flickr-link {
 color: #C09;
 font-weight: bold;
 text-decoration: none;
}
#facebook-link {
 font-weight: bold;
 color: #06F;
 text-decoration: none;
}
.mailsignup {
 float: right;
 height: 80px;
 width: 480px;
 margin-top: 90px;
 color: #FFF;
}
.input {
 background-image: url(images/input_bg.PNG);
 background-repeat: repeat;
 height: 57px;
 width: 362px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
 float: left;
 font-family: "Arial Black", Gadget, sans-serif;
 font-size: 24px;
 color: #FFF;
 padding-left: 20px;
}
.submit {
 background-image: url(images/input_submit.PNG);
 background-repeat: no-repeat;
 height: 50px;
 width: 93px;
 float: left;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
 text-indent: -999in;
}

I would like to draw your attention to a few areas of the CSS that have relevance though. We will, again, be using our text-indent: -999in to add text to an area that we don’t need to show text. It will help the Search Engines in seeing the content without having to rely too much on areas that can be too greatly effected by CBC (Cross Browser Compatibility). Also, however, it will remove the text from your submit field so you have only the image but that the form still knows what you are saying.

I would also like to draw your attention to the

.input {
 background-image: url(images/input_bg.PNG);
 background-repeat: repeat;
 height: 57px;
 width: 362px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
 float: left;
 font-family: "Arial Black", Gadget, sans-serif;
 font-size: 24px;
 color: #FFF;
 padding-left: 20px;
 }
 .submit {
 background-image: url(images/input_submit.PNG);
 background-repeat: no-repeat;
 height: 50px;
 width: 93px;
 float: left;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
 text-indent: -999in;
 }

Notice the borders being set to none. It may seem like a waste of CSS to have the border styles be placed in CSS when they are just going to be set to none, but by default the input field and submit fields are set to have a border. You must place the border style none in your CSS to avoid this issue.

You can download the full CSS files from here.

Setting Up Our index.html Files

The HTML in our document is very simple. The only areas that are complicated are adding the javascript required to get the countdown to work as well as the forms to get our email sign up form working. To start out I will detail out the header of our HTML, all the way through including the style.css file but stopping at the javascript required to get the countdown working.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Freelance Is My Life.....Well Not Yet But It Will Be</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<SCRIPT LANGUAGE="JavaScript" SRC="countdown.js"></script>
</head>
<body>
<div>
 <div>Freelance is my life is coming soon.</div>
 <div>We have finished our Photoshop Document and are working on Coding our Home Page!</div>
 <div><div id="countbox"></div></div>
 <div>
 <div id="information_woodencup"></div>
 <div id="information_text">My website will be up shortly. In the meantime please feel free to take a look at my <a href="http://custompowerdesigns.com/freelance-cv/" id="resume-link">online resume</a>. You can also check out some of our work on <a href="http://custompowerdesigns.deviantart.com" id="deviantart-link">deviantART</a>, <a href="http://www.flickr.com/photos/custompowerdesigns/" id="flickr-link">flickr</a>, or my <a href="http://www.facebook.com/pages/Pueblo-CO/Custom-Power-Designs/381376000380" id="facebook-link">facebook</a> page</div>
 </div>
 <div>  <form action="signup/MailForm.php" method="POST">
<input type="hidden" name="recipient" value="[email protected]">
<input type="hidden" name="subject" value="Contact From CPD Web">
<input type="hidden" name="redirect" value="thankyou.htm">
<input type="hidden" name="required" value="email">
<input type="hidden" name="errorpage" value="signup/error.htm">
<input name="email" type="text" id="email" value="Your Email Address" size="30"><INPUT name="submit" type="submit">
</form>
</div>
</div>
</body>
</html>

Our form is a very basic form used to call our PHP document that will run everything. It also has our error sheet and thank you document. You can also add an autoresponder to the document as well by using the same input type and declaring your document.

Please download our MailForm.PHP file for use in this document. We are not going to cover how to specifically create a form mailer in this tutorial.

Setting Up Our Countdown JavaScript File

Our countdown file is a very simple javascript code. It uses the very basics of javascript math and basic JavaScript funtions.

// JavaScript Document
//######################################################################################
// NOTE: the month entered must be one less than current month. ie; 0=January, 11=December
// NOTE: the hour is in 24 hour format. 0=12am, 15=3pm etc
// format: dateFuture = new Date(year,month-1,day,hour,min,sec)
// example: dateFuture = new Date(2003,03,26,14,15,00) = April 26, 2003 - 2:15:00 pm
dateFuture = new Date(2011,4,19,22,33,39);
// TESTING: comment out the line below to print out the "dateFuture" for testing purposes
//document.write(dateFuture +"<br />");
//
//nothing beyond this point
function GetCount(){
 dateNow = new Date();                                    //grab current date
 amount = dateFuture.getTime() - dateNow.getTime();        //calc milliseconds between dates
 delete dateNow;
 // time is already past
 if(amount < 0){
 document.getElementById('countbox').innerHTML="Now!";
 }
 // date is still good
 else{
 days=0;hours=0;mins=0;secs=0;out="";
 amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
 days=Math.floor(amount/86400);//days
 amount=amount%86400;
 hours=Math.floor(amount/3600);//hours
 amount=amount%3600;
 mins=Math.floor(amount/60);//minutes
 amount=amount%60;
 secs=Math.floor(amount);//seconds
 if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
 if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
 if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
 out += secs +" seconds";
 document.getElementById('countbox').innerHTML=out;
 setTimeout("GetCount()", 1000);
 }
}
window.onload=GetCount;//call when everything has loaded

You can download the javascript file from here.

Setting Up Our thankyou.htm and error.htm files

Our thankyou.htm file is going to be the same as our index.html file but with a slight change. We will remove the signup form and place our thank you text in there. For this as well we will use the @fontface. Here is our thankyou.htm file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Freelance Is My Life.....Well Not Yet But It Will Be</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<SCRIPT LANGUAGE="JavaScript" SRC="countdown.js"></script>
</head>
<body>
<div>
 <div></div>
 <div></div>
 <div><div id="countbox"></div></div>
 <div>
 <div id="information_woodencup"></div>
 <div id="information_text">My website will be up shortly. In the meantime please feel free to take a look at my <a href="http://custompowerdesigns.com/freelance-cv/" id="resume-link">online resume</a>. You can also check out some of our work on <a href="http://custompowerdesigns.deviantart.com" id="deviantart-link">deviantART</a>, <a href="http://www.flickr.com/photos/custompowerdesigns/" id="flickr-link">flickr</a>, or my <a href="http://www.facebook.com/pages/Pueblo-CO/Custom-Power-Designs/381376000380" id="facebook-link">facebook</a> page</div>
 </div>
 <div>  Thank You for submitting your email address. We will let you know as soon as my life becomes your reality!
</div>
</div>
</body>
</html>

Our error.htm file will have just one change from our index.html file as well, but instead of removing the input field , since we still need it, we will remove the countdown to alert our user that an error occurred. Here is our error.htm file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Freelance Is My Life.....Well Not Yet But It Will Be</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
 <div>Freelance is my life is coming soon.</div>
 <div>We have finished our Photoshop Document and are working on Coding our Home Page!</div>
 <div style="font-size: 32px">OOOOPS.....YOU MADE A MISTAKE....TRY AGAIN</div>
 <div>
 <div id="information_woodencup"></div>
 <div id="information_text">My website will be up shortly. In the meantime please feel free to take a look at my <a href="http://custompowerdesigns.com/freelance-cv/" id="resume-link">online resume</a>. You can also check out some of our work on <a href="http://custompowerdesigns.deviantart.com" id="deviantart-link">deviantART</a>, <a href="http://www.flickr.com/photos/custompowerdesigns/" id="flickr-link">flickr</a>, or my <a href="http://www.facebook.com/pages/Pueblo-CO/Custom-Power-Designs/381376000380" id="facebook-link">facebook</a> page</div>
 </div>
 <div>  <form action="MailForm.php" method="POST">
<input type="hidden" name="recipient" value="[email protected]">
<input type="hidden" name="subject" value="Contact From CPD Web">
<input type="hidden" name="redirect" value="signup/thankyou.htm">
<input type="hidden" name="required" value="name">
<input type="hidden" name="errorpage" value="signup/error.htm">
<input name="name" type="text" id="name" value="Your Email Address" size="30"><INPUT name="submit" type="submit"></form>
</div>
</div>
</body>
</html>

Conclusion

As you can see our Coming Soon Page is pretty simple. Once you have the countdown created there isn’t much to do other than code the remaining files. The good thing about this is that for the other two files you have to create, error.htm and thankyou.htm, you can just copy the code from your index file and change the two areas that you would like. Even the form mailer is something that most designers have lying around that you just re-use for this document (like we did).

Click Above Image To View Demo