Create a Bold “Under Construction” Page, Part 2: HTML5, CSS3, jQuery

Published on: Jul 26 2012 by Anli

Under Construction - Page

This is the second part of the Under Construction page tutorial. Today we’re going to code the page in HTML5, CSS3 and we’ll add some animations with jQuery. We’ll also use the 960 Grid System for coding a small part of the page. If you have missed the first part of this tutorial, you can find it here:

Create a Bold “Under Construction” Page, Part 1: Photoshop

You can view a live demo of the page here:

VIEW DEMO

So, let’s begin!


1. Introduction

Our new page will have a simple file structure. It will have 3 folders:

  • “css” for the stylesheet files;
  • “js” for the javascript files;
  • “images” for the image files;

and one HTML file: “index.html”.

Let’s begin the coding part with creating the “head” section of the page:

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8" />

	<title>Under Construction Page</title>

	<!-- CSS -->
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/960.css">
	<link rel="stylesheet" href="css/style.css">

	<!--[if lt IE 9]>
		<link rel="stylesheet" href="css/ie.css">
	<![endif]-->

	<!-- Fonts -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400' rel='stylesheet'>

	<!-- IE Fix for HTML5 Tags -->
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- jQuery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

	<!-- Countdown timer and other animations -->
	<script src="js/jquery.countdown.js"></script>
	<script src="js/script.js"></script>

</head>

<body>

</body>

</html>

As you can see we have 5 stylesheet files:

  • “reset.css” for the CSS reset;
  • “960.css” for the 960 Grid System;
  • “style.css” our main CSS file;
  • “ie.css” for Internet Explorer 7 and 8;
  • the stylesheet for the Open Sans font imported from Google.

The javascript files are 4:

  • “html5.js” – the IE fix for HTML5 tags;
  • “jquery.min.js” – the jQuery library;
  • “jquery.countdown.js” for the countdown timer;
  • “script.js” for initializing the timer and for other animations.

Note: You can download all the source files including the patterns and images at the bottom of this page.

To end this introduction we are going to apply a background pattern to the body of our page adding these lines to the “style.css” file:

body {
	background: url(../images/body-pattern.jpg) top left repeat;
}

2. The Header

Below is the HTML of the header of our page:

<header>
	<h1><span class="orange">*</span> UNDER CONSTRUCTION <span class="orange">*</span></h1>
	<div id="text">
		<div class="days">DAYS</div>
		<div class="hours">HOURS</div>
		<div class="minutes">MINUTES</div>
		<div class="seconds">SECONDS</div>
	</div>
	<div id="counter"></div>
</header>

As you can see, we use the HTML5 “header” tag. Now we’re going to style the header’s background using the CSS3 multiple backgrounds (for adding the pattern, gradient and borders) and the “box-shadow” property:

header {
	height: 304px;
	margin: 0 auto;
	padding-top: 1px;
	background:
		url(../images/header-border.png) 0 13px repeat-x,
		url(../images/header-border.png) 0 289px repeat-x,
		url(../images/header-gradient.png) center center no-repeat,
		url(../images/dark-pattern.jpg) top left repeat;
	box-shadow:
		0 7px 9px 0 rgba(0,0,0,.2) inset,
		0 -7px 9px 0 rgba(0,0,0,.2) inset,
		0 5px 15px 0 rgba(0,0,0,.2),
		0 20px 25px 5px rgba(255,255,255,.8);
	-moz-box-shadow:
		0 7px 9px 0 rgba(0,0,0,.2) inset,
		0 -7px 9px 0 rgba(0,0,0,.2) inset,
		0 5px 15px 0 rgba(0,0,0,.2),
		0 20px 25px 5px rgba(255,255,255,.8);
	-webkit-box-shadow:
		0 7px 9px 0 rgba(0,0,0,.2) inset,
		0 -7px 9px 0 rgba(0,0,0,.2) inset,
		0 5px 15px 0 rgba(0,0,0,.2),
		0 20px 25px 5px rgba(255,255,255,.8);
	border-bottom: 1px solid #fff;
	text-align: center;
}

The header should look like this:

Under Construction Page - Header

After styling the header’s background, here is the code for styling the title of our page:

