metamorph_violet
<!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;
}
img
{
border: 0px;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #1A3129;
background: url(metamorph_violet-images/bg.jpg) ;
line-height: 18px;
}
#bg_bot {
background: url(metamorph_violet-images/bg_bot.jpg) center bottom repeat-x;}
#bg_top {
background: url(metamorph_violet-images/bg_top.jpg) center top repeat-x;}
#main {
width: 900px;
margin: 0px auto;
background:url(metamorph_violet-images/main.jpg) right top no-repeat;}
#header {
height: 184px;
}
#logo {
padding: 43px 0px 0px 3px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-size: 14px;
font-weight:bold;
color: #F4A6E4;
}
#logo H2 a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#buttons{
text-align:center;
height: 49px;
margin-left: 0px;
padding-top: 0px;
background: url(metamorph_violet-images/but_bg.png) left top no-repeat;
}
#buttons a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: 100;
display: block;
float: left;
text-decoration: none;
color: #1E0225;
text-align: center;
padding-top: 13px;
height: 32px;
width: 177px;
text-transform:uppercase;
background: #F4A6E4;
}
.but {
}
.but_razd { width: 3px;
height: 45px;
background:url(metamorph_violet-images/but_razd.gif);
float:left;}
#buttons .but:hover {
text-decoration: none;
background: #E07ACB;}
.top { height:293px;
background: #817580;
padding: 15px 0px 15px 0px}
.top_left {
width: 230px;
height: 293px;
padding: 0px 15px 0px 15px;
margin: 0px 14px 0px 6px;
background: #F4A6E4;
float:left;}
.top_right {
float: left;
width: 532px;}
.top_text {
width: 858px;
float:left;
background: url(metamorph_violet-images/content_text.png);
height: 245px;
padding: 0px 0px 0px 10px;
margin: 0px 0px 0px 7px}
.top h1 {
color:#1A3129;
font-size: 18px;
padding: 0px 0px 0px 0px;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
#content{
background: url(metamorph_violet-images/content.gif) 15px repeat-y #817580;
width: 870px;
padding: 0px 15px 0px 15px;
color: #F4A6E4
}
#left{
width: 552px;
float: left;
margin-left: 0px;
padding: 15px 0px 15px 0px;
}
.img_l { float:left;
margin: 0px 15px 0px 0px;
}
.img_r { float: right;
margin: 0px 0px 0px 15px;
}
.span_cont { color: #1A3129;
font-size:12px;
font-weight:bold;
}
H1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: bold;
color: #1A3129;
text-align: left;
padding: 0px 0px 0px 0px;
line-height: 20px;
}
.color_h {
color: #F4A6E4;}
.read{
display:block;
float:right;
height: 20px;
width: 65px;
text-align: center;
padding: 0px 0px 0px 0px;
text-decoration: none;
font-size:12px;
color: #FC0202;
font-weight: bold;
}
.read:hover {
font-size:12px;
text-decoration: underline;
}
#right{
float: right;
width: 273px;
padding: 15px 15px 15px 15px;
}
#bottom {
width: 100%;
background: #817580;
color:#1E0225;
padding: 15px 0px 15px 0px;
}
#bottom h2{
font-family:Georgia, "Times New Roman", Times, serif;
padding: 25px 0px 20px 0px;
font-size: 18px;
text-align: left;
color: #1E0225;
font-weight: bold;
line-height: 20px;
}
.b_col1 {
width: 280px;
float: left;
margin-left: 15px;
}
.b_col2 {
width: 280px;
float: left;
margin-left: 15px;
line-height: 25px;
}
.b_col3 {
width: 280px;
float: left;
margin-left: 15px;
text-align: left;
}
.b_col1 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
.b_col1 li {
padding: 8px 0px 0px 20px;
background: url(metamorph_violet-images/fish1.gif) 0px 14px no-repeat;
}
.b_col1 ul a:hover {
text-decoration:underline;
}
.b_col1 ul a {
color: #1E0225;
text-decoration:none;}
.fu_i {
padding: 0px 14px 0px 0px;
vertical-align: middle ;
}
.b_col3 ul {
list-style:none;
padding: 0px 0px 0px 0px;}
.b_col3 li {
padding: 8px 0px 2px 0px;
background: none;
}
.b_col3 li a {
color:#1E0225;
text-decoration: none;
}
.b_col3 li a:hover {
text-decoration: underline;
}
.b_col_top { background: url(metamorph_violet-images/b_col_top.png) top repeat-x;}
.b_col_bot { background: url(metamorph_violet-images/b_col_bot.png) bottom repeat-x;
padding-left: 60px;
height: 290px;}
#footer{
height: 76px;
font-size: 12px;
color: #F4A6E4;
text-align: center;
padding: 30px 0px 0px 0px;
background: url(metamorph_violet-images/footer.jpg) 0px 15px no-repeat;
}
#footer a{
color: #F4A6E4;
font-size: 12px;
text-decoration: none;
}
#footer a:hover{
color: #F4A6E4;
font-size: 12px;
text-decoration: underline;
}
/* blog */
.text{
padding: 0px 15px 0px 15px;
}
.dat_img {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
color: #142B23;
float:left;
width: 30px;
height: 30px;
padding: 10px 0px 0px 10px;
margin-right: 15px;
background:url(metamorph_violet-images/dat_img.gif) 0px 0px no-repeat;}
.a_non {
text-decoration: none;
color: #142B23;}
.a_non a:hover {
text-decoration: none;}
.a_und {
text-decoration: underline;
color: #142B23;}
.a_und:hover {
text-decoration: none;}
.datc_coment {
height: 20px;
width: 100%;
background: url(metamorph_violet-images/datc_coment.gif) top repeat-x;
padding: 12px 0px 0px 0px;}
.datc {
float: left;
width: 346px;}
.coment {
float: right;
width: 146px;
text-align:right;}
.spis {
list-style:none;
padding: 0px 0px 0px 0px;}
.spis li {
padding: 6px 0px 4px 2px;
background:url(metamorph_violet-images/spis.gif) bottom repeat-x;
}
.spis a:hover {
text-decoration: none;
}
.spis a {
color:#142B23;
text-decoration:none;
font-weight: bold;}
.blog_l_razd {
background: url(metamorph_violet-images/blog_l_razd.gif) 12px repeat-x;
height:12px;}
/* gallery */
.row {
padding: 0px 0px 0px 0px;
height: 229px;
}
.box_img {
width: 266px;
height: 214px;
background: #FFFFFF;
padding: 15px 15px 0px 15px;
float:left;
}
.box_razd {
width: 16px;
height: 50px;
float: left;
}
.rol_over:hover {
background:url(metamorph_violet-images/rol_over_galery.png) left top no-repeat;
}
.g_size {
width: 298px;
height: 123px;
display: block;
}
/* contact us */
#left_cont {
width: 682px;
float:left;
padding: 15px 0px 0px 0px;
}
#right_cont {
width: 254px;
float: right;
padding: 15px 0px 0px 0px;
}
.input_txt2 {
width: 583px;
border: none;
background: url(metamorph_violet-images/input_txt2.gif) left top repeat-x;
padding: 8px 15px 8px 15px;
color:#142B23;
}
.text_area2 {
width: 583px;
height:130px;
font-size: 14px;
border: none;
background: url(metamorph_violet-images/text_area2.gif) 0px 0px repeat-x;
padding: 8px 15px 8px 15px;
color:#142B23;
font-family:Arial, Helvetica, sans-serif;
}
.submit2 {
background: url(metamorph_violet-images/read_bg1.gif) top repeat-x;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color: #142B23;
text-decoration: none;
padding: 2px 2px 2px 2px;
width: 63px;
margin: 0px 0px 0px 0px;
}
.lh {
line-height: 22px;
}
/*
Header Scroller
*/
/*
jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
Copyright (c) 2009 Niall Doherty
This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/
/* Insignificant stuff, for demo purposes */
.panel h2.title { margin-bottom: 10px }
noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px }
/* Most common stuff you'll need to change */
.coda-slider-wrapper { padding: 0px }
.coda-slider { background: none}
/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { height: 308px; overflow: hidden !important; padding-right: 20px }
/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel { width: 870px }
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 824px }
.coda-slider-wrapper.arrows .coda-slider { margin: 0px }
/* Arrow styling */
.coda-nav-left a { background: url(metamorph_violet-images/top_left.gif) no-repeat 0px 120px; color: #fff; width: 27px; height: 308px; text-indent: -9000em; margin-left: 10px}
.coda-nav-right a { background: url(metamorph_violet-images/top_right.gif) no-repeat 0px 120px; color: #fff; width: 27px; height: 308px; text-indent: -9000em;}
/* Tab nav */
.coda-nav ul li a.current { background: #39c }
/* Panel padding */
.coda-slider .panel-wrapper { padding: 0px }
/* Preloader */
.coda-slider p.loading { padding: 20px; text-align: center }
/* Don't change anything below here unless you know what you're doing */
/* Tabbed nav */
.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
.coda-nav ul li { display: none }
.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }
/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: hidden }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { float: left }
.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
</style>
<!-- Begin JavaScript -->
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="lib/jquery.coda-slider-2.0.js"></script>
<!-- Initialize each slider on the page. Each slider must have a unique id -->
<script type="text/javascript">
$().ready(function() {
$('#coda-slider-2').codaSlider({
autoSlide: true,
autoSlideInterval: 6000,
autoSlideStopWhenClicked: true
});
});
</script>
<!-- End JavaScript -->
</head>
<body>
<div id="bg_top">
<div id="bg_bot">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
<a href="index.html" class="but" title="">Home</a><div class="but_razd"></div>
<a href="blog.html" class="but" title="">Blog</a><div class="but_razd"></div>
<a href="gallery.html" class="but" title="">Gallery</a><div class="but_razd"></div>
<a href="about_us.html" class="but" title="">About us</a><div class="but_razd"></div>
<a href="contact_us.html" class="but" title="">Contact us</a>
</div>
<div id="logo">
<a href="#">metamorph_violet</a>
<h2><a href="#" id="metamorph">Company Slogan Goes Here</a></h2>
</div>
</div>
<!-- header ends -->
<div class="top">
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-2">
<div class="panel">
<div class="panel-wrapper">
<div class="top_left">
<div style="height:8px"></div>
<h1>Vivamus tempor mauris.</h1>
<span class="span_cont">Ut tellus erat, ultricies sed cursus sit amet.</span><br />
Vestibulum vel nibh. Sed suscipit lobortis massa, imperdiet feugiat ante bibendum et. Phasellus viverra, lectus a tristique rutrum, ante justo cursus odio.<br /><br />
<span class="span_cont">Ut semper nunc metus ac sapien.</span><br />Aenean ut sapien ut nulla mollis gravida in quis elit. Vivamus pretium scelerisque augue eget aliquet. Nulla facilisi. Aliquam erat volutpat.
<div style="height:8px"></div>
<div style="height:20px">
<a href="#" class="read read_bg2">read more</a>
</div>
</div>
<div class="top_right"><img src="metamorph_violet-images/top_img.jpg" width="532" height="293" class="top_img" alt="" /></div>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<div class="top_left">
<div style="height:8px"></div>
<h1>Vivamus tempor mauris.</h1>
<span class="span_cont">Ut tellus erat, ultricies sed cursus sit amet.</span><br />
Vestibulum vel nibh. Sed suscipit lobortis massa, imperdiet feugiat ante bibendum et. Phasellus viverra, lectus a tristique rutrum, ante justo cursus odio.<br /><br />
<span class="span_cont">Ut semper nunc metus ac sapien.</span><br />Aenean ut sapien ut nulla mollis gravida in quis elit. Vivamus pretium scelerisque augue eget aliquet. Nulla facilisi. Aliquam erat volutpat.
<div style="height:8px"></div>
<div style="height:20px">
<a href="#" class="read read_bg2">read more</a>
</div>
</div>
<div class="top_right"><img src="metamorph_violet-images/top_img2.jpg" width="532" height="293" class="top_img" alt="" /></div>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<div class="top_left">
<div style="height:8px"></div>
<h1>Vivamus tempor mauris.</h1>
<span class="span_cont">Ut tellus erat, ultricies sed cursus sit amet.</span><br />
Vestibulum vel nibh. Sed suscipit lobortis massa, imperdiet feugiat ante bibendum et. Phasellus viverra, lectus a tristique rutrum, ante justo cursus odio.<br /><br />
<span class="span_cont">Ut semper nunc metus ac sapien.</span><br />Aenean ut sapien ut nulla mollis gravida in quis elit. Vivamus pretium scelerisque augue eget aliquet. Nulla facilisi. Aliquam erat volutpat.
<div style="height:8px"></div>
<div style="height:20px">
<a href="#" class="read read_bg2">read more</a>
</div>
</div>
<div class="top_right"><img src="metamorph_violet-images/top_img3.jpg" width="532" height="293" class="top_img" alt="" /></div>
</div>
</div>
</div><!-- .coda-slider -->
</div>
<!--
<a href="#"><img src="metamorph_violet-images/top_left.gif" style="float:left; padding: 140px 0px 0px 15px" alt="" /></a>
<div class="top_left">
<div style="height:8px"></div>
<h1>Vivamus tempor mauris.</h1>
<span class="span_cont">Ut tellus erat, ultricies sed cursus sit amet.</span><br />
Vestibulum vel nibh. Sed suscipit lobortis massa, imperdiet feugiat ante bibendum et. Phasellus viverra, lectus a tristique rutrum, ante justo cursus odio.<br /><br />
<span class="span_cont">Ut semper nunc metus ac sapien.</span><br />Aenean ut sapien ut nulla mollis gravida in quis elit. Vivamus pretium scelerisque augue eget aliquet. Nulla facilisi. Aliquam erat volutpat.
<div style="height:8px"></div>
<div style="height:20px">
<a href="#" class="read read_bg2">read more</a>
</div>
</div>
<div class="top_right"><img src="metamorph_violet-images/top_img.jpg" width="532" height="293" class="top_img" alt="" /></div>
<a href="#"><img src="metamorph_violet-images/top_right.gif" style="float: right; padding: 140px 15px 0px 0px;" alt="" /></a>
-->
</div>
<!-- content begins -->
<div id="content">
<div id="left">
<div class="text">
<img src="metamorph_violet-images/img1.jpg" class=" img_l" alt="" />
<h1 class=" color_h">Lorem ipsum dolor</h1>
<strong>Lorem ipsum dolor sit amet.</strong><br />
Consectetur adipiscing elit. Sed enim ante, faucibus in pharetra et.<br /><br />
<strong>Nulla tellus mi.</strong><br />
Sodales tincidunt ultrices vehicula, mattis vel justo. Sed in nisl leo, sit amet ornare enim.
tempor odio tincidunt. Ut luctus volutpat libero in auctor. Vestibulum tempor ligula est.
<div style="height:20px">
<a href="#" class="read read_bg2">read more</a>
</div>
</div>
<div style="height:15px"></div>
<div style="height:15px; background: #817580"></div>
<div style="height:15px"></div>
<div class="text">
<img src="metamorph_violet-images/img3.jpg" class="img_r" alt="" />
<h1 class=" color_h">Company project</h1>
<strong>Vestibulum vel lacus eget nisl</strong><br />
Iaculis interdum non id massa. Nulla mollis, magna quis feugiat faucibus. <br />
<br />
<strong>Duis in tellus vel ipsum</strong><br />
Vivamus pretium scelerisque augue eget aliquet. Nulla facilisi. Aliquam erat volutpat.
<div style="height:20px">
<a href="#" class="read read_bg2">read more</a>
</div>
</div>
</div>
<div id="right">
<img src="metamorph_violet-images/img2.jpg" alt="" />
<div style="height:10px"></div>
<h1 class="color_h">Vestibulum vel lacus.</h1>
<strong>Vivamus tempor mauris at mi convallis tempor.</strong><br />
Ut tellus erat, ultricies sed cursus sit amet, ves- tibulum vel nibh. Sed suscipit lobortis massa.<br /><br />
<strong>Aenean ut sapien ut nulla mollis gravida.</strong><br />
Vivamus pretium scelerisque augue eget aliquet. Nulla facilisi. Aliquam erat volutpat. Donec lobortis bibendum pellentesque. Ut luctus volutpat libero in auctor.
<div style="height:20px">
<a href="#" class="read read_bg2">read more</a>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!-- content ends -->
<!-- bottom begin -->
<div id="bottom">
<div class="bottom_bg_h1">
<div class="b_col1 b_col_top">
<div class="b_col_bot">
<h2>Services</h2>
<ul>
<li><a href="#">Service Number 1</a></li>
<li><a href="#">Service Number 2 </a></li>
<li><a href="#">Service Number 3</a></li>
<li><a href="#">Service Number 4</a></li>
<li><a href="#">Service Number 5 </a></li>
<li><a href="#">Service Number 6</a></li>
<li><a href="#">Service Number 7</a></li>
</ul>
</div>
</div>
<div class="b_col2 b_col_top">
<div class="b_col_bot">
<h2>Contact Information</h2>
1234 SomeStreet<br />
Brooklyn, NY 11201<br />
Phone: 1(234) 567 8910<br />
Fax: 1(234) 567 8910<br />
E-mail: companyname@yahoo.com
</div>
</div>
<div class="b_col3 b_col_top">
<div class="b_col_bot">
<h2>Follow Us</h2> <ul>
<li><img src="metamorph_violet-images/fu_i1.png" class=" fu_i" alt="" /><a href="#">Lorem ipsum dolor</a></li>
<li><img src="metamorph_violet-images/fu_i2.png" class=" fu_i" alt="" /><a href="#">Maecenas in turpis </a></li>
<li><img src="metamorph_violet-images/fu_i3.png" class=" fu_i" alt="" /><a href="#">Morbi fringilla libero</a></li>
<li><img src="metamorph_violet-images/fu_i4.png" class=" fu_i" alt="" /><a href="#">In venenatis metus vel </a></li>
</ul>
</div>
</div>
<div style="clear: both; height:1px;"></div>
</div>
</div>
<div class="bot_bot"></div>
<!-- bottom end -->
<!-- footer begins -->
<div id="footer">
Copyright 2011. Designed by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a><br />
<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></div>
<!-- footer ends -->
</div>
</div>
</div>
</body>
</html>
Related examples in the same category