pancorbo
<!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>Pancorbo</title>
<style type='text/css'>
/* Design by jojohippo. Public Domain. I'd love to see this design in use contact me at jojohippo (at) gmail (dot) com */
/*---------------------------- LAYOUT ----------------------------*/
* {
margin:0;
padding:0;
}
body {
background:#222 url(pancorbo-media/body.jpg) repeat-y center;
font:0.8em 'Trebuchet MS', Arial, sans-serif;
color:#444;
}
#container {
background:#fff;
width:730px;
margin:0 auto;
}
/*--------------------------- GENERAL ----------------------------*/
a {
color:#0F1A8E;
}
blockquote {
background:#EFF0F4;
margin:3px 3px 3px 10px;
padding:7px;
border-left:2px solid #0F1A8E;
line-height:1.2;
font-style:oblique;
font-size:95%;
}
img, a img {
background:#FFF;
padding:3px;
border:1px solid #AAA;
}
a:hover img{
background:#EFF0F4;
}
.left {
float:left;
margin:3px 5px 3px 3px;
}
.right {
float:right;
margin:3px 3px 3px 5px;
}
#content ul, #content ol {
padding-left:2em;
}
h1 { font-size:20px;}
h2 { font-size:16px;}
h3 { font-size:14px;}
h4 { font-size:12px;}
h5 { font-size:10px;}
h6 { font-size:8px;}
/*Tables*/
table {
margin:10px 5px 10px 5px;
border-collapse: collapse;
}
th {
font-size:14px;
}
tr.main td {
border-top:1px solid #0F1A8E;
border-bottom:1px solid #0F1A8E;
background:#EFF0F4;
}
td.main tr {
border-left:1px solid #0F1A8E;
border-right:1px solid #0F1A8E;
background:#EFF0F4;
}
td {
padding:2px 7px 2px 7px;
background:#FAFBFF;
}
td+td {
border-left:1px solid #CCC;
}
tr+tr {
border-top:1px solid #CCC;
}
/*Forms*/
#content form {
background:#EFF0F4;
width:430px;
padding:15px;
}
#content form ul {
list-style:none;
width:95%;
}
#content form input, #content form textarea {
width:95%;
padding:4px;
font:1em 'Trebuchet MS', Arial;
color:#555;
border:1px solid #ddd;
margin:1px;
}
#content form input:focus, #content form textarea:focus {
color:#0F1A8E;
}
#content form .button {
width:50%;
border:1px solid #ddd;
background:#FAFBFF;
color:#0F1A8E;
}
#content form .button:hover, #content form .button:focus {
background:#F4F5F7;
}
#content form label {
color:#0F1A8E;
}
/*---------------------------- HEADER ----------------------------*/
#header {
width:730px;
margin:10px 0 10px 0;
}
/*TITLE*/
#header #title {
width:230px;
height:150px;
padding:0 10px 0 10px;
background:#17239D url(pancorbo-media/title.jpg) no-repeat;
float:left;
color:#fff;
letter-spacing:-1px;
}
#title h1, #title h1 a {
font-size:25px;
position:relative;
top:20px;
}
#title h2 {
font-size:15px;
padding-top:25px;
color:#dfdfdf;
}
/*MENU*/
#header #menu {
width:460px;
height:150px;
margin-left:10px;
background:#17239D url(pancorbo-media/menu.jpg) no-repeat;
float:left;
padding:0 5px 0 5px;
font-size:18px;
color:#dfdfdf;
text-align:center;
}
#menu ul {
list-style:none;
position:relative;
top:122px;
}
#menu ul li {
display:inline;
padding:0 12px 0 12px;
}
#menu ul li a {
color:#fff;
text-decoration:none;
font-weight:600;
}
#menu ul li a:hover {
color:#fff;
border-bottom:2px solid #fff;
}
/*---------------------------- SIDEBAR ----------------------------*/
#sidebar {
width:230px;
padding:10px;
margin:10px 10px 10px 0;
float:left;
border-right:1px solid #eee;
font-size:95%;
line-height:1.5;
}
#sidebar ul {
list-style:none;
border-top:1px solid #ddd;
margin:10px 0 10px 0;
}
#sidebar ul li {
border-bottom:1px solid #ddd;
}
#sidebar ul li a {
display:block;
padding:5px;
text-decoration:none;
color:#555;
}
#sidebar ul li a:hover {
background:#EFF0F4;
color:#0F1A8E;
}
#sidebar form {
border:1px solid #ddd;
padding:1px;
}
#sidebar input {
width:180px;
height:15px;
padding:4px;
border:0;
font:1em 'Trebuchet MS', Arial;
color:#555;
}
#sidebar input:focus {
color:#0F1A8E;
border:0;
}
.search {
height:22px;
width:22px;
border:0;
padding:0;
margin:0;
background:transparent url(pancorbo-media/search.jpg) no-repeat center center;
text-indent:-1000em;
cursor:pointer;
}
#sidebar:after {
clear:both;
content:'.';
display:block;
height:0;
visibility:hidden;
}
/*---------------------------- CONTENT ----------------------------*/
#content {
width:460px;
padding:10px 5px 10px 0;
float:right;
margin:10px 0 10px 0;
}
#content {
line-height:1.5;
font-size:110%;
}
/*---------------------------- POST ----------------------------*/
.post {
margin:0 0 10px 0;
word-spacing:1px;
}
.info {
background:#EFF0F4;
color:#666;
padding:5px;
margin:5px 0 20px 0;
text-align:right;
font-size:80%;
}
.info span {
float:left;
}
.info a {
color:#777;
text-decoration:none;
}
.info a:hover {
color:#666;
text-decoration:underline;
}
.date {
color:#888;
font-style:oblique;
margin:0 0 0 5px;
}
/*---------------------------- FOOTER ----------------------------*/
#footer {
margin:5px 0 0 0;
text-align:center;
float:left;
width:710px;
padding:10px;
border-top:1px solid #eee;
color:#666;
font-size:85%;
}
#footer a {
color:#777;
text-decoration:none;
}
#footer a:hover {
color:#666;
text-decoration:underline;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container"> <!-- Container encloses all content-->
<!--Header-->
<div id="header">
<div id="title"> <!--Title-->
<h1>Pancorbo</h1>
<h2>A Free Open Source CSS Theme by jojohippo</h2>
</div> <!--End Title-->
<div id="menu"> <!--Menu-->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!--End menu-->
</div>
<!--End Header-->
<!--Sidebar-->
<div id="sidebar">
<h1>Recent Posts</h1>
<ul>
<li><a href="#">Vivamus porttitor. </a></li>
<li><a href="#">Ligula justo tempor elit. </a></li>
<li><a href="#">Eu tristique quam neque eget pede. </a></li>
<li><a href="#">Nam feugiat, nisl eu venenatis aliquet. </a></li>
</ul>
<h1>Categories</h1>
<ul>
<li><a href="#">Vivamus porttitor. </a></li>
<li><a href="#">Ligula justo tempor elit. </a></li>
<li><a href="#">Eu tristique quam neque eget pede. </a></li>
<li><a href="#">Nam feugiat, nisl eu venenatis aliquet. </a></li>
</ul>
<h1>Search</h1>
<form action="#">
<div><!--Required for validation-->
<input type="text" />
<span> </span><!--Required for validation-->
<button class="search" type="submit">Search</button>
</div>
</form>
</div>
<!--End Sidebar-->
<!--Content includes everything in the main column-->
<div id="content">
<div class="post"> <!-- Post-->
<h1>Lorem Ipsum</h1>
<h3 class="date">February 3, 2008</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vehicula <a href="#">gravida enim</a>. <a href="#"><img src="pancorbo-media/image.jpg" alt="Image from NASA - Public Domain" class="right" /></a> Cras sapien ipsum, sagittis commodo, porttitor eu, pulvinar vel, risus. Cras bibendum urna non felis. Sed quam diam, sodales eu, porttitor quis, tincidunt nec, ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat.
<blockquote><p>Nulla congue sapien vel quam. Quisque est tortor, interdum et, iaculis vitae, semper ut, magna. Fusce lorem felis, sodales laoreet, malesuada vel, sollicitudin in, sapien. </p><!--P's in blockquote required for validation--></blockquote>
Morbi est urna, tincidunt scelerisque, fringilla ac, pretium ut, nunc. Vivamus arcu lorem, euismod a, vulputate sed, pellentesque consectetuer, tortor.
<!-- Heading's, Lists, Tables, Forms etc. -->
<h1>Aenean Vehicula</h1>
<h2>Aenean Vehicula</h2>
<h3>Aenean Vehicula</h3>
<h4>Aenean Vehicula</h4>
<h5>Aenean Vehicula</h5>
<h6>Aenean Vehicula</h6>
<ol>
<li>Cras dignissim </li>
<li>Ipsum vitae nisl </li>
<li>Donec a nulla feugiat justo </li>
</ol>
<ul>
<li>Cras dignissim </li>
<li>Ipsum vitae nisl </li>
<li>Donec a nulla feugiat justo </li>
</ul>
<table>
<tr><th colspan="3">Praesent Egestas Enim Id Vestibulum</th></tr>
<tr class="main">
<td>Augue a nibh iaculis laoreet</td>
<td>Proin varius</td>
<td>Erat vel pretium</td>
</tr>
<tr>
<td>Blandit nibh</td>
<td>316</td>
<td>765</td>
</tr>
<tr>
<td>Lorem Pretium</td>
<td>256</td>
<td>935</td>
</tr>
<tr>
<td>Ultricies</td>
<td>358</td>
<td>697</td>
</tr>
</table>
Nibh lorem pretium felis, non nonummy odio nisi sed massa. Praesent egestas, enim id vestibulum viverra, dui ligula sagittis tellus, vitae ultricies risus leo quis tellus.
<br />
<!--Example Form-->
<form action="#">
<div><!--Required for validation-->
<h1><label>Leave a Comment</label></h1>
<input type="text" value="Name..." onfocus="if(this.value=='Name...')value=''" onblur="if(this.value=='')value='Name...';" />
<textarea onfocus="if(this.value=='Comments...')value=''" onblur="if(this.value=='')value='Comments...';" rows="5" cols="1">Comments...</textarea>
<input name="Submit" type="button" class="button" value="Submit" />
</div>
</form>
<div class="info"> <!-- Info is the bar at the bottom of the post with tags/comment information-->
<span> Tags: <a href="#">pellentesque</a>, <a href="#">habitant</a>, <a href="#">morbi</a> </span> <!-- The span tags should enclose everything aligned to the left--> <a href="#">5 Comments</a>
</div> <!--End Info-->
</div> <!-- End Post-->
<div class="post"> <!-- Post-->
<h1>About the Template</h1>
<h3 class="date">January 21, 2008</h3>
You may use this template for whatever purpose, so long as you don't claim the work as your own. I don't need a link back to me but I ask that you leave the link to getfirefox.com in the footer or somewhere on your site (or better yet, <a href="http://www.mozilla.org/products/firefox/buttons.html">get a button</a>). If you use the template I'd love to see it, you can contact me at jojohippo (at) gmail (dot) com.
<br /><br />
The template's name comes courtesy of wikipedia's random article feature, '<a href="http://en.wikipedia.org/wiki/Pancorbo">Pancorbo</a>' is a small municipality in Spain. The image used in the header is a modified version of an <a href="http://commons.wikimedia.org/wiki/Image:DSC01492.JPG">image</a> by D.Herman. It is released into the public domain and, like the template, no attribution is required.
<div class="info"> <!-- Info is the bar at the bottom of the post with tags/comment information-->
<span> Tags: <a href="#">pellentesque</a>, <a href="#">habitant</a>, <a href="#">morbi</a> </span> <!-- The span tags should enclose everything aligned to the left--> <a href="#">5 Comments</a>
</div> <!--End Info-->
</div> <!-- End Post-->
</div> <!--End Content-->
<div id="footer"> <!-- Footer-->
© Your Website | <a href="http://getfirefox.com/" title="Get Firefox - Take Back the Web"> Get Firefox </a><!-- Keep the link please!-->
</div> <!-- End Footer-->
</div> <!-- End Container-->
</body>
</html>
Related examples in the same category