pancorbo : Design 6 « Templates « HTML / CSS






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>&nbsp;</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-->
&copy; 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

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsess
32.obsession
33.obtanium
34.office-plants
35.offlimits
36.offrecord
37.oheon_com_110100021
38.ohgreenworld
39.Okeanos
40.old-wall
41.oldarchitecture
42.Olive
43.one-penny
44.one_two_three
45.online-edu
46.onlinemoviestore
47.oodles
48.openyourwindows
49.opposed
50.optimal-touch
51.orchidaceae
52.ordinaire
53.ormeggiare
54.ornamental
55.ornate
56.OrngBlu
57.oswd_blozilla
58.our-work
59.ourhouse
60.outdoorv1.0
61.outliers
62.outoftheblue
63.outtabox
64.oxidation
65.package
66.paddy-harvest
67.pagedrape
68.paivi-k
69.paleforest
70.palmtrees
71.pamphlet
72.papira
73.paradigm
74.paradise1983
75.parchmenter
76.particle
77.particles
78.pastel
79.pastelco
80.pastelflowers
81.pastries
82.path-fider
83.patternmaker
84.PattyMcFatPat01
85.PattyMcFatPat03
86.pc
87.Pear Template
88.pear
89.pedestrian
90.penchantforphotos
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination