boxes_template
<!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>Boxes Template by Ainslie Johnson</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="Put your description here" />
<meta name="keywords" content="your,keywords,goes,here" />
<meta name="author" content="John"/>
<style type='text/css'>
/*
Boxes Template By WG - http://webgazette.co.uk
Released under a Creative Commons Attribution v2.0 license see license.txt for more details
V1.1 Last updated 13th November 2008
*/
/* General element styles */
Body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
p {
font-size: 1.0em;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.0em;
}
#container {
background: url(boxes_template-images/body.jpg) repeat-y left;
margin: 0 auto;
padding: 0;
width: 760px;
}
/* Header */
#header {
background: url(boxes_template-images/header.jpg) no-repeat top left;
height: 232px;
}
/* Site title and description */
#site-title {
padding: 5px 20px 0 10px;
}
#site-title h1, #site-title p {
display: inline;
}
#site-title h1 {
float: left;
font-size: 1.4em;
margin: 0;
padding: 5px 0 0 0;
}
#site-title h1 a {
text-decoration: none;
color: #0268cd;
}
#site-title h1 a:hover {
color: #fe9b00;
}
#site-title p {
float: right;
margin: 0;
padding-top: 18px;
font-size: 0.7em;
font-weight: bold;
color: #369b01;
}
/* 3 coloured boxes */
#boxes {
clear: both;
margin: 0px;
padding: 0px;
font-weight: 500;
}
#boxes a {
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
#boxes a:hover {
text-decoration: underline;
}
#orangebox, #bluebox, #greenbox {
overflow: hidden;
}
#orangebox p, #bluebox p, #greenbox p {
margin: 0px;
padding: 2px 0 2px 0;
font-size: 0.8em;
color: #000000;
}
#orangebox h2, #bluebox h2, #greenbox h2 {
margin: 0;
padding: 0 0 2px 0;
font-size: 0.9em;
color: #000000;
border-bottom: 1px solid #6b6b6b;
}
#orangebox {
float: left;
width: 210px;
height: 150px;
margin: 0;
padding: 20px 10px 0px 20px;
}
#bluebox {
float: left;
width: 210px;
height: 150px;
margin: 0;
padding: 20px 20px 0px 28px;
}
#greenbox {
float: left;
width: 210px;
height: 150px;
margin: 0;
padding: 20px 0px 0px 18px;
}
/* Content */
#content {
float: right;
margin: 0;
padding: 0 40px 10px 10px;
text-align: justify;
width: 530px;
font-size: 0.8em;
}
#content h2 {
font-size: 1.4em;
margin: 0 0 10px 0;
padding: 5px 0 2px 0;
color: #0268cd;
border-bottom: 3px solid #c0c0c0;
}
#content p {
padding: 0 0 7px 0;
margin: 0;
}
#content a, #footer a {
color: #0268cd;
font-weight: bold;
text-decoration: none;
}
#content a:hover, #footer a:hover {
color: #fe9b00;
}
.info {
font-size: 0.8em;
font-weight: bold;
color: #369b01;
border-bottom: 2px solid #c0c0c0;
padding-bottom: 2px;
}
/* Sidebar */
#sidebar {
float: left;
width: 160px;
margin: 0;
padding: 11px 0 0 20px;
font-size: 0.8em;
}
#sidebar h2 {
font-size: 1.2em;
margin: 0 0 5px 0;
color: #0268cd;
border-bottom: 3px solid #c0c0c0;
width: 150px;
}
#sidebar ul {
margin: 0 0 0 5px;
padding: 0 0 10px 0;
}
#sidebar li {
margin: 0;
padding: 0px 0 0 20px;
list-style: none;
}
#sidebar ul.main-nav li {
background: url(boxes_template-images/orange-button.jpg) no-repeat left bottom;
}
#sidebar ul.archive li {
background: url(boxes_template-images/blue-button.jpg) no-repeat left bottom;
}
#sidebar ul.category li {
background: url(boxes_template-images/green-button.jpg) no-repeat left bottom;
}
#sidebar li a, #sidebar a:visited {
text-decoration: none;
line-height: 18px;
font-weight: bold;
color: #0268cd;
}
#sidebar li a:hover {
color: #fe9b00;
}
/* Footer */
#footer {
clear: both;
background: url(boxes_template-images/footer.jpg) no-repeat top right;
height: 53px;
text-align: center;
}
#footer p {
color: #6B6B6B;
padding: 15px 10px 0 10px;
font-size: 0.7em;
}
/* Various styles */
.left {
float: left;
padding: 5px;
margin: 0 5px 5px 0;
border: 1px solid #000;
}
.right {
float: right;
padding: 5px;
margin: 0 0 5px 5px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="site-title">
<h1><a href="index.html">Boxes Template</a></h1>
<p>Valid XHTML & CCS website template by WG.</p>
</div>
<div id="boxes">
<div id="orangebox">
<h2>About...</h2>
<p>This is the Boxes template and is valid CSS and XHTML 1.0 strict.</p>
<p>The Boxes template is open source and released under the Creative Commons Attribution licence v2.0</p>
</div>
<div id="bluebox">
<h2>Little Boxes...</h2>
<p>You can use these boxes to say something about your website or link to important parts of your website.</p>
<p>They could also be used for adverts or links. It is up to you!</p>
</div>
<div id="greenbox">
<h2>Template Info...</h2>
<p>Just a little information about the <strong>Boxes</strong> template.</p>
<p><strong>Name: </strong>Boxes</p>
<p><strong>Version:</strong> 1.0</p>
<p><strong>Date: </strong>28th August 2006</p>
<p><strong>Author: </strong>WG</p>
</div>
</div> <!-- Close id="boxes" -->
</div> <!-- Close id="header" -->
<div id="content">
<h2>The Boxes Template</h2>
<p><img class="left" src="boxes_template-images/example.jpg" width="100" height="100" alt="An example image" />Sed rutrum interdum felis? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce adipiscing! Maecenas lacinia, mauris id placerat semper, turpis massa fringilla erat, eu rhoncus tellus ipsum sollicitudin velit.</p>
<p>Praesent justo sapien, sollicitudin a, scelerisque ut, varius vitae, sapien! Ut lectus magna, eleifend ut, euismod a, suscipit non, risus. Duis diam nibh, vehicula ut, interdum in, tincidunt et, turpis. Phasellus varius felis ac leo.</p>
<p class="info">Posted on 13th November 2008 by <a href="index.html">WG</a></p>
<h2>Licence</h2>
<p>The Boxes Website Template by <a href="http://webgazette.co.uk">WG</a> is licensed under a <a href="http://creativecommons.org/licenses/by/2.0/uk/">Creative Commons Attribution 2.0 UK: England & Wales License</a>.</p>
<p>While this licence requires that the proper credit is given to the template author permission is hereby granted for not-for-profit individuals to remove the credit link in the footer.</p>
<p>Permissions beyond the scope of this license may be available at <a href="http://webgazette.co.uk">webgazette.co.uk</a>.</p>
</div>
<div id="sidebar">
<h2>Site Menu</h2>
<ul class="main-nav">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Portfolio</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
<h2>Services</h2>
<ul class="archive">
<li><a href="index.html">Products</a></li>
<li><a href="http://curiouscat.net/cool/website.cfm">Design</a></li>
<li><a href="http://curiouscat.net/cool/hosts.cfm">Hosting</a></li>
</ul>
<h2>Links</h2>
<ul class="category">
<li><a href="http://www.wordpressthemes4free.net/">WordPress Themes</a></li>
<li><a href="http://curiouscat.net/cool/webusability.cfm">Usability Resources</a></li>
</ul>
</div>
<div id="footer">
<p>© 2008 Your Name | Design by <a href="http://webgazette.co.uk/">WG</a> downloaded from <a href="http://css4free.com/" title="CSS web site gallary">CSS4Free</a></p>
</div>
</div> <!-- Close id="container" -->
</body>
</html>
Related examples in the same category