metamorph_limemint_lt : Design « Templates « HTML / CSS






metamorph_limemint_lt

      

<!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: #ffffff;
  line-height: 18px;
}



#bg_bot {
  background: url(metamorph_limemint_lt-images/bg_bot.jpg) center bottom no-repeat;}

#bg_top {
  background: url(metamorph_limemint_lt-images/bg_top.jpg) center top no-repeat;}
  
#bg_bot_g {
  background: url(metamorph_limemint_lt-images/bg_bot_g.png) bottom repeat-x; }

#bg_top_g {
  background: url(metamorph_limemint_lt-images/bg_top_g.png) top repeat-x;}



  
#main {
  width: 960px;
  margin: 0px auto;
  background:url(metamorph_limemint_lt-images/main.jpg) right top no-repeat;}

#header { 
  width:960px;
  height: 273px;
}

#logo {  
    height: 97px;
    padding: 57px 0px 0px 7px;
    float:left;
    width: 290px;
}


#logo a {
  text-decoration: none;
  text-transform: lowercase;
  font-size: 14px;
  font-weight:bold;
  color: #1A3129;
}
  
#logo H2 a{
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

#buttons{
  float:right;
  width: 568px;
  text-align:center;
  height: 48px;
  margin-left: 0px;
  padding-top: 15px;
  background: url(metamorph_limemint_lt-images/but_bg.png) left top no-repeat;
}

#buttons a {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  font-weight: bold;
  display: block;
  float: left;
  text-decoration: none;
  color: #1A3129;
  text-align: center;
  padding-top: 13px;
  height: 32px;
  width: 110px;
  text-transform:uppercase;
}

.but {
  
  
}

.but_razd { width: 3px;
  height: 45px;
  background:url(metamorph_limemint_lt-images/razd_but.gif);
  float:left;}

#buttons .but:hover {
  text-decoration: none;
  background: url(metamorph_limemint_lt-images/but_hover.png) top repeat-x;}
  
.line {background: #142B23;
    height: 3px;}
  
.top_top { height: 13px;
      background:url(metamorph_limemint_lt-images/top_top.gif) 0px 0px no-repeat;}
.top_bot { height: 13px;
      background:url(metamorph_limemint_lt-images/top_bot.gif) 0px bottom no-repeat;}
  
.top { height:245px;
  background: url(metamorph_limemint_lt-images/top.gif) left repeat-y #BADA44;
  padding: 7px 0px 7px 0px}
  
.top_left {
  width: 322px;
  height: 245px;
  padding: 0px 10px 0px 10px;
  margin: 0px 20px 0px 7px;
  background: #FFFFFF;
  float:left;}

.top_right {
  float: left;
  width: 506px;}

.top_text {
  width: 858px;
  float:left;
  background: url(metamorph_limemint_lt-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_limemint_lt-images/content.gif) left repeat-y #BADA44;
  width: 920px;
  padding: 0px 20px 0px 20px;
}

#content_razd{
  background: url(metamorph_limemint_lt-images/content_razd.gif) 623px repeat-y;
  padding: 10px 0px 10px 0px;
  clear:both;
  
}

.i_left {
width: 532px;
float:left;}

.i_right {
width: 373px;
float:right;}

.i_box_w {
  width: 512px;
  background: #FFFFFF;
  height: 211px;
  padding: 10px 10px 10px 10px}


#left{
  width: 613px;
  float: left;
  color:#000000;
  margin-left: 0px;
  padding: 0px 0px 0px 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;
}

.read{
  display:block;
  float:right;
  height: 20px;
  width: 65px;
  text-align: center;
  padding: 0px 0px 0px 0px;
  text-decoration: none;
  font-size:12px;
  color: #000000;
}



.read:hover {
  font-size:12px;
  text-decoration: none;
}
.read_bg1 {
background:url(metamorph_limemint_lt-images/read_bg1.gif) top ;}

.read_bg2 {
background:url(metamorph_limemint_lt-images/read_bg2.gif) top repeat-x;}

.next {
  width: 100%;
  text-align: right;
  padding: 0px 0px 0px 0px;}

  .next a{
  color:#FFFFFF;
  text-decoration: none; }

.next a:hover {
  text-decoration: underline; }



#right{
  float: right;
  width: 280px;
  margin-right: 0px;
}

.span_dat {
  color: #002380;
  text-decoration: underline;}
  
  
.bot_top {
height: 13px;
background: url(metamorph_limemint_lt-images/bot_top.gif) 0px 0px no-repeat;
}

.bot_bot {
height: 13px;
background: url(metamorph_limemint_lt-images/bot_bot.gif) 0px bottom no-repeat;
}
  
