metamorph_colorwaves : Color « Templates « HTML / CSS

HTML / CSS » Templates » Color 
metamorph_colorwaves
      

<!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;
}


a{
  color: #711419;
  text-decoration:none;
}

a:hover{
  text-decoration: underline;
  color: #000000;
}

body{
  font: 12px Arial, Helvetica, sans-serif;
  color: #000000;
  background: #A8270F;
  line-height:20px;
}


#bg{
  width: 1027px;
  margin: 0px auto;
  background:url(metamorph_colorwaves-images/bg.gifrepeat-y;
}

#main{
  width: 999px;
  margin: 0px auto;
  background:#FFFFFF;
  background: url(metamorph_colorwaves-images/top.jpgtop no-repeat #FFFFFF;
}

#bot {  background:url(metamorph_colorwaves-images/bottom.jpgbottom no-repeat;
padding: 10px 10px 0px 10px;
width: 979px;
}


#header width:979px;
padding: 0px 0px 0px 0px;
height: 302px;
}

#logo{
font-family:Georgia, "Times New Roman", Times, serif;
color: #000000;
font-style:italic;
font-weight: bold;
font-size: 18px;
padding: 57px 0px 0px 678px
}

#logo H1{
font-family:Georgia, "Times New Roman", Times, serif;
color: #000000;
font-style:italic;
font-weight: bold;
font-size: 18px;
}

#logo H2{
font-family:Georgia, "Times New Roman", Times, serif;
color: #000000;
font-style:italic;
font-weight: bold;
font-size: 14px;
}


#buttons{
  width: 979px;
  height: 48px;
  background: url(metamorph_colorwaves-images/menu.pngleft top no-repeat;
  text-align:center;
}

#buttons ul {
    padding-left: 0px;
    margin: 0px;
}

#buttons li {
  display: inline;
}

#buttons a {
  font-family: Georgia, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight:normal;
  display: block;
  float: left;
  width: 146px;
  height: 35px;
  text-decoration: none;
  color: #FFFFFF;
  padding-top: 13px;
  margin-left: 42px;
  text-align: center;
}

#buttons a:hover {
  text-decoration: underline;
  background:url(metamorph_colorwaves-images/bg_but.jpg0px 2px repeat-x;
}

#content{
  width: 977px;
  padding: 0px 0px 0px 0px;
  background: url(metamorph_colorwaves-images/cont_bg.jpgleft top repeat-x #CE492D;
  margin: 0px 1px 0px 1px;
}

#conttop{
  background: url(metamorph_colorwaves-images/cont_top.gif0px 0px no-repeat;
  width: 977px;
  height: 8px;
  margin: 0px 1px 0px 1px;
}

#contbot{
  background: url(metamorph_colorwaves-images/cont_bot.gif0px bottom no-repeat;
  width: 977px;
  height: 8px;
  margin: 0px 1px 0px 1px;
}

#razd {
background: url(metamorph_colorwaves-images/razd.gif476px repeat-y;
width: 952px;
min-height: 602px;
padding: 0px 14px 0px 12px;
}

#left{
  width: 455px;
  padding: 0px 0px 0px 0px;
  margin: 0px;
  float:left;
}

#center{float:left;
padding: 0px 0px 0px 21px;
width:228px;
}

.text{
  padding: 8px 0px 0px 0px;
}

.img {  float:left;
    margin: 10px 12px 5px 0px;
}

.img_l {margin: 15px 0px 0px 19px;}

span {  color:#ffffff;
    font-weight:bold;
}

.red color:#8A0000;}

.col_l 
  float: left;
  width:200px;
}

.col_r 
  float: right;
  width:210px;
  margin-right: 20px;
}
.img_b float:none;}

H1{
  font-family: Georgia, Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight:normal;
  color: #FFFFFF;
  padding-bottom: 5px;
  padding-left: 0px;
  background:url(metamorph_colorwaves-images/tit_bg.gifbottom repeat-x;
}

.read{
  text-align:right;
  padding-right:0px;
  padding-top: 8px;
}

.view{
  text-align:right;
  padding-right:0px;
  padding-top: 5px;
}

#right{
float:right;
width: 222px;
background: url(metamorph_colorwaves-images/right_bg.gifleft repeat-y;
padding-right: 0px;
margin-left: 21px;
}



#center ul 
{
  list-style: none;
  padding-left:0px;
  padding-top:10px;
  margin: 0px;
  display:block;
  padding-bottom: 0px;
}

#center li{
  padding-top: 5px;
  background: url(metamorph_colorwaves-images/fish_cent.png0px 12px no-repeat;
  padding-left: 32px;
}

#footer{
  height: 40px;
  width: 586px;
  font-size: 10px;
  color: #000000;
  padding-top: 8px;
  text-align: center;
  clear:both;
  padding: 15px 5px 15px 5px;
}

#footer a{
  color: #000000;
  font-size: 10px;
  text-decoration: none;
}

#footer a:hover{
  color: #000000;
  font-size: 10px;
  text-decoration: underline;
  
}

</style>


</head>
<body>

