Responsive Coming Soon HTML5 Page Tutorial

In the following tutorial we’ll create a coming soon template, 100% responsive, that will help you keep your users informed while you are building a new website. The HTML5 template has a jQuery countdown clock that will display the remaining time till launching.
The responsive HTML5 template is built with Twitter Bootstrap, a powerful front-end framework that I totally recommend. The coming soon page also has a flexible background image, easy to modify from the CSS file and an Ajax mailing-list subscription to keep your visitors up to date. I’ve also used an easy jQuery script for displaying your latest tweets. I’ll appreciate if you share the tutorial among your friends. Let’s get started with this under construction page tutorial!

HTML CODE

We’ll have two main blocks. One that holds the title of the page and the counter, the other one, the bottom three information boxes. Each main block of information should be wrapped within a container div, following by a row div, as is written in the Twitter Bootstrap documentation. The fluidity is given by the span1-12 classes. So for the first block I used a span12 class. Resize the browser’s window to see how the elements will realign.

<div class="container wrapper">
<div class="row">
 
<div class="span12 count-holder">
<div class="title">
<h2>Under Construction Website</h2>
<p>estimated time remaining before official launch</p>
</div>
 
<ul id="countdown">
   <li>
            <p class="timeRefDays">days</p>
    <span class="days">00</span>
    
   </li>
   <li>
            <p class="timeRefHours">hours</p>
    <span class="hours">00</span>
    
   </li>
   <li>
            <p class="timeRefMinutes">minutes</p>
    <span class="minutes">00</span>
    
   </li>
   <li>
            <p class="timeRefSeconds">seconds</p>
    <span class="seconds">00</span>
    
   </li>
  </ul>
 
 
</div><!--end span12-->
 
</div><!--end row-->
</div><!--end container-->

 For the second content I used 3 blocks of class span4 that will align perfectly.

<footer class="container">
<div class="row bottom-row">
 
<div class="span4 sub-block">
<h4>About Us</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet vehicula mollis. Phasellus a erat vitae risus tempus lobortis. Maecenas dui risus, vehicula sit amet posuere eu, venenatis nec dolor. Pellentesque id diam sodales nibh sodales placerat vel a nisi. Nulla facilisi.
</p>
</div><!--end span4-->
 
<div class="span4 sub-block">
<h4>Subscribe</h4>
<p>type your email address to get the updates</p>
 <div class="signup">
 
    <form method="post" id="my-form" action='include/contact-process.php'>
  <input type="text" name="email" id="email" class="email" />
 <input type="submit" value="Send" id="submit"/>
 </form>
 <div class="column-clear"></div>
    
 
    </div>
 
  <div id="output"></div>
</div><!--end span4-->
 
 
<div class="span4 sub-block">
<h4>Latest Tweets</h4>
<div class="tweet">
</div>
</div><!--end span4-->
 
 
</div><!--end row-->
</footer><!--end container-->

CSS CODE

The CSS code is easy to understand. One important thing that I want to specify here is the background image. In order for the image to fit any device size you’ll have to use the cover property for the background-size. It works on every modern browsers, except IE8 and below, but I think worth the effort

html{background:url('../images/bkg.jpg') no-repeat fixed center center; 

min-height:100%;  background-size:cover;}

For the countdown background and text, I used some CSS3 properties such as gradient, border radius, box-shadow and text-shadow.

ul#countdown li {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgb(127, 186, 10);
background: -moz-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: -webkit-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: -o-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: -ms-linear-gradient(90deg, #7FBA0A 50%, #7CB30B 50%);
background: linear-gradient(180deg, #7FBA0A 50%, #7CB30B 50%);
-webkit-box-shadow: 1px 1px 4px rgba(50, 50, 50, 0.3);
-moz-box-shadow:    1px 1px 4px rgba(50, 50, 50, 0.3);
box-shadow:         1px 1px 4px rgba(50, 50, 50, 0.3);
}  

JAVASCRIPT CODE

First thing first, will have to include into the index.html the jQuery library and other Javascript files that will use.

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
     <script src="js/jquery.form.js" type="text/javascript"></script>
    <script src="js/contactform.js" type="text/javascript"></script> 
 <script src="js/countdown.js" type="text/javascript"></script> 
    <script src="js/jquery.tweet.js" type="text/javascript"></script> 
    <script src="js/init.js" type="text/javascript"></script> 

Now open up the js/init.js file and modify your own coming soon date and the Twitter user and the number of tweets to be displayed.

$(document).ready(function() {
         
 $("#countdown").countdown({
    date: "25 December 2012 12:00:00",
    format: "on"
   },
   
   function() {
    // callback function
   });
 
    $(".tweet").tweet({
        username: "flashuser",
        count: 3,
        loading_text: "loading tweets..."
    });
 
});

CONCLUSION

I hope you have found this tutorial useful. Download, use it if you need such a template or just want to learn and don’t forget to spread the word. Thanks! /flashuser/