metamorph_artgallery
<!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;
}
body
{
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background: url(images/bg.jpg);
}
#main
{
margin: 0 auto;
width: 1002px;
}
#header
{
width: 1002px;
padding: 0px;
}
#logo
{
padding-left: 40px;
text-align: left;
padding-top: 20px;
height: 86px;
}
#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: 58px;
width: 890px;
padding-left: 112px;
margin: 0 auto;
background: url(images/menu.png) no-repeat bottom;
}
#menu ul {
margin: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
float: left;
height: 38px;
padding-top: 20px;
text-decoration: none;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #ffffff;
}
.first{
background: url(images/menubor.gif) left center no-repeat;
width: 140px;
}
.end{
background: url(images/menubor.gif) left center no-repeat;
width: 138px;
}
#menu a:hover {
color: #000000;
background:url(images/menuborhover.gif) left center no-repeat;
}
#contop{
background: url(images/contop.png) no-repeat center;
height: 10px;
margin-top: 10px;
}
#content
{
width: 991px;
background: #ffff01 url(images/rightbot.jpg) no-repeat bottom right;
margin-left: 3px;
}
#content_bg{
background: url(images/conbg.jpg) repeat-y;
padding-bottom: 10px;
}
.read{
text-align:right;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding-bottom: 5px;
}
.read a{
color: #6686c0;
}
.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{
background:url(images/lefttop.jpg) no-repeat top left;
width: 714px;
height: 316px;
margin-bottom: 5px;
margin-left: 10px;
}
#wel{
background: url(images/wel.jpg) no-repeat center;
width: 400px;
height: 274px;
margin-bottom: 10px;
}
#wel h4{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color:#FFFFFF;
font-weight:normal;
}
#wel a{
color: #3f0043;
text-decoration:none;
margin-left: 15px;
}
#wel a:hover{
text-decoration:underline;
}
.web{
padding-top: 40px;
padding-left: 30px;
}
.web2{
padding-left: 70px;
padding-top:10px;
}
#weltext{
width: 185px;
color: #cecccc;
float:right;
padding-top: 30px;
}
#left
{
width: 740px;
background: #FFFFFF;
}
#leftbg a {
color: #860500;
text-decoration: none;
}
#leftbg a:hover {
color: #3f0043;
text-decoration: underline;
}
#leftbg{
background:url(images/leftbg.png) repeat-y;
margin-left: 5px;
margin-right: 5px;
}
#leftbgbot{
background: url(images/leftbgbot.png) no-repeat;
width: 728px;
height: 8px;
margin: 0 auto;
}
#left H1
{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color:#860500;
padding-bottom: 10px;
}
#leftbot1{
float:left;
width: 232px;
background:url(images/hr.jpg) right repeat-y;
padding-right: 15px;
}
#leftbot2{
float:right;
}
#right
{
width: 251px;
float:right;
background: url(images/righttop.jpg) no-repeat top right;
padding-top: 10px;
color: #000000;
}
#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:#ffffff;
padding-top:3px;
}
#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: 40px;
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 {
height: 21px;
padding-left: 25px;
margin-left: 15px;
background: url(images/titleright.png) no-repeat;
font-size: 18px;
color: #880701;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
}
#line{
background: url(images/line.jpg) no-repeat center;
height: 1px;
margin: 0 auto;
padding-bottom: 20px;
}
#footer
{
background:url(images/footer.png) no-repeat center top;
height: 43px;
margin: 0 auto;
font-size: 10px;
color: #ffffff;
padding-top: 14px;
text-align: center;
clear:both;
padding-bottom: 40px;
}
#footer a
{
color: #ffffff;
font-size: 10px;
text-decoration: none;
}
.padding
{
padding: 10px;
}
</style>
</head>
<body>
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo"><a href="#">metamorph_artgallery</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2></div>
<div id="menu">
<ul>
<li><a href="#" title="" class="first">Home</a></li>
<li><a href="#" title="" class="first">Blog</a></li>
<li><a href="#" title="" class="first">Gallery</a></li>
<li><a href="#" title="" class="first">About</a></li>
<li><a href="#" title="" class="end">Contact</a></li>
</ul>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="contop"></div>
<div id="content_bg">
<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="line"></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="leftbg">
<div id="lefttop">
<div id="wel">
<div style="float:left"><h4 class="web">WELCOME</h4>
<h4 class="web2">To Our Website</h4></div>
<div id="weltext">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet imperdiet erat. In faucibus dictum tellus quis interdum. </p>
<a href="#">Quisque hendrerit luctus risus.</a>
<div class="read2"><a href="#">read more</a></div>
</div>
</div>
</div>
<div class="padding">
<h1>Welcome to Our Website!</h1>
<img src="metamorph_artgallery-pic/img1.jpg" alt="" title="" style="float:left; padding-right: 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 : 2009 </p>
<div class="read"><a href="#">read more</a></div>
<h1 style="float:right; padding-right: 350px;">Our Gallery </h1>
<h1>Free Website Templates </h1>
<div id="leftbot1">
<p>Vestibulum ante ipsum primis in faucibus orci luctus 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 </p>
<div class="read"><a href="#">More About Us</a></div>
</div>
<div id="leftbot2">
<img src="metamorph_artgallery-pic/img2.jpg" alt="" title="" style="padding-left: 10px; padding-bottom: 5px;"/>
<img src="metamorph_artgallery-pic/img3.jpg" alt="" title="" style="padding-left: 10px; padding-bottom: 5px;"/>
<img src="metamorph_artgallery-pic/img4.jpg" alt="" title="" style="padding-bottom: 5px;"/>
</div>
</div>
</div><div id="leftbgbot" style="clear:both;"></div>
</div>
</div> <div style="clear:both"></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