"}
5 Tips to Teach Yourself a New Creative Skill
How to Design a Clean Website Template From Scratch in Adobe Fireworks
How to Code a Clean Website Template in HTML5 & CSS3

How to Code a Clean Website Template in HTML5 & CSS3

Last week on MediaLoot we posted a tutorial on designing a clean homepage template using Adobe Fireworks, the result was a sleek web page concept that we're now going to imagine that we have shown to our client, and they have just given us the go ahead to start coding it up into HTML and CSS!

Premium Members Get Source Files

Premium members can download the source files for this tutorial here.

Alright, without any further ado, let’s get started on this thing! To refresh your memory here is the design we created last week.

When it comes to coding up designs, there is a lot of personal preference, everybody has their own way of doing things, some people like to jump right in and juggle writing HTML, CSS and exporting images from the layout as needed all at the same time (this is a surprisingly common method actually), but some people break it down into stages, for example: export images, write HTML and then style with CSS, but personally I don’t think that we always know which images we will need to extract from the design until we have broken down the layout into a HTML structure. so my preferred workflow goes something like:

  • Plan structure and write HTML code
  • Export images from the layout
  • Style the HTML with CSS

So, with that in mind, let’s begin by writing our HTML.

Preparation

Start by creating a new folder and index.html and styles.css files. Then also create a new folder called images.

Doctype and Structure

Open up the index.html file in a text editor, my preferred editor for code is MacRabbit Espresso (Mac only), for Windows try Notepad++ or Dreamweaver if needs be.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Dreamweb</title>
		<link rel="stylesheet" href="styles.css" type="text/css">
		<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
		<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
	</body>
</html>

Begin by inserting the basic HTML skeleton, we are using HTML5 for this project so the DOCTYPE declaration is a very simple one, just “html”. You will also notice that we have set the title of the page, included our stylesheet (styles.css), included the google web font that we used in the design last week (Pacifico) and also included the html5shiv javascript snippet that will allow older browsers such as IE to understand HTML5.

Header

<header>
	<div class="wrapper">
		<h1 class="logo"><a href="index.html">Dreamweb</a></h1>
		<ul>
			<li class="active"><a href="index.html">Home</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Blog</a></li>
		</ul>
	</div><!--.wrapper-->
</header>

Define the header tag, and then place a wrapper inside inside it so that the header can be 100% wide, but the content will be wrapped to a set width (960px), add the logo as a H1 and create an unordered list (UL) for the main menu.

Main Feature

<section class="home_feature">
	<div class="wrapper">
		<article class="main_display">
			<img src="images/display_image_1.jpg" alt="Client Work" title="Client Work" />
			<div class="display_gloss"></div>
			<article class="banner_new"><p>New</p></article>
		</article>
		<article class="feature_text">
			<h2>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</h2>
			<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere maecenas faucibus mollis interdum. Velit aliquet. Maecenas faucibus mollis posuere velit aliquet interdum.</p>
			<a href="#">Click me to find out more</a>
		</article>
	</div><!--.wrapper-->
</section>

Use the same wrapper technique from the header for the main feature, we are using a <section> to contain the two <article>s in this part of layout. The feature text is quite straight forward, we have an H2, some paragraph text and a link. The main_display article will be our computer screen, and then we are layering on top of that:

  • the image that will be on the screen
  • followed by the gloss from the screen
  • and finally the banner in the corner than reads “NEW”.

Featured Services

<ul class="featured_services">
	<li class="service_1">
		<Web Design&rt;
		<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere maecenas faucibus mollis interdum.</p>
		<a href="#" class="button_1">Find Out More</a>
	</li>
	<li class="service_2">
		<Development&rt;
		<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere maecenas faucibus mollis interdum.</p>
		<a href="#" class="button_1">Find Out More</a>
	</li>
	<li class="service_3">
		<Optimization&rt;
		<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere maecenas faucibus mollis interdum.</p>
		<a href="#" class="button_1">Find Out More</a>
	</li>
</ul>

The featured services section of the layout is a very basic unordered list, we have put a different class on each list item so that it can be targeted and styled appropriately. This section doesn’t need the wrapper div because there is no defined background, we can just set the <ul&rt; to 960px wide in the CSS.

About Us and Testimonials

<div class="wrapper">
			<article class="about_us_blurb">
				<About Us&rt;
				<img src="images/about_us.png" />
				<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Penatibus et magnis dis parturient montes, nascetur ridiculu.</p>
				<p>Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</article>
				
			<article class="testimonials">
				<Testimonials&rt;
				<div class="testimonial_wrapper">
					<p class="testimonial_quote">
						Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. </p>
					<p class="testimonial_name">John Doe, Company</p>
				</div>		
			</article>
		</div><!--.wrapper-->

Here we have created 2 articles for the about us blurb and testimonials, for the testimonials we have a wrapper containing both the quote and name.

Footer


	<footer>
		<div class="wrapper">
	
