abstraction
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Abstraction | Free Web Template by WebTemplateOcean.com</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<style type='text/css'>
/*
designed by WebTemplateOcean
http://www.webtemplateocean.com/
released under Creative Commons Attribution-ShareAlike 3.0 license
*/
* {
margin: 0;
padding: 0;
}
body {
font: 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999999;
background: #000000;
}
h1, h2 {
font-weight: normal;
}
h1 {
float: left;
padding: 40px 0 0 0;
font-size: 2.5em;
letter-spacing: -1px;
color: #FFFFFF;
}
h1 a, h1 a:hover {
color: #FFFFFF;
background: none;
}
p {
padding: 10px 0;
line-height: 1.5em;
text-align: justify;
}
a {
padding: 0 4px;
color: #FFFFFF;
text-decoration: none;
background: #333333;
}
a:hover {
background: #3F3F3F;
}
/* page */
#page {
width: 960px;
margin: 0 auto;
}
#logo {
height: 114px;
padding: 0 15px;
}
/* menu */
#menu {
float: right;
height: 73px;
padding-right: 1px;
background: url('abstraction-images/menu.gif') no-repeat right top;
}
#menu ul {
list-style: none;
}
#menu ul li {
display: block;
float: left;
height: 72px;
margin-left: 1px;
padding-left: 1px;
background: #3E3E3E url('abstraction-images/menu.gif') no-repeat left top;
border-bottom: 1px solid #5E5E5E;
}
#menu ul li a {
display: block;
float: left;
margin: 0;
padding: 20px 32px 0 32px;
font-size: 1.1em;
font-weight: bold;
line-height: 52px;
text-shadow: -1px 1px 0 #000000;
color: #999999;
background: #262626 url('abstraction-images/menu2.gif') repeat-x;
}
#menu ul li a:hover {
color: #CCCCCC;
text-decoration: none;
background: #3E3E3E url('abstraction-images/menu.gif') repeat-x;
}
#topimg {
height: 300px;
background: url('abstraction-images/topimg.jpg') no-repeat top;
}
#main {
padding: 0 15px;
}
/* content */
#content {
float: left;
width: 560px;
padding-top: 50px;
}
#content h2 {
color: #FFFFFF;
font-size: 2em;
}
#content h2 a {
background: none;
}
/* post */
.post {
}
.entry {
padding: 10px 0 30px 0;
}
.postmeta {
font-size: .8em;
}
/* sidebar */
#sidebar {
float: right;
width: 315px;
padding-top: 50px;
}
#sidebar h2 {
height: 66px;
padding-left: 15px;
font-size: 1.16em;
font-weight: bold;
line-height: 40px;
color: #CCCCCC;
background: #1C1C1C url('abstraction-images/h2.gif') no-repeat;
}
#sidebar p {
text-align: left;
}
#sidebar ul {
list-style: none;
padding: 0 15px 30px 15px;
}
#sidebar ul li {
padding: 0 11px;
line-height: 2.5em;
border-bottom: 1px solid #262626;
}
#sidebar ul li a {
padding: 0 4px;
background: none;
}
#sidebar ul li a:hover {
background: #292929;
}
#sidebar .box {
padding: 0 15px 25px 15px;
}
.clearing {
clear: both;
height: 1px;
overflow: hidden;
}
/* footer */
#footer {
height: 117px;
clear: both;
color: #999999;
background: url('abstraction-images/footer.gif') no-repeat top;
}
#footer p {
padding: 30px 30px 0 30px;
font-size: .8em;
text-align: center;
}
</style>
</head>
<body>
<div id="page">
<div id="logo">
<h1><a href="#">Abstraction</a></h1>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div><!-- logo -->
<div id="topimg">
</div>
<div id="main">
<div id="content">
<div class="post">
<h2><a href="#">Terms of Use</a></h2>
<p class="postmeta">Posted in <a href="#">Class apent</a> | Mar 25, 2011 | <a href="#">4 comments</a></p>
<div class="entry">
<p>The template is released under <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution</a> license. So you are free to use it for personal or commercial purposes, modify it or redistribute as long as you keep the link back to WebTemplateOcean.com in the footer.</p>
<p>Under no circumstances can you use the template for websites with illegal or immoral (even if legal) content. This includes, but is not limited to pornography, obscenity, homosexuality, abortion, violence, drugs, gambling.</p>
</div>
</div>
<div class="post">
<h2><a href="#">Lorem ipsum dolor sit amet</a></h2>
<p class="postmeta">Posted in <a href="#">Lorem ipsum</a> | Mar 24, 2011 | <a href="#">2 comments</a></p>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec dui quis urna sollicitudin sodales. Fusce laoreet, ligula et rhoncus volutpat, felis magna varius tortor, ac molestie diam lorem in lectus. Aliquam venenatis mollis est, a porttitor ipsum interdum nec. Vestibulum sed risus ac nulla viverra pharetra.</p>
<p>Quisque congue lacus sed odio fermentum tincidunt. Proin vitae nulla velit. Cras consectetur commodo scelerisque. Curabitur leo nisl, blandit at tempus et, interdum at risus. Sed dui augue, pellentesque ac pulvinar id, malesuada eget diam. Integer elementum sem eget tortor faucibus id pellentesque lorem dignissim... <a href="#">more</a></p>
</div>
</div>
<div class="post">
<h2><a href="#">Maecenas venenatis rhoncus nulla</a></h2>
<p class="postmeta">Posted in <a href="#">Lorem ipsum</a> | Mar 23, 2011 | <a href="#">2 comments</a></p>
<div class="entry">
<p>Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum tortor a purus. Consectetuer adipiscing elit. Nulla hendrerit lacus at metus. Maecenas venenatis rhoncus nulla... <a href="#">more</a></p>
</div>
</div>
</div><!-- content -->
<div id="sidebar">
<h2>Quisque luctus</h2>
<ul>
<li><a href="#">Ut pharetra neque eget</a></li>
<li><a href="#">Nisi tristique et feugiat</a></li>
<li><a href="#">Vulputate ac hendrerit ut</a></li>
<li><a href="#">Aenean sed lectus massa</a></li>
<li><a href="#">Quisque luctus sem suscipit</a></li>
<li><a href="#">Mauris vehicula elit dictum</a></li>
</ul>
<h2>Integer rhoncus</h2>
<div class="box">
<p>Mauris sollicitudin tincidunt magna vitae semper. Curabitur ut pharetra quam. Integer rhoncus convallis urna vitae mattis. Sed pharetra massa ac metus fermentum et iaculis enim accumsan.</p>
</div>
<h2>Mauris sagittis</h2>
<ul>
<li><a href="#">Mauris sagittis tellus</a></li>
<li><a href="#">Lacus tincidunt adipiscing</a></li>
<li><a href="#">Purus sagittis feugiat</a></li>
<li><a href="#">Suspendisse faucibus purus</a></li>
<li><a href="#">Fusce rhoncus velit odio</a></li>
<li><a href="#">Maecenas aliquam vehicula</a></li>
</ul>
</div><!-- sidebar -->
<div class="clearing"> </div>
</div><!-- main -->
<div id="footer">
<p>Copyright © 2011, designed by <a href="http://www.webtemplateocean.com/">WebTemplateOcean.com</a></p>
</div>
</div><!-- page -->
</body>
</html>
Related examples in the same category