integral
<!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>Integral</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
*/
/* Elements */
body {
margin: 20px 0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #A1A1A1;
}
h1 {
}
h2, h3, h4, h5, h6 {
color: #2582A4;
}
p, ol, ul {
text-align: justify;
}
strong {
font-weight: bold;
color: #808080;
}
a {
color: #87A019;
}
a:hover {
text-decoration: none;
color: #2582A4;
}
.box {
margin-bottom: 0;
padding-bottom: 0;
background: url(integral-images/img07.gif) repeat-x left bottom;
}
.bottom {
display: block;
margin-bottom: 0;
padding-bottom: 10px;
background: url(integral-images/img08.gif) no-repeat left bottom;
}
.image {
float: left;
margin: 3px 0 0 0;
padding: 0;
}
.indent {
margin-left: 125px;
}
/* Header */
#header {
width: 928px;
height: 37px;
margin: 0 auto;
background: #BECF74 url(integral-images/img01.gif) repeat-x;
border-bottom: 3px solid #FFFFFF;
}
/* Menu */
#menu {
float: left;
width: 600px;
height: 37px;
margin: 0;
padding: 0 0 0 10px;
list-style: none;
background: url(integral-images/img02.gif) no-repeat;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
height: 27px;
padding: 10px 15px 0px 15px;
text-transform: lowercase;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
background: #A4B74C url(integral-images/img04.gif) repeat-x;
}
/* Search */
#search {
float: right;
height: 28px;
margin: 0;
padding: 9px 25px 0 0;
background: url(integral-images/img03.gif) no-repeat right top;
}
#search fieldset {
display: inline;
margin: 0;
padding: 0;
border: none;
}
#input1 {
width: 164px;
padding: 2px 5px;
background: #FFFFFF;
border: none;
}
#input2 {
height: 20px;
background: #87C4DB;
border: none;
text-transform: lowercase;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}
/* Content */
#content {
width: 928px;
margin: 0 auto;
}
#colOne {
float: left;
width: 238px;
background: url(integral-images/img05.gif) repeat-x;
}
#colOne h3 {
padding: 0 20px;
}
#colOne ul {
margin-left: 0;
padding-left: 20px;
padding-right: 20px;
list-style: none;
}
#colOne li {
padding: 5px 0;
border-top: 1px solid #EFEFEF;
}
#colOne li.first {
border: none;
}
#colTwo {
float: right;
width: 617px;
padding: 30px 40px 0 30px;
background: url(integral-images/img09.gif) repeat-x;
}
#colTwo h2 {
margin-top: 0;
font-size: 26px;
}
#colTwo h3 {
margin-bottom: 0;
font-size: 18px;
}
#colTwo h4 {
margin-top: 0;
font-size: 11px;
font-weight: normal;
}
#colTwo .box {
margin: 0 -30px 30px -20px;
padding: 0 30px 0 20px;
}
#colTwo .bottom {
margin: 0 0 20px -20px;
padding: 0 0 20px 20px;
}
/* Logo */
#logo {
height: 150px;
background: url(integral-images/img06.gif) no-repeat;
}
#logo h1, #logo h2, #logo a {
margin: 0;
padding: 0;
text-decoration: none;
text-transform: lowercase;
text-align: center;
color: #FFFFFF;
}
#logo h1 {
padding-top: 25px;
font-size: 34px;
}
#logo h2 {
margin-top: -5px;
font-size: 12px;
}
/* Footer */
#footer {
clear: both;
width: 928px;
margin: 0 auto;
padding-top: 40px;
background: url(integral-images/img11.gif) repeat-x;
}
#footer p {
margin: 0;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<ul id="menu">
<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>
<form id="search" method="get" action="http://www.free-css.com/">
<fieldset>
<input name="input1" type="text" id="input1" />
<input name="input2" type="submit" id="input2" value="Search" />
</fieldset>
</form>
</div>
<div id="content">
<div id="colOne">
<div id="logo">
<h1><a href="http://www.free-css.com/">Integral</a></h1>
<h2>Free CSS Template</h2>
</div>
<div class="box">
<h3>Lorem ipsum dolor</h3>
<ul class="bottom">
<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="box">
<h3>Mauris cras libero</h3>
<ul class="bottom">
<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">
<h2>Welcome to Sitename.com</h2>
<img src="integral-images/img10.jpg" alt="" width="109" height="109" class="image" />
<p class="indent"><strong>Integral</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 class="indent">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 class="box">
<h3>Fusce quisque condimentum</h3>
<h4><strong>12.01.2006</strong> | <a href="http://www.free-css.com/">34 Comments</a></h4>
<p class="bottom">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="box">
<h3>Maecenas lectus mattis</h3>
<h4><strong>12.01.2006</strong> | <a href="http://www.free-css.com/">16 Comments</a></h4>
<p class="bottom">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://freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category