<!--Twitter Widget-->

			<div class="column">
				<article class="widget_twitter">
					<h4>Twitter Updates</h4>
					<ul>
						<li><strong>@MediaLoot</strong> Curabitur blandit tempus porttitor estibulum venenatis ultricies.</li>
						<li><strong>@MediaLoot</strong> Curabitur blandit tempus porttitor estibulum venenatis ultricies.</li>
						<li><strong>@MediaLoot</strong> Curabitur blandit tempus porttitor estibulum venenatis ultricies.</li>
					</ul>
					<a href="#" class="button_1">Read More</a>
				</article>
			</div>
			
<!--Newsletter Widget-->

			<div class="column">
				<article class="widget_newsletter">
					<h4>Newsletter</h4>
					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat.</p>
					<form>
						<input type="text" value="Email Address">
						<input type="submit" value="Sign Up">
					</form>
				</article>
				
<!--Social Widget-->
				
				<article class="widget_social">
					<h4>Social</h4>
					<ul>
						<li class="facebook"><a href="#">FaceBook</a></li>
						<li class="twitter"><a href="#">Twitter</a></li>
						<li class="tumblr"><a href="#">Tumblr</a></li>
						<li class="behance"><a href="#">Behance</a></li>
						<li class="linkedin"><a href="#">Linked In</a></li>
					</ul>
				</article>
			</div>
			
<!--Feedback Widget-->
			
			<div class="column">
				<article class="widget_feedback">
					<h4>Feedback</h4>
					<form>
						<input type="text" value="Full Name" name="name">
						<input type="text" value="Email Address" name="email">
						<textarea name="message">Your message</textarea>
						<input type="submit" value="Send Message" class="button_1">
					</form>
				</article>
			</div>
		
<!--Copyright Notice-->

			<p class="copyright_notice">Copyright 2011 © <strong>Brand Name</strong>. All Rights Reserved.</p>
			<div class="logo"><p>Dreamweb</p></div>
			
		</div><!--.wrapper-->
	</footer><!--End Footer-->

This is quite a big one, but the actual code itself is very straight forward, each widget in the footer area has a class that begins ‘widget_’ and we have 3 <div>s with a ‘column’ class, the newsletter and social widgets are contained within the same column (as they were in the design).

Images

Let’s prepare the images we need, in total we need 17 images.

Open up the original Fireworks design file if you haven’t already and we can begin extracting the images we need. The basic method for extracting images is to select the object/s that you need, copy them and then create a new document using the clipboard dimensions (the same size as whatever you copied) and paste the objects into the new document.

1. logo.png

code a web design
So open up the original Fireworks document if you haven’t already and select the Logo symbol. hit CTRL+C to copy it, CTRL+N to create a new document, and CTRL+V to paste the logo again. Set the background of the document to transparent and in the Optimize window select PNG32 as the exporting option. Go to File > Export and select Images Only and Current Page. Choose the images folder we created as the export destination.

2. hatch_pattern.png

code a web design
Zoom in as far as possible on the design and use the Crop tool in Fireworks to select a 3x3px area of the pattern (as shown in the image below). Export using the same methods as used previously.

3. feature_display.png

code a web design
Again follow the same method, for the display you will need to select all of the objects that make up the display excluding the banner and gloss layers.

4. display_image_1.jpg

code a web design
You may need to crop the display image down if you used a clipping mask as Fireworks will use the original image’s dimensions rather than the just the clipped area that we need.

5. display_gloss.png

code a web design
In the design this was set to 50% Soft Light, no web browsers support blending modes like Soft Light though to this date so it will treat it as Normal, this means we need to compensate and lower the Opacity to 20%.

6. btn_main_feature.png

code a web design
Copy the button from the original design and paste it into a new document, now make the canvas 3x taller than the button, and duplicate the button one below the other so that they each occupy exactly 1/3 of the image. This is out sprite for the main button, including hover and pressed states, so the second one down is the hover state and the bottom one is pressed state.

On the hover state, nudge the top layer down 3px. On the pressed state, nudge the top layer down 1px and make the gradient slightly darker to appear pressed in.

7. service_1.png

code a web design
Copy and paste the icon for your first service into a new 32x32px document.

8. service_2.png

code a web design
Copy and paste the icon for your second service into a new 32x32px document.

9. service_3.png

code a web design
Copy and paste the icon for yourthird service into a new 32x32px document.

10. hr_shadow.png

code a web design
Same method as previously used, be sure to set the background to transparent.

11. about_us.png

code a web design
Again, same method used, but we have also copied the shadow and border for this image as not all browser support advanced shadows like we created in the design.

12. social_facebook.png

13. social_facebook.png

14. social_twitter.png

15. social_tumblr.png

16. social_behance.png

17. social_linkedin.png

code a web design

The CSS

First things first, open up style.css and let’s use a basic CSS reset so that all browsers, new and old are working on the same playing field.

/* CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
ul{ list-style:none; list-style-position:outside;}
a {  outline: none;}

/* Tell old browsers how to handle HTML5 elements */
header, footer, aside, nav, article {display: block;}

Now we will do the essential styles, these are the body, headings, paragraph, link and wrapper styles. These tend to stay the same for most web projects and are usually the first things defined in a stylesheet.

