entomology
<!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>Entomology</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
*/
* {
margin: 0;
padding: 0;
}
body {
background: #FFFEF5 url(entomology-images/img01.gif);
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #767941;
}
h1, h2, h3 {
color: #F08F02;
}
h1 {
}
h2 {
margin-bottom: 1em;
text-transform: uppercase;
font-size: 1.2em;
}
h3 {
margin-bottom: 1.5em;
text-transform: uppercase;
font-size: .8em;
}
p, blockquote, ul, ol {
margin-bottom: 1.5em;
}
p {
}
blockquote {
margin-left: 2em;
padding-left: 1em;
border-left: 2px solid #F08F02;
font-style: italic;
}
ul, ol {
margin-left: 3em;
}
ul {
}
ul li {
}
ol {
}
ol li {
}
pre, code {
}
pre {
}
code {
}
a:link {
color: #F08F02;
}
a:hover {
text-decoration: none;
}
a:visited {
}
img {
}
.image-left {
float: left;
margin-right: 1em;
}
.image-right {
float: right;
margin-left: 1em;
}
input, textarea, select {
}
input {
}
textarea {
}
select {
}
/* Header */
#header {
height: 230px;
padding: 0 0 0 330px;
background: url(entomology-images/img02.jpg) no-repeat;
}
/* Logo */
#logo {
height: 80px;
padding: 150px 0 0 30px;
background: url(entomology-images/img03.jpg) no-repeat;
text-transform: lowercase;
}
#logo h1 {
float: left;
letter-spacing: -.1em;
font-style: italic;
font-size: 3em;
}
#logo h1 a {
color: #767941;
}
#logo h2 {
float: left;
letter-spacing: -.05em;
font-style: italic;
font-size: 1em;
}
#logo a {
text-decoration: none;
}
/* Wrapper */
#wrapper {
margin-right: 100px;
background: url(entomology-images/img05.jpg) repeat-y 330px 0;
}
/* Sidebar */
#sidebar {
float: left;
width: 330px;
}
/* Content */
#content {
margin-left: 330px;
padding: 30px;
}
/* Menu */
#menu {
}
#menu h2 {
display: none;
}
#menu ul {
margin: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
height: 45px;
padding: 16px 0 0 30px;
background: url(entomology-images/img04.jpg) repeat-x;
text-decoration: none;
font-size: 1.4em;
font-style: italic;
color: #767941;
}
#menu a:hover {
color: #F08F02;
}
/* Testimonial */
#testimonial {
padding: 30px;
}
#testimonial blockquote {
margin-left: 0;
}
/* Welcome */
#welcome {
}
/* Footer */
#footer {
padding: 60px 30px;
background: url(entomology-images/img06.gif);
color: #ADB07C
}
#footer hr {
display: none;
}
#footer p {
margin: 0;
font-size: .8em;
}
#footer a {
color: #ADB07C
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="http://www.free-css.com/">Entomology</a></h1>
<h2><a href="http://www.free-css.com/">By Free CSS Templates</a></h2>
</div>
</div>
<div id="wrapper">
<div id="sidebar">
<div id="menu">
<h2>Navigation Menu</h2>
<ul>
<li><a href="http://www.free-css.com/" accesskey="1">Homepage</a></li>
<li><a href="http://www.free-css.com/" accesskey="2">About Us</a></li>
<li><a href="http://www.free-css.com/" accesskey="3">Products</a></li>
<li><a href="http://www.free-css.com/" accesskey="4">Services</a></li>
<li><a href="http://www.free-css.com/" accesskey="5">Forums</a></li>
<li><a href="http://www.free-css.com/" accesskey="6">Join Us</a></li>
<li><a href="http://www.free-css.com/" accesskey="7">Contact Us</a></li>
</ul>
</div>
<div id="testimonial">
<h2>Testimonial</h2>
<blockquote>
<p>“Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.”</p>
<p><em>Jane Smith</em><br />
<a href="http://www.free-css.com/">www.example.com</a></p>
</blockquote>
</div>
</div>
<div id="content">
<div id="welcome">
<p class="image-right"><img src="entomology-images/img200x150.jpg" alt="" width="200" height="150" /></p>
<h2>Welcome to Entomology!</h2>
<p><strong>Entomology</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 photos are from PDPhoto.org. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
</div>
<div id="example">
<h2>Common Markup Examples</h2>
<p>This is a paragraph followed by an unordered list of links. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.</p>
<ul>
<li><a href="http://www.free-css.com/">Integer sit amet pede vel arcu aliquet pretium.</a></li>
<li><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
<li><a href="http://www.free-css.com/">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
<li><a href="http://www.free-css.com/">Pellentesque quis elit non lectus gravida blandit.</a></li>
<li><a href="http://www.free-css.com/">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
</ul>
<h3>A Heading Level Three</h3>
<blockquote>
<p>This is a blockquote. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.</p>
</blockquote>
<h3>A Heading Level Three</h3>
<p>Another paragraph example followed by an ordered list:</p>
<ol>
<li>Integer sit amet pede vel arcu aliquet pretium.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
</ol>
</div>
</div>
<div style="height: 1px; clear: both;"></div>
</div>
<div id="footer">
<hr />
<p id="links"><a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Terms of Use</a> | <a href="http://www.free-css.com/">RSS Feeds</a></p>
<p id="legal">Copyright © 2007 Entomology. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
</body>
</html>
Related examples in the same category