Sleek Coming Soon Page Design

Sleek Coming Soon Page Design: Part 2

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

Purchase Psd Now

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

16 comments
rajasegar says

superb walkthrough, thanks for sharing…

Reply
leges says

awesome!I’m from China,thanks

Reply
mijail07 says

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

Reply
9ale7 says

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

thanks.

Reply
Free & Easy Blog says

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

Reply
rajesh kumar says

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 “

Reply
Henry Saudale says

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

Reply
spencer says

nice job !

Reply
John says

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.

Reply
Grant says

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

Reply
Ade says

Awesome..

Reply
matt says

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?

Reply
Zabi says

Good work! Thanks a lot!

Reply
aji says

great tutorial..
nice share tutorial..:D

Reply
Tom says

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.

Reply
Richard Carpenter says

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.

Reply
Add Your Reply

Popular posts

css.php