clementine
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Clementine</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document */
body {
background-color:#fff;
background-image:url(clementine-images/backgrounds/body.jpg);
background-position:top;
background-repeat:repeat-x;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:78%;
color:#666;
margin:0;
}
#top {
width:715px;
padding:12px 25px 15px 25px;
background-image:url(clementine-images/backgrounds/top.jpg);
background-position:top;
background-repeat:no-repeat;
color:#fff;
margin:0 auto;
text-align:right;
}
#top a {
padding:0 10px 0 10px;
color:#fff;
border:none;
}
#top a:hover {
text-decoration:none;
}
#top b {
float:left;
font-weight:normal;
}
#top b a {
border-left:1px dotted #ccc;
border-right:none;
border:none;
}
#container {
width:765px;
margin:0 auto;
background-image:url(clementine-images/backgrounds/header.jpg);
background-position:top;
background-repeat:no-repeat;
padding:30px 0 0 0;
}
#menu {
width:706px;
margin:0 auto;
text-align:left;
background-image:url(clementine-images/backgrounds/menu.jpg);
background-position:top;
background-repeat:repeat-x;
}
#menu #nav {
margin:0;
padding:0;
float:left;
}
#nav li {
margin:0;
pading:0;
list-style:none;
float:left;
}
#nav li a {
display:block;
width:100px;
text-align:center;
margin:0 1px 0 0;
background-image:url(clementine-images/backgrounds/menu_link.jpg);
background-position:left;
background-repeat:no-repeat;
color:#ccc;
font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
text-transform:uppercase;
font-weight:bold;
text-decoration:none;
padding:55px 0 23px 0;
border:none;
}
#nav li a em {
font-style:normal;
text-decoration:underline;
}
#nav li a.last {
margin:0;
}
#nav li a:hover {
background-image:url(clementine-images/backgrounds/menu_link.jpg);
background-position:right;
color:#fff;
}
#nav li a.active {
background-image:url(clementine-images/backgrounds/menu_link.jpg);
background-position:right;
color:#fff;
}
.clear {
clear:both;
}
#sidebar {
width:262px;
float:right;
background-image:url(clementine-images/backgrounds/sidebar.jpg);
background-position:top;
background-repeat:no-repeat;
margin:0 29px 0 0 !important;
margin:0 15px 0 0;
padding:7px 20px 20px 20px;
color:#777;
line-height:18px;
font-size:90%;
word-spacing:-1px;
}
#sidebar h1 {
font-family:Century Gothic, Verdana, Arial, Helvetica, sans-serif;
font-size:20px;
color:#F2C21C;
font-weight:normal;
margin:10px 0 10px 0;
}
#sidebar h1.first {
color:#fff;
margin:10px 0 35px 0;
}
#content {
margin:0 331px 0 20px;
background-image:url(clementine-images/backgrounds/content.jpg);
background-position:top right;
background-repeat:no-repeat;
padding:10px 20px 10px 20px;
}
#content {
line-height:20px;
word-spacing:2px;
}
#content h1 {
font-family:Trebuchet MS, sans-serif;
font-size:24px;
color:#333;
font-weight:normal;
margin:30px 0 35px 0;
letter-spacing:-2px;
border-bottom:2px solid #F4C833;
padding:0 0 2px 0;
}
#content h1 a {
color:#333;
text-decoration:none;
border:none;
}
#content h1 a:hover {
color:#666;
}
#content p {
text-indent:15px;
}
#sidebar .linkroll {
margin:10px 0 10px 0;
padding:0;
border-top:1px solid #eee;
}
.linkroll li {
margin:1px;
padding:0 !important;
padding:1px;
list-style:none;
}
.linkroll li a {
padding:2px 2px 2px 18px;
display:block;
margin:0;
color:#777;
text-decoration:none;
border-bottom:1px solid #eee;
background-image:url(clementine-images/backgrounds/document.gif);
background-position:left;
background-repeat:no-repeat;
}
.linkroll li a:hover {
border-bottom:1px solid #ccc;
background-color:#fbfbfb;
color:#444;
}
h2 {
font:120% Verdana;
color:#333;
border-bottom:1px dotted #ccc;
}
blockquote {
margin:0;
padding:5px 15px 5px 15px;
background:#f6f6f6;
}
a {
color:#333;
border-bottom:1px solid #ccc;
text-decoration:none;
}
a:hover {
border-bottom:1px solid #999;
}
#footer {
padding:10px;
border-top:2px solid #f6f6f6;
text-align:center;
margin:20px 0 0 0;
}
</style>
</head>
<body>
<div id="top"> <b><a href="#container">Skip to Content</a></b> <a href="#contact">Get in Touch</a> <a href="http://www.free-css.com/">Another Link</a> </div>
<div id="container">
<div id="menu">
<ul id="nav">
<li><a href="#intro" title="The intro! (a:i)" accesskey="i"><em>I</em>ntro</a></li>
<li><a href="#css" title="CSS and XHTML (a:c)" accesskey="c"><em>c</em>ss & xhtml</a></li>
<li><a href="#about" title="All about me (a:a)" accesskey="a"><em>A</em>uthor</a></li>
<li><a href="#contact" title="Get in Touch (a:o)" accesskey="o">C<em>o</em>ntact</a></li>
<li><a href="http://www.free-css.com/" class="active"> Active Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/" class="last">Link</a></li>
</ul>
<br class="clear" />
</div>
<div id="sidebar">
<h1 class="first"> The Sidebar! </h1>
<p> The obligatory sidebar! How we love ye. This is of course the area for you to put anything non-main-content. Additional navigation, links, some thumbnails? I dunno, do with it what you will! </p>
<h1>Linkroll</h1>
<ul class="linkroll">
<li><a href="http://www.free-css.com/">Six Shooter Media</a></li>
<li><a href="http://www.free-css.com/">Buy a Button!</a></li>
<li><a href="http://www.free-css.com/">Six Shooter Media</a></li>
<li><a href="http://www.free-css.com/">Buy a Button!</a></li>
</ul>
</div>
<div id="content"> <a href="http://www.free-css.com/" id="intro"></a>
<h1><a href="http://www.free-css.com/">Introduction</a></h1>
<p> Hello and welcome to Clementine, a template fully xhtml 1.1 and css valid. Coded using css only for the layout this template is extremely fast loading and can be used for just about anything. </p>
<a href="http://www.free-css.com/" id="css"></a>
<h1><a href="http://www.free-css.com/">CSS & XHTML</a></h1>
<p> As you would expect, this web site makes use of css for its entire layout. No nasty tables here baby! The markup is also valid XHTML 1.1. CSS & XHTML are important for the following reasons: </p>
<ul>
<li>Accessibility. Big subject. Read more <a href="http://www.free-css.com/">here</a>.</li>
<li>Keeping file sizes small</li>
<li>Search Engine Optimisation</li>
<li>Loads more</li>
</ul>
<p> Anyway, this site validates as both <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> compliant. Which is nice. </p>
<a href="http://www.free-css.com/" id="author"></a>
<h1><a href="http://www.free-css.com/">About the Author</a></h1>
<p> Hi! My names Jay and I'm a 20 year old web designer from England. My main projects are conducted through my website <a href="http://www.sixshootermedia.com">Six Shooter Media</a> which has recently been redesigned, so check it out!. </p>
<p> Another site of mine that you might find interesting if you're setting up a site with a free tmeplate like this is <a href="http://www.buyabutton.net">Buy a Button</a>. There, for a great price you can purchase a link to your site in the form of a button. This link will obviously provide you site with some additional traffic which is always nice! Anyway, <a href="http://www.buyabutton.net">Take a look</a>! </p>
<h1>Some Examples</h1>
<p> OK, here I'll just put some example html elements that you will most probably be using in your blog. </p>
<h2>Blockquote Example</h2>
<blockquote>
<p> Here's your blockquote text jfds jkndskf ndsknf sldnfjk sdnf jdsbf hdsbf jbsdjfk bdskj bdsjfb dsk bds bfsdj bfsjk bfsjdbf sbjd fjsbdk fsdbf sdb fksbd sb </p>
</blockquote>
<h2>List Example</h2>
<ul>
<li>Here</li>
<li>Is our friend</li>
<li>The list!</li>
</ul>
<h1 id="contact">Contact</h1>
<p> If you want to get in touch with me please feel free to send me an email via the form on the <a href="http://www.free-css.com/">contact page of my site</a> </p>
</div>
<div id="footer">
<p>Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category