metamorph_greypattern_lt
<!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>
<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
*/
*{
margin: 0px;
padding: 0px;
}
img{
padding: 0px;
border: none;
}
a{
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #000000;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #d9d4d4;
background: #202020 url(metamorph_greypattern_lt-images/bg.jpg);
}
/*logo*/
#logo{
width: 1024px;
margin: 0 auto;
padding: 20px 0px 20px 0px;
}
h1 a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
font-weight: normal;
}
h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #ffffff;
font-weight: normal;
font-style: italic;
line-height: 24px;
padding: 0px 0px 20px 0px;
}
h3{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: #ffffff;
font-weight: normal;
font-style: italic;
line-height: 24px;
padding: 15px 0px 20px 20px;
}
a small{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
font-weight: normal;
}
/*menu*/
#menu_bg{
background: url(metamorph_greypattern_lt-images/menu_bg.png) repeat-x top;
height: 63px;
}
#menu{
width: 1014px;
margin: 0 auto;
}
#menu ul {
padding-left: 0px;
list-style: none;
float:right;
}
#menu li {
display: inline;
}
#menu ul li a{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
text-align: center;
font-weight: normal;
text-decoration: none;
display: block;
float: left;
width: 100px;
height: 57px;
padding-top: 22px;
}
#menu ul li a:hover, #menu ul li .active{
color: #ffffff;
background: url(metamorph_greypattern_lt-images/hover.jpg) repeat-x top;
}
/*header*/
#header_repeat_bg{
background: url(metamorph_greypattern_lt-images/header_bg_repeat.jpg) repeat-x top;
height: 335px;
margin-bottom: 20px;
}
#header_bg{
background: url(metamorph_greypattern_lt-images/header_bg.jpg) no-repeat center;
height: 335px;
}
#header{
width: 1024px;
margin: 0 auto;
}
.header_left{
float: left;
width: 440px;
height: 320px;
}
.text{
color: #000000;
line-height: 20px;
font-size: 14px;
font-family: Arial;
padding-bottom: 20px;
}
.learn{
width: 172px;
height: 41px;
background: url(metamorph_greypattern_lt-images/header_button.png) no-repeat top left;
float: right;
text-align: center;
padding-top: 18px;
}
.learn a{
font-weight: normal;
font-size: 18px;
color: #ffffff;
display: block;
text-transform: uppercase;
font-style: italic;
}
.header_right{
float: right;
height: 320px;
}
#button_box{
float: right;
padding: 0px 10px 0px 0px;
}
#button_box a{
background: url(metamorph_greypattern_lt-images/round_button1.jpg) no-repeat top left;
width: 12px;
height: 12px;
float: left;
display: block;
padding: 0px 5px 0px 0px;
}
#button_box a:hover, #button_box .active{
background: url(metamorph_greypattern_lt-images/round_button.jpg) no-repeat top left;
}
/*content*/
#content{
width: 1024px;
margin: 0 auto;
}
.more{
width: 74px;
height: 25px;
background: url(metamorph_greypattern_lt-images/send.png) no-repeat top left;
float: right;
text-align: center;
padding-top: 0px;
margin-top: 5px;
}
.more a{
font-weight: normal;
color: #ffffff;
display: block;
}
.grey_border{
border-bottom: 1px solid #7b7b7b;
margin-bottom: 20px;
height: 10px;
clear: both;
}
.column3_box{
padding: 0px 0px 20px 0px;
}
.column3_box p a{
color: #a4a3a3;
}
.column1{
width: 320px;
float: left;
padding: 0px 20px 0px 0px;
}
.column2{
width: 320px;
float: left;
padding: 0px 20px 0px 0px;
}
.column3{
width: 320px;
float: left;
}
/*footer*/
#footer_repeat_bg{
background: url(metamorph_greypattern_lt-images/footer_repeat_bg.jpg) repeat-x top;
height: 345px;
}
#footer_bg{
background: url(metamorph_greypattern_lt-images/footer.jpg) no-repeat center;
height: 345px;
}
#footer_width{
width: 1024px;
margin: 0 auto;
}
#footer_bot{
padding-top: 20px;
border-top: 1px solid #7b7b7b;
margin-top: 20px;
}
#footer_bot_left{
float: left;
}
#footer_bot_left p, #footer_bot_left p a{
color: #ffffff;
font-weight: normal;
font-size: 10px;
}
#footer_icon{
float: right;
}
#footer_icon a{
margin-left: 10px;
}
.clear{
clear: both;
}
#footer_top{
padding: 30px 0px 0px 0px;
}
#footer_top p{
color: #000000;
}
#footer_top a{
color: #212121;
font-weight: bold;
}
#footer_left{
width: 310px;
float: left;
padding: 0px 35px 0px 0px;
}
#footer_middle{
width: 310px;
float: left;
padding: 0px 35px 0px 0px;
}
#footer_right{
width: 320px;
float: left;
}
.ul_hover_bg{
padding: 0px 0px 0px 0px;
}
.ul_hover_bg li{
list-style: none;
padding: 0px 0px 0px 0px;
height: 27px;
}
#footer_middle .ul_hover_bg li a, #contact_right .ul_hover_bg li a{
height: 23px;
color: #232323;
display: block;
padding: 5px 0px 0px 30px;
background: url(metamorph_greypattern_lt-images/ls.png) no-repeat left center;
}
#footer_middle .ul_hover_bg li a:hover{
height: 27px;
color: #a4a3a3;
background: url(metamorph_greypattern_lt-images/ul_hover.jpg) no-repeat top left;
display: block;
}
#footer_right fieldset {
border: none;
}
#footer_right input {
margin-bottom: 5px;
}
#footer_right label{
color: #000000;
margin: 5px 0px 0px 0px;
display: block;
float: left;
}
#login-submit, #contact-submit{
width: 74px;
height: 27px;
background: url(metamorph_greypattern_lt-images/send.png) no-repeat left top;
border: none;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
color: #ffffff;
padding-bottom: 5px;
}
#text1, #text2{
width: 239px;
height: 21px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
border: none;
background: url(metamorph_greypattern_lt-images/footer_input.jpg);
background-repeat:no-repeat;
background-position:left top;
color: #000000;
font-size: 12px;
padding-bottom: 5px;
float: right;
}
#text_mess {
width: 300px;
height: 62px;
padding-top: 4px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border: none;
background: url(metamorph_greypattern_lt-images/footer_mess.jpg);
background-repeat:no-repeat;
background-position:left top;
color: #000000;
font-size: 12px;
padding-bottom: 5px;
margin-bottom: 10px;
}
/*gallery*/
#gallery{
width: 1024px;
margin: 0 auto;
padding-bottom: 20px;
}
.row {
padding-left: 0px;
padding-bottom: 5px;
height: 290px;
width: 1024px;
}
.box_img2 {
width: 298px;
height: 275px;
background: url(metamorph_greypattern_lt-images/gal_box_bg.jpg) 0px 0px no-repeat;
padding: 15px 15px 0px 15px;
float:left;
}
.box_img2 h2{
padding-top: 0px;
}
.box_img2 a img{
padding-bottom: 8px;
}
.box_img2 p{
color: #000000;
}
.box_razd {
width: 14px;
height: 50px;
float: left;
}
/*contact*/
#contact{
width: 1024px;
margin: 0 auto;
}
#contact p{
color: #d9d4d4;
}
#contact p a{
color: #a4a3a3;
}
#contact_left{
width: 657px;
float: left;
padding-right: 40px;
}
#contact_right{
float: left;
width: 320px;
}
.location{
padding-bottom: 10px;
}
#contact_form fieldset {
border: none;
}
#contact_form input {
margin-bottom: 5px;
}
#contact-submit{
width: 74px;
height: 27px;
background: url(metamorph_greypattern_lt-images/send.png) no-repeat left top;
border: none;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
color: #ffffff;
padding-bottom: 5px;
}
#contact-clear{
width: 74px;
height: 27px;
background: url(metamorph_greypattern_lt-images/send.png) no-repeat left top;
border: none;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
color: #ffffff;
padding-bottom: 5px;
margin-left: 40px;
}
#con_name, #con_email, #con_website {
width: 637px;
height: 29px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
border: none;
background: url(metamorph_greypattern_lt-images/input_contact.jpg);
background-repeat:no-repeat;
background-position:left top;
color: #ffffff;
}
#con_mess {
width: 637px;
height: 115px;
padding-top: 4px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 15px;
border: none;
font-family: Arial, Helvetica, sans-serif;
background: url(metamorph_greypattern_lt-images/textarea_contact.jpg);
background-repeat:no-repeat;
background-position:left top;
color: #ffffff;
margin-bottom: 10px;
}
.read2{
padding: 10px 0px 20px 0px;
text-align: right;
}
.read2 a{
color: #940000;
text-decoration: underline;
}
.pad_left{
padding-left: 40px;
padding-bottom: 5px;
}
.date_news{
text-decoration: underline;
}
/*Blog*/
.post{
padding-bottom: 10px;
}
.news_top{
clear: both;
padding: 10px 0px 10px 0px;
}
.news_top_left{
background: url(metamorph_greypattern_lt-images/date_bg.jpg) no-repeat right;
width: 86px;
height: 80px;
float: left;
text-align: center;
}
#contact_left .news_top_left .date_day{
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: normal;
padding-top: 15px;
}
#contact_left .news_top_left .date_month{
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
padding-top: 10px;
}
.news_top_right{
float: left;
padding-left: 10px;
width: 560px;
padding-bottom: 15px;
}
.title_post_left{
float: left;
background: url(metamorph_greypattern_lt-images/user_icon.jpg) no-repeat 0px 0px;
padding: 0px 0px 0px 25px;
}
.title_post_right{
float: right;
background: url(metamorph_greypattern_lt-images/comments_icon.jpg) no-repeat 0px 0px;
padding: 0px 0px 0px 25px;
}
.layer_border{
border-bottom: 1px solid #7b7b7b;
border-top: 1px solid #7b7b7b;
padding: 5px 0px 5px 0px;
}
#contact_right .ul_hover_bg{
padding: 0px 0px 30px 0px;
}
#contact_right .ul_hover_bg li a{
width: 318px;
color: #a4a3a3;
}
#contact_right .ul_hover_bg li a:hover{
height: 27px;
color: #a4a3a3;
background: url(metamorph_greypattern_lt-images/ul_hover_blog.jpg) no-repeat top left;
display: block;
}
/*calendar*/
#calendar table {
width: 200px;
text-align: center;
color: #000000;
}
#calendar tbody td {
border: 1px solid #F1F1F1;
width: 34px;
color: #a4a3a3;
}
#calendar caption, #calendar thead th{
color: #a4a3a3;
font-weight: normal;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
#calendar a {
text-decoration: none;
font-weight: normal;
color: #a4a3a3;
}
#calendar #now {
background: #ffffff;
border: 1px solid #e60000;
font-weight: bold;
color: #740202;
}
/*
scroll styles here
*/
.item { width: 1025px; height: 315px;}
.item img {float:left;}
.item h2 { border:none; margin-bottom:15px;}
.scrollable { position:relative; overflow:hidden; width: 1025px; height: 315px;}
.scrollable .items { width:20000em; position:absolute;}
.scrollable .items div { float:left;}
.scrollable .items .item { overflow:hidden;}
.scrollable .items .item p { line-height:16px;}
.navi { width:auto; height:20px; float:right; margin:5px 0; padding-right: 20px;}
.navi a { width: 13px; cursor:pointer; height: 14px; float:left; margin:0 0 0 3px; background:url(metamorph_greypattern_lt-images/round_button.gif) no-repeat scroll right top; display:block; font-size:1px;}
.navi a:hover, .navi a.active { background-position:left top; margin:0 0 0 3px; background:url(metamorph_greypattern_lt-images/round_button1.gif) no-repeat scroll right top}
.header1
{
width: 1025px; height: 315px;
}
.header2
{
width: 1025px; height: 315px;
}
.header3
{
width: 1025px; height: 315px;
background: url(metamorph_greypattern_lt-images/top3.jpg) no-repeat;
}
/* ------------------------------------------------------------------------
DO NOT CHANGE
------------------------------------------------------------------------- */
div.pp_overlay {background: #000;display: none;left: 0;position: absolute;top: 0;width: 100%;z-index: 9500;}
div.pp_pic_holder {display: none;position: absolute;width: 100px;z-index: 10000;}
</style>
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
</head>
<body>
<div id="menu_bg">
<div id="menu">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<div id="logo">
<h1><a href="#">metamorph_greypattern</a></h1>
<a href="#" id="metamorph"><small>Small Company Slogan Goes Here</small></a>
</div>
<div id="header_repeat_bg">
<div id="header_bg">
<div id="header">
<div class="scrollable">
<div class="items">
<div class="item">
<div class="header1">
<div class="header_left">
<h3>Welcome to Our Website</h3>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, bibendum eu vestibulum vel, fringilla ac nibh. In adipiscing libero et metus sagittis tristique interdum nisi eleifend. Sed a quam turpis. Nullam mattis iaculis massa, a placerat risus suscipit id. Suspendisse semper, sapien nec tincidunt </div>
<div class="learn"><a href="#">learn more</a></div>
</div>
<div class="header_right">
<img src="metamorph_greypattern_lt-images/img3.jpg" alt="" title="" style="float: left; padding: 10px 0px 0px 0px" />
</div>
<div class="clear"></div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header2">
<div class="header_left">
<h3>Curabitur Pretium</h3>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, bibendum eu vestibulum vel, fringilla ac nibh. In adipiscing libero et metus sagittis tristique interdum nisi eleifend. Sed a quam turpis. Nullam mattis iaculis massa, a placerat risus suscipit id. Suspendisse semper, sapien nec tincidunt </div>
<div class="learn"><a href="#">learn more</a></div>
</div>
<div class="header_right">
<img src="metamorph_greypattern_lt-images/header_img2.jpg" alt="" title="" style="float: left; padding: 10px 0px 0px 0px" />
</div>
<div class="clear"></div>
</div>
</div> <!-- item -->
<div class="item">
<div class="header3">
<div class="header_left">
<h3>Curabitur Pretium</h3>
<div class="text">Sed a quam turpis. Nullam mattis iaculis massa, a placerat risus suscipit id. Suspendisse semper, sapien nec tincidunt </div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, bibendum eu vestibulum vel, fringilla ac nibh. In adipiscing libero et metus sagittis tristique interdum nisi eleifend. Sed a quam turpis. Nullam mattis iaculis massa, a placerat risus suscipit id. Suspendisse semper, sapien nec tincidunt </div>
<div class="learn"><a href="#">learn more</a></div>
</div>
<div class="header_right">
<img src="metamorph_greypattern_lt-images/header_img3.jpg" alt="" title="" style="float: left; padding: 10px 0px 0px 0px" />
</div>
<div class="clear"></div>
</div>
</div> <!-- item -->
</div> <!-- items -->
</div> <!-- scrollable -->
<div class="navi"></div> <!-- create automatically the point dor the navigation depending on the numbers of items -->
<div style="clear: both"></div>
</div>
</div>
</div>
<div id="content">
<h2>Aliquam Elementum Felis</h2>
<img src="metamorph_greypattern_lt-images/img2.jpg" alt="" title="" style="float: left; padding: 0px 20px 10px 0px"/>
<p><a href="#">In nisi tortor, adipiscing congue mattis et, vehicula id neque.</a><br />
Sed congue, ipsum ultricies dapibus malesuada, ligula purus pellentesque tellus, eu sagittis urna velit id justo. Donec vestibulum mauris eget massa egestas facilisis. Cras odio purus, condimentum non lacinia at, gravida sed leo. In sed ipsum id mi rutrum luctus. Nullam semper tristique lacus ut tincidunt. </p><br />
<p><a href="#">Aenean ac sapien vitae sapien consectetur rhoncus. </a><br />
Pellentesque libero nunc, consequat eu rutrum eu, convallis sit amet mauris. Etiam vehicula tincidunt turpis, ut varius mauris sodales et. Pellentesque id leo et metus consectetur venenatis vitae vehicula tellus. Etiam imperdiet varius lacus, et vulputate eros ullamcorper imperdiet.</p>
<div class="more"><a href="#">more</a></div>
<div class="grey_border"></div>
<div class="column3_box">
<div class="column1">
<h2>Quisque dignissim commodo fermentum</h2>
<p><a href="#">Aenean venenatis dictum sapien vitae porttitor.</a><br />
Morbi ultrices dignissim est, vel placerat arcu viverra et. Duis sagittis posuere dignissim. Donec et elit risus, sit amet tempor libero. Ut et porta odio. Integer pharetra pretium dolor sit amet porttitor. Praesent id elementum nisl. Aliquam ac lectus ac felis venenatis porta et eget nisi.</p>
<div class="more"><a href="#">more</a></div>
</div>
<div class="column2">
<h2>Donec vestibulum mauris eget massa</h2>
<p><a href="">Cras odio purus, condimentum non lacinia at, gravida sed leo.</a><br />
In sed ipsum id mi rutrum luctus. Nullam semper tristique lacus ut tincidunt. Aenean ac sapien vitae sapien consectetur rhoncus. Pellentesque libero nunc, consequat eu rutrum eu, convallis sit amet mauris. </p>
<div class="more"><a href="#">more</a></div>
</div>
<div class="column3">
<h2>Fusce sem nibh, varius a fringilla at</h2>
<p><a href="#">Suspendisse potenti.</a><br />
Etiam rhoncus quam ut velit iaculis id egestas diam eleifend. Integer auctor felis risus. Maecenas vitae massa enim, eget fermentum velit. Cras tempor orci vitae nisl posuere dapibus. Ut tempus eleifend nunc eleifend venenatis. Nam sollicitudin risus a nisl vestibulum </p>
<div class="more"><a href="#">more</a></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div id="footer_repeat_bg">
<div id="footer_bg">
<div id="footer_width">
<div id="footer_top">
<div id="footer_left">
<h2>About Us</h2>
<img src="metamorph_greypattern_lt-images/img1.jpg" alt="" title="" style="float: left; padding: 0px 20px 10px 0px"/>
<p><a href="#">Morbi id vehicula orci.</a>
Ut consequat commodo nunc nec tincidunt. Pellentesque vitae gravida nulla. Aliquam fermentum ipsum et mauris rutrum ac ornare convallis justo in eros fermentum eget cursus augue cursus. Donec sit amet eros eget ligula blandit congue. </p>
</div>
<div id="footer_middle">
<h2>Recent Posts</h2>
<ul class="ul_hover_bg">
<li><a href="#">Lorem ipsum dolor sit amet, consectetur adip</a></li>
<li><a href="#">Quisque nec lectus leo, et condimentum massa.</a></li>
<li><a href="#">Suspendisse porttitor purus a nisl tincidunt at </a></li>
<li><a href="#">Aliquam et leo quis massa ultricies varius non </a></li>
<li><a href="#">Morbi eget arcu metus, facilisis rhoncus mi.</a></li>
<li><a href="#">Morbi condimentum enim in lorem iaculis ultr</a></li>
</ul>
</div>
<div id="footer_right">
<h2>Contact Form</h2>
<form id="form1" method="post" action="#">
<fieldset>
<label>Name:</label><input id="text1" type="text" name="text1" value="" alt=""/>
<div class="clear"></div>
<label>E-mail:</label><input id="text2" type="text" name="text2" value="" alt=""/><br />
<textarea id="text_mess" name="text_mess" cols="0" rows="0"></textarea><br />
<input type="submit" id="login-submit" value="Send"/>
</fieldset>
</form>
</div>
<div class="clear"></div>
</div>
<div id="footer_bot">
<div id="footer_bot_left">
<p>Copyright 2011. <!-- Do not remove -->Designed by <a href="http://www.metamorphozis.com/free_templates/free_templates.php" title="Free Web Templates">Free Web Templates</a>, coded by <a href="http://www.myfreecsstemplates.com/" title="Free CSS Templates">Free CSS Templates</a><!-- end --></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>
<div id="footer_icon">
<a href="#"><img src="metamorph_greypattern_lt-images/facebook.png" alt="" title=""/></a>
<a href="#"><img src="metamorph_greypattern_lt-images/twitter.png" alt="" title=""/></a>
<a href="#"><img src="metamorph_greypattern_lt-images/yahoo.png" alt="" title=""/></a>
<a href="#"><img src="metamorph_greypattern_lt-images/rss.png" alt="" title=""/></a>
<a href="#"><img src="metamorph_greypattern_lt-images/youtube.png" alt="" title=""/></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category