header h1 {
	position: relative;
	margin-top: 45px;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 30px;
	color: #fff;
	text-shadow: 0 3px 0 rgba(0,0,0,.2);
}

.orange {
	color: #ff5640;
}

As you can see we use “position: relative;”. We need this line for adding a simple animation to the title with jQuery (I’ll explain it later in the jQuery part of the tutorial).
We use the “Open Sans” font from Google with a text-shadow of 3 pixels. We also use the CSS3 property “rgba” for the text-shadow color. This property lets us assign a RGB color with a transparency of 20%.
The “orange” class is used for setting the color of the 2 stars in the title.

The next lines in the “header” tag are used for the countdown timer. We use the “text” id for the “DAYS HOURS MINUTES SECONDS” text. And we use the “counter” id for the timer. As you can see, the “counter” div is empty. This is because the timer is handled using jQuery by the “jquery.countdown.js” file. This is a jQuery plugin by Martin Angelov of tutorialzine.com that I’ve modified a bit and I’ll not explain it here. You can visit the plugin’s page if you want to learn more about it. Here is the timer’s style though:

#counter {
	width: 740px;
	height: 100px;
	margin: 0 auto;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 92px;
	color: #fff;
	line-height: 92px;
	text-shadow: 0 3px 0 rgba(0,0,0,.2);
	overflow: hidden;
}

#counter p {
	float: left;
	margin: 0 30px;
	padding: 0;
}

#counter div {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
}

.digit {
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	padding: 0;
}

#counter div p {
	position: relative;
	width: 60px;
	height: 92px;
	padding: 0;
	margin: 0;
	line-height: 92px;
}

#text {
	width: 900px;
	margin: 60px auto 0 auto;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 14px;
	font-style: italic;
	color: #eee;
	overflow: hidden;	
}

#text div {
	float: left;
}

.days { margin-left: 190px; }
.hours { margin-left: 170px; }
.minutes { margin-left: 165px; }
.seconds { margin-left: 150px; }

Now we’ve completed the header of our page and it should look like this:

Under Construction - Header

3. The Main Area

The “main” area of our page will contain:

  • the description of the site;
  • the email subscription form;
  • the “about us”, “contact” and “follow us” section.

Here is the HTML of the “main” area:

<div id="main" class="container_12">
	<p>Our new, <span class="blue">awesome website</span> is almost ready. You can use the form below<br />to subscribe to the <span class="blue">newsletter.</span></p>
	<div class="form-container">
		<form action="" method="get">
			<input type="text" class="email" value="enter your email..." />
			<input type="submit" value="SIGN UP" class="submit" />
		</form>
	</div>
	<div id="about_us" class="grid_4">
		<h2>About us</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur<br />
			adipisicing elit, sed do eiusmod tempor<br />
			incididunt ut labore et dolore magna aliqua.<br />
			Ut enim ad minim veniam, quis nostrud<br />
			exercitation ullamco...
		</p>
	</div>
	<div id="contact" class="grid_4">
		<h2>Contact</h2>
		<p>
			<span class="gray">Email:</span> contact@yourdomain.com<br />
			<span class="gray">Tel:</span> +39 333 12 89 450<br />
			<span class="gray">Website:</span> azmind.com<br />
			<span class="gray">Address:</span> Via Principe Amedeo 35, 10100,<br />
			Torino, TO, Italy
		</p>
	</div>
	<div id="follow_us" class="grid_4">
		<h2>Follow us</h2>
		<p>
			<a class="facebook" href=""></a>
			<a class="twitter" href=""></a>
			<a class="dribble" href=""></a>
			<a class="rss" href=""></a>
		</p>
	</div>
</div>

As you can see the main area of our page is wrapped in a “div” tag with an id called “main” and a class called “container_12”. The “container_12” class is defined in the “960.css” file that we included in the “head” part of the page. This file is part of the 960 Grid System.

But what is this 960 Grid System?

From the 960 Grid System site:

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns.

For more information, demos and examples you can visit the 960 Grid System site.

So, the main area of our page has a width of 960 pixels. Also, we are using a 12 columns grid (the “container_12” class), each column is 60 pixels wide:

Under Construction - 960 Grid System

To end this part we add a bottom padding to the “main” area:

#main {
	padding-bottom: 75px;
}

4. The Description and the Subscription Form

