• Pin It

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. Check also this great collection of coming soon html5 templates.

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!



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.





Under Construction Website


estimated time remaining before official launch



    • days



    • hours



    • minutes



    • seconds




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



About Us


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.





type your email address to get the updates





Latest Tweets




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);


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() {
				date: "25 December 2012 12:00:00",
				format: "on"
			function() {
				// callback function

        username: "flashuser",
        count: 3,
        loading_text: "loading tweets..."



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!

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+