Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Touch The Future: Create An Elegant Website With HTML 5 And CSS3
  • 23 April 2010
  • Tutorials, Web Design
  • This post was written exclusively for PV.M Garage by Piervincenzo Madeo
  • Comments (699)»

I’m sure that who chooses to work as web designer makes a choice of heart, a choice of love. He/she decides to bet any given day on his creativity and his ability of producing an idea and of making it tangible, visible and perceptible for all. These crazy men have my respect. But, also when the creative side is very important for a work, there exists a logical (and technical) part in all creative process.

There are some moments and situations in which the creative mind needs an analytical method to achieve the objective, that is, for us, the creation of a well-done website.

In his article on Design Informer titled “Web Design Iterations And Algorithm,” Adit Gupta explains how we can approach a web design work and how a website project can be processed in a number of iterations following a main algorithm. Well, generally it’s just how Adit has described.
Our brain works well, in order to solve a big problem, if we can divide the main issue in N operations that solve N little difficulties, and the total sum of these N little steps provides the solution for our big problem. Perfect, ‘Houston, we have a big problem!’ We should create a working web design. Actually the common routine requires the following main steps:

  • Step 1: understand the theme and the topics of the website and decode the client’s requests
  • Step 2: choose the right style and sketch your ideas
  • Step 3: draw a clean and clear wireframe to summarize the structure of the website
  • Step 4: design the website (in pixels) through an image editor, like Photoshop, to create a real-scale mockup
  • Step 5: convert your psd mockup to HTML and CSS

Five macro-steps to build an effective website using brain, pencil, paper, Photoshop, HTML and CSS. But technology doesn’t stop, luckily, and we have other two great allies for the future to design better website: HTML 5 and CSS3.

How HTML 5 And CSS3 Can Change Web Design

If you were to ask me which is the greatest change that HTML 5 and CSS3 could bring about, I’d focalize my answer on the use of the image editors. Sure, we can talk about the power of the semantic web or about the reduction of the plugin-based rich internet applications (such as Flash or Java); but as web designer the first, big, change is just within my design process. In fact the new features of CSS3 allow us a complete control of some properties able to create nice effects without the use of jpgs, pngs or gifs. New properties of CSS3, such as box-shadow, avoid creating pixel-perfect images to make precious your web design.
For a long time I’ve thought about Photoshop (or other image editors) ‘it is an essential tool to develope a website.’ Actually I’m changing this point of view to ‘it is an useful tool to develope a website.’
From the routine described in the introduction of the article it’s evident how the psd mockup and PSD-to-HTML conversion are needful things, but, digging into new features of CSS3, a question hires my brain: ‘do you really need a psd mockup?’
The answer, in my opinion, is ’sometimes.’ When you have a clear concept and a good wireframe you may code instantly an HTML-based mockup for a browser; to save your time (and your money) avoiding an almost-absolete step.
Note: I am not saying that you don’t need Photoshop. I am just saying that, sometimes, a psd mockup could be a superflous step, however you could need an image editor to create stunning graphic details.
Megan Fisher explains in wonderful way her point of view about HTML-based mockup with her article on 24ways titled “Make Your Mockup in Markup.”

Quick Overview On HTML 5

HTML 5 borns to improve interoperability and to reduce development costs for websites and web applications. It is not a W3C recommendation yet, and for this reason you have to read information contained in the article like a simple overview on how we might work with new technologies in the (next) future.

HTML 5 is aimed to create a comprehensive and all-in-one markup language for front-end development, able to provide a qualitative information on the different elements of the page; all this introducing new media elements (and their attributes), such as <video> and <audio>, and semanthic elements (that reflect modern usage of the website), such as <article>, <header> and <footer>.
We focalize our attention on the new elements that make easier to structure a web page. Take a look to the following elements, which are all new features of HTML 5 (information from HTML 5 | Working Draft).

<section> – section element is a generic section of a document or application, a thematic grouping of content that contains a heading. The section element is not a generic container element like a <div>. If you create a section for styling purposes or as a convenience for scripting, you should use a <div>. A section element is the right choice when you want that the element’s contents are listed explicitly in the document’s outline (read “<section> is not just a “semantic <div>” to learn more).

<aside> – aside element is a section of a page that consists of content that is tangentially related to the content around the aside element. We can use aside element for sidebars, for advertising, for groups of nav elements, and for other content that we can consider separate from the main content of the page.

<article> – article element is a self-contained composition (a forum post, a magazine or newspaper article, a blog entry) in a web page or web application and that is intended to be distributable or reusable. You should use the article element, instead of the section element, when it would make sense to syndicate the contents of the element.

<footer> – footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. It can contain information about its section, links to related documents, copyright dataansd so on. Footer element used for a general site-wide footer and for a article (or section) footer.

<header> – header element represents a group of introductory or navigational aids, it is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element)

<nav> – nav element is a section with navigation links. Not all groups of links on your web page need to be within a nav element, only sections that consist of major navigation blocks are appropriate for the nav element.

<address> – address element represents the contact information for its nearest article.

<time> – it is used to represent a date and/or the time.

Quick Overview On CSS3

Like HTML 5 also Cascading Style Sheet Level 3 is under development and it is not a W3C recommendation yet. However we can start to use some new features and properties, which work in modern browser, to improve and optimize our web design projects.
There are some properties that you may experiment, such as border-radius and box-shadow, but realistically you have to fight with browsers compatibility to create a CSS3-based style sheet for a client project.
Below, at any rate, you can take a look at some new features and techniques that you may put into practice immediately.

RGBaRGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

background: rgba(196,89,30,0.65);

box-shadow – the box-shadow CSS property accepts one or more shadow effects as a comma-separated list, to attach one or more drop-shadows to a box.

-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);

border-radius – other great new property: border-radius, that allows us to add nice rounded corners on box-items.

-moz-border-radius: 10px; /*radius of 10px*/
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

text-shadow – the text-shadow new property accepts a comma-separated list of shadow effects to be applied to the text of the element.

text-shadow: 1px 1px 1px #2c0306;

An Elegant Web Design With HTML 5 And CSS3 – Live Preview and Download

Now, after a quick overview on the technologies that we will use, we can start to design our website. The aim is to create an elegant blog/portfolio for an efficient professional (graphic and web designer or photographer).
Below you can see the final resul of our efforts; don’t forget that it is coded through two new great technologies, HTML 5 and CSS3. You may see a live preview of the template and download the archive with all source files.

An Elegant Web Design With HTML 5 And CSS3

Download Source
Download Source

The template can be used and edited without any restrictions or limitations. Feel free to modify the template in private or commercial projects. It is absolutely free to use and released under GNU General Public License. We love our readers!

How To Create A Nice Blog Design Touching The Future

During the introduction I’ve described a scenario in which we don’t need Photoshop to make a good work and create a nice web design. It’s possible, but the initial steps are very important in this case. You need to focus and formalize the requests of the client and create a good plan to work directly with the code.
I suggest to use pencil and paper to sketch your ideas. You should create a working wireframe, not 100% complete, however able to synthesize the client’s necessities and explain your plan for a comfortable work with the code.

Sketch Your Ideas

After a revision of the goals (from client’s requests) I decide to create a clean layout with a simple header, a container for recent posts, a column for archive (that contains a list of posts) and a ’sidebar’ with personal info, a preview of the portfolio and contact info.
Below you can see my row wireframe.
An Elegant Web Design With HTML 5 And CSS3

Graphic Details

Did I say ‘you don’t need Photoshop?’ No my friend, I just said ‘you don’t need psd mockup.’ High-quality graphic details are useful to design a great website. So, start from color palette and then draw good details in order to make precious your design. Below you can take a look to the graphics, created through Photoshop, that help us in building our blog design.

Color palette
An Elegant Web Design With HTML 5 And CSS3

Graphics
An Elegant Web Design With HTML 5 And CSS3

I’ll use the square pattern to create a nice background for the main container; for the header I’ll use the red-gradient image with a soft noise-effect. I’ve create the logo using French Script MT font, a soft gradient effect and a drop-shadow, I’ve also arranged in advance the image to apply, in due course, the CSS sprite techniques. There also two nice, minimal, icons to create ’subscribe to blog’ buttons.

Code Your Website With HTML 5

As evident, we have the following elements: header, last posts container, archive with a list of posts and blocks that usually we find in the sidebar of website, such as personal information, blogroll and contact details.
You may check out complete code here: index.htmlstyle.css.

Step 1 – Basic Structure
First of all I define the basic structure of the HTML page, including Doctype, links to stylesheets, the title of the page and charset details. The following image explains the structure and highlights the tag that I use to create the basic structure.
An Elegant Web Design With HTML 5 And CSS3

And now it’s time for the code.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>mr. hurley | personal blog</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<header id="site_head">
		<div class="header_cont"><!--useful to create the 960px limit-->
		<!--header stuff-->
		</div>
	</header>

	<div id="main_content"><!--useful to create the 960px limit-->

		<section id="last_posts">
		<!--last posts here-->
		</section>

		<div class="left_cont">
		<section id="archive">
		<!--list od posts here-->
		</section>

		<aside class="friends">
		<!--blogroll-->
		</aside>
		</div>

		<aside>
		<section class="about">
		<!--personal info here-->
		</section>		

		<nav>
		<!--links for the portfolio-->
		</nav>

		<section class="contact">
		<!--contact details here-->
		</section>
		</aside>

		<footer class="bottom">
		<!--footer info here-->
		</footer>
		</footer>

	</div><!--/main_container-->

