Design & Code a Coming Soon or Under Construction Page


Check the table of contents and scroll to your interests.

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Under the countdown widget we will be creating an input form. It will allow visitors to input their email so they can be notified when the site launches. Create the form by using the Rounded Rectangle Tool. Set its color as gray and apply some inner shadow effect.


Coming Soon Page - Countdown Timer

  1. Create a Minimal Coming Soon or Under Construction Page in Adobe Photoshop
  2. Coding the Coming Soon or Under Construction page
  3. Final Countdown: Adding a Countdown Timer on the Coming Soon Page
  4. Guidelines to Building a Useful Coming Soon Page

Create a Minimal Coming Soon or Under Construction Page in Adobe Photoshop

Final Coming Soon Page


Here is the CSS code for styling the popup and making it appear below the text input field:

Step 1

<form action=”” method=”get”> <input type=”text” class=”email” placeholder=”Input your e-mail address here…” required /> <input type=”submit” class=”submit” value=”Let me Notified” />
</form>

Step 2

$(document).ready(function(){ /* —- Countdown timer —- */ $(‘#counter’).countdown({ timestamp : (new Date()).getTime() + 51*24*60*60*1000 }); });

Step 3

Use Helvetica in two weights (regular and bold) and two sizes (30 and 12pt) place two catch phrases/slogans. The best thing is to write down some info that will describe your upcoming website.
A website that is not yet ready to be launched needs a “Coming Soon” Page to notify the visitors that it would be soon launched on a specific time frame. As the modern web development evolved, this page is more than just a simple text page or an under construction image.

Step 4

Table of Contents:
For the countdown timer we will use jQuery and the jQuery countdown plugin from tutorialzine.com. Of course we will customize it a bit to match our design.

Step 5

<div id=”links”> <div class=”home”><a href=””>https://1stwebdesigner.com/</a></div> <div class=”support”><a href=””>http://support.1wd.com/</a></div> <div class=”browser”><a href=””>Google Chrome OS. 10.X.23</a></div> <div class=”books”><a href=””>http://1wd.co/e-books/</a></div> <div class=”download”><a href=””>http://1wd.com/download/</a></div> <div class=”ups”><a href=””>UPS Signed Worldwide</a></div> </div>

The page should look like this:

Step 6

Coming Soon Page - Footer
footer { font-size: 13px; text-align: center; margin-top: 25px; text-transform: uppercase; text-shadow: 2px 2px 2px rgba(150,150,150,1);
} footer a { color: #fff;
}

file-strucuture
/* —- Footer —- */ footer { width: 700px; margin: 0 auto; padding: 35px 0 25px 0; overflow: hidden;
} footer ul { float: right; width: 125px; height: 22px;
} footer ul li { float: left;
} footer a { position: relative; display: block; margin-left: 10px;
} .digg { width: 10px; height: 16px; background: url(../images/digg.png) center center no-repeat;
} .twitter { width: 21px; height: 16px; background: url(../images/twitter.png) center center no-repeat;
} .vimeo { width: 16px; height: 16px; background: url(../images/vimeo.png) center center no-repeat;
} .skype { width: 16px; height: 16px; background: url(../images/skype.png) center center no-repeat;
}

For the countdown timer we will be using the jQuery countdown plugin from tutorialzine.com. Our timer will be contained in the “counter” div. Here is the HTML code:
The CSS3 properties used here are: “border-radius”, “box-shadow”, “linear-gradient” and “text-shadow”. You can easily understand what these properties do by just reading their name.

Step 9

You can note the conditional comments where we use the file “ie.css” for Internet Explorer 7 and 8. In this file we will add a few lines for IE 7-8 as you will see below. We also import the JavaScript file “html5.js” for making IE 7 and 8 understand the new HTML5 tags, “header” and “footer”.

Step 10

/* —- Counter —- */ #counter { width: 700px; height: 145px; margin: 55px auto 0 auto; font-family: ‘LeagueGothicRegular’, Arial, Helvetica, sans-serif; font-size: 92px; color: #272727; text-shadow: 0 1px 0 #fff; overflow: hidden;
} .countDays, .countHours, .countMinutes, .countSeconds { float: left; width: 102px; height: 138px; padding-left: 36px; background: #e7e7e7; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.07))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 2px 3px 0 rgba(255,255,255,.2) inset, 0 2px 2px 0 rgba(0,0,0,.1); -webkit-box-shadow: 0 2px 3px 0 rgba(255,255,255,.2) inset, 0 2px 2px 0 rgba(0,0,0,.1); box-shadow: 0 2px 3px 0 rgba(255,255,255,.2) inset, 0 2px 2px 0 rgba(0,0,0,.1);
} .points { float: left; width: 40px; margin: 0; font-family: Georgia, serif; font-size: 44px; font-weight: bold; text-align: center; line-height: 138px; text-shadow: none;
} .position { position: relative; float: left; width: 35px; height: 92px; margin: 8px 0 0 0;
} .digit { position: absolute; top: 0; left: 0;
} .boxName { float: left; width: 80px; margin: -5px 0 0 7px; font-size: 36px; color: #a6a6a6; text-shadow: 0 1px 0 rgba(255,255,255,.5);
} .Hours { margin-left: 5px; }
.Seconds { margin-left: 2px; }

button,input,textarea { font-size: 16px; max-width: 100%; margin: 0; border-radius: 0; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} textarea { overflow: auto; vertical-align: top;
} input,textarea { background: #6e6e6e; background: rgba(169,169,169,0.3); border: 1px solid #f4f4f4; color: #fff; font-weight: 700; letter-spacing: 1px; padding: 12px; text-transform: uppercase;
} input:focus,textarea:focus { outline: 0;
} button:hover,button:focus,input[type=submit]:focus,input[type=submit]:hover { background: #ff8721; color: #fff; outline: 0;
} button,input[type=submit] { -webkit-appearance: button; cursor: pointer;
} button,input[type=submit] { background: #ffab00; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;
} .form-field { position: relative;
}

Create a 700×400 pixel white shape. Set the Fill to zero and apply any seamless (transparent) pattern.
In this tutorial we will also use some new HTML5 tags (and make them work on Internet Explorer 7 and 8) and some interesting attributes like “placeholder” and “required” for the subscription form.

Step 12

The page should look like this:
&lt;body&gt; &lt;div class=”container”&gt; &lt;header&gt; &lt;h1&gt;Our website is Coming Soon&lt;/h1&gt; &lt;/header&gt; &lt;section&gt; &lt;h2&gt;WE APOLOGIZE FOR INCONVENIENCE&lt;/h2&gt; &lt;p class=”details”&gt;YOU NEED TO WAIT…&lt;/p&gt; &lt;div id=”counter”&gt;&lt;/div&gt; &lt;p class=”details”&gt;SEND ME DETAILS ABOUT IT&lt;/p&gt; &lt;div id=”subscribe”&gt; &lt;form action=”” id=”subscribe-form” method=”post” name= “newsletter-form”&gt; &lt;p class=”form-field”&gt;&lt;input id=”subcribe_email” name= “subscribe_email” placeholder=”Your email” type=”email” value=””&gt;&lt;/p&gt; &lt;p class=”form-submit”&gt;&lt;input id=”subscribe_submit” name= “subscribe_submit” type=”submit” value=”Notify Me”&gt;&lt;/p&gt; &lt;/form&gt; &lt;/div&gt; &lt;/section&gt; &lt;footer&gt; &lt;a href=”https://1stwebdesigner.com/” target=”_blank”&gt;Copyright – 1stwebdesigner.com – 2014&lt;/a&gt; &lt;/footer&gt; &lt;/div&gt;

So, we have to check if the browser doesn’t support the new attributes and if the browser is Safari. If so, we have to provide a jQuery fallback for showing the placeholder text and for detecting if the text input field is left empty and show a warning popup if it is.
/* —- Subscription Form —- */ form { position: relative; margin: 40px auto 0 auto;
} .email { width: 498px; height: 35px; padding: 0 15px; background: #f1f1f1; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.02)), to(rgba(0,0,0,.02))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); background-image: -o-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); background-image: linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); border: 1px solid #cbcbcb; -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset; -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset; box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #b3b2b2; font-style: italic;
} .email:focus { outline: 0; border: 1px solid #c0c0c0; -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset; -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
} .submit { width: 140px; height: 37px; margin: 0 0 0 5px; padding: 0; background: #888; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); border: 1px solid #636363; -moz-box-shadow: 0 1px 2px 0 rgba(253,252,252,.35) inset, 0 -1px 2px 0 rgba(0,0,0,.15) inset; -webkit-box-shadow: 0 1px 2px 0 rgba(253,252,252,.35) inset, 0 -1px 2px 0 rgba(0,0,0,.15) inset; box-shadow: 0 1px 2px 0 rgba(253,252,252,.35) inset, 0 -1px 2px 0 rgba(0,0,0,.15) inset; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); line-height: 13px; cursor: pointer;
} .submit:hover { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1))); background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -o-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset; -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset; box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
} .submit:active { -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset, 0 3px 13px 3px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset, 0 3px 13px 3px rgba(0,0,0,.3) inset; box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset, 0 3px 13px 3px rgba(0,0,0,.3) inset; color: #ddd;
}