Below is the style of the description text. It’s pretty simple so there’s nothing to explain here.

#main p {
	margin-top: 55px;
	font-family: 'Times New Roman', Georgia, serif;
	font-size: 26px;
	font-style: italic;
	color: #666;
	text-align: center;
	line-height: 36px;
	text-shadow: 0 1px 0 #fff;
}

.blue {
	color: #02a2a2;
}

The subscription form, as you can see in the HTML code above, is wrapped in a “div” called “form-container”. The form has 2 input fields, the first with the type “text” and the second with the type “submit”. Here is the CSS code for the “form-container” class and the “form” tag:

.form-container {
	width: 680px;
	height: 89px;
	margin: 55px auto 0 auto;
	background: rgba(0,0,0,.3);
	border: 1px solid #fff;
	box-shadow:
		0 -2px 5px 0 rgba(0,0,0,.2) inset;
	-moz-box-shadow:
		0 -2px 5px 0 rgba(0,0,0,.2) inset;
	-webkit-box-shadow:
		0 -2px 5px 0 rgba(0,0,0,.2) inset;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

form {
	width: 680px;
	height: 82px;
	background:
		url(../images/form-gradient.png) center center no-repeat,
		url(../images/dark-pattern.jpg) top left repeat;
	box-shadow:
		0 5px 7px 0 rgba(0,0,0,.3) inset;
	-moz-box-shadow:
		0 5px 7px 0 rgba(0,0,0,.3) inset;
	-webkit-box-shadow:
		0 5px 7px 0 rgba(0,0,0,.3) inset;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

We use the CSS3 property “box-shadow” for the shadows and “border-radius” for creating the rounded corners. The form container has a transparent background and the form has 2 backgrounds, one for the dark pattern and one for the gradient.

In the image below you can see how our page looks after applying these styles:

Under Construction Page

Now we’re going to style the text input field and the submit button. Here is the CSS code:

.email {
	width: 440px;
	height: 50px;
	margin: 15px 0 0 15px;
	background: #f5f5f5;
	border: 0;
	box-shadow:
		0 3px 0 0 rgba(0,0,0,.1) inset,
		0 4px 0 0 rgba(0,0,0,.15);
	-moz-box-shadow:
		0 3px 0 0 rgba(0,0,0,.1) inset,
		0 4px 0 0 rgba(0,0,0,.15);
	-webkit-box-shadow:
		0 3px 0 0 rgba(0,0,0,.1) inset,
		0 4px 0 0 rgba(0,0,0,.15);
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #888;
	font-style: italic;
	text-align: center;
	line-height: 26px;
}
.email:focus {
	outline: 0;
	background: #f0f0f0;
	box-shadow:
		0 3px 0 0 rgba(0,0,0,.2) inset,
		0 4px 0 0 rgba(0,0,0,.15);
	-moz-box-shadow:
		0 3px 0 0 rgba(0,0,0,.2) inset,
		0 4px 0 0 rgba(0,0,0,.15);
	-webkit-box-shadow:
		0 3px 0 0 rgba(0,0,0,.2) inset,
		0 4px 0 0 rgba(0,0,0,.15);
}

.submit {
	width: 200px;
	height: 50px;
	margin: 0 0 0 7px;
	background: #02a2a2;
	border: 0;
	box-shadow:
		0 1px 0 0 rgba(255,255,255,.3) inset,
		0 20px 30px 0 rgba(255,255,255,.2) inset,
		0 4px 0 0 rgba(0,0,0,.15);
	-moz-box-shadow:
		0 1px 0 0 rgba(255,255,255,.3) inset,
		0 20px 30px 0 rgba(255,255,255,.2) inset,
		0 4px 0 0 rgba(0,0,0,.15);
	-webkit-box-shadow:
		0 1px 0 0 rgba(255,255,255,.3) inset,
		0 20px 30px 0 rgba(255,255,255,.2) inset,
		0 4px 0 0 rgba(0,0,0,.15);
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 20px;
	color: #fff;
	line-height: 26px;
	cursor: pointer;
}
.submit:hover {
	box-shadow:
		0 1px 0 0 rgba(255,255,255,.3) inset,
		0 -20px 30px 0 rgba(255,255,255,.2) inset,
		0 4px 0 0 rgba(0,0,0,.15);
	-moz-box-shadow:
		0 1px 0 0 rgba(255,255,255,.3) inset,
		0 -20px 30px 0 rgba(255,255,255,.2) inset,
		0 4px 0 0 rgba(0,0,0,.15);
	-webkit-box-shadow:
		0 1px 0 0 rgba(255,255,255,.3) inset,
		0 -20px 30px 0 rgba(255,255,255,.2) inset,
		0 4px 0 0 rgba(0,0,0,.15);
}
.submit:active {
	box-shadow:
		0px 3px 17px 3px rgba(0,0,0,.2) inset,
		0 -20px 30px 0 rgba(255,255,255,.2) inset,
		0 4px 0 0 rgba(0,0,0,.15);
	-moz-box-shadow:
		0px 3px 17px 3px rgba(0,0,0,.2) inset,
		0 -20px 30px 0 rgba(255,255,255,.2) inset,
		0 4px 0 0 rgba(0,0,0,.15);
	-webkit-box-shadow:
		0px 3px 17px 3px rgba(0,0,0,.2) inset,
		0 -20px 30px 0 rgba(255,255,255,.2) inset,
		0 4px 0 0 rgba(0,0,0,.15);
}

The code is simple, we use the CSS3 “box-shadow” and “border-radius” properties and we style the different states (hover, active, focus) of the button and input field. Now the form looks like this:

Under Construction - Subscription Form

5. About us, Contact, Follow us

For these 3 sections we use the class “grid_4” from the 960 Grid System. This means that each one of these sections is 4 columns wide and there is a space of 20 pixels between them. We also assign a different id to these sections for referring to them separately. Here is the CSS:

#main h2 {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 20px;
	font-style: italic;
	color: #ff5640;
	text-shadow: 0 1px 0 #fff;
}

#about_us, #contact, #follow_us {
	margin-top: 70px;
	background: url(../images/about-us-border.png) 0 35px repeat-x;
}