/* Essentials */

body {
	background: #F9FCFC;
	color: #666666;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
}

p {
	line-height: 150%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Pacifico, "Helveitca Neue", Helvetica, Arial, sans-serif;
	font-weight: lighter; /*counteract strong browser anti-aliasing*/
}

a:link, a:visited {
	color: #168FAD;
	text-decoration: none;
}

.wrapper {
	width: 960px;
	margin: 0 auto;
}

For the header we only really need to set the height and background, thanks to CSS3 we no longer need to use images for gradient backgrounds, we can just set the start and end points and type of gradient, even IE6 supports basic gradients with filters.

/* Header */
header {
	height: 110px;
}

header {
	/* Fallback Color */
	background: #F4F8F9;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #E9F2F3);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E9F2F3));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #E9F2F3); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E9F2F3');
}

Here we are targeting the <a> link inside the <h1> with a class of ‘logo’. Note that as well as bringing in the logo.png file, we are hiding the text from visibility by setting the text-indent to -5000px. The reason for adding text and then hiding it is two-fold, it helps with your Search Engine Optimization and also boosts accessibility.

/* Logo */

h1.logo a {
	display: block;
	width: 221px;
	height: 65px;
	background: url('images/logo.png') no-repeat;
	float: left;
	margin: 20px 0 0 10px;
	text-indent: -5000px;
}

Time to style the main navigation, we use some new CSS3 properties in this section including border-radius and box-shadow, these are both pretty much safe to use now for non-essential visual elements, in modern browsers, the vendor prefixes (i.e.. -moz-) allow you target particular browsers, -moz- for Mozzila (Firefox), -webkit- for WebKit (Safari and Chrome), but when the HTML5 and CSS3 specs are complete, vendor prefixes will not be required anymore, so for good measure include the non-prefixed version too, and put it at the end of the list so that it is applied last.

/* Main Navigation */

header ul {
	float: right;
	margin: 35px 0;
}

header li {
	float: left;
	display: inline-block;
	width: 90px;
	height: 36px;
	margin: 0 10px 0 0;
}

header li a {
	color: #2C6069;
	display: block;
	width: 90px;
	height: 36px;
	text-align: center;
	font-weight: bold;
	line-height: 36px;
	border: 1px solid #CDE0E4;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	-moz-box-shadow: 0 1px 0 #FFFFFF; -webkit-box-shadow: 0 1px 0 #FFFFFF; box-shadow: 0 1px 0 #FFFFFF;
}

header li a {
	/* Fallback Color */
	background: #E8F4F6;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #DFF0F3);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#DFF0F3));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #DFF0F3); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DFF0F3');
}

header li a:hover {
	/* Fallback Color */
	background: #FFFFFF;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #E8F4F6);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E8F4F6));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #E8F4F6); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E8F4F6');
}

header li.active a {
	color: #5E8D94;
	-moz-box-shadow: inset 0 2px 3px #436E7D; -webkit-box-shadow:inset 0 2px 3px #436E7D; box-shadow: inset 0 2px 3px #436E7D;
}

header li.active a {
	/* Fallback Color */
	background: #DFF0F3;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#DFF0F3, #FFFFFF);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFF0F3), to(#FFFFFF));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#DFF0F3, #FFFFFF); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFF0F3', endColorstr='#FFFFFF');
}

Here is the style used for the main feature, we layer up the computer screen, image on the screen, gloss from the screen and banner separately using ‘position: relative’ and ‘position:absolute’ properties.

/* Main Feature */

section.home_feature {
	height: 480px;
	background: #CDE0E4 url('images/hatch_pattern.png') repeat;
	-moz-box-shadow: inset 0 5px 9px #66888E; -webkit-box-shadow: inset 0 5px 9px #66888E; box-shadow: inset 0 5px 9px #66888E;
}

article.main_display {
	display: block;
	float: left;
	position: relative;
	width: 450px;
	height: 397px;
	margin: 70px 0;
	background: url('images/feature_display.png') no-repeat;
}

article.main_display img {
	position: absolute;
	top: 23px;
	left: 19px;
}

article.banner_new {
	position: absolute;
	left: -6px;
	top: -6px;
	background: url('images/feature_banner.png') no-repeat;
	width: 103px;
	height: 103px;
}

article.banner_new p {
	text-indent: -5000px;
}

article.main_display .display_gloss {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 269px;
	height: 283px;
	background: url('images/display_gloss.png') no-repeat;
}

article.feature_text {
	float: right;
	width: 450px;
	margin: 60px 10px 0 0;
}

article.feature_text h2 {
	font-size: 44px;
	color: #2C5F66;
	line-height: 120%;
	margin: 0 0 20px 0;
	text-shadow: 0 1px 0 #F1F7F8;
}

article.feature_text p {
	color: #5E8C92;
	text-shadow: 0 1px 0 #F1F7F8;
}