Coming Soon Page - Header
/* —- Main Area —- */ #main { position: relative; width: 700px; margin: 50px auto 0 auto; padding: 20px 0 0 25px; background: url(../images/main-content-pattern.jpg) top left repeat;
}

<div id=”counter”></div>

For the subscription form we will use two new HTML5 attributes, as we mentioned before. These new attributes are “placeholder” and “required”. Here is the HTML code of our form:

Step 16

<div id=”counter” class=”countdownHolder”> <div class=”countDays”> <span class=”position”> <span class=”digit static”>0</span> </span> <span class=”position”> <span class=”digit static”>0</span> </span> <span class=”boxName”> <span class=”Days”>DAYS</span> </span> </div> <span class=”points”>:</span> <span class=”countDiv countDiv0″></span> <div class=”countHours”> <span class=”position”> <span class=”digit static”>0</span> </span> <span class=”position”> <span class=”digit static”>0</span> </span> <span class=”boxName”> <span class=”Hours”>HRS</span> </span> </div> <span class=”points”>:</span> <span class=”countDiv countDiv1″></span> <div class=”countMinutes”> <span class=”position”> <span class=”digit static”>0</span> </span> <span class=”position”> <span class=”digit static”>0</span> </span> <span class=”boxName”> <span class=”Minutes”>MNTS</span> </span> </div> <span class=”points”>:</span> <span class=”countDiv countDiv2″></span> <div class=”countSeconds”> <span class=”position”> <span class=”digit static”>0</span> </span> <span class=”position”> <span class=”digit static”>0</span> </span> <span class=”boxName”> <span class=”Seconds”>SECS</span> </span> </div> </div>

