collaboration
<!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
Name : Collaboration
Description: A two-column, fixed-width design suitable for small websites and blogs.
Version : 1.0
Released : 20080102
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Collaboration 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(collaboration-images/img01.gif) repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #737373;
}
form {
margin: 0;
padding: 0;
}
input, textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}
h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ul, ol {
margin-bottom: 1.8em;
line-height: 160%;
}
ul, ol {
}
blockquote {
}
a {
color: #414141;
}
a:hover {
text-decoration: none;
}
hr {
display: none;
}
/* Menu */
#menu {
width: 960px;
height: 45px;
margin: 0 auto;
padding: 0px 0;
background: url(collaboration-images/img02.jpg) no-repeat center top;
}
#menu ul {
height: 45px;
margin: 0;
padding: 0;
background: url(collaboration-images/img03.gif) no-repeat;
list-style: none;
}
#menu li {
float: left;
height: 45px;
background: url(collaboration-images/img03.gif) no-repeat right top;
}
#menu a {
float: left;
height: 20px;
margin: 0px;
padding: 10px 15px;
text-decoration: none;
text-transform: uppercase;
font-size: smaller;
font-weight: bold;
color: #000000;
}
#menu a:hover {
background: url(collaboration-images/img02.gif) repeat-x;
color: #FFFFFF;
height: 45px;
}
#menu .current_page_item a {
height: 45px;
color: #FFFFFF;
}
/* Splash */
#splash {
width: 960px;
height: 200px;
margin: 0 auto;
}
/* Logo */
#logo {
width: 960px;
height: 91px;
margin: 0 auto;
border-bottom: 6px solid #3F3F3F;
color: #414141;
}
#logo h1, #logo h2 {
margin: 0;
padding: 0 20px;
}
#logo h1 {
float: left;
padding-top: 30px;
letter-spacing: -3px;
text-transform: uppercase;
font-size: 3em;
}
#logo h2 {
float: right;
padding-top: 49px;
letter-spacing: -1px;
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
}
#logo a {
text-decoration: none;
color: #414141;
}
/* Page */
#page {
width: 960px;
margin: 0 auto;
padding: 30px;
}
/* Content */
#content {
float: right;
width: 680px;
}
.post {
padding-bottom: 20px;
}
.post .title {
margin: 0;
padding: 5px 20px;
letter-spacing: -2px;
border-bottom: 1px dashed #B9B9B9;
text-transform: uppercase;
font-size: 24px;
}
.post .title a {
text-decoration: none;
}
.post .entry {
padding: 10px 20px;
}
.post .meta {
height: 26px;
background: #F5F5F5;
border-top: 1px solid #E9E9E9;
text-decoration: none;
text-transform: uppercase;
font-size: smaller;
}
.post .posted {
float: left;
height: 16px;
padding: 5px 20px;
}
.post .permalink, .post .comments {
float: right;
height: 16px;
padding: 5px 20px;
}
.post .permalink {
}
/* Sidebar */
#sidebar {
float: left;
width: 250px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin-bottom: 20px;
}
#sidebar li ul {
padding: 20px;
}
#sidebar li li {
margin: 0;
padding-left: 10px;
padding-bottom: 5px;
background: url(collaboration-images/img04.gif) no-repeat left 50%;
}
#sidebar p {
padding: 0 20px;
}
#sidebar h2 {
height: 20px;
margin: 0;
padding: 6px 0 0 20px;
background: url(collaboration-images/img07.jpg) no-repeat;
border-bottom: 1px dashed #B9B9B9;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: #000000;
}
/* Search */
#search form {
padding: 20px;
}
#search br {
display: none;
}
#search #s {
width: 135px;
}
/* Footer */
#footer {
clear: both;
width: 960px;
height: 50px;
margin: 0 auto;
padding: 20px 0;
border-top: 6px solid #3F3F3F;
font-size: smaller;
}
#footer p {
margin: 0;
text-align: center;
line-height: normal;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Homepage</a></li>
<li class="current_page_item"><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="logo">
<h1><a href="#">Collaboration</a></h1>
<h2>By Free CSS Templates</h2>
</div>
<div id="splash">
<img src="collaboration-images/img05.jpg" alt="" />
</div>
<hr />
<div id="page">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">Welcome to Collaboration</a></h2>
<div class="entry">
<p>This is <strong>Collaboration</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>, released for free under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> license. You're free to use this template for anything as long as you link back to <a href="http://www.freecsstemplates.org/">my site</a>. Enjoy :)</p>
<p>This template is also available as a <a href="http://www.nodethirtythree.com/">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
</div>
<p class="meta"><span class="posted">Posted by <a href="#">Someone</a> on January 2, 2007</span> <a href="#" class="permalink">Read more</a> <a href="#" class="comments">Comments (18)</a> </p>
</div>
<div class="post">
<h2 class="title"><a href="#">Sapien sed varius</a></h2>
<div class="entry">
<p>Morbi sit amet mauris. Nam vitae nibh eu sapien dictum pharetra. Vestibulum elementum neque vel lacus. Proin auctor dolor et massa. Phasellus sit amet velit. Vestibulum vel lacus vitae tortor consectetuer sapien semper dictum. Integer est felis, facilisis quis, lacinia sed, lacinia et, augue. Vivamus ultrices lacinia urna. Proin varius sollicitudin nunc. Vivamus condimentum, dui nec imperdiet porta, odio risus molestie nisl, nec laoreet purus sapien a massa.</p>
</div>
<p class="meta"><span class="posted">Posted by <a href="#">Someone</a> on December 13, 2007</span> <a href="#" class="permalink">Read more</a> <a href="#" class="comments">Comments (18)</a> . </p>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Search</h2>
<form id="searchform" method="get" action="">
<div>
<input type="text" name="s" id="s" size="15" />
<br />
<input name="submit" type="submit" value="Search" />
</div>
</form>
</li>
<li>
<h2>Veroeros etiam</h2>
<p><strong>Morbi sit amet</strong> mauris Nam vitae nibh eu sapien dictum pharetra. Vestibulum elementum neque vel lacus. Proin auctor dolor loremmassa. Phasellus sit. <a href="#">More…</a></p>
</li>
<li>
<h2>Blandit Volutpat</h2>
<ul>
<li><a href="#">Morbi sit amet sed magna</a></li>
<li><a href="#">Lacus dapibus interdum</a></li>
<li><a href="#">Donec pede nisl dolore sed</a></li>
<li><a href="#">Lacus dapibus et interdum</a></li>
<li><a href="#">Morbi sit amet magna etiam</a></li>
<li><a href="#">Maecenas sed sem lorem</a></li>
<li><a href="#">Lacus dapibus interdum</a></li>
<li><a href="#">Donec pede nisl dolore</a></li>
</ul>
</li>
</ul>
</div>
<!-- end #sidebar -->
</div>
<!-- end #page -->
<div id="footer">
<p>(c) 2007 Website Name. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category