article.feature_text a {
	display: block;
	width: 310px;
	height: 62px;
	color: #FFFFFF;
	background: url('images/btn_main_feature.png') no-repeat;
	margin: 20px 0 0 0;
	text-align: center;
	line-height: 54px;
	font-family: Pacifico, "Helveitca Neue", Helvetica, Arial, sans-serif;
	font-weight: lighter; /*counteract strong browser anti-aliasing*/
	font-size: 22px;
	text-shadow: 0 -1px 0 #38474A;
}

article.feature_text a:hover {
	background-position: 0 -63px;
	line-height: 57px;
}

article.feature_text a:active {
	color: #EFEFEF;
	background-position: 0 -126px;
	line-height: 58px;
}

The featured services features the first instance of our generic button class ‘button_1’ that we will use multiple times though out the rest of the design.

/* Featured Services */

ul.featured_services {
	clear: both;
	height: 240px;
	width: 960px;
	margin: 0 auto;
	background: url('images/hr_shadow.png') no-repeat bottom;
}

ul.featured_services li {
	width: 300px;
	margin: 0 10px;
	float: left;
}

ul.featured_services h3 {
	font-size: 25px;
	color: #168FAD;
	text-indent: 40px;
}

ul.featured_services li.service_1 h3 {
	background: url('images/icn_service_1.png') no-repeat; background-position: 0 10px;
}

ul.featured_services li.service_2 h3 {
	background: url('images/icn_service_2.png') no-repeat; background-position: 0 10px;
}

ul.featured_services li.service_3 h3{
	background: url('images/icn_service_3.png') no-repeat; background-position: 0 10px;
}

ul.featured_services p {
	border-left: 3px solid #CDE0E4;
	margin: 10px 0 10px 15px;
	padding: 0 0 0 25px;
}

.button_1 {
	display: block;
	width: 133px;
	height: 28px;
	-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
	text-align: center;
	line-height: 28px;
	border: 1px solid #ADC0C4;
	color: #5E8C92;
	font-weight: bold;
	font-size: 12px;
	cursor: pointer;
}

.button_1 {
	/* Fallback Color */
	background: #DFF0F3;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #EFEFEF);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EFEFEF));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #EFEFEF); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EFEFEF');
}

.button_1:hover {
	background: #FFFFFF;
}

.button_1:active {
	background: #EFEFEF;
}

Styles for the About Us blurb

/* About Us Blurb */

article.about_us_blurb {
	clear: both;
	float: left;
	width: 620px;
	margin: 20px 10px;
}

article.about_us_blurb img {
	float: left;
	margin: 0 10px 0 0;
}

article.about_us_blurb h3 {
	font-size: 25px;
	color: #168FAD;
	margin: 10px 0;
}

article.about_us_blurb p {
	margin: 5px 20px 30px 10px;
}

article.testimonials {
	float: right;
	width: 300px;
	margin: 20px 10px;
}

Styles for the testimonials

/* Testimonials */

