tardy
<!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" lang="en">
<head>
<title>Tardy | Blog</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type='text/css'>
/*------------------global settings--------------------------*/
body {background:#ededed;
font:12px/1.5 'myriad pro', verdana, sans-serif;
color:#050204;}
/*headings*/
h1, h2, h3, h4, h5, h6 {display:block;}
h1 {font-size:1.5em;}
h2 {font-size:1.38em;
line-height:1.05;
margin-top:1.575em;
margin-bottom:.525em;}
h3 {font-size:1.25em;
line-height:1.11;
margin-top:1.66em;
margin-bottom:0.55em;}
h4 {font-size:1.13em;
line-height:1;
margin-top:1.5em;
margin-bottom:0.5em;}
h5 {font-size:1em;}
h6 {font-size:0.88em;}
/*paragraph*/
p {line-height:1.5;
margin-top:1.5em;
margin-bottom:1.5em;}
/*anchor links*/
a {text-decoration:none;
border-bottom:1px dotted;}
a:hover {border-bottom:none;}
/*list style*/
ol,ul {padding-left:30px;
margin-bottom:1.5em;}
ul {list-style-type:disc;}
ul ul {list-style-type:circle;}
ul ul ul {list-style-type:square;}
ol {list-style-type:upper-alpha;}
ol ol {list-style-type:decimal;}
ol ol ol {list-style-type:lower-alpha;}
/*blockquote*/
blockquote p {padding:5px 20px;
background:url(tardy-images/blockquote.gif) no-repeat top left;
height:1%;}
/*code*/
code {text-align:left;
clear:both;
display:block;
overflow:auto;
padding:10px 20px;
font-family:'lucida console', 'courier new', monospace;}
/*table*/
table {border-collapse:collapse;
clear:both;}
th, td {text-align:left;}
th {padding:5px 10px;
font-weight:bold;}
td {padding:5px 10px;}
/*acronym*/
acronym {text-decoration:underline;
cursor:help;}
/*-------------header---------------*/
/*logo*/
#header {overflow:auto;
font-style:italic;
border-bottom:3px solid #050204;
margin-bottom:20px;
margin-top:20px;}
#logo p.title {font-size:3em;
line-height:1;
font-weight:bold;
letter-spacing:-2px;
margin:0;}
#logo p.title a {border:none;}
#logo span.description {font-weight:bold;
text-align:center;}
/*menu*/
#menu {margin-top:30px;}
#menu ul {list-style-type:none;
text-align:right;}
#menu ul li {padding-left:15px;
display:inline;}
#menu ul li a {border:none;}
/*-------------content------------------*/
#content {padding-left:15px;}
#content img {margin-top:1em;
margin-bottom:1em;}
.recent-posts {overflow:auto;
width:100%;
clear:both;}
a {color:#050204;}
a.more-link {border:none;
padding:5px;
float:left;
clear:both;}
/*--------------sidebar-----------------*/
.sidebar-container {overflow:auto;
width:100%;
padding-left:15px;}
.sidebar-container ol, .sidebar-container ul {padding-left:15px;}
/*--------------footer------------------*/
#footer {margin-top:50px;}
#footer p {margin-bottom:7px;}
/*image alignment classes*/
img.alignright {float:right;
margin:1em 0 1em 1em;}
img.alignleft {float:left;
margin:1em 1em 1em 0;}
img.aligncenter {display: block;
margin-left: auto;
margin-right: auto;}
a img.alignright {float:right;
margin:1em 0 1em 1em;}
a img.alignleft {float:left;
margin:1em 1em 1em 0;}
a img.aligncenter {display: block;
margin-left: auto;
margin-right: auto;}
/*searchform*/
#searchform {margin-top:1.5em;
margin-bottom:1.5em;}
#searchform label {display:none;}
#searchform #s {border:1px solid #050204;
font-family:'myriad pro', verdana, sans-serif;
color:#050204;
width:60%;
padding:3px 5px;
background:none;}
#searchform #searchsubmit {font-family:'myriad pro', verdana, sans-serif;
color:#fff;
background:#050204;
border:1px solid #050204;
padding:2px 2px;}
/*commentlist*/
ol.commentlist {margin-bottom:50px;
list-style-type:none;}
.commentlist ul {border-left:1px solid #050204;
margin-left:23px;
padding-top:15px;
margin-top:15px;
list-style-type:none;}
.commentlist ul li {margin-bottom:20px;
padding-bottom:15px;}
.comment-text p {clear:both;}
.commentlist img {float:left;
position:relative;
bottom:12px;
margin-right:0.75em;}
.reply a {font-family:'myriad pro', verdana, sans-serif;
color:#fff;
background:#050204;
border:none;
padding:3px 7px;}
/*commentform*/
h3#comments, #respond h3 {font-size:1.38em;
line-height:1.05;
margin-top:1.05em;
margin-bottom:1.05em;
display:block;
font-family:'myriad pro', verdana, sans-serif;}
#respond p {margin:3px 0;}
#respond label {display:none;}
#author, #email, #url, #comment {border:1px solid #050204;
font-family:'myriad pro', verdana, sans-serif;
color:#050204;
width:100%;
background:none;
padding:3px 5px;}
#submit {font-family:'myriad pro', verdana, sans-serif;
color:#fff;
background:#050204;
border:none;
padding:3px 5px;}
</style>
</head>
<body>
<!-- main-wrapper -->
<div id="main-wrapper" class="container_12">
<!-- header -->
<div id="header">
<div id="logo" class="grid_6">
<p class="title"><a href="#">tardy</a></p>
<span class="description">Just Another Website Template</span> </div>
<div id="menu" class="grid_6">
<ul>
<li><a href="index.html">Home</a></li>
<li class="current_page_item"><a href="blog.html">blog</a></li>
<li><a href="xhtml-elements.html">xhtml</a></li>
</ul>
</div>
</div>
<!-- end of header -->
<!-- content -->
<div id="content" class="grid_8">
<h1>This is tardy CSS Website Template Demo</h1>
<div class="recent-posts">
<h2><a href="#">Lorem Ipsum Dolor Sit Amet</a></h2>
<img class="alignleft" src="tardy-images/car.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<h3 id="comments">User Responses</h3>
<!-- start od commentlist -->
<ol class="commentlist">
<li class="depth-1">
<div class="comment-info"> <img alt="" src="tardy-images/gravatar.jpg" class="avatar" height="40" width="40" /> <cite> <a href="#">tamad</a> Says: <br />
<span class="comment-data"><a href="#">August 27th, 2009 at 8:08 am</a></span> </cite> </div>
<div class="comment-text">
<p>Comments are great!</p>
<div class="reply"> <a class="comment-reply-link" href="#">Reply</a> </div>
</div>
<ul class="children">
<li class="depth-2">
<div class="comment-info"> <img alt="" src="tardy-images/gravatar.jpg" class="avatar" height="40" width="40" /> <cite> <a href="#">tamad</a> Says: <br />
<span class="comment-data"><a href="#">August 27th, 2009 at 8:15 am</a></span> </cite> </div>
<div class="comment-text">
<p>And here is a threaded comment.</p>
<div class="reply"> <a class="comment-reply-link" href="#">Reply</a> </div>
</div>
</li>
<li class="depth-2">
<div class="comment-info"> <img alt="" src="tardy-images/gravatar.jpg" class="avatar" height="40" width="40" /> <cite> <a href="#">tamad</a> Says: <br />
<span class="comment-data"><a href="#">August 27th, 2009 at 8:15 am</a></span> </cite> </div>
<div class="comment-text">
<p>And here is another threaded comment.</p>
<div class="reply"> <a class="comment-reply-link" href="#">Reply</a> </div>
</div>
<ul class="children">
<li class="depth-3">
<div class="comment-info"> <img alt="" src="tardy-images/gravatar.jpg" class="avatar" height="40" width="40" /> <cite> <a href="#">tamad</a> Says: <br />
<span class="comment-data"><a href="#">August 27th, 2009 at 8:20 am</a></span> </cite> </div>
<div class="comment-text">
<p>Threaded comments are cool!</p>
<div class="reply"> <a class="comment-reply-link" href="#">Reply</a> </div>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="thread-alt depth-1">
<div class="comment-info"> <img alt="" src="tardy-images/gravatar.jpg" class="avatar" height="40" width="40" /> <cite> <a href="#">tamad</a> Says: <br />
<span class="comment-data"><a href="#">August 27th, 2009 at 8:30 am</a></span> </cite> </div>
<div class="comment-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.</p>
<div class="reply"> <a class="comment-reply-link" href="#">Reply</a> </div>
</div>
<ul class="children">
<li class="depth-2">
<div class="comment-info"> <img alt="" src="tardy-images/gravatar.jpg" class="avatar" height="40" width="40" /> <cite> <a href="#">tamad</a> Says: <br />
<span class="comment-data"><a href="#">August 27th, 2009 at 8:35 am</a></span> </cite> </div>
<div class="comment-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div class="reply"> <a class="comment-reply-link" href="#">Reply</a> </div>
</div>
</li>
</ul>
</li>
<li class="depth-1">
<div class="comment-info"> <img alt="" src="tardy-images/gravatar.jpg" class="avatar" height="40" width="40" /> <cite> <a href="#">tamad</a> Says: <br />
<span class="comment-data"><a href="#">August 27th, 2009 at 9:08 am</a></span> </cite> </div>
<div class="comment-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
<div class="reply"> <a class="comment-reply-link" href="#">Reply</a> </div>
</div>
<ul class="children">
<li class="depth-2">
<div class="comment-info"> <img alt="" src="tardy-images/gravatar.jpg" class="avatar" height="40" width="40" /> <cite> <a href="#">tamad</a> Says: <br />
<span class="comment-data"><a href="#">August 27th, 2009 at 9:18 am</a> </span> </cite> </div>
<div class="comment-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<div class="reply"> <a class="comment-reply-link" href="#">Reply</a> </div>
</div>
</li>
</ul>
</li>
</ol>
<!-- end of comment list -->
<!-- start of Commentform -->
<div id="respond">
<h3>Leave a Reply</h3>
<form action="#" method="post" id="commentform">
<p>
<label for="author">Name</label>
<input id="author" name="name" value="Your Name (required)" type="text" tabindex="1" />
</p>
<p>
<label for="email">Your Email</label>
<input id="email" name="email" value="Your Email (not published) (required)" type="text" tabindex="2" />
</p>
<p>
<label for="url">Your Website</label>
<input id="url" name="website" value="Your Website (optional)" type="text" tabindex="3" />
</p>
<p>
<label for="comment">Your Message</label>
<textarea id="comment" name="message" rows="10" cols="20" tabindex="4"></textarea>
</p>
<p>
<input id="submit" class="button" type="submit" value="Submit Comment" tabindex="5" />
</p>
</form>
</div>
<!-- end of commentform -->
</div>
<!-- end of content -->
<!-- sidebar -->
<div id="sidebar" class="grid_3">
<div class="sidebar-container">
<form method="get" id="searchform" action="#" >
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
</div>
<div class="sidebar-container">
<h3>Donate</h3>
<p>If you think you like this one, you might want to donate any amount</p>
</div>
<div class="sidebar-container">
<h3>Sponsors</h3>
<ul>
<li><a href="#">4templates</a>
<ul>
<li>High Quality Premium Templates</li>
<li>Ready to use, Royalty free</li>
<li>As low as $4.99</li>
</ul>
</li>
<li><a href="#">Fotolia</a>
<ul>
<li>Largest collection of stock photos</li>
<li>Starting at $0.14</li>
</ul>
</li>
<li><a href="#">HostGator</a>
<ul>
<li>Premium WebHosting</li>
<li>1 month Hosting trial for $0.01</li>
<li>Use code <strong>HGC25</strong></li>
</ul>
</li>
</ul>
</div>
<div class="sidebar-container">
<h3>Friends</h3>
<ul>
<li><a href="#">wpport</a>
<ul>
<li>Ported and custom wordpress themes</li>
</ul>
</li>
<li><a href="#">Tamad.Net</a>
<ul>
<li>More minimalist website template</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- end of sidebar -->
<div class="clear"></div>
<!-- footer -->
<div id="footer">
<p>© Copyright 2009 <a href="#">Name Here</a> - All Rights Reserved | Design by <a href="http://tamad.net">Tamad.Net</a></p>
</div>
<!-- end of footer -->
</div>
<!-- end of main-wrapper -->
</body>
</html>
Related examples in the same category