minimal
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="An minimal site format" />
<meta name="keywords" content="blog" />
<style type='text/css'>
body
{
margin: 0;
padding: 0;
background: #e2e6e9;
font: normal 12px Verdana, Arial, Sans-Serif;
text-align: left;
}
/* Links */
a:link { color: #273A4D; text-decoration: none;}
a:visited { color: #273A4D; text-decoration: none; }
a:hover, a:active { color: #ffffff; background-color: #343838;}
h3 a:link { color: #3f4f5c; text-decoration: none; }
h3 a:visited { color: #3f4f5c; text-decoration: none; }
h3 a:hover, a:active { color: #FFFFFF; }
/* Html Elements */
h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 10px 0; padding: 0; }
h1 { font-size: 36px; color: #293138;}
h2 { font-size: 28px; color: #353F47;}
.post-title h2 {color: #3f4f5c; font-weight:bold; text-transform: uppercase; margin-bottom:5px;}
h3 { font-size: 24px; color: #3f4f5c;}
h4 { font-size: 20px; color: #3f4f5c; }
h5 { font-size: 16px; color: #3f4f5c;}
h6
{
font-size: 13px;
text-transform: uppercase;
margin: 5px 0;
font-weight: bold;
}
ul { line-height: 1.8em; list-style-type: circle; color: #333333; }
ol { line-height: 1.8em; color: #333333;}
blockquote
{
color: #555555;
background-color: #eeeeee;
border: 1px solid #cfcfcf;
padding: 5px 10px;
margin: 10px 20px;
}
code { font-family: Consolas, Verdana, Arial, "Courier New"; }
abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; }
em { font-style: italic; }
strong { font-weight: bold; }
del { text-decoration: line-through; color: #555555; font-size: 11px; }
ins { text-decoration: none; color: #679b3c; }
p em,
cite
{
font-family: Consolas, Verdana, Serif;
}
/* Structure */
#container
{
width: 800px;
margin: 0 auto;
}
#header
{
padding: 0px 0;
}
#navigation
{
float: left;
width: 800px;
background-color: #282d2d;
text-transform: uppercase;
font-size: 14px;
}
#wrapper
{
margin: 0;
padding: 0;
clear: both;
float: left;
width: 800px;
background: #ffffff;
border-left: solid #dde0e1 2px;
border-right: solid #dde0e1 2px;
border-bottom: solid #dde0e1 2px;
}
#content-wrapper
{
width: 580px;
float: left;
}
#content
{
float: left;
padding: 27px;
line-height: 1.6em;
text-align: justify;
}
#content .commentbox {
color: #918E85;
background-color: #FBF4E2;
padding: 2px 5px 2px 5px;
border-top: solid #D4CBB4 1px;
border-bottom: solid #D4CBB4 1px;
text-transform: uppercase;
font-size: 11px;
margin-bottom: 10px;
}
#comments {
color: #4A4A4A;
padding: 0px;
}
#comments .comment {
padding: 10px;
background-color: #F6F6F6;
border-bottom: 20px solid #ffffff;
}
#comments .comment cite {
font-size: 14px;
font-weight: bold;
font-style: normal;
}
#sidebar-wrapper
{
margin-left: 5px;
margin-top: 25px;
margin-bottom: 25px;
width: 180px;
float: left;
background-color: #F3F2F2;
border: solid #E6E4E4 1px;
}
#sidebar
{
float: left;
width: 150px;
padding: 15px;
color: #5b5c5c;
font-size: 9pt;
text-align: left;
}
#box
{
clear: both;
}
#footer
{
clear: both;
float: left;
width: 800px;
margin: 0px 0;
color: #555555;
text-align: center;
padding: 10px 0;
background: #cfcfcf;
}
/* Navigation */
#navigation ul
{
margin: 0 5px;
float: left;
width: 800px;
padding: 0px 0;
list-style-type: none;
}
#navigation li { float: left; margin: 0 0 0 5px; padding: 0; }
#navigation a:link,
#navigation a:visited
{
float: left;
display: block;
color: #c6c6c6;
padding: 5px 10px;
}
#navigation ul li.current_page_item a:link,
#navigation ul li.current_page_item a:visited,
#navigation ul li.current_page_item a:hover,
#navigation ul li.current_page_item a:active
{
color: #ffffff;
background-color: #414646;
border-left: solid #6b7070 1px;
border-right: solid #6b7070 1px;
}
#navigation ul li.search
{
float:right;
margin-right: 10px;
}
/* Header */
#header h1 {color: #191a1a; font-weight: bold; margin-bottom: 10px; }
#header h1 a {width:750px; height: 200px; background: transparent url() center center no-repeat; }
#header h1 a:link,
#header h1 a:visited
{
color: #333333;
}
#header h1 a:hover,
#header h1 a:active
{
color: #000000;
background-color: transparent;
}
#header h1 span {color:#5b5c5c;}
/* Content */
.date {
margin-left: 3px !important;
padding: 0;
color: #ccc !important;
font-family: Verdana, Arial, Sans-Serif !important;
letter-spacing: -1px;
font-weight: normal;
font-size: 24px;
text-transform: lowercase;
display: inline;
}
h3.post-title {
display: inline;
}
h3.post-title a {
text-transform: lowercase;
color: #3f4f5c !important;
font-family: Verdana, Arial, Sans-Serif !important;
letter-spacing: -1px;
font-weight: bold;
font-size: 24px;
border-bottom: none !important;
}
h3.post-title a:hover {
text-decoration: none!important;
color: #222 !important;
background: transparent;
}
/* Sidebar */
#sidebar h3 { font-size: 18px; color:#5b5c5c; text-transform: uppercase; border-bottom: solid #5b5c5c 2px;}
ul#sidenotes
{
margin: 0;
padding: 0;
line-height: 1.6em;
list-style-type: none;
}
ul#sidenotes li
{
padding: 5px;
border-bottom: 1px dotted #cccccc;
}
ul#sidenotes li:hover
{
background-color: #eeeeee;
}
ul#sidenotes li .title
{
display: block;
font-weight: bold;
}
ul#sidenotes li .date
{
display: block;
color: #777777;
font-size: smaller;
}
ul#sidenotes li .content
{
display: block;
}
ul#sidenotes li a:link,
ul#sidenotes li a:visited
{
padding: 0;
color: #333333;
}
ul#sidenotes li a:hover,
ul#sidenotes li a:active
{
background-color: transparent;
}
/* Footer */
#footer a:hover,
#footer a:active
{
color: #003355;
background-color:transparent;
}
</style>
<title>minimal</title>
</head>
<body>
<div id="container">
<div id="header"><h1>mini<span>mal</span></h1></div>
<div id="wrapper">
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li class="current_page_item"><a href="index.html">Journal</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Folio</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div id="content-wrapper">
<div id="content">
<h3 class="post-title"><a href="#">Post Title</a></h3><span class="date">10.07.08</span>
<p>Lorem <a href="#">ipsum dolor</a> sit amet, consectetuer adipiscing elit. Fusce lorem ligula, lobortis vitae, imperdiet nec, tempor at, lectus. Pellentesque vitae lorem. Sed mauris. Praesent tempor eros ac sapien. Maecenas adipiscing, nisl id tempor imperdiet, urna dui dignissim pede, varius fermentum urna dui ac ante. Sed consequat aliquet enim. Curabitur sem sem, mattis pellentesque, tincidunt eu, rhoncus sed, purus. Sed id massa. Vivamus consequat, quam eget laoreet consequat, urna nisl commodo nisl, nec convallis quam ligula venenatis nulla. Nunc viverra. Aliquam adipiscing, velit condimentum molestie tempus, ante tellus feugiat mauris, vitae hendrerit dui tellus vitae dui. Proin vel pede a pede elementum bibendum. Proin scelerisque velit ut lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus a sapien. Sed ullamcorper, mi sit amet semper tincidunt, sem sem tincidunt tortor, non ultricies dui lorem id dolor. Nunc diam. Aenean arcu nibh, hendrerit eu, feugiat sit amet, pulvinar eget, dui. Integer interdum pretium ligula.</p>
<h3>A quote</h3>
<blockquote><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus a sapien. Sed ullamcorper, mi sit amet semper tincidunt, sem sem tincidunt tortor, non ultricies dui lorem id dolor. Nunc diam. Aenean arcu nibh, hendrerit eu, feugiat sit amet, pulvinar eget, dui. Integer interdum pretium ligula....</p></blockquote>
<h3>An Unordered List</h3>
<ul>
<li>This is a list</li>
<li>This is a list</li>
<li>This is a list</li>
<li>This is a list</li>
<li>This is a list</li>
</ul>
<h3>An Ordered List</h3>
<ol>
<li>Dance</li>
<li>Live</li>
<li>Breathe</li>
</ol>
<h2>This is another really big header</h2>
<h3>This one isn't ridiculously big</h3>
<h4>Details are important</h4>
<div class="commentbox">Posted by A. Bloggar | 10 July 2008 | Comments</div>
<div id="comments">
<h4>3 Responses to “Post Title”</h4>
<div class="comment">
<cite>Commenter:</cite>
<br />
<p>I really like to test comments</p>
<small><a href="#comment-22" title="">June 16th, 2008 at 9:15 pm</a></small>
</div>
<div class="comment">
<cite>Another Commenter:</cite>
<br />
<p>I really like to test comments</p>
<small><a href="#comment-22" title="">June 16th, 2008 at 9:15 pm</a></small>
</div>
<div class="comment">
<cite>Yet another commenter:</cite>
<br />
<p>I really like to test comments</p>
<small><a href="#comment-22" title="">June 16th, 2008 at 9:15 pm</a></small>
</div>
</div>
</div>
</div>
<div id="sidebar-wrapper">
<div id="sidebar">
<h3>Categories</h3>
<ul id="sidenotes">
<li><a href="#">Academics</a></li>
<li><a href="#">Life</a></li>
<li><a href="#">Personal</a></li>
<li><a href="#">That other stuff</a></li>
<li><a href="#">Design</a></li>
</ul>
</div>
</div>
<div id="footer">By <a href="http://kismet.blogsite.org">Kismet</a>. Original design <a href="http://www.nikhedonia.com/showcase/entry/one-penny/">here</a> by SimplyGold.</div>
</div>
</div>
</body>
</html>
Related examples in the same category