differential
<!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">
<head>
<title>Differential</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<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: #252D37 url(differential-images/img1.gif) repeat-x;
font: normal 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #A4AFBD;
}
form {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
color: #FFFFFF;
}
h1 { font-size: 31px; }
h2 { font-size: 26px; }
h3 { font-size: 18px; }
p, ul, ol, blockquote {
margin-top: 0;
padding-top: 0;
text-align: justify;
line-height: 18px;
}
a {
color: #95BA2E;
}
a:hover {
text-decoration: none;
}
/* Boxed */
.boxed {
margin: 0 0 20px 0;
padding: 0 20px 20px 20px;
background: url(differential-images/img4.gif) repeat-x left bottom;
}
/* Post */
.post {
margin: 0 0 20px 0;
padding: 10px 20px 30px 20px;
background: url(differential-images/img4.gif) repeat-x left bottom;
}
.post h4 {
margin-bottom: 20px;
font-size: 11px;
font-weight: normal;
}
.post h4 strong {
font-weight: bold;
color: #5B6F88;
}
/* Header */
#header {
width: 904px;
height: 140px;
margin: 0 auto;
}
/* Menu */
#menu {
float: left;
}
#menu ul {
margin: 0;
padding: 53px 0 0 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
height: 25px;
padding: 10px 15px 0 15px;
text-transform: lowercase;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
background: #0C7AC7 url(differential-images/img2.gif) repeat-x;
}
/* Search */
#search {
float: right;
padding: 63px 0 0 0;
}
#textfield1 {
width: 175px;
background: #FFFFFF;
border: none;
}
#submit1 {
height: 19px;
background: #6F9303;
border: none;
text-transform: lowercase;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}
/* Content */
#content {
width: 904px;
margin: 0 auto;
}
#colOne {
float: left;
width: 238px;
}
#colTwo {
float: right;
width: 646px;
}
/* ColOne Content */
#colOne ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
#colOne li {
padding: 5px 0 7px 0;
border-top: 1px solid #3B495A;
}
#colOne li.first {
border: none;
}
#colOne h3 {
font-size: 15px;
}
/* ColTwo Content */
/* Logo */
#logo {
margin: 0 0 20px 0;
padding: 0 0 40px 20px;
background: url(differential-images/img3.gif) repeat-x left bottom;
}
#logo h1 {
text-transform: lowercase;
}
#logo h2 {
text-transform: lowercase;
font-size: 12px;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Welcome */
#welcome {
padding: 5px 20px 20px 20px;
}
#welcome h2 {
margin-bottom: 25px;
}
#welcome .image {
float: left;
padding: 0 17px 0 0;
}
#welcome p {
margin-left: 126px;
}
/* Footer */
#footer {
clear: both;
width: 904px;
margin: 0 auto;
background: url(differential-images/img6.gif) repeat-x left top;
}
#footer p {
margin: 0;
padding: 30px;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" accesskey="1">Home</a></li>
<li><a href="http://www.free-css.com/" accesskey="2">Services</a></li>
<li><a href="http://www.free-css.com/" accesskey="3">Information</a></li>
<li><a href="http://www.free-css.com/" accesskey="4">About</a></li>
<li><a href="http://www.free-css.com/" accesskey="5">Contact</a></li>
</ul>
</div>
<div id="search">
<form id="form1" method="get" action="http://www.free-css.com/">
<div>
<input type="text" name="textfield1" id="textfield1" />
<input type="submit" name="submit1" id="submit1" value="Search" />
</div>
</form>
</div>
</div>
<div id="content">
<div id="colOne">
<div id="logo">
<h1><a href="http://www.free-css.com/">Differential</a></h1>
<h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
</div>
<div class="boxed">
<h3>Lorem ipsum dolor</h3>
<ul>
<li class="first"><a href="http://www.free-css.com/">Sed accumsan congue</a></li>
<li><a href="http://www.free-css.com/">Nulla dignissim nec augue</a></li>
<li><a href="http://www.free-css.com/">Nunc ante elit nulla</a></li>
<li><a href="http://www.free-css.com/">Aliquam suscipit consequat</a></li>
<li><a href="http://www.free-css.com/">Cursus sed arcu sed</a></li>
<li><a href="http://www.free-css.com/">Nulla dignissim nec augue</a></li>
</ul>
</div>
<div class="boxed">
<h3>Mauris cras libero</h3>
<ul>
<li class="first"><a href="http://www.free-css.com/">Sed accumsan congue</a></li>
<li><a href="http://www.free-css.com/">Nulla dignissim nec augue</a></li>
<li><a href="http://www.free-css.com/">Nunc ante elit nulla</a></li>
<li><a href="http://www.free-css.com/">Aliquam suscipit consequat</a></li>
<li><a href="http://www.free-css.com/">Cursus sed arcu sed</a></li>
<li><a href="http://www.free-css.com/">Nulla dignissim nec augue</a></li>
</ul>
</div>
</div>
<div id="colTwo">
<div id="welcome">
<h2>Welcome to Sitename.com</h2>
<img src="differential-images/img5.jpg" alt="" width="109" height="109" class="image" />
<p><strong>Differential</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo to the left is from PDPhoto.org. You're free to use this template for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
<p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, gravida iaculis, auctor vitae, bibendum sit amet, mauris. Cras adipiscing libero et risus. Donec rutrum tempus massa. Proin at mauris sed elit venenatis porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet veroeros consequat.</p>
</div>
<div class="post">
<h3>Fusce quisque condimentum</h3>
<h4><strong>01.14.2007</strong> | <a href="http://www.free-css.com/">34 Comments</a></h4>
<p>Morbi sit amet magna ac lacus dapibus interdum. Donec nec risus vel sem dignissim tristique. Sed neque. Fusce in elit. Quisque condimentum, ante id convallis convallis, sapien est dignissim elit, vel pulvinar augue eros quis metus. Suspendisse pede nisl, gravida iaculis, auctor vitae, bibendum sit amet, mauris. Cras adipiscing libero et risus. Donec rutrum tempus massa. Proin at mauris sed elit venenatis porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros.</p>
</div>
<div class="post">
<h3>Maecenas lectus mattis</h3>
<h4><strong>01.14.2007</strong> | <a href="http://www.free-css.com/">16 Comments</a></h4>
<p>Morbi sit amet magna ac lacus dapibus interdum. Donec nec risus vel sem dignissim tristique. Sed neque. Fusce in elit. Quisque condimentum, ante id convallis convallis, sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros sapien est dignissim elit, vel pulvinar augue eros quis metus. Suspendisse pede nisl, gravida iaculis, auctor vitae, bibendum sit amet, mauris. Cras adipiscing libero et risus. Donec rutrum tempus massa. Proin at mauris sed elit venenatis porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit.</p>
</div>
</div>
</div>
<div id="footer">
<p>Copyright (c) 2006 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category