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
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
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
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
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
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
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
Copy and paste the icon for your first service into a new 32x32px document.
8. service_2.png
Copy and paste the icon for your second service into a new 32x32px document.
9. service_3.png
Copy and paste the icon for yourthird service into a new 32x32px document.
10. hr_shadow.png
Same method as previously used, be sure to set the background to transparent.
11. about_us.png
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
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.
Category: Tutorials
Download ALL of Our Premium Resources
Signup for a MediaLoot subscription today and get tons of premium resources to use commercially and even in web apps. At subscriptions starting at just $9, you can't lose...
Comments
where is the demo. if you can provide the demo so that we can see it
Design looks great, good development insights as well!
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
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!
Why you are not using <nav> for navigation?
Great tutorial, which gives a good overview of the coding process. Thanks for sharing.
Looks like this code has to be re-written for IE. Nightmare!
I do not disagree with this article!!
vyzxmnfejbmppu, cheap car insurance, ZsZULIM, auto insurance quotes, NzoNNNF, http://quotesforcheapautoinsurance.com/get-a-free-auto-insurance-quote epic auto insurance, LPJhDGC.
eslpvnfejbmppu, male enhancement reviews, eKByPLA, penis extender, zTttyXt, http://maleenhancementsreviewed.com/lean-muscle-x-risk-free-trial-review penis enlargement, osSEOIR.
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.
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
boa noite oya administrador! <a >wo drogas legais</a> como estarr? jntao fumar ervas legais tava coy medialoot.com in RSS.. exctlentissimos cumprpmentos
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
Boa tarde soo bloguista - <a >bairro alto drogas</a> como vaidu? antfs já drogas legais comprar havia este bookmarked… muitas felinicações
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 ..
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
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 .
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 .
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
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
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
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 .
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
FBYAioug, Cheap Gucci Purses ,HJSuVXbj, <a >Cheap Gucci Bags</a> ,ZorzIHhc, http://www.objectv.com/ Cheap Gucci , AqiKjzuZ
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
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
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.
Excellent tutorial….This really helped….Thanks…
sOfviAgtMdxLmby cheap ghd australia qImwbUyrKszIxqe http://ghdaustraliasales.info
i love medialoot.com guys!!
Lindsay Lohan
Good design, it’s look great!
Bonjour à tous! Je ne sais pas par où commencer, mais espérons que ce sera medialoot.com utile pour moi.
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
very nice.thank you very much
This really work. Thanks for the tutorial
this my simple site : http://getvimaxpills.com
good wonderful
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.
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!
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.
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.
Nice tutorials for html5 website. Thanks for post this.
jgyey bnpms モンクレール opyee zwopqa How to Code a Clean Website Template in HTML5 & CSS3 | MediaLoot gmgrfds http://www.ukitimberlandbootsonline.eu/ gneffxv sbijw
Ну что ж хороший урок на html5
louis vuitton Dl2$N louis vuitton Ht6^G http://mekanikalan.com/ Tj3#K
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
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
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”>
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.
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’);
}
thank x gb x gb
thanks !!
very nice design. Tu
Hi,
Here htere HTML5 website :
pour tous les devis de l’habitat : devis gratuits
Thank’s for u ‘re post
Merci pour le post.
When “&rt;” appears maybe mean <H3>?