</body>
</html>

Step 2 – The Header
According to the definitions of the paragraph titled “Quick Overview On HTML 5″, we can code the header section of our page as shown below.

<header id="site_head">
		<div class="header_cont">
		<h1><a href="#">mr. hurley</a></h1>

		<nav class="head_nav">
		<ul>
			<li class="rss"><a href="#">Subscribe</a></li>
			<li class="twitter"><a href="#">Follow Me</a></li>
			<li class="home"><a href="#">Home</a></li>
			<li><a href="#">About Me</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
		</nav>
		</div>
	</header>

Create the style.css, linked in our <head> section, and start to add the style for elements (and nested blocks) of the <header>. Note: The first couple of lines in the CSS are used to reset any default browser styling and to set-up the style for ‘general’ tag, such us a or :focus.

@charset "utf-8";
/* CSS Document */

/*  Reset for some default browser CSS - General */

body, div, h1, h2, h3, p, ul, ol, li, img, header, section, aside, footer, button {
	margin: 0; padding: 0; border: 0; list-style: none;
}

a {
	text-decoration: none;
	color: #961b25;
}

a:hover {
	color: #6f92a7;
}

:focus {
	outline: 0;
}

h1, h2, h3 {
	font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	font-weight: normal;
} 

h2 {
	font-size: 22px;
	line-height: 28px;
}

.float {
		float:left;
	}

body {
	background: #f6f6ee url(images/bck.jpg);
	font-family : "Trebuchet MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	}	

/* Header */

header#site_head {
	background: url(images/bck_head.jpg);
	-moz-box-shadow: inset 0px -2px 3px #480508;
	-khtml-box-shadow: inset 0px -2px 3px #480508;
	-webkit-box-shadow: inset 0px -2px 3px #480508;
	box-shadow: inset 0px -2px 3px #480508;
	border-bottom: 1px solid #fffffb;
	height: 70px;
	width: 100%;
	display: block;
}

	.header_cont {
		width: 960px;
		margin: 0 auto;
		padding-top: 15px;
	}

		.header_cont h1 {
			text-indent:-9999px;
			float: left;
		}

		.header_cont h1 a {
			background: url(images/logo.png) no-repeat;
			width: 143px;
			height: 45px;
			display: block;
		}

		.header_cont h1 a:hover {
			background-position: 0px -45px;
		}

		nav.head_nav {
			float: right;
			margin-top: 13px;
		}

		nav.head_nav ul li {
			display: inline;
			margin: 0px 5px;
		}	

			nav.head_nav ul li a {
				color: #f6f6ee;
				font-size: 12px;
				font-weight: normal;
				text-transform: lowercase;
				padding: 5px 8px;
			}

			nav.head_nav ul li.home a {
				background: #4f1d1e;
				-moz-border-radius: 10px;
				-khtml-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
			}

			nav.head_nav ul li a:hover {
				text-shadow: 1px 1px 1px #2c0306;
				background: #4f1d1e;
				-moz-border-radius: 10px;
				-khtml-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				-moz-box-shadow: inset 0px 0px 2px #2c0306;
				-khtml-box-shadow: inset 0px 0px 2px #2c0306;
				-webkit-box-shadow: inset 0px 0px 2px #2c0306;
				box-shadow: inset 0px 0px 2px #2c0306;
				color: #f6f6ee;
			}

			nav.head_nav ul li.rss, nav.head_nav ul li.twitter  {
				position: relative;
				left: -355px;
				margin: 0;
				}

			nav.head_nav ul li.rss a {
				color: #b4676c;
				border-right: 1px solid #903f43;
				margin: 0;
				padding-left: 20px;
				background: url(images/rss.png) left no-repeat;
				font-size:10px;
		}

			nav.head_nav ul li.twitter a {
				color: #b4676c;
				margin-left: 3px;
				padding-left: 20px;
				background: url(images/twitter.png) left no-repeat;
				font-size:10px;
			}

			nav.head_nav ul li.rss a:hover, nav.head_nav ul li.twitter a:hover  {
				color: #f6f6ee;
				-moz-border-radius: 0;
				-khtml-border-radius: 0;
				-webkit-border-radius: 0;
				border-radius: 0;
				-moz-box-shadow: none;
				-khtml-box-shadow: none;
				-webkit-box-shadow: none;
				box-shadow: none;
			}

The result of the code.
An Elegant Web Design With HTML 5 And CSS3

Step 3 – Last posts container
As usual, I describe directly showing the code how to build a well-done HTML section aimed to enclose recent posts. The <section class=”last_posts”r> is within <div class=”main_container”> (which defines the 960px limit). Here we use the new tags <article>, <address> and <time> for the first time, in order to create a ’semanthic’ single post section. Note: download the archive with the source files, there you can find all used images.

<div id="main_content"><!--useful to create the 960px limit-->

		<section id="last_posts"><!--section for recent posts-->
		<header class="section_tit">
			<h3>Last posts</h3>
		</header>

			<div class="single_post"><!--single post container-->
				<article>
				<div class="float">
					<figure>
						<img src="images/test3.jpg" alt="test" />
					</figure>
					<footer>
						<ul>
							<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
							<li>written by <a href="#">Mr. Hurley</a></li>
							<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
							<li><a href="#">Comments (15)</a></li>
						</ul>
					</footer>
				</div>

				<div class="art">
					<header class="post_head">
						<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
					</header>
					<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients. After all, they put their trust in me and gladly compensate me for my efforts. I guess I would be...</p>
					<span class="more"><a href="#">Read more</a></span>
				</div>
				</article>

			</div>

			<div class="single_post">
				<article>
				<div class="float">
					<figure>
						<img src="images/test1.jpg" alt="test" />
					</figure>
					<footer>
						<ul>
							<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
							<li>written by <a href="#">Mr. Hurley</a></li>
							<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
							<li><a href="#">Comments (15)</a></li>
						</ul>
					</footer>
				</div>

				<div class="art">
					<header class="post_head">
						<h2><a href="#">Purple In Web Design: A New Trend?</a></h2>
					</header>
					<p>For a long time purple has been the least used colour in web design. In recent months I noticed the number of websites...</p>
					<span class="more"><a href="#">Read more</a></span>
				</div>
				</article>
			</div>

			<div class="single_post">
				<article>
				<div class="float">
					<figure>
						<img src="images/test4.jpg" alt="test" />
					</figure>
					<footer>
						<ul>
							<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
							<li>written by <a href="#">Mr. Hurley</a></li>
							<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
							<li><a href="#">Comments (15)</a></li>
						</ul>
					</footer>
				</div>

				<div class="art">
					<header class="post_head">
						<h2><a href="#">How To Design A Better Blog? Break Down The Rules</a></h2>
					</header>
					<p>Once upon a time in World Wide Web a private and personal diary, where recording daily activities and reflections, called Weblog. </p>
					<span class="more"><a href="#">Read more</a></span>
				</div>
				</article>
			</div>

			<div class="single_post">
				<article>
				<div class="float">
					<figure>
						<img src="images/test2.jpg" alt="test" />
					</figure>
					<footer>
						<ul>
							<li><time datetime="2010-04-14" pubdate>April 14, 2010</time></li>
							<li>written by <address><a href="#">Mr. Hurley</a></address></li>
							<li>posted in <a href="#">Web Design</a>, <a href="#">Article</a></li>
							<li><a href="#">Comments (15)</a></li>
						</ul>
					</footer>
				</div>

				<div class="art">
					<header class="post_head">
						<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
					</header>
					<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
					<span class="more"><a href="#">Read more</a></span>
				</div>
				</article>
			</div>

		</section>

</div>

Below the style for this section.

/* Main container */	