#about_us p, #contact p, #follow_us p {
	margin-top: 40px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	color: #555;
	text-align: left;
	line-height: 26px;
	text-shadow: 0 1px 0 #fff;
}

.gray {
	color: #888;
}

#follow_us a {
	float: left;
	position: relative;
	width: 62px;
	height: 66px;
}

a.facebook { background: url(../images/facebook.png) top left no-repeat; }
a.twitter { margin-left: 17px; background: url(../images/twitter.png) top left no-repeat; }
a.dribble { margin-left: 17px; background: url(../images/dribble.png) top left no-repeat; }
a.rss { margin-left: 17px; background: url(../images/rss.png) top left no-repeat; }

I have used images for the social buttons but you can also try to create them using CSS3. Here is one of my previous tutorials where I explain how to create a circle social button in CSS3:

Create a Circle Social Button in CSS3

The 3 sections should look like this:

Under Construction - The 3 Sections

6. The Footer

The footer of our page is very simple, it contains only 4 gray stars and one orange star. Here is the HTML code:

<footer class="container_12">
	<p><span class="opacity40">* *</span> <span class="footer-orange">*</span> <span class="opacity40">* *</span></p>
</footer>

And the CSS:

footer {
	padding-bottom: 50px;
}

footer p {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 48px;
	text-align: center;
	color: #2d2d2d;
	text-shadow: 0 1px 0 #fff;
}

.opacity40 {
	opacity: 0.4;
}

.footer-orange {
	position: relative;
	color: #ff5640;
	text-shadow: 0 1px 0 rgba(0,0,0,.1);
}

The gray stars are transparent with an opacity of 40%. The orange star has a relative position because we’re going to “animate” it using jQuery.

The page now looks like this:

Under Construction Page

7. The jQuery Animations

Here is the jQuery code for the animations (the “script.js” file):

