metamorph_abstractred
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Metamorphosis Design Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/
*
{
border: 0;
margin: 0;
}
a{
color: #b20303;
text-decoration:none;
}
a:hover{
color:#000000;
text-decoration:underline;
}
body
{
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background: #e32406 url(images/bg.jpg) repeat-x;
}
#main
{
margin: 0 auto;
width: 1000px;
border-left: 8px solid #ffffff;
border-right: 8px solid #ffffff;
}
#logo
{
padding-left: 40px;
text-align: left;
padding-top: 120px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
}
#logo H2 a{
font-size: 10px;
}
#menu {
height: 47px;
width: 1000px;
margin: 0 auto;
background: url(images/headbg.jpg) no-repeat bottom;
border-bottom: 8px solid #ffffff;
margin-bottom: 8px;
}
#menu ul {
margin: 0;
list-style: none;
padding-left: 20px;
}
#menu li {
display: inline;
}
#menu a {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight:normal;
color:#FFFFFF;
text-decoration: none;
float: left;
height: 39px;
width: 190px;
padding-top: 8px;
text-align: center;
padding-right: 3px;
background:url(images/menu.png) no-repeat;
}
#menu a:hover {
color: #ffffff;
background:url(images/menuhov.png) no-repeat;
}
#content
{
width: 986px;
background:url(images/rightbg.png) right repeat-y;
margin-left: 7px;
margin-right: 7px;
}
#content_bg{
background: #fbc153 url(images/mainbg.jpg) no-repeat top;
padding-bottom: 10px;
}
.read{
text-align:right;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 5px;
}
.read a{
color: #ff0000;
}
.read a:hover{
color: #6686c0;
text-decoration: underline;
}
.read2{
text-align:right;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 5px;
}
.read2 a{
color: #ff0000;
}
.read2 a:hover{
color: #6686c0;
text-decoration: underline;
}
#lefttop{
height: 200px;
}
#left{
width: 700px;
}
#lefttopbor{
background:url(images/lefttop.png) no-repeat;
height: 7px;
}
#leftbg{
background:url(images/leftbg.png) repeat-y;
}
#left H1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color:#860000;
font-weight:normal;
padding-bottom: 1px;
background: url(images/hleft.gif) repeat-x bottom;
margin-bottom: 5px;
margin-left: 3px;
margin-right: 3px;
padding-left: 10px;
padding-top: 10px;
}
#right{
width: 277px;
float:right;
color: #000000;
}
#righttop{
background: url(images/righttop.png) no-repeat right;
height: 7px;
margin-right: 7px;
}
#right ul {
list-style: none;
padding: 5px;
margin: 0px;
display:block;
min-height: 144px;
}
#right ul li{
margin-left: 10px;
padding-left: 20px;
margin-top: 10px;
background: url(images/ls.png) top left no-repeat;
}
#categoties h3{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
padding-top:3px;
font-weight:normal;
}
#categoties a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
color: #820000;
text-decoration:none;
}
#categoties a:hover{
color: #3f0043;
text-decoration:underline;
}
#archives ul li {
margin-bottom: 5px;
padding-right: 10px;
background:url(images/ls2.png) no-repeat left top;
}
#archives ul li a{
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #820000;
text-decoration: none;
}
#archives ul li a:hover{
text-decoration: underline;
}
#right h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color:#860000;
font-weight:normal;
padding-bottom: 1px;
background: url(images/hleft.gif) repeat-x bottom;
margin-bottom: 5px;
margin-left: 3px;
margin-right: 3px;
padding-left: 10px;
padding-top: 10px;
}
#conbot{
background:url(images/conbot.gif) no-repeat;
height: 7px;
}
#gal{
background: url(images/gallary.jpg);
width: 690px;
text-align:center;
color: #c6a5af;
height: 193px;
clear:both;
margin: 0 auto;
}
h4{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
color: #850301;
font-weight:normal;
text-align:center;
padding-top: 3px;
padding-bottom: 5px;
}
#gal a{
color:#FFFFFF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
background:url(images/gala.jpg) no-repeat center;
width: 158px;
height: 26px;
float: left;
padding-top: 8px;
}
#gal a:hover{
background:url(images/galahov.jpg) no-repeat center;
}
#col1{
float:left;
width: 162px;
margin-left: 18px;
}
#col2{
float: left;
width: 162px;
margin-left: 85px;
margin-right: 85px;
}
#col3{
float: left;
width: 162px;
margin-right: 1px;
}
#footer
{
background:url(images/footer.jpg) no-repeat center top;
height: 37px;
margin: 0 auto;
font-size: 10px;
color: #ffffff;
padding-top: 14px;
text-align: center;
clear:both;
border-top: 8px solid #ffffff;
}
#footer a
{
color: #ffffff;
font-size: 10px;
text-decoration: none;
}
.padding
{
padding: 10px;
}
</style>
</head>
<body>
<div id="main">
<div id="menu">
<ul>
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Blog</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">About</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</div>
<!-- content begins -->
<div id="content_bg"><div id="righttop"></div>
<div id="content">
<div id="right">
<h2>Categories </h2>
<div id="categoties">
<ul>
<li>
<p><a href="#">Vestibulum</a></p>
<h3>Phasellus commodo mauris </h3>
</li>
<li>
<p><a href="#">Integer</a></p>
<h3>Cras varius malesuada hendrerit</h3>
</li>
<li>
<p><a href="#">Praesent</a></p>
<h3>Phasellus at magna orci</h3>
</li>
<li>
<p><a href="#">Suspendisse</a></p>
<h3>Nam tempor elit ut dui hendrerit</h3>
</li>
<li>
<p><a href="#">Aliquam</a></p>
<h3>Nullam ac risus orci</h3>
</li>
</ul>
</div>
<div id="archives">
<h2>Archives</h2>
<ul>
<li>Vivamus aliquet mi iaculis metus adipiscing ac accumsan purus imperdiet.
<div class="read"><a href="#">read more</a></div></li>
<li>Etiam egestas nunc fringilla ante porta consequat.
<div class="read"><a href="#">read more</a></div></li>
<li>Fusce sed nibh ac arcu consectetur venenatis.
<div class="read"><a href="#">read more</a></div></li>
</ul>
</div>
</div>
<div id="left">
<div id="lefttop">
<div id="logo"><a href="#">metamorph_abstractred</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
</div>
</div><div id="lefttopbor"></div>
<div id="leftbg">
<h1>Welcome to Our Website!</h1>
<div class="padding">
<img src="metamorph_abstractred-pic/img1.jpg" alt="" title="" style="float:right; padding-left: 10px; padding-bottom: 5px;"/>
<p>This website template is repeased under a Creative Commons Attribution 2.5 License</p>
<p>We request you retain the full copyright notice below including the link to www.metamorphozis.com.<br />
This not only gives respect to the large amount of time given freely by the developers<br />
but also helps build interest, traffic and use of our free and paid designs. If you cannot (for good
reason) retain the full copyright we request you at least leave in place the<br />
Website Templates line, with Website Templates linked to www.metamorphozis.com. If you refuse
to include even this then support may be affected.<br />
<br />
You are allowed to use this design only if you agree to the following conditions:<br />
- You cannot remove copyright notice from this design without our permission.<br />
- If you modify this design it still should contain copyright because it is based on our work.<br />
- You may copy, distribute, modify, etc... this template as long as link to our website remains untouched.<br />
For support visit <a href="http://www.metamorphozis.com/contact/contact.php">http://www.metamorphozis.com/contact/contact.php</a><br />
<br />
The Metamorphosis Design : 2008 </p>
<div class="read"><a href="#">read more</a></div>
</div>
<h1>Free Website Templates</h1>
<div class="padding">
<a href="#">Vestibulum ante ipsum primis in faucibus orci luctus.</a>
<p>Et ultrices posuere cubilia Curae; Phasellus commodo mauris ac dui congue a elementum augue lacinia. Ut imperdiet sodales urna, sit amet ullamcorper ante lobortis eu. Nunc eu commodo lorem. Aliquam hendrerit felis quis tortor molestie cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet vestibulum accumsan.</p> <br />
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam porttitor arcu a neque placerat condimentum. Vestibulum laoreet luctus lobortis. Proin lacinia urna ut ipsum fermentum eu eleifend tellus imperdiet. Suspendisse ut varius dolor. Vivamus eget scelerisque tortor. Etiam vitae erat augue, vel sollicitudin arcu. Curabitur blandit nisl at ligula cursus a facilisis tortor pulvinar. Praesent vitae blandit dui. Proin et nisl tellus. Nullam ac nisi dolor, non rutrum dolor. Phasellus aliquam tempus mi semper sagittis. Vestibulum ut nulla augue, non tempus lectus. Suspendisse potenti. Vivamus id ligula sed felis euismod cursus. Curabitur eu metus elit. Sed a odio at nulla dictum consectetur congue vitae leo. Maecenas pellentesque lacus eu risus sollicitudin porta. Suspendisse justo lectus, pretium vitae vulputate dignissim, tristique ut risus. Cras at nisl vel odio mollis molestie a eget felis. </p>
<div class="read"><a href="#">More About Us</a></div></div>
<div id="gal">
<h4>Our Gallery</h4>
<div id="col1">
<img src="metamorph_abstractred-pic/img2.jpg" alt="" />
<div><a href="#">view details</a></div>
</div>
<div id="col2">
<img src="metamorph_abstractred-pic/img3.jpg" alt="" />
<div><a href="#">view details</a></div>
</div>
<div id="col3">
<img src="metamorph_abstractred-pic/img4.jpg" alt="" />
<div><a href="#">view details</a></div>
</div>
</div>
<div style="clear:both"></div>
</div>
</div> <div id="conbot"></div>
</div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
<p>Copyright 2009. Designed by <a href="http://www.metamorphozis.com/" title="Free Website Templates">Free Website Templates</a></p>
<p><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p></div>
<!-- footer ends -->
</div>
</body>
</html>
Related examples in the same category