Coming Soon Page - Subscription Form

Step 17

For this example, the launch date of the site will be on June 7, 2014. Finally use the ID counter to call our launchdate variable.
Now, to style the counter, you will be using the default classes of the jQuery Countdown plugin countdown_section and countdown_amount. count_section will hold the label of counter (e.g. days, hours, minutes, seconds) while the countdown_amount will hold the numeric value of the counter. To divide each section, choose a border dashed with a 1px width and the color of white.

Step 18

These two new HTML5 attributes (“placeholder” and “required”) are very useful and can save us a lot of time, but they aren’t supported by older browsers like Internet Explorer 7 and 8.
Now let’s style this counter and make it match our PSD design:

Step 19

Below you can see the HTML for the links:
The body of our page is also simple. It contains the header, where we will put the headline and the page’s description; and the “main” div where we will put the links, the countdown timer, the subscription form and the footer.
<header> <h1>We are working our butts off to finish this website</h1> Our developer, Michael, is doing his best to finish this website before the counter, but we can’t help him. </header>

Coding the Coming Soon or Under Construction page

html-strucute

DOWNLOAD NOW

Apply the same Soft Light Gradient Overlay effect we’ve been using for various elements in this layout.
Another problem that we have here appears when we use the Safari browser. Safari doesn’t support the “required” attribute, but Modernizr returns “true” when checking if this feature is supported.
We have also used the same CSS3 properties that we used for the countdown timer, “border-radius”, “box-shadow”, “linear-gradient” and “text-shadow”.