$(document).ready(function(){

	$('header h1').hover(
		function(){ $('header h1').animate({ top: 5 }, 'fast'); },
		function(){ $('header h1').animate({ top: 0 }, 'fast'); }
	);

	/* ---- Countdown timer ---- */
	$('#counter').countdown({
		timestamp : (new Date()).getTime() + 10*24*60*60*1000
	});


	$('.email').focus(function() {
		if($(this).val() == 'enter your email...') {
			$(this).val('');
		}
	});

	$('.email').blur(function() {
		if($(this).val() == '') {
			$(this).val('enter your email...');
		}
	});



	$('#follow_us a').hover(
		function(){ $(this).animate({ top: 5 }, 'fast'); },
		function(){ $(this).animate({ top: 0 }, 'fast'); }
	);

	$('.footer-orange').hover(
		function(){ $('.footer-orange').animate({ top: 5 }, 'fast'); },
		function(){ $('.footer-orange').animate({ top: 0 }, 'fast'); }
	);


});

We animate the page’s title, the social icons and the orange star on the footer, so they move down on hover. In this file we also initialize the countdown timer, and we make the “enter your email…” text disappear when the user enters his email in the input field.

8. Compatibility with Internet Explorer 7 – 8

For making our page compatible with Internet Explorer 7 and 8 I have created another CSS file called “ie.css” that I’m not going to show here. With this CSS file our page is usable in IE 7-8 but without the CSS3 shadows and gradients. Check it out by yourself and see what I’m talking about.

Conclusion

So, we finished coding our “Under Construction” page in HTML5/CSS3 and we added some simple animations with jQuery. You may have noticed during this tutorial that CSS3 is very convenient to use for adding shadows and gradients to our pages without the need of images for achieving the same effect. The only problem is that older browsers don’t support CSS3, but for this we can use separate CSS files. I suggest you learn CSS3 and use it in your projects for speeding up your work.

At the end of the tutorial you may ask me: How did you find the values for the box-shadows, text-shadows, ecc? For this I use Photoshop and try to reproduce the layers’ effects with CSS3 properties.

Demo, Download and License

You can view a demo of the “Under Construction” page and download the source files from the links below. If you liked this tutorial I’d appreciate it very much if you share it on your preferred social networks. Enjoy!

VIEW DEMO

DOWNLOAD FILE: Under Construction Page - HTML5, CSS3 (3478)

LICENSE:

You can use this “under construction” page (or part of it) in personal and commercial projects, but you can’t sell or redistribute it directly. If you want to publish it somewhere, please refer to this page.

18 Comments So Far

  1. HomeWorld Graphix says:

    Awesome! Thanks.

  2. Dr. Rez says:

    much appreciated,
    i luv ur site and big fan of it
    g luck dudes 😉

  3. Dani says:

    There is someone who copy your underconstruction template.
    And resell it themeforest.
    Here is the link :
    http://themeforest.net/item/starter-responsive-under-construction/3887590

  4. VickyPr says:

    Thanks!!!

  5. Dabes says:

    Super! Thank’s for this!
    Azmind is awsome!

  6. Jaycop says:

    Mister Azmind,

    Thanks for sharing your knowledge for the internet guys all over the world . This counter i shall use
    in my project. Thanks a lot.

  7. Gerardo says:

    hi, i want to add another digit for days, how can i do it?

  8. j0eyu says:

    thank you for this i will be using it!!

  9. Christopher says:

    Anli, I didn’t understand where in the js you add your email for receiving peoples email for the newsletter or am I supposed to put one? little new to this.

  10. Christopher says:

    Also, when I loaded the countdown on the server, every time you reload the page or close and come back to the page the countdown timer restarts form beginning. I would like to know how to properly populate it so it continuously counts down every time you visit the page again. thanks

    • Anli says:

      Hi! I answered to your email.

      • Aldwin C. Sumalinog says:

        Hi Sir! I am thankful for your code. I used it in our website for an upcoming event. Can you teach me how to change the countdown timer from 9 days to 262 days as well as the behavior of the timer when the user refreshes it. It goes back to its initial time. Thanks.

  11. Mark says:

    thank you for sharing countdown, I would like to know how I can change the date from 9 to long days like 30 days
    thank u

    • Anli says:

      You’re welcome.

      Replace this code in the script.js:

      timestamp : (new Date()).getTime() + 10*24*60*60*1000

      with your date, something like this:

      timestamp : (new Date(2015, 6, 23))

  12. ranjan kumar says:

    Also, when I loaded the countdown on the server, every time you reload the page or close and come back to the page the countdown timer restarts form beginning. I would like to know how to properly populate it so it continuously counts down every time you visit the page again. thanks

Leave a Reply