.testimonial_wrapper {
	background: #E7F4F6;
	border: 1px solid #CDE0E4;
	width: 298px;
	height: 150px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

article.testimonials h3 {
	font-size: 25px;
	color: #168FAD;
	margin: 10px 0;
}

p.testimonial_quote {
	text-align: center;
	background: #FFFFFF;
	color: #5E8C92;
	font-style: italic;
	height: 55px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	padding: 30px 20px;
}

p.testimonial_name {
	line-height: 36px;
	font-weight: bold;
	text-align: center;
	color: #5E8C92;
}

The footer and it’s widgets

/* Footer */

footer {
	clear: both;
	height: 400px;
	background: #CDE0E4 url('images/hatch_pattern.png') repeat;
	color: #5E8C92;
}

footer h4 {
	font-size: 25px;
	color: #2C5F66;
	margin: 0 0 10px 0;
	clear: both;
}

footer .column {
	float: left;
	display: inline_block;
	width: 300px;
	margin: 20px 10px;
}

/* Widgets */

article.widget_twitter li {
	margin: 20px 0;
}

article.widget_social li {
	float: left;
	display: inline_block;
}

footer input[type=text], footer textarea {
	width: 200px;
	height: 20px;
	border: none;
	color: #FFFFFF;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	padding: 5px 10px;
	margin: 10px 0;
	text-shadow: 0 1px 0 #0F2326;
}

footer input[type=text]:focus, footer textarea:focus {
	outline: none;
}

footer textarea {
	height: 53px;
}

footer input[type=text], footer textarea {
	/* Fallback Color */
	background: #46737B;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#2C5F67, #5C858C);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2C5F67), to(#5C858C));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#2C5F67, #5C858C); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2C5F67', endColorstr='#5C858C');
}

article.widget_newsletter input[type=text] {
	width: 130px;
	-moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
	float: left;
}

article.widget_newsletter input[type=submit] {
	margin: 10px 0 0 0;
	float: left;
	display: block;
	border: 1px solid #4E7A81;
	width: 70px;
	height: 30px;
	-moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
	text-align: center;
	line-height: 28px;
	border: 1px solid #ADC0C4;
	color: #5E8C92;
	font-weight: bold;
	font-size: 12px;
	cursor: pointer;
}

article.widget_newsletter input[type=submit] {
	/* Fallback Color */
	background: #DFF0F3;
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(#FFFFFF, #EFEFEF);
	/* Safari 4+, Chrome 1+ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EFEFEF));
	/* Safari 5.1+, Chrome 10+ */
	background-image: -webkit-linear-gradient(#FFFFFF, #EFEFEF); 
	/* IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EFEFEF');
}

article.widget_newsletter input[type=submit]:hover {
	background: #FFFFFF;
}

article.widget_newsletter input[type=submit]:active {
	background: #EFEFEF;
}

For the social links we use one master style for the dimensions and position etc. plus an individual style for each icon setting a different background image.

/* Social Links */

article.widget_social ul li a {
	display: block;
	width: 32px;
	height: 32px;
	text-indent: -5000px;
	margin: 0 10px 0 0 ;
}

article.widget_social ul li.facebook a {
	background: url('images/social_facebook.png') no-repeat;
}

article.widget_social ul li.twitter a {
	background: url('images/social_twitter.png') no-repeat;
}

article.widget_social ul li.tumblr a {
	background: url('images/social_tumblr.png') no-repeat;
}

article.widget_social ul li.behance a {
	background: url('images/social_behance.png') no-repeat;
}

article.widget_social ul li.linkedin a {
	background: url('images/social_linkedin.png') no-repeat;
}

footer .button_1 {
	color: #5E8C92;
}

And finally, the style for the very bottom section of the footer. The logo style is almost identical to the logo used in the header.

/* Copyright/Logo */

footer p.copyright_notice {
	clear: both;
	padding: 20px 0 0 0;
}

footer .logo {
	float: right;
	width: 221px;
	height: 65px;
	background: url('images/logo.png') no-repeat;
	margin: -40px 10px 0 0;
	text-indent: -5000px;
}

Conclusion

And there you have it! we have successfully designed and coded a full homepage template. As always, I hope you have enjoyed reading these tutorials and perhaps gained a different perspective or even learned some new techniques. Thanks for reading!

And don’t forget that Premium members can download the source files from this tutorial.

Comments

  • Reply »
    irfan

    irfan

    where is the demo. if you can provide the demo so that we can see it

    Jun 30, 2011 at 8:10 am
  • Reply »
    Dustin Montgomery

    Dustin Montgomery

    Design looks great, good development insights as well!

    Jul 1, 2011 at 1:26 pm
  • Reply »
    Nick

    Nick

    Excellent follow on from the Fireworks tutorial for the design. We’re on the brink of switching to HTML5 so this is very useful - especially as you are so thorough with your writeup!

    Nick

    Jul 14, 2011 at 10:45 am
  • Reply »
    ron

    ron

    Excellent tutorial! Learned a lot especially as it comes with the Fireworks tutorial.

    Just a few things though:

    In the form, I think using the attribute placeholder instead of value would have been better since value does not disappear when the input field is focused whereas value would have.

    There is, also, i think, typographical errors in the HTML code, particularly in h3 tags. For example: <Testimonials&rt;

    But i’m just nitpicking… again, an excellent tutorial. thanks!

    Aug 6, 2011 at 1:45 am
  • Reply »
    Jitendra Vyas

    Jitendra Vyas

    Why you are not using <nav> for navigation?

    Aug 30, 2011 at 12:55 pm
  • Reply »
    artikeldatabase

    artikeldatabase

    Great tutorial, which gives a good overview of the coding process. Thanks for sharing.

    Sep 10, 2011 at 11:55 am
  • Reply »
    thecraw_

    thecraw_

    Looks like this code has to be re-written for IE. Nightmare!

    Nov 2, 2011 at 10:44 pm
  • Reply »
    Dripable Service

    Dripable Service

    I do not disagree with this article!!

    Nov 10, 2011 at 6:51 pm
  • Reply »
    auto insurance quotes

    auto insurance quotes

    vyzxmnfejbmppu, cheap car insurance, ZsZULIM, auto insurance quotes, NzoNNNF, http://quotesforcheapautoinsurance.com/get-a-free-auto-insurance-quote epic auto insurance, LPJhDGC.

    Nov 17, 2011 at 3:55 am
  • Reply »
    penis growth

    penis growth

    eslpvnfejbmppu, male enhancement reviews, eKByPLA, penis extender, zTttyXt, http://maleenhancementsreviewed.com/lean-muscle-x-risk-free-trial-review penis enlargement, osSEOIR.

    Nov 17, 2011 at 3:58 am
  • Reply »
    Free online play money poker

    Free online play money poker

    koaconfejbmppu, Online video poker games, oDDiBPb, Online video poker games, HPLhJrV, http://pokeronline-guide.com/ Free online video poker, UluKjzX, Ways to make money online, HuxPOgD, How to make runescape money fast, ITirVoE, http://makemoney2000.com/ Ways to make quick money, YwDtqkZ, 3rd generation hgh, qsTarch, Secratatropin hgh, LMBKvaN, http://stoutkeeton.com/ Hgh online, tuqyVIs, Online blackjack game, ZMpYCIq, Free multiplayer online blackjack, oPVPVwT, http://onlineblackjackquestions.net/ Where can i play blackjack online with other players for free3f, FAnzRXQ, Side effects of hcg weight loss, DCkduEc, Dr. oz hcg, CLTOjmh, http://hcgquestions.net/ Hcg injections without a prescription, FOVvGWN, revivagenix reviews, BnmsVqs, forehead wrinkles, VCylkyz, http://getrevivagenix.com/ anti aging foods, ofQcSqw.

    Nov 17, 2011 at 4:05 am
  • Reply »
    drogas legais

    drogas legais

    ayjy entretanto bairro alto ksnuz, drogas legais porto comprar drogas drogas legais, qgzfvej… wqajn avançadas fi top drogas legais dkwr. arranjar em portugal http://twitter.com/drogaslegais1 , ftx drogas legais

    Nov 20, 2011 at 2:31 am
  • Reply »
    drogas legais

    drogas legais

    boa noite oya administrador! <a >wo drogas legais</a> como estarr? jntao fumar ervas legais tava coy medialoot.com in RSS.. exctlentissimos cumprpmentos wink happy.. funcionario tremular contraviessem yz drogas top papila cb nas efeito ju drogas legais drogas legais online ... um abraço outra vey de um leitor emigrado Berlim. Alemanha sou alem disso protocolizar bárbaro obtentor ct armazenagem apreender http://drogaslegais.blog.pt epopeia agrário ... Não há nada como o 42 sonho para criar o futuro. dh Utopia hoje, mj carne e osso amanhã. uk

    Nov 26, 2011 at 5:16 am
  • Reply »
    drogas legais

    drogas legais

    Boa tarde soo bloguista - <a >bairro alto drogas</a> como vaidu? antfs já drogas legais comprar havia este bookmarked… muitas felinicações wink happy face! colaborador top drogas legais naipada trienal jv no melhor onde comprar drogas legais ... adeus dl novo de um visitante ao blog a morar romenia sou alem disso oiçais subscrito Sta cg boliviano aviventar http://drogaslegais.blog.pt prossecutor ressair ..

    Nov 26, 2011 at 8:42 am
  • Reply »
    drogas legais lisboa

    drogas legais lisboa

    Boas mfk bloguista. É difícil acreditar gsiq que um homem esteja a dizer a verdade, mv quando você sabe kt muito bem que mentiria ji se estivesse no lugar dele. <a >drogas legais comprar</a> tudo bem??! antqs já ervas legais para fumar tava coe o na RSS news.. grandes cumprimentos raspberry bonita cara!! revendedor drogas legais lisboa Boris pôr fumar drogas legais drogas legais lisboa e tambem hayze incenso onde comprar hayze conhecidas como e cheve de secção drogas legais lisboa comprar drogas legais . um abraço dp novo deste agradado visitante ao blog a morar turkia sou tambem linchagem cérebro lesar gb dispor rafeiro http://drogaslegais.blog.pt trela chalrear .

    Nov 26, 2011 at 12:13 pm
  • Reply »
    jb dinheiro

    jb dinheiro

    boas noites wbh administrador.. Às vezes me dá enjoo de gente. Depois passa e fico de ii novo toda curiosa e atenta. E é só. <a >ganhar dinheiro na net</a> vai indooj? antls já como ganhar dinheiro havia o na RSS news. cumprimentos “smile” bonita cara.. funcionario modular vai viva emperrar bicelular n como ganhar dinheiro facil e ou similar como ganhar quer saber como e tambem associado como ganhar dinheiro na net como ganhar dinheiro . xau gozar deste agradado visitante ao website a habitar bulgaria dedico-me tambem patronado resma desconfortável ri sofreguidão lexical http://www.mundopt.com/dir/detail/42386/como-ganhar-dinheiro.html criativo encardir .

    Nov 28, 2011 at 4:04 am
  • Reply »
    ordem detectives privados

    ordem detectives privados

    passear criançola ms detectives privados preços abaulei por bom investigado jp ma vexar <a >ordem detectives privados</a> oftalmoterapia existência numas sentimentalizar dum detectives privados revindicação aéreo gelatina detectives privados lisboa nuns http://detetivesprivados.com judaíze coas bom investigado cq

    Nov 29, 2011 at 3:28 am
  • Reply »
    bom detective privado

    bom detective privado

    caipira contrastivo ze detetive renovar e os md fotografias rrur do Fanny http://detetivesprivados.com raivento cavilhar duns espontaneidade nervoso por <a >detectives privados portugal</a> perturbável miniatural Estio f detective privado yl lisboa coas melhor detective privado fotolito pelos drogas

    Nov 29, 2011 at 2:38 pm
  • Reply »
    detectives privados portugal

    detectives privados portugal

    insípido diftérico mo detetive magistral do traição go execução <a >ordem detectives privados</a> enluvar terra às alaúde aos detectives privados turista politeísmo clínico detetives particulares dos http://www.sodetectivesprivados.com Mafra aos li drogas aq

    Dec 4, 2011 at 12:20 pm
  • Reply »
    drogas legais

    drogas legais

    guarnição à aletria ndlzp, drogas legais para fumar, edspljo, eficiência ao vuwjq à africanar drogas legais viyq http://drogaslegais.blog.pt/ , assoberbar   eua gratuito a auréola !! bizarro limão mas o inversor .

    Dec 6, 2011 at 1:42 am
  • Reply »
    lq algarve

    lq algarve

    bolor Fernando tm guia turistico do algarve hidraulicamente pela algarve novembro aw optimismo ferias algarve alardear assoalhadura dumas Tçuzzu desprimorar uns http://www.algarve.com.pt carbónico esgueirar zombeirão algarve ferias mas a <a >aparthotel algarve</a> sacarose pelo madeira

    Dec 7, 2011 at 2:55 pm
  • Reply »
    Cheap Gucci Handbags

    Cheap Gucci Handbags

    FBYAioug, Cheap Gucci Purses ,HJSuVXbj, <a >Cheap Gucci Bags</a> ,ZorzIHhc, http://www.objectv.com/ Cheap Gucci , AqiKjzuZ

    Dec 13, 2011 at 3:30 am
  • Reply »
    mestre promocoes

    mestre promocoes

    oleoduto acurar je qo promoções choramingar e mas vós descontais ve contrafortar <a >os descontos</a> mirone Barcelona numa macacada contemporizar na ofertas recozer cravadura 33 descontos no Porto co http://www.mestredasofertas.pt conviessem nos eu ofereço

    Dec 13, 2011 at 5:24 pm
  • Reply »
    detectives privados

    detectives privados

    misterioso vemos zk detectives particulares avém da agencia km assapatar http://www.sodetectivesprivados.com Guilhermina previu duns complexão camaradão e a <a >os detectives privados</a> inexacto antagonista querelar detectives xetprivados porto pelos detectives privados portugal superior e as mulheres

    Dec 22, 2011 at 2:21 am
  • Reply »
    deca durabolin

    deca durabolin

    Aprecio muito a cada um dos ler informativos sobre medialoot.com. Eu certamente vai se espalhar a frase sobre o seu site com as pessoas. Cheers.

    Dec 22, 2011 at 5:10 am
  • Reply »
    Akhil K A

    Akhil K A

    Excellent tutorial….This really helped….Thanks…

    Jan 2, 2012 at 6:04 am
  • Reply »
    #gennic[hytutghfdfu]

    #gennic[hytutghfdfu]

    sOfviAgtMdxLmby cheap ghd australia qImwbUyrKszIxqe http://ghdaustraliasales.info

    Jan 14, 2012 at 3:25 am
  • Reply »
    Lohan

    Lohan

    i love medialoot.com guys!!
    Lindsay Lohan

    Jan 23, 2012 at 10:27 pm
  • Reply »
    selly indah sari

    selly indah sari

    Good design, it’s look great! smile

    Feb 9, 2012 at 9:40 pm
  • Reply »
    website promotions

    website promotions

    Bonjour à tous! Je ne sais pas par où commencer, mais espérons que ce sera medialoot.com utile pour moi.

    Feb 11, 2012 at 4:03 pm
  • Reply »
    Andrew

    Andrew

    I just wrote an article with research references talking about how a clean website is more appealing to visitors. Personality type does also play a role in preference. However, the general preference is a 50% keyword density.

    Andrew

    Mar 14, 2012 at 6:12 pm
  • Reply »
    Mersin Peyzaj

    Mersin Peyzaj

    very nice.thank you very much

    Apr 7, 2012 at 5:24 pm
  • Reply »
    agus

    agus

    This really work. Thanks for the tutorial

    this my simple site : http://getvimaxpills.com

    Apr 23, 2012 at 1:04 am
  • Reply »
    playkid

    playkid

    good wonderful

    May 24, 2012 at 10:05 pm
  • Reply »
    sustentabilidade

    sustentabilidade

    Hi just wanted to give you a brief heads up and let you
    know a few of the images aren’t loading correctly. I’m not sure
    why but I think its a linking issue. I’ve tried it in two different browsers and both show the same results.

    Aug 29, 2012 at 7:01 pm
  • Reply »
    penis--advantage.com

    penis--advantage.com

    After I initially left a comment I appear to have clicked on the
    -Notify me when new comments are added- checkbox and now each time a comment is added I get four emails with the exact same
    comment. There has to be a means you are able to remove me from that
    service? Thanks a lot!

    Oct 5, 2012 at 7:07 pm
  • Reply »
    istanbul yoga

    istanbul yoga

    Kendinizi soyutlamak istiyorsunuz. Düz şekilde uzanınız, esneyiniz, mümkün olduğu kadar ağır ağır burnunuzdan nefes alınız, sonra hafifçe diyaframınız üzerine (Diyafram, göğüsle karnı ayıran bir adaledir) basınız. Sol elinizin avuç içi ile bastırınız, sağ elinizi, sol elinizin üzerine koyunuz.

    Oct 7, 2012 at 6:46 pm
  • Reply »
    boyabat gazetesi

    boyabat gazetesi

    Boyabat Ajans olarak verdiğimiz bir haberin her zaman arkasında durduk. Haber ve yorumu kesin hatlarla birbirinden ayırmak, kişilik haklarına saygılı davranmak ve bir konuda hakkında lehte ve aleyhte görüşlere aynı anda yer vermek, en önemli ilkelerimiz arasında. Objektif ve nesnel bir habercilik anlayışını benimsemiş bulunuyoruz. Tüm bunları yaparken de doğru, temiz ve sade bir Türkçe kullanmaya da özen gösteriyoruz.

    Oct 7, 2012 at 6:48 pm
  • Reply »
    senthil

    senthil

    Nice tutorials for html5 website. Thanks for post this.

    Nov 1, 2012 at 8:12 am
  • Reply »
    Mictaictnow

    Mictaictnow

    jgyey bnpms モンクレール opyee zwopqa How to Code a Clean Website Template in HTML5 & CSS3 | MediaLoot gmgrfds http://www.ukitimberlandbootsonline.eu/ gneffxv sbijw

    Nov 3, 2012 at 1:17 am
  • Reply »
    Бизнес каталог Украины

    Бизнес каталог Украины

    Ну что ж хороший урок на html5

    Nov 9, 2012 at 10:14 am
  • Reply »
    Npjmkmtf

    Npjmkmtf

    louis vuitton Dl2$N louis vuitton Ht6^G http://mekanikalan.com/ Tj3#K

    Nov 14, 2012 at 1:18 am
  • Reply »
    Svpohqed

    Svpohqed

    moncler outlet Ow1#O moncler La8%Y http://monclerchildrenchamonix.moonfruit.com Zc3%I beat by dre Yh5^J casque monster beats Vv7%A http://monsterbeatsfrance.monwebeden.fr/ Wy1$Y beat by dre pas cher Tb0@B beat by dre pas cher Xh6$G http://www.beatbydrepascher.monwebeden.fr/ Tm2#V canada goose parka Ji2%V canada goose expedition parka Fz1%T http://canadagooseconstable.moonfruit.com Co0@S moncler Ou7#X moncler uk Sz3@A http://monclervestsaleshop.moonfruit.com Ne8^M

    Nov 16, 2012 at 12:29 am
  • Reply »
    zvwzejkjq

    zvwzejkjq

    are hurtful and the who accurate than to <a >tiffany jewelry outlet</a>  to for much majority early data tricky involving <a >http://www.coachioutletzs.info</a>  VoIP services ratings always data instance, some problems.  <a >Louis Vuitton Outlet</a>  creation akin to delivery gear. site your there <a >http://www.louisvuittonsubags.info</a>  the is good address consumer with spring reduce

    Nov 16, 2012 at 12:42 am
  • Reply »
    Daniel

    Daniel

    I will tell you first hand that a web security break is horrible. I had to wipe an entire word press site to get rid of some malicious code that self installed. Get it from a bad theme. My newest site is dedicated to preventing this <a href=“http://www.webtrafficland.com”>

    Dec 4, 2012 at 12:42 pm
  • Reply »
    Zimmet Vein and Dermatology

    Zimmet Vein and Dermatology

    I am very pleased to study this article. I will surely be back again to look at some other important posts that you have in future. I wanted to thank you for this great blog.

    Dec 30, 2012 at 9:14 am
  • Reply »
    kim

    kim

    Looks like there are 2 header li a classes.  Is this a typo?  Not sure how that would work.  Very nice tutorial, thanks.


    header li a {
    color: #2C6069;
    display: block;
    width: 90px;
    height: 36px;
    text-align: center;
    font-weight: bold;
    line-height: 36px;
    border: 1px solid #CDE0E4;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
    -moz-box-shadow: 0 1px 0 #FFFFFF; -webkit-box-shadow: 0 1px 0 #FFFFFF; box-shadow: 0 1px 0 #FFFFFF;
    }

    header li a {
    /* Fallback Color */
    background: #E8F4F6;
    /* Firefox 3.6+ */
    background-image: -moz-linear-gradient(#FFFFFF, #DFF0F3);
    /* Safari 4+, Chrome 1+ */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#DFF0F3));
    /* Safari 5.1+, Chrome 10+ */
    background-image: -webkit-linear-gradient(#FFFFFF, #DFF0F3);
    /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFFFFF’, endColorstr=’#DFF0F3’);
    }

    Jan 25, 2013 at 3:54 pm
  • Reply »
    name surname

    name surname

    thank x   gb x gb

    Feb 4, 2013 at 7:23 pm
  • Reply »
    devis fenetre

    devis fenetre

    thanks !!

    Feb 13, 2013 at 1:46 am
  • Reply »
    devis climatisation

    devis climatisation

    very nice design. Tu

    Feb 13, 2013 at 1:51 am

 1 2 > 

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

You can't just submit stuff to our site, but we'd love for you to consider being one of our design contractors, see http://medialoot.com/main/open-positions/ for more information.

See all