Design and Code a Sweet Custom Coming Soon Page

25

by Shane Jeffers

Design and Code a Sweet Custom Coming Soon Page

So you just purchased a new hosting account and you some great ideas for your next project. Instead of just having the host default page up for your domain name why not create a coming soon page that is simple and effective.

There are many reasons to create these coming soon pages. The first reason is to make your product or service look more professional instead of having the “This is a website” page that your hosting company provides you. Secondly, it can help promote your site before it is even launched. Be sure to include your twitter account or an email subscription so people can follow the progress of the site. It allows them to get more excited about something they haven’t even seen yet.

Example Screenshot

Final Screenshot

Designing the page

When you start the design keep in the back of your head that this does not need to be a complex page on the contrary actually. This page needs to be simple yet effective. It must also convey a message of what the site will offer to get people interested. Don’t spend too much time on this page as you need that time to complete your other ideas. Let’s go ahead an open up photoshop and get started.

1. Open up a photoshop document 900px by 700px with a transparent background and the settings below.

Photoshop Document Settings

2. Now lets fill in the background by going up to Edit > Fill.. chooser color from the drop down and put in the hex code #333333 and hit OK.

Main Background Settings

3. Now select the rectangular marquee tool and in the drop down box at the top choose Fixed size. Enter 900px for the width and 300px for the height.

Rectangular Marquee Tool Settings

4. Before you click anywhere go up to Layer > New > Layer… and name it Top. Now you can click anywhere in the document and make sure you drag the selection to the top.

Top selection

5. Make sure you are selected on the newly created layer not the dark layer and go up to Edit > Fill… choose color from the drop down and enter #ececec for the hex code.

Fill top area with a color

6. Now we have our top section put together all we have to do is bring in the logo. Open up your logo and drag it into your document. This is an important one because you want the brand to really stand out so make sure your logo is prevalent.

Adding in the logo

7. Next we need to add in the COMING SOON portion so they know that the site is not just a broken site. You don’t have to necessarily use COMING SOON, just something that lets the customer know that it’s not available yet. First create another new layer by going to Layer > New > Layer… name it Shadow. Grab your rectangular marquee tool and set a fixed size to be 400px wide and 30px high. Click and make the selection directly underneath the logo.

Shadow selection

8. Grab your gradient tool and in the Gradient Picker (which is in the top left) choose your second option which should be foreground to transparent. Also set your foreground color to black by pressing D on your keyboard. Click approx. 5px above the selection that you have and while dragging down hold the shift key and let go when you get to about the middle of your selection. Once that is done drop your opacity for this layer in your layers palette to 10%.

Shadow Graphic

9. Next we will use a layer mask to fade the corners out diagonally. Go up to Layer > Layer Mask > Reveal All. This allows us to see the complete layer and then fade it out by using the color black. You should still have your gradient tool selected and Foreground to Transparent selected and black as your foreground color if not make sure you do. Next drag the gradients below each of the corners in an upward diagonal direction like the screen shot below.

Drag the gradient out

10. Once that is finished go ahead and add the coming soon text in.

Finished Top Section

Coding the page with CSS3

I just recently did a post on The basics of HTML5 but today we are going to stick with XHTML and use the XHTML Strict DOCTYPE.

The Basics

11. This is the bare bones of what an HTML page must consist of in order to display properly. Add the code below to a blank HTML file and save it as index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Alive Again Apparel</title>
</head>
<body>


</body>
</html>

12. Next create a CSS file and name it style.css. Now lets link our CSS file to our index.html file so we don’t forget. Add the piece of code below directly above the closing head tag. Oh and to save you some trouble make sure the index file and the CSS file are in the same directory.

<link href="style.css" rel="stylesheet" type="text/css" />

The HTML Structure

13. Now let’s choose exactly how the page is going to be laid out. We will be using a 100% width layout in this tutorial so we will need two divs for the top section. One to fill the color 100% across and the other to center the content. In the example below I took out all of the other tags except the body tags and what’s between them, but that was only to make it easier to see. You still need the other tags in order for the page to work.

