Sleek Coming Soon Page Design: Part 2

Welcome to part two of the Sleek Coming Soon Page Design Tutorial. In this tutorial I’ll be talking you through the process of coding the PSD file into a working CSS template.

In PSD Conversion

Part 1: Create A Sleek Coming Soon Page Design

The first part of this tutorial is available HERE.

Live Demo

Coming Soon Page Website Design Part2

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”.

Coming Soon Page Website Design Part2

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.

Coming Soon Page Website Design Part2

Place all saved images into your images folder.

Coming Soon Page Website Design Part2

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.

Coming Soon Page Website Design Part2

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.

Coming Soon Page Website Design Part2

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]

Coding The Footer

The HTML for our footer looks like this.

[sourcecode language="html"]
<div id=”footer”>
<p>Copyright &copy; 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 Countdown Timer Scripts

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.

Coming Soon Page Website Design Part2

Download Source

  1. March 30, 2011 at 3:36 AM

    superb walkthrough, thanks for sharing…

  2. April 3, 2011 at 1:31 AM

    awesome´╝üI’m from China,thanks

  3. mijail07
    April 8, 2011 at 3:51 PM

    Te sigooo desde ahora… Me declaro fan de tu trabajo… Gracias por compartir!

  4. 9ale7
    April 14, 2011 at 6:31 PM

    i’ve looking for a tutorial like this for a while.

    thanks.

  5. April 15, 2011 at 3:45 PM

    This is a great tutorial and exactly what we were looking for, thanks.

  6. rajesh kumar
    April 16, 2011 at 5:24 AM

    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 “

  7. Henry Saudale
    June 18, 2011 at 12:44 PM

    hi Richard.. I just want to say, thanks for this tutor… great!

  8. spencer
    June 21, 2011 at 9:11 PM

    nice job !

  9. John
    July 12, 2011 at 3:44 PM

    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.

  10. November 9, 2011 at 3:34 PM

    Its a great tutorial..there is always something new with everyone of them…

  11. Ade
    December 29, 2011 at 2:14 AM

    Awesome..

  12. matt
    February 7, 2012 at 5:24 AM

    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?

  13. Zabi
    March 6, 2012 at 2:21 PM

    Good work! Thanks a lot!

  14. July 7, 2012 at 4:24 PM

    great tutorial..
    nice share tutorial..:D

  15. July 11, 2012 at 1:42 AM

    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.

  16. July 11, 2012 at 12:32 PM

    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.

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 16 Comments On Sleek Coming Soon Page Design: Part 2, why not add yours!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Auto Scroll To The Top
css.php