#main_content {
	width: 960px;
	margin: 0 auto;
	padding-top: 15px;
}

	/* Last posts section */	

	.section_tit {
		clear: both;
	}

		.section_tit h3 {
			background: url(images/line.png) no-repeat center center;
			text-align: center;
			font-size: 34px;
			margin: 10px 0 25px 0;
			color: #c9c9c0;
			text-shadow: 1px 1px 0px #fff;
		}

	div.single_post {
		float: left;
		width: 447px;
		height: 345px;
		margin: 0 16px 35px 16px;
	}

		img {
			border: 5px solid rgba(255,255,255,0.75);
			-moz-border-radius: 5px;
			-khtml-border-radius: 5px;
			-webkit-box-border-radius: 5px;
			border-radius: 5px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
		}

		div.single_post footer {
			color: #2b2b28;
			text-align:right;
			font-size: 10px;
		}

		div.single_post ul  {
			margin-top: 10px;
			border-right: 3px solid #dbdbd4;
		}

		div.single_post ul  li {
			padding: 1px 13px 1px 0px;
		}

		div.single_post ul  li a {
			font-weight: bold;
		}

		div.art {
			width: 250px;
			display: block;
			background: rgba(255,255,255,0.75);
			border: 1px solid rgba(255,255,255,1);
			-moz-border-radius: 10px;
			-khtml-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
			margin-left: 15px;
			overflow: auto;
			float:left;
		}

		div.art:hover {
			background: rgba(255,255,255,1);
		}

		div.single_post header h2 {
			border-bottom: 1px solid #dbdbd4;
			margin: 20px;
			padding-bottom: 20px;
			text-align: center;
		}

		div.single_post p {
			padding: 0 20px;
			font-size: 12px;
			line-height: 20px;
		}

		span.more {
			float: right;
			margin: 30px 20px 30px 0px;
		}

		span.more a {
			background: #8badc2;
			-moz-border-radius: 15px;
			-khtml-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			padding: 8px 12px;
			color: #fff;
			text-shadow: 1px 1px 1px #546d7c;
			-moz-box-shadow: inset 0px 0px 2px #3f5867;
			-khtml-box-shadow: inset 0px 0px 2px #3f5867;
			-webkit-box-shadow: inset 0px 0px 2px #3f5867;
		}

		span.more a:hover {
			background: #b8ccd7;
			text-shadow: none;
			-moz-box-shadow: none;
			-khtml-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

The result of our efforts.
An Elegant Web Design With HTML 5 And CSS3

Step 4 – Archive and aside sections
Now I add an archive with an ordered list of posts and other information organized in <aside> blocks. Take a look at the code to understand how I’ve built the two-columns structure.

<div id="main_content"><!--useful to create the 960px limit-->

		<section id="last_posts">
		<!--...-->
		</section>

		<div class="left_cont"><!--left container fo archive and blogroll-->
		<section id="archive">
		<header class="section_tit">
			<h3>Archive</h3>
		</header>

		<ol><!--list of posts-->
			<li><article>
				<figure class="float">
				<img src="images/test3.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">Options To Consider When Your Client Is Driving You Mad</a></h2>
				</header>
				<p>I guess I would be speaking on your behalf when I say that I feel so grateful for my clients.</p>
				<footer>
				<p><time datetime="2010-04-14" pubdate>April 14, 2010</time> | <a href="#">Comments (14)</a> | <a href="#">Read more</a>
				</footer>
			</article></li>

			<li><article>
				<figure class="float">
				<img src="images/test5.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">Purple In Web Design: A New Trend?</a></h2>
				</header>
				<p>For a long time purple has been the least used colour in web design.</p>
				<footer>
				<p><time datetime="2010-04-14" pubdate>April 14, 2010</time> | <a href="#">Comments (14)</a> | <a href="#">Read more</a>
				</footer>
			</article></li>

			<li><article>
				<figure class="float">
				<img src="images/test4.jpg" width="110" alt="test" />
				</figure>
				<header>
				<h2><a href="#">How To Design A Better Blog? Break Down The Rules</a></h2>
				</header>
				<p>Once upon a time in World Wide Web a private and personal diary, where recording daily activities and reflections, called Weblog.</p>
				<footer>
				<p><time datetime="2010-04-14" pubdate>April 14, 2010</time> | <a href="#">Comments (14)</a> | <a href="#">Read more</a>
				</footer>
			</article></li>

		</ol>
		<span class="more_arch"><a href="#">More posts</a></span>
		</section>

		<aside class="friends"><!--blogroll-->
		<nav>
		<div class="section_tit">
			<h3>Friends</h3>
		</div>

			<ul>
				<li><a href="#">PV.M Garage</a></li>
				<li><a href="#">Web Is Love</a></li>
				<li><a href="#">Web Expedition</a></li>
			</ul>
			<ul>
				<li><a href="#">Web Blend</a></li>
				<li><a href="#">Just Test</a></li>
				<li><a href="#">Another Test</a></li>
			</ul>
			<ul>
				<li><a href="#">Random Link</a></li>
				<li><a href="#">Black Rock</a></li>
				<li><a href="#">The Hydra</a></li>
			</ul>
			<ul>
				<li><a href="#">The Orchid</a></li>
				<li><a href="#">The Pearl</a></li>
				<li><a href="#">The Flame</a></li>
			</ul>
		</nav>
		</aside>
		</div>

		<aside><!--sidebar-->
		<section class="about">
		<header class="section_tit">
			<h3>About me</h3>
		</header>
			<div class="about_left">
				<figure>
					<img src="images/test6.jpg" width="120" alt="test" />
				</figure>
				<ul>
					<li><a href="#">follow me on twitter</a></li>
					<li><a href="#">be my friend</a></li>
					<li><a href="#">my bookmarks</a></li>
				</ul>
			</div>

			<div class="about_right">
			<p>Hi, this is M. Hurley, a web designer and developer strangely based in Italy. On this blog I want to share with you my experiences and my works. I won't teach, I just want to provide useful information to learn how to deal with the wonderful world of web design.</p>
			<p>Thanks for reading,</p>
			<p><em>Mr Hurley</em></p>
			</div>
		</section>		

		<nav>
		<div class="section_tit">
			<h3>Portfolio</h3>
		</div>
		<div class="portfolio">
			<ul>
				<li><a href="#"><img src="images/test1.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test2.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test3.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test4.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test5.jpg" width="110" alt="test" /></a></li>
				<li><a href="#"><img src="images/test1.jpg" width="110" alt="test" /></a></li>
			</ul>
		</div>
		</nav>

		<section class="contact">
		<header class="section_tit">
			<h3>Contact</h3>
		</header>

			<p>If you are interested in advertising on this blog, you can purchase a banner directly from <a href="http://buysellads.com/buy/detail/7791">BuySellAds.com</a>, a great service to buy and sell ads.
Feel free to follow us on Twitter and to subscribe to our RSS feed. You can also contact directly Mr Hurley, the mind behind, through an email to <a href="mailto:pier.made@gmail.com">pier.made@gmail.com</a></p>
		</section>
		</aside>

	</div>

I have to style all these elements, so let’s go with CSS rules.

/* Archive - Sidebar */

	.left_cont {
		float: left;
		width: 447px;
		margin: 0 16px 16px 16px;
	}

	aside {
		float: right;
		width: 447px;
		margin: 0 16px 16px 16px;
	}

		section#archive ol li {
			width: 385px;
			min-height: 130px;
			background: rgba(255,255,255,0.75);
			border: 1px solid rgba(255,255,255,1);
			-moz-border-radius: 10px;
			-khtml-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
			margin: 30px 15px 20px 15px;
			padding: 15px;
		}

		section#archive ol li:hover {
			background: rgba(255,255,255,1);
		}

		section#archive h2 {
			font-size: 16px;
			line-height: 22px;
			margin: 0 0 10px 0;
		}

		section#archive figure {
			margin-right: 15px;
		}

		section#archive footer p {
			font-size: 10px;
			margin-top: 15px;
			text-align: right;
		}

		section#archive footer p a {
			color: #6f92a7;
			font-weight: bold;
		}

		section#archive footer p a:hover{
			color: #961b25;
		}

		aside.friends ul {
			float: left;
			padding-left: 15px;
			width: 95px;
		}

		aside.friends ul li {
			margin-bottom: 10px;
			border-bottom: 1px solid #dbdbd4;
		}

		span.more_arch {
			font-size: 30px;
			margin: 15px 15px 10px 0;
		}	

		section.about, section#archive, aside.friends {
			display: block;
			overflow: auto;
			margin-bottom: 30px;
		}

		div.portfolio {
			margin-bottom: 45px;
			display: block;
		}

		.about_right {
			float: right;
			width: 265px;
			margin-right: 15px;
		}

		.about_left {
			float: left;
			margin-left: 15px;
			padding-top: 5px;
		}	

		section.about p, section.contact p  {
			font-size: 14px;
			line-height: 22px;
			margin-bottom: 18px;
		}

		section.contact p  {
			margin: 0 15px;
		}

		.about_left ul li a {
			width:130px;
			display: block;
			text-align: center;
			padding: 6px 0;
			margin: 13px 0;
		}

		div.portfolio ul {
			margin: 0 15px -8px 15px;
		}

			div.portfolio ul li  {
				display: inline-block;
				margin: 8px 8px 0 8px;
			}

