classique
<!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">
<head>
<title>Classique</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
/* CSS Document */
body {
color:#71716F;
background:url(classique-images/body.png) top repeat-x #F3F1E9;
font: 12px/24px Arial;
padding-bottom:20px;
}
* {
margin:0;
padding:0;
outline:none;
}
.clear {
clear:both;
}
#header {
height:197px;
width:760px;
margin:0 auto;
background:url(classique-images/header.png) top no-repeat;
}
#top ul {
float:right;
margin:-2px 0 0 0;
}
#top ul li {
display:inline;
list-style:none;
font-size:11px;
margin:0 0 0 10px;
}
#top ul li a {
color:#999;
text-decoration:none;
font-weight:normal;
}
#top ul li a:hover {
color:#eee;
}
#header h1 {
font:20px Georgia;
text-transform:uppercase;
letter-spacing:5px;
color:#F3F1E9;
text-align:center;
font-weight:normal;
padding:60px 0 15px 0;
}
#header h1 a {
color:#F3F1E9;
text-decoration:none;
}
#header h2 {
font:12px Georgia;
color:#A7A5A0;
letter-spacing:3px;
text-align:center;
}
#nav {
margin:37px 0 0 0;
}
#nav li {
list-style:none;
float:left;
padding:11px 7px 9px;
}
#nav li a {
padding:11px 7px 6px;
font:12px Georgia;
color:#ccc;
font-weight:bold;
text-decoration:none;
}
#nav li a:hover {
background:url(classique-images/nav_a.gif) bottom no-repeat;
color:#fff;
}
#container {
background:#FCFAF4;
width:760px;
margin:0 auto;
}
#content {
width:460px;
float:left;
background:url(classique-images/content.png) top right no-repeat;
padding:35px;
}
#content h3 {
color:#842E31;
font:14px Arial;
font-weight:bold;
text-align:right;
background:url(classique-images/h3.png) bottom no-repeat;
padding:10px 0;
margin-bottom:10px;
}
a {
color:#4A8445;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#333;
}
#content h3 a {
color:#842E31;
text-decoration:none;
float:left;
}
#content h3 a:hover {
color:#620c10;
}
#content p {
padding:10px 15px;
line-height:21px;
}
.divider {
height:5px;
margin:10px auto;
width:460px;
background:url(classique-images/h3.png) no-repeat;
}
h4 {
font:12px Georgia;
font-weight:bold;
color:#315984;
border-bottom:1px solid #e7e7e7;
padding:5px 0;
margin:10px 0;
}
#content h3 span {
font:10px Georgia;
font-style:italic;
color:#A4A39F;
letter-spacing:3px;
}
#sidebar {
margin:0 0 0 530px;
background:url(classique-images/sidebar.png) top no-repeat;
padding:10px 20px;
}
#sidebar p {
font-size:11px;
line-height:18px;
}
#sidebar ul li {
list-style:none;
font-size:11px;
}
#sidebar ul li a:hover {
text-decoration:none;
}
#footer {
height:32px;
padding:18px 15px 0 15px;
clear:both;
background:url(classique-images/footer.png) top no-repeat;
}
#footer a.at {
display:block;
float:right;
text-align:left;
text-indent:-9999px;
height:24px;
width:26px;
background:url(classique-images/atlogo.png) no-repeat;
}
.comment {
background: #F6F4EF;
}
.comment div {
padding:2px 4px;
}
#content .comment p {
font:11px Arial;
color:#4A4B4A;
line-height:20px;
}
.commenter {
background:url(classique-images/commenter.png) top left no-repeat;
padding:15px 0 0 20px;
font:12px Arial;
font-weight:bold;
color:#4A8445;
margin-bottom:45px;
}
.commenter a {
color:#4A8445;
text-decoration:none;
}
.commenter small {
color:#ACABA9;
font:10px Georgia;
letter-spacing:1px;
display:block;
}
b.rtop, b.rbottom{display:block;background: #FCFAF4}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #F6F4EF}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
fieldset {
border:1px solid #F3F1E9;
padding:10px;
}
legend {
padding:5px;
}
label {
display:block;
}
blockquote {
padding:0 20px;
font:12px Georgia;
font-style:italic;
}
#content ul {
margin:10px 0 10px 30px;
list-style-type:circle;
}
input, textarea {
background:#EAE8E1;
border:none;
padding:5px;
margin-bottom:15px;
}
</style>
<!--[if IE 7]><link href="css/ie7-only.css" rel="stylesheet" type="text/css" media=screen><![endif]-->
<!--[if lt IE 7]><link href="css/ie6-only.css" rel="stylesheet" type="text/css" media=screen><![endif]-->
</head>
<body>
<div id="header">
<div id="top">
<ul>
<li><a href="http://www.free-css.com/">Sitemap</a></li>
<li><a href="http://www.free-css.com/">Search</a></li>
<li><a href="http://www.free-css.com/">Terms</a></li>
</ul>
</div>
<h1><a href="http://www.free-css.com/">Classique</a></h1>
<h2>A traditionally styled template for your blog </h2>
<ul id="nav">
<li><a href="http://www.free-css.com/">Link Here</a></li>
<li><a href="http://www.free-css.com/">Link Here</a></li>
<li><a href="http://www.free-css.com/">Link Here</a></li>
<li><a href="http://www.free-css.com/">Link Here</a></li>
</ul>
</div>
<div id="container">
<div id="content">
<div class="post">
<h3><a href="http://www.free-css.com/">Blog Post Title Here</a><span>5th December 2007</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
<h4>Blockquote Example</h4>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
</blockquote>
<h4>List Example</h4>
<ul>
<li><span>Phasellus non lectus. Duis pede.</span></li>
<li><span>Phasellus non lectus. Duis pede.</span></li>
<li><span>Phasellus non lectus. Duis pede.</span></li>
<li><span>Phasellus non lectus. Duis pede.</span></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
</div>
<div class="divider"></div>
<h4>4 Comments on "Blog post title goes here."</h4>
<div class="comment"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
<div class="commenter"> <a href="http://www.free-css.com/">Author Name</a> <small>5th December 2007</small> </div>
<div class="comment"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
<div class="commenter"> <a href="http://www.free-css.com/">Author Name</a> <small>5th December 2007</small> </div>
<div class="comment"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
<div class="commenter"> <a href="http://www.free-css.com/">Author Name</a> <small>5th December 2007</small> </div>
<div class="comment"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
<div class="commenter"> <a href="http://www.free-css.com/">Author Name</a> <small>5th December 2007</small> </div>
<h4>Add your Comment</h4>
<fieldset>
<legend>Fill in this form to add your comment</legend>
<label>Name</label>
<input />
<br />
<label>Email Address</label>
<input />
<br />
<label>Your Comment</label>
<textarea></textarea>
<br />
<input type="submit" />
</fieldset>
</div>
<div id="sidebar">
<h4>About</h4>
<p>Classique is a free template designed by the people at the Jigowatt Premium Templates. It is designed with a blog layout /format in mind, but of course can be used for any web site. </p>
<h4>Archives</h4>
<ul>
<li><a href="http://www.free-css.com/">December 2007</a></li>
<li><a href="http://www.free-css.com/">November 2007</a></li>
<li><a href="http://www.free-css.com/">October 2007</a></li>
</ul>
<h4>Links</h4>
<ul class="links">
<li><a href="http://www.free-css.com/">Premium Templates</a></li>
<li><a href="http://www.free-css.com/">Google</a></li>
<li><a href="http://www.free-css.com/">Yahoo</a></li>
<li><a href="http://www.free-css.com/">Ebay</a></li>
</ul>
<h4>Search</h4>
<input />
</div>
<div id="footer">
<p style="float:right">Classique template designed by <a href="http://www.jigowattpremiumtemplates.co.uk">Jigowatt Premium Templates</a>.</p>
<p>Footer content goes here</p>
</div>
</div>
</body>
</html>
Related examples in the same category