metamorph_violet : Effect « Templates « HTML / CSS






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

1.amazinglycool
2.exposure
3.expressivestars
4.extended
5.external
6.extracts
7.falling-away
8.fantasy
9.flare
10.flashyweb
11.flash_web
12.fireworks
13.floating
14.falling
15.fantasyland
16.metamorph_weird
17.metamorph_violetdream
18.metamorph_mydesign
19.metamorph_myst
20.metamorph_mywaves
21.metamorph_myweb
22.metamorph_freedom_lt
23.metamorph_gloryfield
24.metamorph_horizon
25.bubble
26.classic-luxury
27.classic
28.classique
29.classliclink
30.civilized
31.metamorph_cool
32.metamorph_imaginary
33.metamorph_infinity
34.metamorph_newage
35.metamorph_madness
36.metamorph_heaven
37.metamorph_lensflare
38.metamorph_shinyblur_lt
39.metamorph_sparks_lt
40.metamorph_soulfrost
41.metamorph_space
42.metamorph_spaceglowing
43.metamorph_sphere
44.metamorph_starwars
45.metamorph_steel
46.metamorph_stones
47.abundant
48.chalkboard
49.cool-web
50.coolblack
51.CoolishBlack
52.coolracing
53.coolzone
54.cool_web
55.creative-media
56.creative-mind
57.creative
58.creevykeel
59.decayed
60.essence
61.essential
62.auroradesktop
63.scenic-reflections