canvass
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Title : Canvass
Version : 1.0
Released : 20070615
Description: A two-column, fixed width template with a artistic look.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Canvass by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0;
padding: 0;
background: #FFFFFF url(canvass-images/img01.gif) repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
}
h1, h2, h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000000;
}
h1 {
font-weight: normal;
font-size: 237%;
}
a {
border-bottom: 1px dotted #CCCCCC;
text-decoration: none;
color: #1777B1;
}
a:hover {
border-bottom: none;
color: #FF7400;
}
img {
border: 3px solid #7F7772;
}
img.left {
float: left;
margin: 6px 15px 0 0;
}
img.right {
float: right;
margin: 6px 0 0 15px;
}
.bg1 { background: url(canvass-images/img04.gif) no-repeat left bottom; }
.bg2 { background: url(canvass-images/img05.gif) no-repeat left bottom; }
.bg3 { background: url(canvass-images/img06.gif) no-repeat left bottom; }
.bg4 { background: url(canvass-images/img08.gif) no-repeat left bottom; }
.bg5 { background: url(canvass-images/img09.gif) no-repeat left bottom; }
.bg6 { background: url(canvass-images/img10.gif) no-repeat right bottom; }
.bg7 { background: url(canvass-images/img11.gif) no-repeat right bottom; }
.feature {
}
.feature .image {
padding: 0 0 0 40px;
}
.feature .title {
}
.feature .content {
padding: 0 0 0 40px;
}
.box {
float: left;
width: 250px;
}
.box .title {
height: 40px;
padding: 20px 0 0 40px;
text-transform: lowercase;
font-size: 167%;
}
.box .content {
}
.list {
margin-left: 0;
padding-left: 0;
list-style: none;
}
.list li {
padding-left: 10px;
background: url(canvass-images/img07.gif) no-repeat left center;
}
/* Header */
#header {
width: 760px;
height: 150px;
margin: 0 auto;
background: url(canvass-images/img02.gif) no-repeat;
}
#header h1, #header p {
margin: 0;
margin: 0;
font-weight: normal;
color: #000000;
}
#header h1 {
float: left;
padding: 58px 0 0 12px;
text-transform: lowercase;
line-height: 72px;
font-size: 72px;
}
#header p {
float: right;
padding: 102px 0 0 0;
text-transform: uppercase;
font: bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#header p a {
font-size: 167%;
}
#header a {
border: none;
color: #000000;
}
/* Page */
#page {
width: 760px;
margin: 0 auto;
}
/* Content */
#content {
float: right;
width: 519px;
}
#content p, #content ul, #content ol {
line-height: 1.8em;
}
/* Sidebar */
#sidebar {
float: left;
width: 200px;
padding: 0 20px 0 0;
border-right: 1px dotted #DCDCDC;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
}
#sidebar li ul {
}
#sidebar li li {
padding: 5px 10px;
background: url(canvass-images/img07.gif) no-repeat 0 10px;
border-top: 1px dotted #DCDCDC;
}
#sidebar li li.first {
border-top-color: #FFFFFF;
}
#sidebar h2 {
height: 40px;
padding: 20px 0 0 40px;
text-transform: lowercase;
font-size: 167%;
}
#sidebar a {
border: none;
}
#sidebar a:hover {
border-bottom: 1px dotted #666666;
}
/* Footer */
#footer {
clear: both;
height: 150px;
padding: 20px 0 0 0;
background: #000000;
}
#footer p {
background: #000000;
margin: 0;
text-align: center;
font-size: 85%;
}
#footer a {
border: none;
color: #CCCCCC;
}
#footer a:hover {
color: #FFFFFF;
}
#legal {
}
#legal strong {
display: block;
padding: 20px 0 0 0;
background: url(canvass-images/img12.gif) no-repeat center top;
text-transform: lowercase;
letter-spacing: 3px;
font-size: 182%;
font-weight: normal;
}
#links {
}
</style>
</head>
<body>
<div id="header">
<h1><a href="http://www.free-css.com/">Canvass</a></h1>
<p>By <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
</div>
<!-- end header -->
<div id="page">
<div id="content">
<div class="feature bg7">
<h1 class="title">Welcome to Our Website!</h1>
<div class="content">
<p><img src="canvass-images/img03.jpg" alt="" width="122" height="122" class="left" /> <strong>Canvass</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo is from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em><strong>Enjoy :)</strong></em></p>
<p> </p>
</div>
</div>
<div class="box">
<h2 class="title bg4">Lorem Ipsum</h2>
<div class="content">
<p>Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla.</p>
<ul class="list">
<li><a href="http://www.free-css.com/">Integer Gravida Nibh</a></li>
<li><a href="http://www.free-css.com/">Mauris Vulputate Dolor Nibh</a></li>
<li><a href="http://www.free-css.com/">Donec Dictum Metus</a></li>
<li><a href="http://www.free-css.com/">Etiam Rhoncus Volutpat</a></li>
<li><a href="http://www.free-css.com/">Maecenas Luctus Lectus</a></li>
</ul>
</div>
</div>
<div class="box" style="padding-left: 19px;">
<h2 class="title bg5">Mauris Et Vulputate</h2>
<div class="content">
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit.</p>
<p> Sed ac leo. <a href="http://www.free-css.com/">Pellentesque imperdiet…</a></p>
</div>
</div>
</div>
<!-- end content -->
<div id="sidebar">
<ul>
<li id="menu" class="bg6">
<h2 class="bg1">Menu</h2>
<ul>
<li class="first"><a href="http://www.free-css.com/" accesskey="1" title="">Home</a></li>
<li><a href="http://www.free-css.com/" accesskey="2" title="">Blogs</a></li>
<li><a href="http://www.free-css.com/" accesskey="3" title="">Photos</a></li>
<li><a href="http://www.free-css.com/" accesskey="4" title="">Links</a></li>
<li><a href="http://www.free-css.com/" accesskey="5" title="">About</a></li>
<li><a href="http://www.free-css.com/" accesskey="6" title="">Contact</a></li>
</ul>
</li>
<li id="news">
<h2 class="bg2">Categories</h2>
<ul>
<li class="first">6/15: <a href="http://www.free-css.com/">Donec dictum metus lorem ipsum …</a></li>
<li>6/12: <a href="http://www.free-css.com/">Etiam rhoncus volutpat lorem ipsum…</a></li>
<li>6/9: <a href="http://www.free-css.com/">Integer gravida nibh lorem ipsum…</a></li>
</ul>
</li>
<li id="archives">
<h2 class="bg3">Archives</h2>
<ul>
<li class="first"><a href="http://www.free-css.com/">June 2007</a> <i>(2)</i></li>
<li><a href="http://www.free-css.com/">May 2007</a> <i>(31)</i></li>
<li><a href="http://www.free-css.com/">April 2007</a> <i>(30)</i></li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<div id="footer">
<p id="legal"><strong>Canvass</strong> © 2007. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
<p id="links"> <a href="http://www.free-css.com/">Privacy Policy</a> | <a href="http://www.free-css.com/">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
</div>
<!-- end footer -->
</body>
</html>
Related examples in the same category