HTML:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Enterprise by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" /></head>
<body>
<div id="header">
<h1>my web </h1>
<h2>by dedyk suntoro atmojo </h2>
</div>
<div id="content">
<div id="colOne">
<div class="post">
<h2 class="title">Welcome to MY WEB!</h2>
<h3 class="posted">Posted by Dedyk</h3>
<div class="story">
<p>Blog ini dibuat dengan adanya tugas pemrograman web 2. Dan harapan kedepan bisa lebih berkembang. </p>
</div>
<div class="meta">
<p> </p>
</div>
</div>
<div class="post">
<h2 class="title">Tentang Penulis </h2>
<h3 class="posted">Posted by Dedyk</h3>
<div class="story">
<p>Biodata:</p>
<ul>
<li>Nama: Dedyk Suntoro Atmojo </li>
<li>NIM: 11201114</li>
<li>Hp.: +6285 63 65 63 07 </li>
</ul>
<p>Harapan dan impian:</p>
<ol>
<li>Memajukan IT Indonesia <a href="#">.</a></li>
<li><a href="#"></a>Ikut mencerdaskan kehidupan bangsa. </li>
<li>Bersaing dengan dunia Internasional </li>
</ol>
<p>Pesan & Kesan : </p>
<blockquote>
<p>“Jadilah dirimu sendiri, jangan minder dengan orang yang lain ”</p>
</blockquote>
</div>
<div class="meta">
<p> </p>
</div>
</div>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<p>Copyright © 2013. Designed by <a href="www.soft-kid.tk"><strong>soft-kid</strong></a></p>
</div>
<div align=center></div>
</body>
</html>
CSS:
body {
margin: 20px 0;
padding: 0;
background: #B9DACA url(images/img1.gif) repeat-y center top;
font: normal small Georgia, "Times New Roman", Times, serif;
color: #336666;
}
blockquote {
font-style: italic;
}
a {
border-bottom: 1px dotted #336666;
color: #874B46;
text-decoration: none;
}
a:hover {
border-bottom-color: #FFFFFF;
}
/* Header */
#header {
margin: 0 auto;
padding: 0 0 1em 0;
}
#header * {
margin: 0;
padding: 0;
border: none;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: #874B46;
}
#header h1 {
font-size: 5em;
}
#header h2 {
font-size: 1em;
}
/* Content */
#content {
padding: 0 0 1em 0;
width: 500px;
margin: 0 auto;
}
/* Column One */
#colOne {
}
#colOne .post {
padding: 1em 0 2em 0;
background: url(images/img2.gif) no-repeat center top;
}
#colOne .title {
padding: 0 0 0 130px;
font-size: 2em;
font-weight: normal;
}
#colOne .posted {
float: left;
width: 100px;
padding: 4px 15px 0 0;
text-align: right;
font-size: 1em;
color: #B9DACA;
}
#colOne .story {
float: left;
width: 370px;
padding: 0 0 0 15px;
}
#colOne .story p, #colOne .story ol, #colOne .story ul {
line-height: 180%;
text-align: justify;
}
#colOne .meta {
clear: both;
padding: 0 0 0 130px;
font-size: x-small;
}
/* Column Two */
#colTwo {
padding: 1em 0;
background: url(images/img2.gif) no-repeat center top;
}
#colTwo ul {
margin: 0;
padding: 0;
list-style: none;
}
#colTwo li {
display: block;
float: left;
width: 33%;
}
#colTwo li ul {
line-height: 160%;
}
#colTwo li li {
display: list-item;
float: none;
width: auto;
font-size: x-small;
}
#colTwo h2 {
margin: 0 0 .5em 0;
padding: 3em 0 0 0;
text-transform: uppercase;
font-size: x-small;
}
#colTwo #textfield1 {
margin-bottom: .5em;
}
/* Footer */
#footer {
clear: both;
margin: 2em;
padding: 1em 0;
background: url(images/img2.gif) no-repeat center top;
}
#footer p {
text-align: center;
font-size: x-small;
}
atau bisa juga download full disini.
Semoga Bermanfaat.