1. The Files’ Structure

$(document).ready(function() { var launchdate = new Date(2014, 6 – 1, 7); $(‘#counter’).countdown({ until: launchdate }); })(jQuery);

Conclusion

By using 12px lowercase Helvetica and icons from the IconSweets2 set, create two horizontal groups of elements. Each element must consist of one icon and one link. I’ll set it with three elements for each row.
::-webkit-input-placeholder { color: #fff;
} ::-moz-placeholder { color: #fff; opacity: 1;
} ::-ms-input-placeholder { color: #fff; opacity: 1;
} .placeholder { color: #ff;
}

Hope you enjoyed this tutorial and see you again next time.
Apply a Gradient Overlay effect. Apply the same blend mode, with an opacity of 20%.

For this we will use the Modernizr Javascript library that will let us know if the browser supports the two attributes.

<div class=”social-media-arrow”></div>

4. The Main Area

Now we initialize the countdown timer by adding these lines to the “script.js” file (inside the “js” folder):
Our file structure will consist of four folders and one html file:
Before we start, we’re going to add first the necessary libraries and links to our Head section. This will include our CSS and JavaScript libraries.

5. The Links


For our CSS file, we’re going to add styles first on our basic elements such as the body, H1, H2 and the container class. The container class will have a width in the form of percentage to create a responsive effect. Notice that the CSS3 transform property was used on the H1 tag, the title tag. This will enable our title tag to rotate 360 degrees on the x-axis position. To learn more about this you can check this resource.
We move on to creating one of the most important elements in a coming soon page, a countdown counter. By using the Rounded Rectangle Tool (U), create a shape of 140×140 pixels. Apply a Drop Shadow with 15% of opacity.
After including Modernizr (the file “modernizr.custom.js”) in the “head” part of our page, we need to add these lines to the “script.js” file:
After including Modernizr (the file “modernizr.custom.js”) in the “head” part of our page, we need to add these lines to the “script.js” file:
After including Modernizr (the file “modernizr.custom.js”) in the “head” part of our page, we need to add these lines to the “script.js” file:
Coming Soon Page - Links

9. Some jQuery Animations

Finish the form by adding a gray stroke.
#counter { margin-top: 28px;
} .countdown_section { color: #dadada; display: inline-block; font-size: 12px; text-align: center; width: 25%; letter-spacing: 1px; border-left: 1px dashed #dadada; border-color: rgba(218,218,218,0.8); padding: 42px 12px 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-shadow: 2px 2px 2px rgba(150,150,150,1); text-transform: uppercase;
} .countdown_section:first-child { border-left: 0;
} .countdown_amount { color: #fff; display: block; font-family: ‘Open Sans’; font-size: 60px; font-weight: 700; letter-spacing: normal; line-height: 1;
}

In today’s tutorial, we are going to create a coming soon page that has a countdown timer on it using jQuery Countdown plugin by Keith Wood
So, what do you think about this tutorial? Did you learn something new? Also, what do you think about these new properties? Will you use them? Or maybe you want to wait until they are better supported by the different browsers?

Conclusion

By this time, you will have same output like the image below.

Notice that the counter is not yet showing on the page. To make it appear, add our jQuery codes before the closing body tag. First, load our jQuery Countdown plugin by specifying the link of the script.

Final Countdown: Adding a Countdown Timer on the Coming Soon Page

And here is how the form looks if the user clicks on the submit button while leaving the text field empty:
Let’s create a new folder and name it “coming-soon-page”. Inside this folder we will have these files and subfolders:
By using the Type Tool and Helvetica font, input some text on the button.

Resource You Need to Complete This Tutorial:

File Structure

body { color: #dadada; line-height: 1.75; width: 100%; background: url(../img/background.jpg)center; font-family: ‘Open Sans’;
} h1,h2{ color: #fff; line-height: 1.16667; text-align: center; text-transform: uppercase; text-shadow: 2px 2px 2px rgba(150,150,150,1);
} h1 { font-size: 43px; font-family: Montserrat; font-weight: 700; border: 2px dashed #fff; margin-top: 50px; padding: 10px; cursor: pointer; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease;
} h1:hover { -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); -o-transform: rotateX(360deg); transform: rotateX(360deg);
} h2 { font-size: 30px; font-weight: 300; margin-top: 30px;
} .container { width: 58%; margin: 40px auto 0;
} .details { margin-top: 30px; color: #fff; text-align: center; text-shadow: 2px 2px 2px rgba(150,150,150,1);
}

.email { line-height: 35px;
}

Let’s style our form:

Getting Started

As you can see, the page contains a lot of gradients and shadows. We will create them using just CSS3. As you may know, CSS3 provides a lot of new properties that let us create cool effects without the need of using images.
If you completed the both tutorials you now have a pretty solid knowledge on how to build coming soon page. However in the next section there are some great guidelines on how to build an useful one.
<footer> <ul> <li><a class=”digg” href=””></a></li> <li><a class=”twitter” href=””></a></li> <li><a class=”vimeo” href=””></a></li> <li><a class=”skype” href=””></a></li> </ul> </footer>

/* —- Links —- */ #links { width: 700px; font-size: 12px; font-weight: bold; color: #aaa; line-height: 18px; overflow: hidden;
} #links a { position: relative; color: #aaa; text-decoration: none;
} #links a:hover { color: #aaa; text-decoration: none;
} .home, .support, .browser, .books, .download, .ups { float: left; width: 180px; margin-left: 42px; padding-left: 25px;
} .home { background: url(../images/home.png) left center no-repeat; margin-left: 0; }
.support { background: url(../images/support.png) left center no-repeat; }
.browser { background: url(../images/browser.png) left center no-repeat; clear: right; } .books, .download, .ups { margin-top: 10px; } .books { background: url(../images/books.png) left center no-repeat; margin-left: 0; }
.download { background: url(../images/download.png) left center no-repeat; }
.ups { background: url(../images/ups.png) left center no-repeat; clear: right; }

