Web Stuff 25.08.2015 3944
In this tutorial we create a sleek and simple welcome page with a countdown timer based on HTML5, CSS3 and Bootstrap. Because we are using Bootstrap it is simple and we have a guarantee it works in all major browsers as well on mobile phones and tablets.
In this tutorial we learn how to create a html5 based html file using jQuery and the Bootstrap framework. With CSS3 and a few graphics we spice up our welcome page.
We need the latest jQuery library and the bootstrap framework I also used the jQuery based countdown timer from Tutorialzine (all included in the download package).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Company</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="JAKTutorial">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<script src="js/jquery.js" type="text/javascript"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
<div class="container">
<div class="masthead">
<h1><img src="img/logo.png" alt="logo" /> My Company Name</h1>
</div>
<hr>
<!-- Jumbotron -->
<div class="jumbotron">
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</h2>
</div>
<div id="countdown"></div>
<p id="note"></p>
<hr>
<!-- Example row of columns -->
<div class="row-fluid">
<div class="span4" style="text-align: center;">
<h3><img src="img/icon_1.png" alt="text" /> Some Text</h3>
<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. </p>
</div>
<div class="span4" style="text-align: center;">
<h3><img src="img/icon_2.png" alt="contact" /> Contact Details</h3>
<address>
<strong>Company Name</strong><br>
Street / Number<br>
Postal Code / Town<br>
<abbr title="Phone">T:</abbr> +41 44 586 13 20<br>
<abbr title="Mobile">H:</abbr> +41 79 343 22 22
</address>
</div>
<div class="span4" style="text-align: center;">
<h3><img src="img/icon_3.png" alt="more" /> Some More</h3>
<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. </p>
</div>
</div>
<hr>
<div class="footer pull-right">
© 2012 Company Name / <a href="http://www.jaktutorial.com">JAKTutorial</a>
</div>
</div> <!-- /container -->
<script src="js/countdown.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>The full html5 based welcome page. Simple and optimised for page loading. But let's go thru in details.
<!DOCTYPE html>For HTML5 the doctype is simple!
<head>
<meta charset="utf-8">
<title>My Company</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="JAKTutorial">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<script src="js/jquery.js" type="text/javascript"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="img/favicon.ico">
</head>We include charset utf-8, which should be standard in new build software or files. Viewport is for our Bootstrap framework, so it will work in mobile browsers. Then we include our stylesheet, bootstrap first then our custom stylesheet and last the responsive stylesheet from bootstrap. Next is jQuery and html5shim for supporting older browsers. Finally our favicon for a professional look.
<div class="container">
<div class="masthead">
<h1><img src="img/logo.png" alt="logo" /> My Company Name</h1>
</div>
<hr>
<!-- Jumbotron -->
<div class="jumbotron">
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</h2>
</div>
<div id="countdown"></div>
<p id="note"></p>
<hr>
<!-- Example row of columns -->
<div class="row-fluid">
<div class="span4" style="text-align: center;">
<h3><img src="img/icon_1.png" alt="text" /> Some Text</h3>
<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. </p>
</div>
<div class="span4" style="text-align: center;">
<h3><img src="img/icon_2.png" alt="contact" /> Contact Details</h3>
<address>
<strong>Company Name</strong><br>
Street / Number<br>
Postal Code / Town<br>
<abbr title="Phone">T:</abbr> +41 44 586 13 20<br>
<abbr title="Mobile">H:</abbr> +41 79 343 22 22
</address>
</div>
<div class="span4" style="text-align: center;">
<h3><img src="img/icon_3.png" alt="more" /> Some More</h3>
<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. </p>
</div>
</div>
<hr>
<div class="footer pull-right">
© 2012 Company Name / <a href="http://www.jaktutorial.com">JAKTutorial</a>
</div>
</div> <!-- /container -->With only a few lines we have a pretty welcome page which can be changed in seconds.
We start with our logo and company name, usually packed in the h1 tag for better SEO (search engine optimisation). The second part is like a slogan and it is wrapped with a h2 tag. After that we go straight to the countdown timer, which only needs a div and a p tag for showing time and text. A few sentence about your business plus your address and phone number is next and finally the footer with the copyright notice.
<script src="js/countdown.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>Finally we include the javascript files for the countdown timer.
Finally we need some custom style classes to make the site pretty and individual.
body {
padding-top: 20px;
padding-bottom: 60px;
background-image: url("../img/bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Custom Stuff */
.container {
margin: 0 auto;
max-width: 900px;
background-color: rgba(19, 19, 19, 0.6);
color: #fff;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px;
-webkit-box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 0.4);
box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 0.4);
}
.container > hr {
margin: 10px 0;
}
/* Main marketing message and sign up button */
.masthead {
margin: 30px 0;
}
.masthead img {
margin: 0 20px;
}
.masthead h1 {
font-size: 28px;
line-height: 1;
}
.jumbotron {
margin: 30px 0;
text-align: center;
}
.jumbotron h2 {
font-size: 20px;
line-height: 1;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
.span4 h3 {
color: #b8b8b8;
font-size: 18px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
border: 0;
}
.span4 h3 img {
margin: 0 10px;
}
hr {
height: 5px;
margin: 30px 0;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
border: 0;
}
#note{
color: #fff;
font-size: 12px;
margin: 0 auto;
padding: 4px;
text-align: center;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
width: 400px;
}Feel free to download the source and use it for your own projects, looking forward for your feedback and or suggestion.
Release date: 12.10.2024
Updated ChatGPT, bug fixes and performance improvements.
Release date: 14.10.2024
Updated ChatGPT models, bug fixes and performance.
Release date: 08.09.2024
New ChatGPT Models, language file improvement, bug fixes.
Release date: 23.10.2024
New ChatGPT models, bug fixes and performance improvements.
We program modern and fast web and mobile software, always responsive and mobile first! Not just great software also world class support, rated an average of 4.9 out of 5 stars! When you need support from us you will get it!
Feel free to contact us via our contact form at any time, we usually respond in less then 24 hours or start a chat conversation when we are online.
