isometric
<!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>Isometric</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: #FFFFFF url(isometric-images/img1.gif) repeat-x;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
color: #8F8F8F;
}
h2, h3, h4, h5, h6 {
margin: 0;
}
h2 {
text-transform: lowercase;
letter-spacing: -1px;
font-size: 26px;
font-weight: normal;
color: #31576F;
}
h2 em {
font-weight: bold;
font-style: normal;
}
h3 {
height: 25px;
background: #0077A7 url(isometric-images/img3.gif) repeat-x left bottom;
padding: 13px 0 0 20px;
text-transform: lowercase;
font-size: 11px;
color: #FFFFFF;
}
p, ol, ul {
line-height: 180%;
}
ul {
margin-left: 0;
padding-left: 0;
list-style-position: inside;
}
a {
color: #6B6B6B;
}
a:hover {
text-decoration: none;
}
.image {
float: left;
margin: 0 20px 0 0;
}
.bg1 {
padding: 0 20px 20px 20px;
border-top: 1px solid #FFFFFF;
background: #FFFFFF url(isometric-images/img4.gif) repeat-x;
}
.bg2 {
padding: 20px;
border-top: 1px solid #CBE1EF;
background: #FFFFFF url(isometric-images/img4.gif) repeat-x;
}
/* Header */
#header {
width: 892px;
height: 160px;
margin: 0 auto;
}
#header * {
margin: 0;
padding: 0;
text-transform: lowercase;
color: #FFFFFF;
}
#header h1 {
float: left;
padding: 70px 0 0 10px;
font-size: 33px;
}
#header h2 {
float: left;
padding: 91px 0 0 10px;
font-size: 11px;
font-weight: normal;
}
#header ul {
float: right;
margin: 0;
padding: 82px 0 0 0;
list-style: none;
}
#header li {
display: inline;
}
#header a {
display: block;
float: left;
height: 25px;
margin: 0 0 0 8px;
padding: 12px 20px 0 20px;
background: #ABBA47 url(isometric-images/img2.gif) repeat-x;
text-decoration: none;
font-weight: bold;
}
/* Content */
#content {
width: 892px;
margin: 0 auto;
}
#colOne {
float: left;
width: 186px;
}
#colOne ul {
padding-left: 0;
list-style: none none outside;
}
#colOne li {
padding: 5px 0;
background: url(isometric-images/img6.gif) repeat-x;
}
#colOne li.first {
background: none;
}
#colTwo {
float: right;
width: 686px;
}
/* Footer */
#footer {
clear: both;
width: 892px;
margin: 0 auto;
padding: 30px 0;
background: url(isometric-images/img7.gif) repeat-x
}
#footer p {
margin: 0;
text-align: center;
text-transform: lowercase;
}
</style>
</head>
<body>
<div id="header">
<h1>Isometric</h1>
<h2>Free CSS Template</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">My Blog</a></li>
<li><a href="http://www.free-css.com/" accesskey="3">Photo Gallery</a></li>
<li><a href="http://www.free-css.com/" accesskey="4">Favorite Sites</a></li>
<li><a href="http://www.free-css.com/" accesskey="5">Contact Me</a></li>
</ul>
</div>
<div id="content">
<div id="colOne">
<h3>Lorem ipsum dolor</h3>
<div class="bg1">
<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>
</ul>
</div>
<h3>veroeros etiam</h3>
<div class="bg1">
<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>
<li><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>
</ul>
</div>
</div>
<div id="colTwo">
<div class="bg2">
<h2><em>Welcome</em> to my website</h2>
<p><img src="isometric-images/img5.jpg" alt="" width="105" height="95" class="image" /></p>
<p><strong>Isometric</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 :) Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus mauris sed elit venenatis porttitor. Morbi quam nisl, fringilla quis, sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet.</p>
</div>
<h3>Dignissim volutpat</h3>
<div class="bg1">
<p>Sed tempus turpis vel quam molestie pulvinar. Suspendisse venenatis dolor semper ipsum. Quisque tempus erat ac mi. Aliquam semper, est nec hendrerit dignissim, ligula turpis sagittis purus, <a href="http://www.free-css.com/">ut viverra velit eros at augue</a>. Pellentesque mi nisi, porta eget, pharetra ac, sollicitudin sit amet, nisi. In sapien ligula, sollicitudin facilisis, sodales eget, tempus in, mauris. Cras risus sem, adipiscing non, convallis ac, consectetuer eu, dolor. In quam. Curabitur tempus aliquam nulla. Etiam eros.</p>
</div>
<h3>Blandit sed consequat</h3>
<div class="bg1">
<p>Sollicitudin sit amet, nisi. In sapien ligula, sollicitudin facilisis, sodales eget, tempus in, mauris. Cras risus sem, adipiscing non, convallis ac, consectetuer eu, dolor. In quam. Curabitur tempus aliquam nulla. Etiam eros.</p>
<ul>
<li><a href="http://www.free-css.com/">Sed tempus turpis vel quam molestie pulvinar</a></li>
<li><a href="http://www.free-css.com/">Suspendisse venenatis dolor semper ipsum quisque tempus</a></li>
<li><a href="http://www.free-css.com/">Ac mi aliquam semper est nec hendrerit dignissim</a></li>
</ul>
</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