First, we will create a design in Photoshop and then code the site. You will also learn to build a great countdown timer and at the end we provide you with some great guidelines for building useful coming soon page, with examples of course.

The CSS

#subscribe { max-width: 610px; position: relative; margin: 20px auto 0;
} #subscribe-form .form-field { margin-right: 180px;
} #subcribe_email { border-right: 0;
} #subscribe-form .form-submit { height: 50px; position: absolute; right: 0; top: 0; width: 180px;
} #subcribe_email,#subscribe_submit { width: 100%; display: block; height: 55px;
}

Here is the style of the main area:
Now we are going to animate the links and the social icons so that when the user hovers over them they will move slowly. For this we need to add a few lines to the “script.js” file:
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>Minimal Coming Soon Page</title> <!– CSS –> <link rel=”stylesheet” href=”css/reset.css”> <link rel=”stylesheet” href=”fonts/stylesheet.css”> <link rel=”stylesheet” href=”css/style.css”> <!–[if lt IE 9]> <link rel=”stylesheet” href=”css/ie.css”> <![endif]–> <!– IE fix for HTML5 tags –> <!–[if lt IE 9]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]–> <!– jQuery and Modernizr–> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script> <script src=”js/modernizr.custom.js”></script> <!– Countdown timer and other animations –> <script src=”js/jquery.countdown.js”></script> <script src=”js/script.js”></script> </head> <body> <header> <!– The headline and description of our page –> </header> <div id=”main”> <div id=”links”> <!– The main links, support, download, etc. –> </div> <div id=”counter”> <!– The countdown timer –> </div> <form action=”” method=”get”> <!– The subscription form –> </form> <div class=”social-media-arrow”> <!– The social media arrow, on the right of the page –> </div> <footer> <!– The page’s footer that will contain the social icons –> </footer> </div> </body> </html>

