<!DOCTYPE html>
<html>
<head>
<title>Judul Website</title>
<style>
body{background:#ccc;margin:0;padding:10px 0px;font-size:13px;font-family:tahoma;color:#333}
.wrapper{width:950px;margin:auto}
header{height:150px;background:#e8f0f6}
header h1{margin:0px;padding:20px 10px 5px 10px;font-size:24px}
header h2{margin:0px;padding:0px 10px 10px 10px;font-size:18px}
nav{background:#2f5e79}
nav ul{list-style:none;margin:0;padding:0}
nav ul li{list-style-type:none;display:inline-block}
nav li a,nav li a:visited{color:#fff;text-decoration:none;padding:10px 16px;display:block}
nav li a:hover{background:#20455c}
section{overflow:hidden}
article{overflow:hidden;width:700px;float:left;background:#fff}
article h1.title{margin:0;padding:2px 0px;color:#00009e;font-size:22px}
article p{margin:2px 0px 6px 0px;line-height:155%}
article .post-info{color:#777}
aside{overflow:hidden;width:250px;float:right;background:#eee}
aside h2{margin:0;padding:6px 10px;background:#00009e;color:#fff;font-size:18px}
aside .sidebox{padding:10px;margin-bottom:10px}
footer{padding:10px;background:#000;color:#f3f3f3;text-align:center}
.pad{padding:10px}
img.left{float:left;margin-right:5px}
img.right{float:right;margin-left:5px}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>My Website</h1>
<h2>Slogan Website</h2>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Menu</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Contact Us</a></li>
</ul>
</nav>
<section>
<article>
<div class="pad">
<h1 class="title">Judul Utama</h1>
<div class="post-info">Oleh Ari Julianto | 27 Juni 2014 jam 22:57 | Dibaca 123 kali</div>
<p><img src="home.png" class="left" />Konten paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah</p>
<p><img src="home.png" class="right" />Konten paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah paragrah</p>
</div>
</article>
<aside>
<h2>Title Blok 1</h2>
<div class="sidebox">
konten sidebox 1</div>
<h2>Title Blok 2</h2>
<div class="sidebox">
konten sidebox 2</div>
<h2>Title Blok 3</h2>
<div class="sidebox">
konten sidebox 3</div>
</aside>
</section>
<footer>Copyright © 2014. My Website</footer>
</div>
</body>
</html>