<body>
     <div id="top">
          <div id="topcon">
               <img src="logo.png" id="logo" />
          <div><!-- This div will be centered and contain the logo -->
     </div><!-- 100% color all the way across -->
     <p>Alive Again Apparel is a Christian T-Shirt business that is getting ready to launch. We will be delivering spirit filled T-Shirt designs for a unique way to spread the gospel.  
		
     <p>If you would like more information please feel free to email us at <a href="#">test@test.com</a> or follow us on <a href="#" target="_blank" id="twitter">Twitter</a> to get news about the upcoming launch.</p> 
</body>

14. Now we have our content and you guys should now have an html page that looks pretty boring with no styling at. Enter CSS3! Open up your CSS file and start with the code below. I know how dare I say use this. I recommend that you use some type of CSS reset instead of using this * method, but I used this for the sake of simplicity.

/*** Resets all elements ***/

* {
   margin: 0px;
   padding: 0px;
}

/*** Gives the body the dark gray background we used in PS ***/

body { background: #333; }

/*** Styles the links ***/

a { color: #999; }

/*** Sets paragraph styles ***/

p {
   color: #ececec;
   font-family: verdana, arial;
   font-size: 12px;
   line-height: 18px;
   margin: 0px auto 20px auto;
   text-shadow: 1px 1px 1px #111; /*** New CSS3 Property that adds the shadow ***/
   width: 450px; /*** Allows paragraphs to be centered ***/
}

I used the Text-Shadow property right here which is brand new in CSS3. It gives our text a nice shadow behind it in most modern browsers.

CSS3 Text Shadow Property Example

15. Now that we’ve styled some of our HTML elements lets move on to the layout.

/*** Top section 100% color ***/

#top {
   background: #ececec;
   border-bottom: 1px solid #fff;
   margin-bottom: 30px;
   width: 100%;
}

/*** Topcon centers the page at 900px ***/

#topcon {
   margin: 0px auto; /*** Centers the page ***/
   width: 900px; /*** A width is required in order for it to center ***/
}

16. Notice in the HTML above I added ID’s to the twitter text and the logo. We will use these specific ID’s to style them

/*** Styling the Logo ***/

#logo {
   width:445px;
   height: 125px;
   display: block;
   margin: 0px auto; /*** Centers the logo in the 900px box ***/
   padding: 100px 0px;
}

/*** Styles the twitter link ***/

a#twitter { color: #4ce6fd; }

LIVE DEMO

The Final Product and Plug :)

If you hadn’t guessed already Alive Again Apparel is a Christian T-Shirt Business I am starting and I wanted to walk you through my process of creating a coming soon page that can be seen here.

Please keep a look out for the launch of our Christian T-Shirt Business and be sure to follow us on twitter to keep up to date with the progress @AliveAgainApprl

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. I have a unique passion for design trends and tutorials. Follow me on twitter @ThreeStyles

Enjoy this post? Subscribe by RSS or Email