Download PSD Here

This post may contain affiliate links. See our disclosure about affiliate links here.
Coming Soon Page - Safari
In the next section we will be concentrating on countdown timer. We have already a beautiful coming soon page. The next tutorial is another version of the above one. We really want to give you some great alternatives.
@media only screen and (max-width: 720px) { footer{margin-bottom: 40px; }
} @media only screen and (max-width: 680px) { .countdown_amount { font-size: 48px; }
} @media only screen and (max-width: 540px) { .one-half { width: 100%; } .countdown_section { padding: 28px 6px 20px; } #subcribe_email{border: 1px solid #fff;} #subscribe-form .form-submit { margin: 0 auto; right: auto; position: static; } #subscribe-form .form-field { margin: 0 0 14px; }
} @media only screen and (max-width: 480px) { h1 { font-size: 30px; } h2{font-size: 25px;} .countdown_section { border: none; padding: 20px 20px; font-size: 13px; text-align: center; } .countdown_amount { font-size: 40px; padding: 0 0 10px 0; } #counter{width: 30%; margin:0 auto;}
} @media only screen and (max-width: 360px) { h2{font-size: 22px;} .countdown_section { padding: 21px 26px 21px 15px; } .countdown_amount { font-size: 36px; }
}

On the footer part of our Coming Soon page we will add some icons that will link to our social media accounts.

Here is the HTML:
Let’s style the page’s body. We will use mainly the Arial font on our page (except for the timer), and a repeated background pattern (that you will find in the source files):
/* —- Using Modernizr to check if the “required” and “placeholder” attributes are supported —- */ if (!Modernizr.input.placeholder) { $(‘.email’).val(‘Input your e-mail address here…’); $(‘.email’).focus(function() { if($(this).val() == ‘Input your e-mail address here…’) { $(this).val(”); } });
} // for detecting if the browser is Safari
var browser = navigator.userAgent.toLowerCase(); if(!Modernizr.input.required || (browser.indexOf(“safari”) != -1 && browser.indexOf(“chrome”) == -1)) { $(‘form’).submit(function() { $(‘.popup’).remove(); if(!$(‘.email’).val() || $(‘.email’).val() == ‘Input your e-mail address here…’) { $(‘form’).append(‘ Please fill out this field. ‘); $(‘.email’).focus(); return false; } }); $(‘.email’).keydown(function() { $(‘.popup’).remove(); }); $(‘.email’).blur(function() { $(‘.popup’).remove(); });
}

Duplicate these boxes three times and place them accordingly. By using the Elipse Tool (U), you can create small dark circles which would work as dividers for the boxes.

The “placeholder” attribute lets us show text inside the email input field when it’s empty, while the “required” attribute lets us define the email input field as required, so the user cannot submit the form without entering their email. We will also provide a jQuery fallback for these two attributes, for older browsers and for browsers that don’t support them yet.

Designing the “Coming Soon” page increases the level of expectation of the visitors, thus, giving them the thrill of what will be soon published on the site. Aside from the design, you can also collect information of interested users by inserting a “Notify Me” textbox and a “Subscription Button” on the page.

Posted by WordPress Guru