To optimize, I add style for section#archive p, span.more_arch a and .about_left ul li modifying previous rules as shown below.

		div.single_post p, section#archive p {
			padding: 0 20px;
			font-size: 12px;
			line-height: 20px;
		}

		span.more, span.more_arch {
			float: right;
			margin: 30px 20px 30px 0px;
		}

		span.more a, span.more_arch a, .about_left ul li a {
			background: #8badc2;
			-moz-border-radius: 15px;
			-khtml-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			padding: 8px 12px;
			color: #fff;
			text-shadow: 1px 1px 1px #546d7c;
			-moz-box-shadow: inset 0px 0px 2px #3f5867;
			-khtml-box-shadow: inset 0px 0px 2px #3f5867;
			-webkit-box-shadow: inset 0px 0px 2px #3f5867;
			box-shadow: inset 0px 0px 2px #3f5867;
		}

		span.more a:hover, span.more_arch a:hover, .about_left ul li a:hover {
			background: #b8ccd7;
			text-shadow: none;
			-moz-box-shadow: none;
			-khtml-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

Below you can see how our code appears on a web browser.
An Elegant Web Design With HTML 5 And CSS3

Step 7 – Finally, just a simple footer
I add a simple footer with credits and some information.

	<div id="main_content">

		<!--...-->

		<footer class="bottom">
			<p>Contents and resources released under Creative Commons License.</p>
			<p>Design and code by Piervincenzo Madeo - 2010 Mr Hurley Theme - A free HTM5 and CSS3 template.</p>
		</footer>
	</div>

The relative CSS rules for the footer.

/* Footer */

	footer.bottom  {
		clear: both;
		display:block;
		margin: 30px 15px;
		border-top: 1px solid #c9c9c0;
		padding-top: 20px;
	}

		footer.bottom p {
			text-align: center;
			color: #b6b6ab;
		}

See the following image to understand how our footer appears.
An Elegant Web Design With HTML 5 And CSS3

Step 8 – We have a problem: browser compatibility
HTML 5 and CSS3 are two new technologies, so the works actually are in progress. A great issue to use today the new available features is the disparate browser support. Browsers like Firefox 3.6+ and Opera 10.5+ are very promising, but there are many softwares, such as Internet Explorer and Chrome, that present bugs and an incomplete support.
“Web Designers’ Browser Support Checklist” offers a panoramical view about browser support for HTML 5 and CSS3.
I can assert, at any rate, that there are useful solutions to help us to ‘modernize’ our web projects.

First of all we need something that help us to take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies. The solution? Modernizr, a small and simple JavaScript library that allow us to use new properties and elements of HTML 5 and CSS3 in clever way.
Download the library here, add the file modernizr-1.1.min.js into your template folder and activate the script adding the following line within <head> tag in index.html:

<script src="modernizr-1.1.min.js"></script>

Modernizr runs through a little loop in JavaScript to enable the various elements from HTML 5 for styling in Internet Explorer, below we can see how this allow us a complete control of HTML 5 also in IE.
An Elegant Web Design With HTML 5 And CSS3

It’s still evident that there are some problems. Where the background-color for div.art and div.art is? Well, IE doesn’t support RGBa. We have two possible ways.
First: we may use the Modernizr method; it allow us to filter the style rules for browsers that doesn’t support RGBa using the classes .rgba and .norgba for activating the filter (read Modernizr Docs to learn more).
Second (my method): I choose, however, of solving this problem adding a simple RGB property where necessary; below you can see how I modify some CSS classes to add the ‘correct’ (big word) background-color for IE too.

		img {
			border: 5px solid rgb(255,255,255); /*rgba ie fix*/
			border: 5px solid rgba(255,255,255,0.75);
			-moz-border-radius: 5px;
			-khtml-border-radius: 5px;
			-webkit-box-border-radius: 5px;
			border-radius: 5px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
		}

		/*...*/

		div.art {
			width: 250px;
			display: block;
			background: rgb(255,255,255); /*rgba ie fix*/
			background: rgba(255,255,255,0.75);
			border: 1px solid rgb(255,255,255); /*rgba ie fix*/
			-moz-border-radius: 10px;
			-khtml-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-moz-box-shadow: 0px 0px 5px #c6c6bf;
			-khtml-box-shadow: 0px 0px 5px #c6c6bf;
			-webkit-box-shadow: 0px 0px 5px #c6c6bf;
			box-shadow: 0px 0px 5px #c6c6bf;
			margin-left: 15px;
			overflow: auto;
			float:left;
		}

		div.art:hover {
			background: rgb(255,255,255); /*rgba ie fix*/
		}

		/*...*/

	section#archive ol li {
		width: 385px;
		min-height: 130px;
		background: rgb(255,255,255); /*rgba ie fix*/
		background: rgba(255,255,255,0.75);
		border: 1px solid rgb(255,255,255); /*rgba ie fix*/
		-moz-border-radius: 10px;
		-khtml-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-moz-box-shadow: 0px 0px 5px #c6c6bf;
		-khtml-box-shadow: 0px 0px 5px #c6c6bf;
		-webkit-box-shadow: 0px 0px 5px #c6c6bf;
		box-shadow: 0px 0px 5px #c6c6bf;
		margin: 30px 15px 20px 15px;
		padding: 15px;
	}

	section#archive ol li:hover {
		background: rgb(255,255,255); /*rgba ie fix*/
	}

Now we can see how IE renders our code.
An Elegant Web Design With HTML 5 And CSS3

Testing the template with Google Chrome I said ‘dammit!’ Why? See how Chrome destroys our efforts in creating a nice ‘read more’ button.
An Elegant Web Design With HTML 5 And CSS3