CSS, Photoshop, Tutorials

  • http://www.thomascraigconsulting.com Thomas Craig Consulting

    Very nice tutorial, well written.

  • http://acrisdesign.com Vikas Ghodke

    Yeah well written nice tutorial.
    .-= Vikas Ghodke´s last blog ..Giveaway 3 Licenses of Sunburst WordPress theme =-.

  • http://pixelclouds.com/ Ben

    Luv it! Really well written tut.
    Cheers Shane
    .-= Ben´s last blog ..Create a Glossy CSS Menu =-.

  • http://www.seventytwo.nl Danny Arntz

    Good article, it actualy helps promoting a lot. I’m using it too for my upcoming project..

  • http://www.jennamolby.com Jenna Molby

    Great tutorial, thanks!
    .-= Jenna Molby´s last undefined ..If you register your site for free at =-.

  • http://creativeoverflow.net Jacques van Heerden

    Awesome tutorial mate :)
    .-= Jacques van Heerden´s last blog ..Showcase of Amazing Entertainment Websites Developed in Flux =-.

  • http://www.threestyles.com Shane Jeffers

    Thanks everyone for the kind comments. I’m really hoping to make this a fun project.

  • http://logolitic.com/ logolitic

    I`m going to try this right now. Thanks.
    .-= logolitic´s last blog ..50+ Typography art inspiration =-.

  • http://ddjphotoshop.blogspot.com zabava

    Nice tutorial thank you
    .-= zabava´s last blog ..Photoshop efekat izgorele kože =-.

  • http://ibuzzyou.com IBuzzyou

    A great tutorial with great explanations i will use it this afternoon for some project i’m working to.
    .-= IBuzzyou´s last blog ..Suisse : Festival Electron =-.

  • http://www.sushi-station.com Aaron

    Hey I love your tutorials they’re all great and practical.

    I had a slight problem with this one. The logo ( the thing we designed in photoshop in the first part of this tut) comes out very distorted and unproportional in the website. I’ve followed your code exactly and tripple checked for mistakes.

    Any idea why?

  • http://www.threestyles.com Shane Jeffers

    @Aaron

    With out seeing any of your code and just taking a wild guess. I would check and see if the width and height of your logo matches the width and height in the CSS. Your logo might be smaller or bigger than mine so check those values and change it for the logo id ( #logo ). If that doesn’t work I’d have to see your code.

    Shane

  • http://www.sushi-station.com Aaron

    well my “logo” is 900 x 700 exactly as you said to do it in photoshop in the beginning of the tutorial. As i said, i followed your instructions word for word. But just in case here is my code. (I saved the photoshop file as “comingsoon”

    —HTML PART—


    Blah blah blah, blah blah? blah blah!
    Blah blah at test@test.com or follow us on Twitter to blah blah blah

    —CSS PART—

    @charset “UTF-8″;
    /* CSS Document */

    * {
    margin: 0px;
    padding: 0px;
    }

    body {
    background: #333;
    }

    a {
    color: #999;
    }

    p {
    color: #ececec;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    line-height: 18px;
    margin: 0px auto 20px auto;
    text-shadow: 1px 1px 1px #111;
    width: 450px;
    }

    #top {
    background: #ececec;
    border-bottom: 1px solid #fff;
    margin-bottom: 30px;
    width: 100%;
    }

    #topcon {
    margin: 0px auto;
    width: 900px;
    }

    #logo {
    width: 445px;
    height: 125px;
    display: block;
    margin: 0px auto;
    padding: 100px 0px;
    }

    a#twitter {
    color: #4ce6fd;
    }

  • http://www.sushi-station.com Aaron

    ok well the form kind of killed my html code but just assume its exactly like you wrote it =D

  • http://www.threestyles.com Shane Jeffers

    @Aaron

    The 900px is the actual width of the web page not your logo. Looking at your CSS your logo should be 445px by 125px if it’s not then it will scrunch your image down to 445px wide. If you logo is bigger than that then adjust it here.

    #logo {
    width: your logos width here;
    height: your logos height here;
    display: block;
    margin: 0px auto;
    padding: 100px 0px;
    }

  • http://www.sushi-station.com Aaron

    ok cool i was under the impression that i had to use the actual photoshop image in the tutorial for the “logo” i guess i can crop that top part down to that amount. thanks.

    Anyways, my other problem is that the text in the html is not displaying in the dark gray area, its in the light gray area right under the image. how do i fix that?

  • http://www.threestyles.com Shane Jeffers

    @Aaron

    Make sure the text you want in your gray area is outside of the #top div.

  • Mario Bautista

    Hey shane thanks for the tutorial! But I’m having the same problem Aaron is having, I’m getting the text in the top portion of the page and i want it to be in the bottom. I’ve tried moving the text and it only moves it either exactly above or underneath the logo but not in the dark grey portion.

  • http://www.designisnowhere.com/ Paulchen

    Thanks for this little Tutorial :)
    .-= Paulchen´s last blog ..Hundreds – Solace =-.

  • http://www.deutsched.com Amr Boghdady

    So much one could simply do by choosing the right fonts!
    Great tutorial, simple, yet looking extremely professional!
    .-= Amr Boghdady´s last blog ..Das Wort des Tages =-.

  • Andrew

    Is there coding for the newsletter section? because in the live demo there is a “subscribe form”

  • Pingback: Design Beautiful “Coming Soon” Page: 37 Templates & Tutorials | Marketing for Companies

  • Ian

    Most of these comments are a year old, but for anyone having issues, there is a mistake in the HTML code. Step 13, lines 3-5:

    Should be:

    That’ll put the text down into the dark area. Hope this helps someone. Thanks for the awesome tutorial.

  • Ian

    Since my comment didn’t display HTML, on lines 3-5 in step 13, make sure to close the DIV tag.

  • Inger

    Hi. I know it’s a quite old post and I am very new to HTML and CSS. I would like to know is there any problem at the HTML part? I can’t show the words on the picture….