#bottom {
  width: 100%;
  background:url(metamorph_limemint_lt-images/bot_bg.gif) left repeat-y;
  color:#FFFFFF;
  padding: 10px 0px 10px 0px;
}

.bottom_bg_h1 {
width: 920px;
margin-left: 20px;
padding: 15px 0px 0px 0px;
background: url(metamorph_limemint_lt-images/bot_bg_h1.gif) top repeat-x #476031;}

#bottom h2{
  font-family:Georgia, "Times New Roman", Times, serif;
  padding: 0px 0px 0px 0px;
  font-size: 18px;
  text-align: left;
  color: #000000;
  font-weight: bold;
  line-height: 20px;
}

.b_col1 {
  width: 157px;
  float: left;
  margin-left: 30px;
}
.b_col2 {
  width: 207px;
  float: left;
  margin-left: 29px;
  line-height: 25px;
}
.b_col3 {
  width: 238px;
  float: left;
  margin-left: 27px;
  text-align: left;
}
.b_col4 {
  width: 174px;
  float: left;
  margin-left: 48px;
  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_limemint_lt-images/fish1.gif) 0px 14px no-repeat;
  }
.b_col1 ul a:hover {
  text-decoration:underline;
  }
  
.b_col1 ul a {
  color:#ffffff;
  text-decoration:none;}
  
.fu_i {
  padding: 0px 14px 0px 0px;
  vertical-align: middle ;
}

.b_col4 ul {
  list-style:none;
  padding: 0px 0px 0px 0px;}

.b_col4 li {
  padding: 8px 0px 2px 0px;
  background: none;
  }
  
.b_col4 li a {
  color:#FFFFFF;
  text-decoration: none;
  
}
.b_col4 li a:hover {
  text-decoration: underline;
}

#footer{
  height: 80px;
  font-size: 12px;
  color: #1A3129;
  text-align: center;
  padding: 26px 0px 0px 0px;
  background: url(metamorph_limemint_lt-images/footer.jpg) 0px 15px no-repeat;
}

#footer a{
  color: #1A3129;
  font-size: 12px;
  text-decoration: none;
}

#footer a:hover{
  color: #1A3129;
  font-size: 12px;
  text-decoration: underline;
}

/* blog */

.text{
  padding: 10px 15px 15px 15px;
  background: #FFFFFF;
  clear:both;
}

.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_limemint_lt-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_limemint_lt-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_limemint_lt-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_limemint_lt-images/blog_l_razd.gif) 12px repeat-x;
height:12px;}


/* gallery */

.row {
  padding: 0px 0px 0px 0px;
  height: 229px;
}

.box_img2 {
  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_limemint_lt-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_limemint_lt-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_limemint_lt-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_limemint_lt-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;
}

.scroll_left
{
float: left;
width: 350px;
}

.scroll_right
{
float: right;
width: 490px;
padding-top: 3px;
padding-left: 30px;
}

.my_header
{
width: 870px;
}