This bug borns when we use at the same time border-radius and inset for box-shadow. To fix I use the following trick:

	nav.head_nav ul li a:hover {
		text-shadow: 1px 1px 1px #2c0306;
		background: #4f1d1e;
		-moz-border-radius: 10px;
		-khtml-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		-moz-box-shadow: inset 0px 0px 2px #2c0306;
		-khtml-box-shadow: inset 0px 0px 2px #2c0306;
		-webkit-box-shadow: -1px -1px 2px #2c0306; /*-webkit- inset fix*/
		box-shadow: inset 0px 0px 2px #2c0306;
		color: #f6f6ee;
	}

	/* ... */

	span.more a, span.more_arch a, .about_left ul li a {
			background: #8badc2;
			-moz-border-radius: 15px;
			-khtml-border-radius: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			padding: 8px 12px;
			color: #fff;
			text-shadow: 1px 1px 1px #546d7c;
			-moz-box-shadow: inset 0px 0px 2px #3f5867;
			-khtml-box-shadow: inset 0px 0px 2px #3f5867;
			-webkit-box-shadow: -1px -1px 2px #3f5867; /*-webkit- inset fix*/
			box-shadow: inset 0px 0px 2px #3f5867;
		}

	span.more a:hover, span.more_arch a:hover, .about_left ul li a:hover {
			background: #b8ccd7;
			text-shadow: none;
			-moz-box-shadow: none;
			-khtml-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

Just a trick, but in this case it works fine.
An Elegant Web Design With HTML 5 And CSS3

Step 9 – Rendering on different browsers and validation
Finally we have just to take a look to the different renderings on some browsers and we have to validate the code.
An Elegant Web Design With HTML 5 And CSS3

An Elegant Web Design With HTML 5 And CSS3

An Elegant Web Design With HTML 5 And CSS3

An Elegant Web Design With HTML 5 And CSS3

An Elegant Web Design With HTML 5 And CSS3

An Elegant Web Design With HTML 5 And CSS3

Conclusion

Mission complete! We have a nice and elegant website.
This post is just a practical step-by-step overview on how to use new features of HTML 5 and CSS3, but to learn more about these topics I suggest to read the following articles (and more):

Useful readings and resources to learn more about HTML 5

Useful readings and resources to learn more about CSS3

Author: Piervincenzo Madeo

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development.

website design and development

699 Comments

  1. Francesco Ciabatta

    HTML5 is fantastic! Tnx for the tutorial.

  2. Bluefaqs

    A very concise tutorial. You did an excellent job of explaining the steps Piervix.

    I’ve about aced CSS3 as far as whats available, but haven’t messed too much with HTML5. You’ve helped to clear up a few things that I wasn’t sure about. Thanks!

  3. Richie

    Lovely detailed tutorial. One of the best I have seen so far. Thanks Pier :D

  4. Lam Nguyen

    Very clearly and detailed. Well done, bro!

  5. Jared

    Arrgh This is exactly what I was doing! You beat me to it!!

    Haha, you did a very nice job on this, and this will actually be very helpful to me.

  6. Mike Smith

    WOW. This tutorial is extremely detailed and the final outcome is stunning. Definitely an awesome post and one I’ll be bookmarking for later reading (again and again). :)

  7. marbio

    Woow..Piervincenzo you’re great. This tut rocks :)

  8. clerik

    Hell… congrats!

  9. Michela

    We need to start with these new techniques and you explained them very well
    The layout is very pleasant
    Congrats Pier :)

  10. piervix

    Thank you friend, for all your comments. Appreciated… I’m glad and honored.

    You make me feel so good!

  11. j.bentham

    nice to see some lost citations..

  12. Joddy Street

    great!! thanx for the tute

  13. hung bui

    This tutorial is really helpful for people like me who start digging into HTML5 and CSS3. Great tips.

    Many thanks.

  14. Mihai O.

    Great article :)

  15. Destry Wion

    “He decides to bet any given day on his creativity and his ability of producing an idea and of making it tangible, visible and perceptible for all. These crazy men have my respect.”

    So, there are no women web designers, or do they just not have your respect? (There is a long list of talented web women, and respect is a two-way street.)

    Maybe I’m old fashioned, but always refer to the woman in your copy and assume the man, never the opposite. Or write your copy so it’s not gender reliant.

    Don’t mean to put you on the spot, but I’m surprised Veerle Pieters, for example, hasn’t already popped in here to make the point more poignantly. :)

    Otherwise, great writeup!

    • piervix

      I’m so sorry. The misunderstanding borns because I’m italian and here to indicate generic third person (masculine/feminine) we use only ‘he’ (‘lui’ in italian)… I know, there many highly-skilled women in web design world… I fix to ‘He/she’… ok?

      Thanks for the comment, appreciated.

  16. Kim Love

    Nice article, not read it all yet, will will do later.

    Noticed your url and a few of your titles mention “HMTL” rather than HTML (unless there’s a funky new mark-up language doing the rounds that has totally passed me by? :)

    • piervix

      fixed Kim. Thank you for the comment… I apologize for the typo ;)

  17. Amit

    The layout breaks in IE7. Why doesn’t Modernizer take care of IE&?

  18. Tom

    Hey,
    you forgot to clear header_cont, it does not have the correct height. Add overflow:hidden for example and see the difference in firebug.

    Otherwise nice post :)

    Regards,
    Tom

    • piervix

      Do you mean?

      .header_cont {
      width: 960px;
      margin: 0 auto;
      padding-top: 15px;
      height: 55px;
      }

      I think it is not necessary in this case, the ‘real content’ is in nav.head_nav and .header_cont h1.
      Let me know what do you think Tom.

      Thanks for your comment. Appreciated!

  19. Peter

    Wonderful article. However, you have misspelled HTML a number of times throughout your article.

    HMTL

    Appears a number of times (over 20times).
    It should be:

    HTML

  20. Mat_

    Man, you rock. great tutorial! thanks a lot

  21. Ivan

    This tutorial is great, verry detailed :-)

  22. Ali

    Fantastic tutorial, thanks.

  23. Kristelvdakker

    why IE!? Why!?
    You bring me to tears every time!
    Why can’t you love me?
    Is it so hard for you to work with us in stead of working against us?

    nice tutorial though! And sorry for the nervous breakdown ;) lol

  24. Dan

    Nice. You could even go one more step and use css3 gradients for the header background.

    header#site_head {
    background-color: #632327;
    background-image: url(images/bck_head.jpg);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.38, rgb(89,29,32)), color-stop(1, rgb(123,53,59)));
    background: -moz-linear-gradient(center bottom, rgb(89,29,32) 38%, rgb(123,53,59) 100%);
    -moz-box-shadow: inset 0px -2px 3px #480508;
    -khtml-box-shadow: inset 0px -2px 3px #480508;
    -webkit-box-shadow: inset 0px -2px 3px #480508;
    box-shadow: inset 0px -2px 3px #480508;
    border-bottom: 1px solid #fffffb;
    height: 70px;
    width: 100%;
    display: block;
    }

    BTW, webkit’s box shadow doesn’t support ‘inset’ – yet.

    • Dan

      Sorry, I’m mistaken. It’s supported in Chome but not Safari. Odd….

  25. Deluxe Blog Tips

    Really nice tutorial. I like the way you explain in details. It helps us to better understand.

  26. Jireck

    impressive tut ! ! !

    Html5 + CSS3 + piervix = Jireck Happy

    i’m without words ..

    Just : thanks !!

  27. Beben

    awesome for begining to going on future CSS…hihihihi
    thanks

  28. ken the tech

    Just wondering how much time did you spend writing this article.

    Lucky me, I was looking for a Html 5 + css3 article, and this one is all I want!

    Thanks mate!

  29. Jerome Bohg

    Wow, you really spend a LOT of time writing this article. Very detailed. Good tutorial. I know it may not be part of this article but I’m sure libraries such as jQuery will also be a big part future webdesign/development. I think the future looks very bright for upcoming websites! Thanks for sharing your knowledge.

  30. Paulius Rasytinis

    Amazing tutorial and the result by the way. I’m glad i read Your blog :)

  31. piervix

    Thanks for your love, friends. I’m glad and honored!

  32. Valdecir Carvalho

    Hi… I really love it! How to convert it to a wordpress theme? Is it possible?
    Thanks a lot!

    Valdecir Carvalho, S

    • Daniel

      Would love to see a WP version as well – that’s how awesome it is!

  33. le-juge

    Awesome post! Thanks for the tutorial!

  34. Mark

    Great article!

  35. Tim Read

    Wow. Great article – how do you find time to write it?!

  36. RodgerFox

    Terrific! Fascinating.
    I often read your blog…
    You do not mind if I take the design and make a theme for wp

  37. Sivaranjan

    This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time.

    I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind. :)

  38. AJ

    What is up with all the id’s and classes? This is more like XHTML 1.0 with an HTML5 doctype and a few extra tags.

  39. Stephanie

    Oh noe! What happened in Chrome 5? Is it just me?

  40. Stephanie

    Ah, it was just me. Weird conflict btw chrome & electric sheep screensaver.

  41. junghae

    ho, html5.

  42. Jordan Whalen

    Hey I loved both the design and article – maybe I skimmed to much but I really need an answer to this question… I haven’t been able to find he answer anywhere, is building an HTML blog purely for mockup purposes or are you able to add more posts later? I’ve already finished learning HTML5 (atleast what’s available) and Css3 and I would much rather build blogs in HTML + CSS than have to learn PHP so I can build a custom wordpress theme. Thanks for any help :)

  43. martensms

    Well, pretty cool article.
    It’s nice to see developers getting to HTML5 already – also if IE doesn’t support new tags when not using e.g. document.createElement(‘header’) before.

    But I’ve got a question: Why are you using div.single_post instead using article.single_post?

    ..using only makes sense when you have descriptions or subtitles for images. Using inside is pretty nasty! There’s which would make more sense. Well, and then you’ve got the advantage for floating instead of div.float =)

    PS: That were only tipps using the tags the right way…hope that helped a bit.

    Have a look at my Playground where I’m testing out pretty anything on HTML5 , CSS3 and their APIs.

    Link: http://martens.ms/?q=playground.html

    Greets,
    Chris

    • martensms

      Well, again (stripped out the opening and close tag)

      Well, pretty cool article.
      It’s nice to see developers getting to HTML5 already – also if IE doesn’t support new tags when not using e.g. document.createElement(‘header’) before.

      But I’ve got a question: Why are you using div.single_post instead using article.single_post?

      ..using _figure_ only makes sense when you have descriptions or subtitles for images. Using _footer_ inside _figure_ is pretty nasty! There’s _figcaption_ which would make more sense. Well, and then you’ve got the advantage for floating _figure_ instead of div.float =)

      PS: That were only tipps using the tags the right way…hope that helped a bit.

      Have a look at my Playground where I’m testing out pretty anything on HTML5 , CSS3 and their APIs.

      Link: http://martens.ms/?q=playground.html

      Greets,
      Chris

  44. Cynthia

    I âm sure that who chooses to work as web designer makes a choice of heart, a choice of love. He decides to bet any given day on his creativity and his ability of producing an idea and of making it tangible, visible and perceptible for all. Thanks for the post.

    przeprowadzki warszawa

  45. jess

    wow! incredible, thanks for the tutorial..

  46. speedj

    dude, you’re using too much. the whole idea of the semantic web and html5 is to use as much as descriptive tags as possible. using div’s to wrap and stuff is really old fashioned.
    your css is very bad. css is read from right to left. stuff like ’section#archive footer p a’ is very wrong. Google ‘Steve Souders – High Performance Web Sites’ and you’ll understand.

  47. PPeter

    It think you should rethink the layout of your website. This is for example a n extremly long page (look at the size of the scroll handle) and thus very annoying to read. Cheers.

  48. jogesh

    thank to share info.
    i really need this :)

    keep it up man.

  49. Fatih YILDIZHAN

    wonderfull & amazing, thanks a lot!

  50. Siva

    Hey dude… Fantastic Blog.. i’m a Tester and till now i din have much interest on web designing but now im very eager to learn it.. Thx a lot dude…

  51. vector

    Thanks! :-) Very useful… :-)

  52. TheShadow

    Thanks for this awesome tutorial

  53. aey

    this is perfect, thanks for sharing men

  54. MHayes

    Wow… while I have come across MANY HTML 5 / CSS3 tuts… this is glorious… I must read and reread — and then released under GNU — this is too much.

    Thanks is just not enough… but I’ll say it again THANKS. I’m off to study. This is the first time I encountered your blog but — I must come back.

  55. porno

    I especially like the Screen “Supersize”.

  56. abercrombie milano

    Wow… while I have come across MANY HTML 5 / CSS3 tuts… this is glorious… I must read and reread — and then released under GNU — this is too much.

  57. Tag Your Friends

    I’ve seen several talented creative people designing great stuff with HTML5+CSS3 and you definitely are one of them!

  58. webtrendset

    Great tutorial of HTML5.
    Thankyou

  59. Cisco

    Candidates need to obtain CCNA and CCIE certifications for the cause that essential requirement for acquiring this certificate.

    • oral b electric toothbrushes

      I understand that there are a lot of spam lately. Apparently it’s pretty hard for people to grasp the concept that relationships can be mutually beneficial. I can leave a meaningful fantastic comment and add content and essence to one of your pages and you will give me a link in exchange. There are too many takers out there and they aren’t willing to help people out. Take take take! .

    • the best oral b electric toothbrush

      This is exactly the information I wanted. Thank you for writing this post in your website.

  60. Mike

    Great tut! Thanks for posting. Have not read it all yet, but I certainly will.

    OK, so I’m probably a terrible noob, but am I the only one to see the ‘pre’ sections widen when I hover over them? (width changes from 652 px to 604 px) I see it in all major browsers (IE8, FF3.6, Chrome 8, Opera 11, Safari 4).

    Two questoins:
    1. How do you do it (is it some JS trick)?
    2. And why?

    Thanks again!

  61. Jekre

    You are awesome! thanks a ton for creating a tutorial like this.

    Cheers
    Jekre

  62. free bondage

    This is really interesting, You are a very skilled blogger. I’ve joined your rss feed and look forward to seeking more of your magnificent post. Also, I have shared your website in my social networks!

  63. Carrie Rath

    Good recommendations on dogs. I own an 8 yr old golden retriever and I love him to death. Will come back for sure! .

  64. Kaden Hamilton

    Great tutorial! Very helpful!

    -Kaden

  65. John979

    Very nice site! is it yours too

  66. Free Porn

    I’m impressed, I have to say. Really hardly ever do I encounter a blog that’s each educative and entertaining, and let me inform you, you’ve got hit the nail on the head. Your concept is outstanding; the difficulty is something that not enough individuals are speaking intelligently about. I’m very comfortable that I stumbled across this in my search for one thing regarding this.

  67. http://www.pvmgarage.com/2010/04/how-to-create-a-magnifying-glass-icon-in-photoshop/

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  68. http://www.edparton.com/blog/2010/10/choice/

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  69. http://www.lucascobb.com/inspiration-old-tyme-painted-signs/

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  70. http://www.sott.net/articles/show/216860-Is-Atheism-a-Belief-

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  71. http://www.jobrapido.co.uk/?q=vb+wroot

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  72. facebook video

    Sorry for the huge review, but I’m really loving the new Zune, and hope this, as well as the excellent reviews some other people have written, will help you decide if it’s the right choice for you.

  73. videos

    I’ll gear this review to 2 types of people: current Zune owners who are considering an upgrade, and people trying to decide between a Zune and an iPod. (There are other players worth considering out there, like the Sony Walkman X, but I hope this gives you enough info to make an informed decision of the Zune vs players other than the iPod line as well.)

  74. IndellDed

    Каталог смотреть кино онлайн новинки

    Самый нормальный сайт для просмотра фильмов онлайн, который попадался. Просмотр фильмов онлайн бесплатно без регистрации позволяет не скачивать фильм и не тратить время на его загрузку. Лучшие фильмы онлайн собраны здесь.

  75. iphone for free

    hey there fantastic blog website and theme. I’m hoping I’m not bothering you I merely wanted to ask just what wordpress plugin you use to show the latest remarks on your blog? I really wish to do the same for my free iphone 4 page but I cant acquire the plugin or widget for it. Thanks a lot for your time :)

  76. tipLeteOpebrA

    Overview of US restaurants. In-N-Out Burger

  77. illurnaliep

    Hi…

  78. Telma about mobile phones

    Hi I am so delighted I found your blog, I really found you by accident, while I was researching on Askjeeve for something else, Anyhow I am here now and would just like to say thanks for a fantastic post and a all round entertaining blog (I also love the theme/design), I don? have time to read it all at the minute but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read much more, Please do keep up the fantastic job.

  79. free iphone

    hey cool website and web theme. I am hoping I am not pestering you I simply wished to inquire precisely what wordpress plugin you use to display the latest feedback on your blog? I really want to do something similar for my free iphone page however I can’t locate the plugin or widget for it. Thanks a lot for your time :)

  80. webhosting kostenlos

    Hello – I must say, I’m impressed with your site. I had no trouble navigating through all the tabs and information was very easy to access. I found what I wanted in no time at all. Pretty awesome. Would appreciate it if you add forums or something, it would be a perfect way for your clients to interact. Great job

  81. general car insurance

    This website is really a stroll-by for the entire info you needed about this and didn’t know who to ask. Glimpse here, and you’ll definitely discover it.

  82. Delia mobile dual

    When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several e-mails with the same comment. Is there any way you can remove me from that service? Appreciate it!

  83. cheap car insurance in florida

    very good put up, i definitely love this website, carry on it

  84. penis enlargement

    RE: It’s so hard to get backlinks these days, honestly i need a backlink by comments on your blog / forums or guestbook to make my website appear in search engine. I am getting desperate Now! I know you’ll laugh while reading this comment !!! Here is my website vimax|bigger penis|penis enlargement pills|penis enlargement pills|penis enlargement|download youtube videos|penis enlargement pills|Vimax|penis enlargement I know my comments do not relate to the topic, but PLEASE HELP ME!! APPROVING MY COMMENT!
    So what is the problem my friends, I’m collecting backlinks to make my website vimax|bigger penis|penis enlargement pills|penis enlargement pills|penis enlargement|weight loss program|penis enlargement pills|Vimax|penis enlargement appear in the search engines!! whether are the comments look like a crap!
    BH2011titit

  85. Web designer Singapore

    Give more ideas for the future in the next article in this blog. I’ll waiting for that ideas.

  86. cheap car insurance in florida

    very nice put up, i actually love this web site, keep on it

  87. Gorgyh

    Hi Guys,

    As this is my initial submit here I would like to share something helpful with you all , the other day I ran across among the best website online , you can add your online back links as well as ad banners coming from clickbank.com,offers of cpa,and so on.. its still fresh site yet I do believe truly useful to each internet marketing out there

    Link : http://craigpress.com/offer/

    in the event that publish beneficial do not forget to say thanks :)

  88. penis health

    Thanks as a replacement for winning the at all times to talk atop of this, I stand strongly far it and honey erudition more on this topic.
    Naturamax

  89. acai testimonials

    Acai berry??(weight loss)??? H E L P?okay so i heard from multiple sources that acai berries can help you loose weight. i know that there is a make of the acai berry or something like that. would i loose weight if i took the acai berry vitamins say from walmart or cvs?the acai berry vitamins say that its made from pure acai berries, exactly the same thats in certain dietary supplements? would it still have effect on my weigh loss? please answer. and thanks in advance. 10 points to the best answer! :)

  90. liciliseo

    viagra buy cialis online buy viagra

  91. Edgar Leghorn

    Hands down, Apple’s app store wins by a mile. It’s a huge selection of all sorts of apps vs a rather sad selection of a handful for Zune. Microsoft has plans, especially in the realm of games, but I’m not sure I’d want to bet on the future if this aspect is important to you. The iPod is a much better choice in that case.

  92. dedaBrurbibre

    Zithromax Stomach Ache Loose Stools Lyrica Vs Wellbutrin Ativan 2Mg Buy Zithromax And Sun Sensitivity Flonase Commercials Cialis Blood Pressure Cialis Prostate Zetia No Prescription Wellbutrin Sr Buy Clonazepam 2Mg Zithromax Gonorrhoea Nursing Indications For Zithromax How Long Before Wellbutrin Starts To Work Borderline Personality Disorder Will Zithromax Cure Gonorrhea Buy Lorazepam 2mg Switch From Cymbalta To Wellbutrin Cialis And Back Pain Prostate Cancer Cialis Drug Cialis Benifets Wellbutrin Sr 150mg Buy Download Tadalafil Prescription Online Cialis Yahoo Cialis Buy Cheap Brand Cialis Medication Headache Wellbutrin Dry Mouth Buy Cialis 20 Mg Cialis Shortness Of Breath Zithromax For Otitis Streptococcus Pneumoniae Zyvox And Wellbutrin Prescription How Long Does Cialis Stay In Your System Expiration Date Zithromax 250 Mg Buy Cialis In Young Wellbutrin Sr Online Consultation Now Viagra Vs Cialis Professional

  93. regcure

    thought provoking comments here

  94. webhosting joomla

    nsightful thoughts here. Are you certain this is the best way to look at it though? My experience is that we should pretty much live and let live because what one person thinks just — another person simply doesn’t. People are going to do what they want to do. In the end, they always do. The most we can yearn for is to highlight a few things here and there that hopefully, allows them to make just a little better informed decision. Otherwise, great post. You’re definitely making me think! –Barry

  95. Mitchel Cogdell

    thats a good article. Thank you i wish your article will be continue.

  96. loaccefly

    Если Вы планируете купить помощник декоратора

    Текстильный дизайн. В нашем салоне предоставлен широкий выбор куплю ковер ручной работы

  97. Gregory Despain

    I was recommended this web site by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my trouble. You’re amazing! Thanks!

  98. Kasandra Driere

    Can I just say what a relief to find somebody who really knows what theyre talking about on the internet. You positively know tips on how to convey a problem to gentle and make it important. More people need to read this and perceive this side of the story. I cant imagine youre not more popular since you positively have the gift.

  99. Building Backlinks

    Great blog here i like all the information thats being shared, congratulations.

  100. Andrew A. Sailer

    The Zune concentrates on being a Portable Media Player. Not a web browser. Not a game machine. Maybe in the future it’ll do even better in those areas, but for now it’s a fantastic way to organize and listen to your music and videos, and is without peer in that regard. The iPod’s strengths are its web browsing and apps. If those sound more compelling, perhaps it is your best choice.

  101. motors security system

    I’d be a refrigerator, I’m full of things that satisfy the people I care for and their friends… weird I know but I’m hella hungry right now.

  102. webhosting vergleich

    Thanks for sharing, please keep an update about this info. love to read it more. i like this site too much. Good theme ;).

  103. jameco industries

    Nahh, but I did burn pop corn. It was all black. I put it in for 5 minutes and it was all black XD

  104. Wekendanind

    Добро пожаловать играть в казино онлайн
    играть бесплатно слоты без регистрации без смс онлайн

  105. christophe

    Very good tutorial thanks !!
    I followed it to create my business website:
    http://www.rougesurblanc.com

  106. Pharme488

    Hello! bbegddd interesting bbegddd site!

  107. Tibetan Jewelry

    Thanks for the essay loaded with so many news. Stopping by your essay helped me to get what I was looking for.

  108. auto approve backlinks

    I found your weblog site on google and verify a number of of your early posts. Continue to maintain up the excellent operate. I just extra up your RSS feed to my MSN Information Reader. Seeking forward to reading extra from you afterward!…

  109. IaJmjF

    qshkQtWS

  110. Marcel Spoerl

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why throw away your intelligence on just posting videos to your blog when you could be giving us something informative to read?

  111. payday loan lenders

    Precisely what web browser is this internet page optimized for Chrome?

  112. milwaukee combo

    I used to be very happy to search out this internet-site.I wanted to thanks to your time for this excellent learn!! I definitely having fun with every little bit of it and I have you bookmarked to take a look at new stuff you blog post.

  113. oiculesEo

    thanks for this nice post 111213

  114. Pseultall

    Zithromax Z Pak Generic Oral Suspension [url=http://www.box.net/shared/p055enuo19 ]Diazepam 5mg Buy[/url] Unmarked Valium Generic Name Vitamin D And Osteoporosis Bone Health Valium For Dog Breeds Drug Test For Diazepam [url=http://www.box.net/shared/ym7hpmk8sc ]Buy Diazepam 10mg[/url] Zithromax Long Term Otitis Media Cialis Contradictions 2g Azithromycin Zithromax Percocet Valium Stronger [url=http://www.box.net/shared/dgbkgx6gk2 ]Valium 10 mg Buy[/url] Diazepam Symptoms Ginseng Nausea Health Benefits Diabetes Nz Healthy Food Choices Valium L522 Buy Generic Cialis With Online Consultation [url=http://www.archive.org/details/HealthcareDegreeOnline ]Health Care Degree[/url] Seropositive Arthritis Health Pink Eye Zithromax Prescription Significance Of Asthma Health Natural Alternatives Cialis [url=http://www.box.net/shared/dfr9r0rrm6 ]Cialis 20mg Or 10mg[/url] Valium Rebound Grammar Zithromax Hoosier Healthwise Plan B Insurance Program Nutrilite Saw Palmetto Healthy Prostate [url=http://www.box.net/shared/opnhfe5ase ]Zithromax 250mg[/url] Tools To Check Blood Pressure Health Diazepam Autoinjector Post Cialis Canada

  115. queclassunc

    thanks for this nice post 111213

  116. dukan diet

    There may be noticeably a bundle to know about this. I assume you made sure nice factors in features also.

  117. garage door repairs london

    I am usually to blogging and i really admire your content. The article has really peaks my interest. I am going to bookmark your site and preserve checking for new information.

  118. pheromones that are real

    Hmmm I cannot seem to access a couple of your links. I wonder if it is my firefox browser or your homepage.

  119. Pregnancy For Dads

    A Practical Pregnancy Diet Plan

  120. milwaukee drill 18v

    You made some first rate factors there. I appeared on the web for the problem and located most individuals will associate with along with your website.

  121. Franklyn Hollo

    I just want to say I am all new to blogs and really enjoyed your web site. Likely I’m want to bookmark your blog . You actually have beneficial writings. Many thanks for sharing your website page.

  122. Saurabh Nagar

    Awesome tutorial man!! but i wonder why is my firefox in trouble, any hack for that?

  123. EzineArticles

    There is obvisously a lot to know about this. I think you made some good points in Features too. Great Job.

  124. salony slubne

    I am going to go ahead and bookmark this post for my brother for the study project for school. This is very interesting. This post truly made my day suknie na ślub.. Can I give you an opinion? I just wanted to take a minute to say thanks for posting this… The way you write make it truly trouble-free to read.. Use a good day!

  125. acne scar treatments

    I stumbled upon your site in bing. And I will be back next time, thanks.

  126. best acne scar treatments

    After reading your post, I thought your ideas were very simple but as I kept reading on, I do see you have a point. Keep on writing, I will keep on stopping by to read your new content.

  127. Luigi Fulk

    Hey there! I’m a first time reader of your blog…wanted to let you know that its very informative and to keep up the great work! Looking forward to your future articles!

  128. natural beef jerky

    I understand that there are a lot of spam lately. Apparently it’s pretty hard for people to grasp the concept that relationships can be mutually rewarding. I can leave a meaningful great comment and add content and substance to one of your pages and you will give me a link in exchange. There are too many takers out there and they aren’t willing to help people out. Take take take! .

  129. Apple iPod shuffle 2 GB Blue

    Howdy! I just would like to give a huge thumbs up for the good information you might have here on this post. I will likely be coming again to your blog for extra soon.

  130. Shenna Rosella

    hi, solid web log, just I don’t see how to add your website in my rss reader. Could are Assist me please?

  131. casino

    Jouez aux machines à sous sur le meilleur casino en ligne

  132. Sleeping Basics When Pregnant

    how to send you an email? let us get closer

  133. internet monitoring

    This is a good look into the arena of this subject. I have gained a lot from you and am thankful. I will bookmark it and let other folks know about it. Be Good!

  134. recommended books for children

    If you people have nothing to say about the post topic then do not say anything at all. You guys are obviously just spamming. Please refrain from such indecent behavior .

  135. best books for children

    You have a really useful homepage. I have been here reading for about 40 mins. I am a newbie and ur knowledge is very useful to me.

  136. blue mountain coffee

    You have a very useful blog. I have been here reading for about 30 mins. I’m a new and your education is very useful to me.

  137. scrapebox

    There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM

  138. top colon irrigation

    I found your website in google. And I’ll be back next time, thanks.

  139. tankyek

    This actually answered my drawback, thanks!

  140. sinema izle

    your text is really good. i will share your article on facebook and twitter.

  141. oral b electric toothbrush whiten teeth

    I appreciate the time you put in this work or in this article. Although you have interesting ideas, I really cannot agree with them. I’m sure there are better ways to walk through this difficult situation. Not trying to insult or be stupid or anything .

  142. viagra

    MgYALCf http://bjfqtv.com/ xbfVxbM [url=http://jbgzxp.com/]xbfVxbM[/url]

  143. best pheromone cologne

    Can I give you an opinion? Do you think you could add a couple more in the way of content in this post? I think youve got some good points, but I’m just not sold. Maybe you could add a few more resources to your blog.

  144. http://www.howtogetmyexback.net/

    There are some attention-grabbing cut-off dates in this article but I don’t know if I see all of them heart to heart. There’s some validity however I will take maintain opinion till I look into it further. Good article , thanks and we would like more! Added to FeedBurner as effectively

  145. Lashaun x431 pc center

    Hello! Do you know if they make any plugins to help with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good results. If you know of any please share. Thanks!

  146. fdasf

    test

  147. Annika Thielges

    Awesome website you have here by the way

  148. Target Promo Code

    Hey there just wanted to give you a quick heads up. The words in your post seem to be running off the screen in Firefox. I’m not sure if this is a formatting issue or something to do with browser compatibility but I figured I’d post to let you know. The design and style look great though! Hope you get the issue fixed soon. Cheers!

  149. Kat Skinner

    The layout of the thumbnails, meta data and post excerpt from this article was a major influence for my current site design http://www.katskinner.com. Thanks for the inspiration!

  150. Matt Smith

    Looks like the html5 spec has changed since you published this. Just tried the demo and the page was all sorts of garbled in the most recent Chrome and Firefox betas.

    Ironically, your compatibility layer made the ie8 version work perfectly though. :p

  151. Hospital

    Thanks for this very useful info you have provided us. I will bookmark this for future reference and refer it to my friends. More power to your blog

    Hospital
    Porn
    mp3

  152. Zigi

    the project looks broken in Chrome 10.. now! what’s the cause?

    • cga

      It is broken not only in Chrome but in *any* HTML5 capable browser but Safari on Mac.

      I fixed it by adding “figure” (and figcaption because i use that) to the very first declaration:

      body, div, h1, h2, h3, p, ul, ol, li, img, header, section, aside, footer, button, figure, figcaption {

      hope this help everyone.

  153. how do i jump higher

    Have you ever thought about including a little bit more than just your articles? I mean, what you say is valuable and everything. However imagine if you added some great images or video clips to give your posts more, “pop”! Your content is excellent but with images and video clips, this site could undeniably be one of the most beneficial in its niche. Amazing blog!

  154. Emma

    cialis en ligne rien de mieux

  155. youporn.com

    Youplaisir.com is from far the number 1 website in france in April 2011

  156. Tim Nam

    Hi admin,
    Your tutorial is very useful for a HTML5 beginner like. I will read it again & follow your guides carefully. Thank alot for sharing.

    Tim

  157. Tutorial Lounge

    i really like your technique and using in my roundup. thanks

  158. business plan goals

    can you suggest me best book to learn html5

  159. rihana0786

    Amazing work! The comprehensive data given was extremely helpful. I am hoping you carry on with the great job done.
    Locksmith Norwalk

  160. technocket

    very good article ,thanks for this information,
    ilike this

  161. Shellie Ribaudo

    Good post. I study something more challenging on completely different blogs everyday. It should always be stimulating to learn content from other writers and follow somewhat something from their store. I’d prefer to make use of some with the content on my weblog whether or not you don’t mind. Natually I’ll provide you with a link in your internet blog. Thanks for sharing.

  162. pissing tube

    Watch hundreds of completely free peeing clips!

  163. Spanferkelgrill

    But a smiling visitant here to share the love (:, btw great style and design .

  164. Patsy Kry

    Hiya, I am really glad I have found this info. Nowadays bloggers publish just about gossip and web stuff and this is really frustrating. A good blog with interesting content, that’s what I need. Thank you for making this web-site, and I will be visiting again. Do you do newsletters? I Can not find it.

  165. Ifeoma Beard

    hi there %BLOGINTITILE% owner. i want to say that %BLOGINTITLE% is actually nice and the post was excellant. it appears that you’ve got lots of visitors on your blog. i have started off blogging couple of weeks back and i’m still struggling to get any visitors to my blog. i would really really like it if you ever go to my blog and comment on the posts. even though the blog is entirely new, still there is certainly some great content on it. i hope you’ll enjoy reading it. Cheers Ifeoma Beard

  166. Martin

    I have been here reading for about 30 mins.

  167. HL

    Hi,

    Excellent walk-through!

    But UI breaks when opened in Firefox 4. Can you suggest the way to resolve it?

    Thanks.

    HL

  168. vaporizer

    Nice tips ! I’m just getting on html

  169. cell phone tips

    I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. Personally, if all webmasters and bloggers made good content as you did, the internet will be a lot more useful than ever before.

  170. Kitchen Colours

    Lol! That is funny! Me like your site.

  171. Curtis Wiens

    I noticed this site does not work in Chrome.

  172. Wiaty ogrodowe

    Is that going well with IE, firefox and Opera?
    P.S. Very good post.

  173. Puebla real estate

    Simply want to say your article is as amazing. The clarity in your post is just excellent and i could assume you are an expert on this subject. Fine with your permission allow me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please keep up the rewarding work.

  174. jouer au poker gratuitement

    jeux de poker gratuit sans telechargement poker gratuit hold em poker online sfr casio online strip poker flash service jouer au poker jeux de poker en anglais jouer au poker gratuit sans téléchargement auchan online meilleur jeux de poker en ligne poker flash valeur des jetons au poker jouer a la belote poker

  175. Disney vacation tips

    This web site is known as a stroll-via for all the information you wished about this and didn’t know who to ask. Glimpse right here, and also you’ll definitely discover it.

  176. Adventures

    Nice post. Very helpful :)

  177. Der Kieler

    Thanx a lot for that one …!

  178. promise rings for girlfriend

    Hey you know what, I am still dependent to those free templates.

  179. georgetown youth baseball

    i do not believe they are using scapelist

  180. z

    Comfortably, the post is during truthfulness a hottest on this subject well known subject matter. I agree with ones conclusions and often will desperately look ahead to your updaters. Saying thanks a lot will not just be sufficient, for ones wonderful ability in your producing. I will immediately grab ones own feed to stay knowledgeable from any sort of update versions. get the job done and much success with yourbusiness results!

  181. best hair straighteners

    Thanks for the tutorial, it really helped me a lot as I just started to learn about CSS, always wanted to modify and make my site look slightly different than the original theme, thanks again!

  182. Luxury Mykonos Villas

    Really informative post. Thank you!

  183. Trek Bikes

    Attractive section of content. I just stumbled upon your web site and in accession capital to assert that I acquire actually enjoyed account your blog posts. Anyway I’ll be subscribing to your feeds and even I achievement you access consistently rapidly.

  184. Maan

    Thanks for sharing , its really nice :)

  185. papi underwear

    Pretty section of content. I just stumbled upon your web site and in accession capital to assert that I get in fact enjoyed account your blog posts. Any way I’ll be subscribing to your feeds and even I achievement you access consistently quickly.

  186. Cloud9

    What version of html do programs like Dreamweaver 4 use?

  187. youporn

    Youcharme is becoming one of the best website without ads in France in 2011

  188. bird feeder

    good stuff, thank you for the great content you’ve put up on you blog.

  189. Abu dhabi city tour

    The most important thing is to share the true said as i can see it around.

  190. minimum

    Thanks for this very helpful tutorial ..!

  191. plate joiners

    That’s really true said,i am some how agree with what you said.

  192. plate joiner

    It’s a great opportunity to be here,Once again i will visit this page.

  193. chapter5

    not working in firefox 5.

  194. Brazos Place Condos

    The Brazos Place Condos are one of Austin’s most recent office building to condo conversion projects and it has a very rich history. Hugo Franz Keuhne, founder of the School of Architecture at the University of Texas, designed The Commodore Perry Hotel in 1948. The hotel was converted into an office building and renamed One Commodore Plaza in 1984. In 2006 – 2007, under the direction of Pomeroy Reinhart Stration Development (PRS Development), it has been transformed into mixed-use development offering luxury condominium residences, a smartly-planned office condominium and two levels of convenience and retail.

  195. Bingo

    Thanks for your comment ;)

  196. kifit

    thx for the post dude

  197. streaming

    nice post man, i love it

  198. vieilles

    nice post dude, you rock

  199. film x

    wouhah ! A great post man

  200. Renate Poper

    This was definitely a great and enjoyable post. On the other hand I am having trouble getting this site to show correctly with this chrome browser, any kind of suggestion what exactly could be the problem?

  201. Discount Hermes

    The crucial indicate realize is that this is applicable not just in , but also to.

  202. Blackjack

    Superbe article qui m’a aidé a optimiser le design de mon site de blackjack.

  203. Downloadcrackedapps

    Realy good site,thank you so much for your time in writing the posts

  204. tabletpcunion

    Great post. You show very detailed skills. I will try it. thanks for sharing.

  205. Sri

    Great tutorial… but why would anyone like to sit and code 10 to 20 pages of code.. to achieve something tat can be easily done using flash..!!

  206. Clara

    Hi I downloaded the images and typed up the code but the images wouldn’t show on the browser, then I copied and pasted the same code directly from the site and they showed up without a hitch, I’ve compared the two with a fine tooth comb and they’re identical but the images refuse to show when I type the code in? If you have any idea why this may be happening I’d appreciate your help. Thanks.

  207. cleveland granite

    This is certainly one of the better tutorials I’ve seen in a while. By the way, I like the look and layout of this blog – it’s easy on the eyes.

  208. poker

    Thanks for expressing your ideas with this blog. I’ve learned quite a few important things by means of your post.

  209. cheap hats

    Thank you! This is a good article! Thank you for sharing!

  210. Evan

    Html 5 is indeed the way to go. Great way to design nice looking websites.

  211. Lena Xs

    The steps are easy to follow!Very good work!fgfdh Irina T.

  212. rowruffdesign

    It doenst work on Google Chrome…
    you get a really wierd upset from the design

    greats

    • Anon

      same for the latest version of firefox on macbook…
      but from the looks of the images, great design and amazing work overall!

  213. Renato Reis

    Adorei!

  214. glass whiteboard

    I think this is one of the most vital information for me. And i am glad reading your article. But should remark on few general things, The website style is wonderful, the articles is really great : D. Good job, cheers

  215. Britanny weight

    It will hard to learn .. huhuhu

  216. Zoraida Blanquart

    Excellent work over again! I am looking forward for your next post.

  217. Irwin Vanelli

    Awesome share it is without doubt. My boss has been seeking for this content.

  218. fieldrunners hd

    Thanks i love your article about Touch The Future: Create An Elegant Website With HTML 5 And CSS3 | PVM Garage

  219. Dan Rizzo

    This post was very nicely written, and it also contains many useful facts. I appreciated your professional manner of writing this post. You have made it easy for me to understand.

  220. Calories For Weight Loss

    We are a group of volunteers and starting a new scheme in our community. Your site offered us with valuable information to work on. You’ve done an impressive job and our entire community will be grateful to you.

  221. Fat Cow Hosting

    What youre saying is completely true. I know that everybody must say the same thing, but I just think that you put it in a way that everyone can understand. I also love the images you put in here. They fit so well with what youre trying to say. Im sure youll reach so many people with what youve got to say.

  222. yard trimmer

    Great blog here! after reading, i decide to buy a sleeping bag ASAP :)

  223. Drug Rehab

    free drug rehab if you have insurance check this link out to see if you qualify http://abttc.net/insurance

  224. Evangeline Kreck

    Excellently done posting! If only all bloggers put up this level of high quality content, the internet would be a great deal better place. Congrats!

  225. advertising agencies london

    Hello There. I found your blog using msn. This is a very well written article. I’ll be sure to bookmark it and return to read more of your useful info. Thanks for the post. I’ll certainly comeback.

  226. sex cams

    fotzen ficken

  227. Pozycjonowanie Anglia

    Pozycjonowanie Anglia

  228. live strip

    fotzen ficken

  229. weddings online

    I will be back soon and follow up with a response.

Trackbacks

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US