Part 1: Create A Sleek Coming Soon Page Design
The first part of this tutorial is available HERE.
Live Demo
Preparation
Before we start id just like to say that i won’t be going into great depth in this tutorial. For me to explain every part thoroughly would take ages, this is more of a guide than a step by step tutorial.
Create a new folder on your desktop called “Coming Soon CSS Template”, inside this folder create a further 2 folders called “Images” and “Stylesheets”. Leave the images folder empty for now but inside the “Stylesheets Folder” create 2 blank CSS files “Styles.CSS” and “Reset.CSS” then head back to the main directory and create a blank HTML file called “Index.HTML”.
Open up the “Reset.CSS” file in your favorite code editor then copy and paste the CSS reset by “Eric Meyer“. Why do we need a CSS reset? i hear you ask and the answer is because a CSS reset avoids browser inconsistencies. If you want you can create your own but for the purpose of this tutorial “Eric Meyer’s” reset works fine.
PSD Preparation
Before we dive into all the code for this template lets first prepare all our images. When slicing the images make sure all images are saved in PNG format on transparent backgrounds. The images you need to slice are shown in the image below, click the image for full view.
Place all saved images into your images folder.
Slicing The Background
For the background we need to slice two images, the first image is the whole background on the canvas. Go ahead and hide all your layers apart from the “Background Layer”, “Circles Pattern Layer” and the “Half Circle Layer”. Once you have done this simply go to “File > Save As” then save it as “Background2.PNG” inside of your images folder.
The next slice we need to make is a small 15x800px slice like the image below.
This slice has to be done with precision because any mistakes will show up when the image is repeated across the browser window. Save this image as “Background.gif” inside the images folder.
Layout HTML Markup
The site will be built using a few simple DIV tags, each section of the layout will be divided like the image below.
This is what the code looks like.
[sourcecode language=”html”]
<!DOCTYPE HTML>
<head>
<title>Photoshop Plus – Coming Soon Page Design</title>
<link href=”stylesheets/styles.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”background”>
<div id=”site-wrap”>
<div id=”title”>
</div><!–TITLE END–>
<div id=”social-icons”>
</div><!–SOCIAL ICONS END–>
<div id=”timer”>
</div><!–TIMER END–>
<div id=”progress”>
</div><!–PROGRESS END–>
<div id=”info”>
</div><!–INFO END–>
<div id=”newsletter”>
</div><!–NEWSLETTER END–>
<div id=”footer”>
</div><!–FOOTER END–>
</div><!–SITE WRAP END–>
</div><!–BACKGROUND END–>
</body>
</html>
[/sourcecode]
Layout CSS Code
In your stylesheet add the following CSS styles which will style our DIV tags in the previous step.
[sourcecode language=”css”]
body {
background-image: url(../images/background.gif);
background-repeat: repeat-x;
background-color: #fff;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 18px;
color: #717171;
}
#background {
background-image: url(../images/background2.png);
background-repeat: no-repeat;
background-position: center top;
width: 100%;
height: 800px;
}
#site-wrap {
width:600px;
margin: auto;
}
#title {
margin-top: 22px;
float: left;
}
#social-icons {
float: right;
height: 32px;
width: 112px;
margin-top: 22px;
}
#timer {
float: left;
width: 600px;
margin-top: 38px;
}
#progress {
margin-top: 22px;
float: left;
width: 600px;
}
#info {
float: left;
width: 600px;
margin-top: 10px;
text-align: justify;
}
#newsletter {
float: left;
width: 600px;
margin-top: 20px;
}
#footer {
float: left;
width: 600px;
margin-top: 80px;
text-align: center;
}
[/sourcecode]
Coding The Title
Now the layout foundations have been created lets start coding each part of the site starting with the title. Inside the “Title DIV Tag” create a simple H1 tag, the H1 tag will contain our “Title.png” image and will also be a clickable link. The HTML looks like this.
[sourcecode language=”html”]
<div id=”title”>
<h1><a href=”#”>Your Website Name</a></h1>
</div><!–TITLE END–>
[/sourcecode]
We then use the following CSS styles to style our H1 tag.
[sourcecode language=”css”]
#title h1 {
display: block;
width: 316px;
height: 40px;
text-indent: -9999px;
}
#title h1 a {
display: block;
width: 100%;
height: 100%;
outline: none;
background-image: url(../images/title.png);
background-repeat: no-repeat;
}
[/sourcecode]
Coding The Social Icons
Inside our social icons DIV create a 3 item list giving each list a class, the class should reflect the social icon which will be displayed in that space. The HTML looks like this.
[sourcecode language=”html”]
<div id=”social-icons”>
<ul class=”social”>
<li class=”facebook”><a href=”#”>facebook</a></li>
<li class=”rss”><a href=”#”>rss</a></li>
<li class=”twitter”><a href=”#”>twitter</a></li>
</ul>
</div><!–SOCIAL ICONS END–>
[/sourcecode]
The social icons image we created earlier was just one whole image also known as a sprite. Using CSS we will shift the position of the background to reflect the position of the certain icon we wish to display.
[sourcecode language=”css”]
.social li {
float: left;
margin-left: 5px;
}
.social li a {
text-indent: -9999px;
display: block;
height: 32px;
outline: none;
}
li.facebook {
background-image: url(../images/social_icons.png);
background-repeat: no-repeat;
background-position: left top;
width: 32px;
}
li.rss {
background-image: url(../images/social_icons.png);
background-repeat: no-repeat;
background-position: center bottom;
width: 32px;
}
li.twitter {
background-image: url(../images/social_icons.png);
background-repeat: no-repeat;
background-position: right top;
width: 32px;
}
[/sourcecode]
Coding The Countdown Timer
For the coutdown timer we also use a simple list, each list item should have a class of what ever countdown timer it is E.G. days, hours, minutes or seconds. The list looks like this.
[sourcecode language=”html”]
<ul class=”count-down-timer”>
<li class=”days”>
<p>Days<br />
<span class=”number”>10</span></p>
</li>
<li class=”hours”>
<p>Hours<br />
<span class=”number”>22</span></p>
</li>
<li class=”minutes”>
<p>Minutes<br />
<span class=”number”>03</span></p>
</li>
<li class=”seconds”>
<p>Seconds<br />
<span class=”number”>58</span></p>
</li>
</ul>
[/sourcecode]
The CSS styles for our timer looks like this.
[sourcecode language=”css”]
.count-down-timer li {
float: left;
height: 160px;
width: 132px;
background-image: url(../images/timer_background.png);
background-repeat: no-repeat;
background-position: bottom;
text-align: center;
}
li.days {
margin-right: 24px;
}
li.hours {
margin-right: 24px;
}
li.minutes {
margin-right: 24px;
}
li.seconds {
}
span.number {
font-family: Arial, Helvetica, sans-serif;
font-size: 72px;
font-weight: bold;
line-height: 150px;
}
[/sourcecode]
For the timer to actually countdown like its intended to you will need to add in some jQuery script(s), i’ve listed some usable scripts at the bottom of the tutorial.
Coding The Progress Bar
For the progress bar we just need to insert the progress bar image into the progress DIV, there are no CSS styles other than the ones already entered previously. For the progress bar to work fully you will need to add additional jQuery scripts, i’ve listed some usable scripts at the bottom of the tutorial.
[sourcecode language=”html”]
<div id=”progress”>
<img src=”images/progress.png” width=”600″ height=”86″ alt=”Progress” />
</div><!–PROGRESS END–>
[/sourcecode]
Coding The Information And Newsletter Form
The HTML for the information and newsletter is pretty simple…. and looks like this.
[sourcecode language=”html”]
<div id=”info”>
<p><strong>Photoshop Plus</strong> is a new website coming soon. <strong>Photoshop Plus</strong> will be your No.1 stop to all things Adobe Photoshop related. <strong>Photoshop Plus</strong> will be releasing Weekly Tutorials, Freebies and Photoshop Related Articles.</p>
</div><!–INFO END–>
<div id=”newsletter”>
<p>Be Notified When The Site Goes Live!</p>
<form class=”form-newsletter”>
<input type=”text” class=”form-field” value=”Email Address” />
<input type=”submit” class=”form-button” value=”Go!” />
</form>
</div><!–NEWSLETTER END–>
[/sourcecode]
The CSS Code looks like this.
[sourcecode language=”css”]
#newsletter p {
font-size: 11px;
color: #3a3a3a;
line-height: 37px;
float: left;
}
.form-newsletter {
float: right;
width: 330px;
background-image: url(../images/form_field.png);
background-repeat: no-repeat;
background-position: left;
}
.form-field {
border: 0px;
background: transparent;
float: left;
width: 214px;
font-size: 11px;
color: #595959;
height: 37px;
line-height: 35px;
padding-right: 20px;
padding-left: 20px;
margin-right: 10px;
}
.form-button {
width: 58px;
height: 37px;
border: 0;
text-indent: -9999px;
cursor: pointer;
background-color: transparent;
float: left;
padding: 0;
background-image: url(../images/form_button.png);
background-repeat: no-repeat;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
[/sourcecode]
The HTML for our footer looks like this.
[sourcecode language=”html”]
<div id=”footer”>
<p>Copyright © Photoshop Plus, All Rights Reserved<br />
<span class=”by”>Design By Richard Carpenter</span></p>
</div><!–FOOTER END–>
[/sourcecode]
The CSS for our footer looks like this.
[sourcecode language=”css”]
#footer {
float: left;
width: 600px;
margin-top: 80px;
text-align: center;
}
span.by {
color: #1469aa;
font-size: 11px;
}
[/sourcecode]
jQuery Progress Bar Scripts
- jQuery progress bar from the offical jQuery website
- jQuery progress bar from jQueryUI
- jQuery progress bar from Nettuts
- jQuery progress bar from Q2Interactive
jQuery Countdown Timer Scripts
- jQuery countdown timer from Kieth Wood
- jQuery countdown timer from LittleWebThings
- jQuery countdown timer from 1PlusDesign
Conclusion
Thanks for taking the time to try this tutorial, I’ll look forward to your results & comments. The file is available to download for free as always at the bottom of the page.
16 thoughts on “Sleek Coming Soon Page Design: Part 2”
superb walkthrough, thanks for sharing…
awesome！I’m from China,thanks
Te sigooo desde ahora… Me declaro fan de tu trabajo… Gracias por compartir!
i’ve looking for a tutorial like this for a while.
thanks.
This is a great tutorial and exactly what we were looking for, thanks.
hi Richard Carpenter it is very nice tutorials thanks for taking for such tutorials am from delhi i learnt much from you you are best for me so Thanks ” Richard Carpenter “
hi Richard.. I just want to say, thanks for this tutor… great!
nice job !
HI Richard. I just wanted to say that you are the man. I mean I am in luv with your tutor. all of them.. they are just great.. Keep doing that teaching the next generations so we can make you proud.
Its a great tutorial..there is always something new with everyone of them…
Awesome..
how do you get the numbers to have the break they do in the psd, rather than the whole number sitting on top of the background?
Good work! Thanks a lot!
great tutorial..
nice share tutorial..:D
Love your tutorial.. but why did you say the download is free when in fact it takes you to paypal.. Not that I mind paying, its just that it says free above. Did you later change your mind…Anyway thanks for a great job.
Hi Tom,
All the files were free but at one point, but i have to make some sort of income from the website to pay for running costs.
I do apologize.