/*
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: 270px; overflow: hidden !important; padding-right: 10px }
  
  /* Change the width of the entire slider (without dynamic arrows) */
  .coda-slider, .coda-slider .panel { width: 930px } 
  
  /* Change margin and width of the slider (with dynamic arrows) */
    .coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 890px }
  .coda-slider-wrapper.arrows .coda-slider { margin: 0px }
  
  /* Arrow styling */
  .coda-nav-left a { background: url(metamorph_limemint_lt-images/top_left.gif) no-repeat; color: #fff; width: 19px; height: 17px; text-indent: -9000em; margin-left: 15px; margin-top: 100px;}
  .coda-nav-right a { background: url(metamorph_limemint_lt-images/top_right.gif) no-repeat; color: #fff; width: 19px; height: 17px; text-indent: -9000em; margin-top: 100px;}
  
  /* 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="bg_bot_g">
<div id="bg_top_g">

<div id="main">
<!-- header begins -->
<div id="header">
  <div id="logo">
      <a href="#">metamorph_limemint</a>
        <h2><a href="#"><small>Company Slogan Goes Here</small></a></h2>
    </div>
   <div id="buttons"><div class="but_razd"></div>
      <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 class="but_razd"></div>
    </div>
</div>
<!-- header ends -->
<div class="top_top"></div>
<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="my_header">
        <div class="scroll_right"><img src="metamorph_limemint_lt-images/top_img.jpg" alt="" /></div>
          <div class="scroll_left"><h1>Lorem Ipsum Dolor</h1>
          Maecenas pellentesque ipsum ac erat imperdiet vitae scelerisque tellus sodales. Suspendisse rutrum faucibus leo eget tristique. Mauris pretium scelerisque est ut faucibus. Sed feugiat eleifend justo ut porttitor. Donec vitae purus ut felis venenatis aliquet. Integer egestas rhoncus quam ut placerat. In hac habitasse platea dictumst. Sed porttitor purus eget ligula vehicula vel viverra justo placerat. Maecenas faucibus pharetra nibh vitae vehicula. Maecenas lacus metus, porta sit amet dapibus in, euismod sit amet massa. Phasellus ac tortor at quam varius lacinia. 
          <div style="height:8px"></div>
        <div style="height:20px">
          <a href="#" class="read read_bg2">read more</a>
        </div> <div style="clear: both;"></div>
        </div>
         </div>
      </div>
    </div>
        
    <div class="panel">
      <div class="panel-wrapper">
        
        <div class="my_header">
          <div class="scroll_right"><img src="metamorph_limemint_lt-images/top_img2.jpg" alt="" /></div>
          <div class="scroll_left"><h1>Suspendisse quis nibh purus, a laoreet ante.</h1>
          In interdum lectus eget diam vehicula eu feugiat leo bibendum. Donec enim erat, dictum eu consectetur vitae, commodo eu nibh. Quisque in diam risus. Etiam gravida varius elit ac dignissim. Donec vitae volutpat ipsum. Vivamus porttitor, nulla vitae pulvinar congue, magna tortor ullamcorper justo, sed rutrum nulla lacus sed risus. Vivamus facilisis, ante in scelerisque fringilla, justo lorem imperdiet nulla, a laoreet mi turpis vel mi.
            <div style="height:8px"></div>
        <div style="height:20px">
          <a href="#" class="read read_bg2">read more</a>
        </div> <div style="clear: both;"></div>
          </div>
          </div>
        
      </div>
    </div>
    <div class="panel">
      <div class="panel-wrapper">
        
        <div class="my_header">        
          <div class="scroll_right"><img src="metamorph_limemint_lt-images/top_img3.jpg" alt="" /></div>
          <div class="scroll_left">
            <span class="span_cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br /> 
Nam justo odio, congue id fermentum sit amet, placerat sed nibh. Vestibulum pharetra nibh eu magna accumsan tristique. Sed ac velit urna, venenatis vulputate purus. 
<div style="height:8px"></div>
        <div style="height:20px">
          <a href="#" class="read read_bg2">read more</a></div>
<span class="span_cont">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br /> 
Nam justo odio, congue id fermentum sit amet, placerat sed nibh. Vestibulum pharetra nibh eu magna accumsan tristique. Sed ac velit urna, venenatis vulputate purus. 
<div style="height:8px"></div>
        <div style="height:20px">
          <a href="#" class="read read_bg2">read more</a></div>

          </div>
          </div>
        
      </div>
    </div>
  </div><!-- .coda-slider -->
</div>

<!--
  <a href="#"><img src="metamorph_limemint_lt-images/top_left.gif" style="float:left;  padding: 114px 0px 0px 20px" alt="" /></a>
    
    <div class="top_left">
      <div style="height:8px"></div>
      <h1>Vivamus tempor mauris at mi convallis tempor.</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_limemint_lt-images/top_img.jpg" width="506" height="245" class="top_img" alt="" />
    </div>
  <a href="#"><img src="metamorph_limemint_lt-images/top_right.gif" style="float: right; padding: 114px 20px 0px 0px;" alt="" /></a> -->
</div>
<div class="top_bot"></div>

<!-- content begins -->       
<div id="content">
  <div>
    <img src="metamorph_limemint_lt-images/img11.jpg" class="img_r" alt="" />
      <h1>In in risus tellus</h1>
    <b>Suspendisse vitae laoreet magna. Integer malesuada porttitor elit, </b>at cursus massa malesuada a. Donec vel nulla a enim iaculis tempus. Nullam quis dolor suscipit nulla pellentesque ultrices sit amet pellentesque ligula. In id purus sed ligula luctus egestas.<br /><br />
    <b>Sed augue dui, egestas ut viverra eu, scelerisque sed magna.</b><br />
     Mauris nibh nulla, faucibus a sagittis at, lacinia in tellus. Quisque lorem enim, malesuada id dignissim id, cursus sed metus. Donec a rhoncus eros.  
        <div style="height:3px"></div>
        <div style="height:20px">
          <a href="#" class="read read_bg1">read more</a>
        </div>  
        <div style="clear: both"></div>  
      </div>   
      <div>
        <div style="height:15px"></div>
        <div class="i_left">
          <h1>The Last Project</h1>
            <div style="height:10px"></div>
            <div class="i_box_w">
              <img src="metamorph_limemint_lt-images/img12.jpg" class="img_l" alt="" />
                <b>Nunc justo est, suscipit at laoreet vel, placerat eget velit. </b><br />Quisque iaculis facilisis dui, sed sagittis sapien aliquam tincidunt. Proin pretium diam quis orci.<br />
        <b>Placerat sit amet ullamcorper lectus blandit. </b>Fusce eu metus vitae massa euismod tempor. Fusce condimentum leo accumsan dolor laoreet.
        <div style="height:8px"></div>
                <div style="height:20px">
                    <a href="#" class="read read_bg2">read more</a>
                </div>
            </div> 
        </div>  
        <div class="i_right">
          <h1>Company News</h1>
            <div style="height:10px"></div>
            <b>Nov. 10, 2010</b><div style="height:5px"></div>
            <b>Suspendisse rutrum interdum lacinia.</b><br />
      Suspendisse tempus aliquet elit sit amet pellentesque. Donec iaculis pulvinar mauris,
            <div style="height:4px"></div>
            <div style="height:20px">
                <a href="#" class="read read_bg1">read more</a>
            </div>
            <div style="height:10px"></div>
            <b>Nov. 11, 2010</b><div style="height:5px"></div>
            <b>In ut varius leo. Ut ante nisl, faucibus ut mollis at.</b><br />
      Suscipit et augue. In hac habitasse platea dictumst. Donec ornare, dui nec faucibus mattis, velit felis eleifend nisi, eu luctus purus enim eget leo.
            <div style="height:4px"></div>
            <div style="height:20px">
                <a href="#" class="read read_bg1">read more</a>
            </div>
        </div>
        <div style="clear: both"></div>
      </div>  
     <div style="clear: both; height: 12px;"></div>                  
</div>
    <!-- content ends --> 
    <!-- bottom begin -->
<div class="line"></div>
<div id="bottom">

<div class="bottom_bg_h1">
    <div class="b_col1">
      <h2>Services</h2>
      <div style="height:15px"></div>
        <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 class="b_col2">
        <h2>Contact Information</h2>
        <div style="height:15px"></div>
        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 class="b_col3">
        <h2>Recent Posts</h2>
        <div style="height:15px"></div>
        <b>Donec lobortis bibendum pellentesque.</b> Sed lobortis, arcu sit amet tempus interdum, dui sem convallis turpis, sed eleifend arcu urna sit amet lacus.<br /><br />

        <b>Nunc justo est, suscipit at laoreet vel,</b> placerat eget velit. Quisque iaculis facilisis dui, sed sagittis sapien aliquam tincidunt.

        
    </div>
  <div class="b_col4">
        <h2>Follow Us</h2>
        <div style="height:15px"></div>
        <ul>
            <li><img src="metamorph_limemint_lt-images/fu_i1.gif" class=" fu_i" alt="" /><a href="#">Lorem ipsum dolor</a></li>
            <li><img src="metamorph_limemint_lt-images/fu_i2.gif" class=" fu_i" alt="" /><a href="#">Maecenas in turpis </a></li>
            <li><img src="metamorph_limemint_lt-images/fu_i3.gif" class=" fu_i" alt="" /><a href="#">Morbi fringilla libero</a></li>
            <li><img src="metamorph_limemint_lt-images/fu_i4.gif" class=" fu_i" alt="" /><a href="#">In venenatis metus vel </a></li>
        </ul>
  </div>
  <div style="clear: both; height:20px;"></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>

</div>
</div>


</body>
</html>

   
    
    
    
    
    
  








Related examples in the same category

1.wcsst-10
2.wcsst-11
3.wcsst-12
4.wcsst-15
5.wcsst-16
6.wcsst-17
7.wcsst-18
8.wcsst-19
9.wcsst-2
10.wcsst-20
11.wcsst-21
12.wcsst-22
13.wcsst-23
14.wcsst-24
15.wcsst-25
16.wcsst-26
17.wcsst-3
18.wcsst-4
19.wcsst-5
20.wcsst-6
21.beez-design
22.metamorph_camomile
23.metamorph_champagne
24.metamorph_clover
25.metamorph_dao
26.metamorph_dna
27.metamorph_lilac
28.metamorph_lilium
29.metamorph_lime
30.metamorph_lionpride
31.metamorph_swallowtail-indexl
32.metamorph_synchronized_lt
33.metamorph_temple
34.metamorph_vectorart
35.metamorph_wow
36.wcsst-7
37.wcsst-9
38.bouquet
39.baseline
40.beautifulday
41.bedazzled
42.Beehives
43.beez
44.begeodan
45.cleo-studio
46.cloverleaf
47.CMS Style
48.dragonfly
49.nautica
50.Nautica022
51.Nautica02Liquid
52.Nautica03
53.Nautica04
54.nautica05
55.nautica05dark
56.nautica08
57.nauticax
58.soothing