<div id="bg">
    <div id="main">
    <div id="bot">
    <!-- header begins -->
    <div id="header">
        <div id="buttons">
            <ul>
              <li class="first"><a href="#"  title="">Home</a></li>
              <li><a href="#" title="">Blog</a></li>
              <li><a href="#" title="">Gallery</a></li>
               <li><a href="#" title="">About Us</a></li>
              <li><a href="#" title="">Contact Us</a></li>
            </ul>
        </div>
        <div id="logo">
      <h1><a href="#">metamorph_colorwaves</a></h1>
      <h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
    </div>
    </div>
    <!-- header ends -->
        <div id="conttop"><img src="metamorph_colorwaves-images/spaser.gif" alt="" width="1" height="1" /></div>
        <!-- content begins -->
        <div id="content">
            <div id="razd">
                <div id="left">
                    <h1>Metamorphosis Design</h1>
                    <div class="text">
                      <img src="metamorph_colorwaves-images/img1.jpg" class="img" alt="" />
                        <span>Lorem ipsum dolor sit amet.</span> <br />
                        Consectetur adipiscing elit. Vestibulum eget pulvinar turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque aliquam viverra mi at porta. Cras posuere, enim eu ornare aliquet, lectus nibh vulputate risus, ut ullamcorper dui
                        purus non eros. Nullam sollicitudin fringilla pharetra. Praesent sit amet lectus a justo viverra luctus. Sed est eros, ultrices vitae malesuada ac, rutrum non nisl. Vivamus a elit mi. Integer accumsan euismod accumsan. Vivamus quis massa eu leo varius venenatis sed et augue. Cras faucibus diam ac mi facilisis...
                    </div>
                     <div class="read"><a href="#"><img src="metamorph_colorwaves-images/but_read.png" alt="" /></a></div><br />
                     <h1>Free Website Templetes</h1>
                  <div class="text">
                      <div class="col_l">
                          <img src="metamorph_colorwaves-images/img2.jpg" alt="" width="178" height="116" /><br />
                           <div class="text">
                           <span>Lorem ipsum dolor sit amet.</span><br />
                           Mauris venenatis nunc vestibulum felis porttitor sagittis. Donec nec arcu tempus dui pretium varius et...
                           <div class="read"><a href="#"><img src="metamorph_colorwaves-images/but_read.png" alt="" /></a></div>
                           </div>
                           <br />
                      </div>
                        <div class="col_r">
                            <img src="metamorph_colorwaves-images/img3.jpg" alt="" width="178" height="116" /><br />
                              <div class="text">
                               <span>Sed eget eros et mi.</span><br />Fringilla commodo adipiscing quis dolor. Nam at turpis augue, ac porta turpis. Nunc sodales lacus eu urna... 
                               <div class="read"><a href="#"><img src="metamorph_colorwaves-images/but_read.png" alt="" /></a></div><br />
                               </div>
                        </div>
                  </div>
                </div>
                <div id="center">
                    <h1>Free Website Templates</h1>
                     <ul>
                        <li><span class="dat">05-11-2009 </span><br />
                            <span class="red">Lorem ipsum dolor sit amet. </span><br />
                            Consectetur adipiscing elit. Aliquam in sapien lorem. Morbi in nunc in ligula malesuada faucibus sit amet at leo. Donec sollicitudin nulla porta quam adipiscing nec suscipit sapien mattis. Fusce dignissim, elit et fringilla convallis, turpis felis tincidunt mi, vel auctor nisl risus eu quam. Aenean...
                            <div class="read"><a href="#"><img src="metamorph_colorwaves-images/but_read.png" alt="" /></a></div><br />
                        </li>
                        <li><span class="dat">05-11-2009 </span><br />
                            <span class="red">Lorem ipsum dolor sit amet. </span><br />
                            Consectetur adipiscing elit. Aliquam in sapien lorem. Morbi in nunc in ligula malesuada faucibus sit amet at leo. Donec sollicitudin nulla porta quam adipiscing nec suscipit sapien mattis. Fusce dignissim, elit et fringilla convallis, turpis felis tincidunt mi, vel auctor nisl risus eu quam. Aenean...
                            <div class="read"><a href="#"><img src="metamorph_colorwaves-images/but_read.png" alt="" /></a></div><br />
                        </li>
                     </ul>
                    
                </div>
                <div id="right">
                    <h1>Latest Photos</h1>
                    <img src="metamorph_colorwaves-images/img4.jpg" height="116" width="178" class="img_l" alt="" /><br />
                    <img src="metamorph_colorwaves-images/img5.jpg" height="116" width="178" class="img_l" alt="" /><br />
                    <img src="metamorph_colorwaves-images/img6.jpg" height="116" width="178" class="img_l" alt="" /><br />
                    <img src="metamorph_colorwaves-images/img7.jpg" height="116" width="178" class="img_l" alt="" /><br />
                    <div class="read"><a href="#"><img src="metamorph_colorwaves-images/but_view.png" alt="" /></a></div>
                </div>
                <div style="clear: both"><img src="metamorph_colorwaves-images/spaser.gif" alt="" width="1" height="1" /></div>
            </div>
        </div>
        <!-- content ends -->
        <div id="contbot"><img src="metamorph_colorwaves-images/spaser.gif" alt="" /></div>
        <!-- footer begins -->
        <div id="footer">
      Copyright  2009. 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.metamorph_colorful
2.metamorph_colourswirls
3.metamorph_contrast
4.colorimetry
5.colors_one
6.colorvoid-website-template
7.colorvoid
8.Color_Pencils
9.colourise1-0
10.colourworld
11.monoblock
12.monochrome
13.monotone
14.tricolor
15.i-love-colour-1
16.Light color tempalte
17.Light color template
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.