metamorph_ball : Art « Templates « HTML / CSS

HTML / CSS » Templates » Art 
metamorph_ball
      

<!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: #000000;
  background: #B4B4B4;
  line-height: 20px;
}


#bg2 {
  width: 100%;
  height: 100%;
  background: url(metamorph_ball-images/bg_top.gif)  top repeat-x;}

#header 
  width:1016px;
  background: url(metamorph_ball-images/header.jpgleft top no-repeat;
  height: 376px;
}

#logo {  
    height: 304px;
    width: 100%;
    background: url(metamorph_ball-images/big_img.jpgleft top no-repeat;
}

#logo H2 {

    font-family: Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:18px;
    font-style:italic;
    }

#logo a {
  text-decoration: none;
  text-transform: lowercase;
  font-style: italic;
  font-size: 16px;
  color: #FFFFFF;
}

.logo_l {
  float:left;
  width:290px;
  padding: 185px 0px 0px 14px;
  
  }
  
.logo_r {
  float: right;
  width:360px;
  padding: 67px 36px 0px 0px;
  }
  
H5 {
  font-style:italic;
  font-size: 16px;
  color: #FFFFFF;
  padding: 0px 0px 10px 33px;
  font-weight:100;}
  
.f_ibw {
  font-style:italic;
  font-size: 12px;
  color: #FFFFFF;
  font-weight:bold;
  
}


#logo H2 a{
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: none;
  font-weight:100;
}

#buttons{
  text-align:center;
  height: 66px;
  margin-left: 0px;
  padding-top: 0px;
  background: url(metamorph_ball-images/buttons.jpgleft top no-repeat;
}

#buttons a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  display: block;
  float: left;
  text-decoration: none;
  color: #FFFFFF;
  text-align: center;
  padding-top: 19px;
  height: 40px;
}

.but {
  width: 201px;
  background: url(metamorph_ball-images/but.pngleft top no-repeat;
}
#buttons .but:hover {
  text-decoration: underline;}

.razd_b {
  float:left;
  width:2px;
  height:43px;
  background: url(metamorph_ball-images/b_razd.gif0px 15px no-repeat;}

#main {
  width: 1016px;
  margin: 0px auto;
  padding-top: 8px; }

#content{
  width: 1016px;
  background: url(metamorph_ball-images/cont_razd.gif296px 0px repeat-y;
}

#left{
  width: 290px;
  float: left;
  color:#000000;
}

.list padding: 0px 0px 20px 0px;}

.opt {
  background:url(metamorph_ball-images/opt.gifbottom repeat-x;
  height: 38px;}

.opt_a {
  padding: 10px 0px 0px 33px;
  background:url(metamorph_ball-images/opt_a.gif10px 14px no-repeat;
  }
.opt_a:hover {
  padding: 10px 0px 0px 33px;
  background: url(metamorph_ball-images/opt_ah.gif10px 14px no-repeat;
  }
  
.opt_a a {
  color:#000000;
  text-decoration:none;}

.left_b {
    padding: 3px 15px 0px 53px;
    font-size: 12px;
    line-height: 18px;
}

.box10 
  background: url(metamorph_ball-images/img_12.gif7px 10px no-repeat #EFEFEF;
  width: 288px;
    }
.box11
  background: url(metamorph_ball-images/img_13.gif7px 10px no-repeat #EFEFEF;
  width: 288px;}

.box_bot {
    height: 9px;
    background:url(metamorph_ball-images/box_bot.gifleft bottom no-repeat;
    width: 288px;}
    
.box_top {
    height: 9px;
    background: url(metamorph_ball-images/box_top.gifleft top no-repeat;
    width: 288px;}




.text{
  padding: 10px 10px 10px 12px;
  line-height: 18px;
  background:url(metamorph_ball-images/bg_text.jpgleft top no-repeat;
}

.text a{
  color: #F77900;
  font-weight: bold
}


#left .img {  float:left;
    margin: 6px 15px 5px 0px;
}

#right .img {  float:left;
    margin: 3px 15px 3px 0px;
}

#left span {  color:#F37901;
  text-decoration: underline;
  font-size:12px;
  font-weight:bold;
}

#right span {  color:#F37901;
  text-decoration: none;
  font-size:12px;
  font-weight:bold;
}

#left H1{
  font-family: Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: 100;
  color: #FFFFFF;
  text-align: center;
  padding: 17px 0px 20px 0px;
  background:url(metamorph_ball-images/tit_left.jpgleft top no-repeat;
}

#right H1{
  font-family: Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: 100;
  color: #ffffff;
  text-align:left;
  padding: 17px 0px 20px 13px;
  background: url(metamorph_ball-images/tit_right.jpg0px 0px no-repeat;
}


.title background: url(metamorph_ball-images/right_tit2.gifleft bottom repeat-x;}

.read{
  text-align:right;
  padding-right:5px;
  padding-top: 10px;
  font-weight:bold;
  font-size:12px;
}

#right{
  float: right;
  width: 710px;
  padding: 0px 0px 0px 0px;
}

#footer{
  height: 54px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  padding: 13px 0px 0px 0px;
  background: url(metamorph_ball-images/footer.jpg0px 8px  no-repeat;
}

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

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

</style>


</head>
<body>


<div id="main">
<!-- header begins -->
<div id="header">
  <div id="buttons">
      <a href="#" class="but"  title="">Home</a><div class="razd_b"></div>
      <a href="#" class="but" title="">Blog</a><div class="razd_b"></div>
      <a href="#"  class="but" title="">Gallery</a><div class="razd_b"></div>
      <a href="#"  class="but" title="">About us</a><div class="razd_b"></div>
      <a href="#" class="but" title="">Contact us</a>
    </div>
  <div id="logo">
    
      <div class="logo_l">
        <a href="#">metamorph_ball</a>
          <h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
        </div>
      <div class="logo_r">
         <h5>Welcome to Our Website</h5>
      <span class="f_ibw">Curabitur ac metus arcu. Cras ac sollicitudin sem. </span><br />
            Aenean nec risus nisi, a gravida velit. Vestibulum blandit quam in nunc dignissim ornare. Pellentesque id sapien nec nibh laoreet ultrices et at urna. Aenean quis massa justo, in pellentesque 
         <div class="read"><a href="#"><img src="metamorph_ball-images/read_more.png" alt=""/></a></div>
      </div>    
    </div>  
 </div>
<!-- header ends -->
        <!-- content begins -->
             <div id="content">
                    <div id="right">
                      <h1>Metamorphosis Design</h1>
                         <div class="text">
                           <img src="metamorph_ball-images/img1.jpg" class="img" width="122"  height="92" alt="" /><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br />
                            Vivamus sagittis erat hendrerit orci porttitor fringilla. Donec quis ante convallis massa pharetra condimentum quis eget massa. Donec fringilla elementum lorem sit. amet tempor. Aliquam id arcu ac turpis pulvinar sagittis ac eget libero leo a erat porttitor vestibulum in ut dui. Phasellus et augue et nunc aliquet pellentesque. Fusce commodo sagittis metus, in faucibus lacus placerat in.<br /><br />
              <span>Sed fringilla faucibus euismod. </span><br />
              Donec eleifend vehicula ligula, a volutpat ante sollicitudin non. Maecenas euismod pharetra magna et commodo. Nam sed arcu et urna consequat ornare. Donec vestibulum varius mi, eget pulvinar orci posuere eget. Cras gravida aliquam
                          <div class="read"><a href="#"><img src="metamorph_ball-images/read_more.png" alt=""/></a></div>
                        </div>
            
            <h1>FREE WEBSITE TEMPLATES USEFUL LINKS</h1>
                         <div class="text">
                            <ol>
                    <li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">Free Website Templates</a></li>
                    <li><a href="http://www.metamorphozis.com/free_flash_templates/free_flash_templates.php">Free Flash Templates</a></li>
                    <li><a href="http://www.metamorphozis.com/shop/flash_templates.php">Flash Templates</a></li>
                    <li><a href="http://www.metamorphozis.com/shop/easy_flash_templates.php">Easy Flash Templates</a> (no flash experience needed to edit)</li>
                    <li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
                 
                  </ol>
              <div class="read"><a href="#"><img src="metamorph_ball-images/read_more.png" alt=""/></a></div>
                        </div>
            
                      <h1>Free Website Templates</h1>
                         <div class="text">
                            <img src="metamorph_ball-images/img2.jpg" class="img" width="122"  height="92" alt="" /><span>Aliquam a dui ligula, eget faucibus sapien.</span><br />
                            Aliquam eu augue augue. Nullam urna elit, ornare quis congue at, interdum ac nulla. Etiam gravida quam ut diam fermentum eu fringilla lacus rhoncus. Etiam eleifend ligula ac nunc sagittis non elementum sapien luctus. Curabitur quis elit qua.<br />
                            <br /><br />
              <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </span><br />
              Vestibulum dictum adipiscing tortor, in condimentum felis tincidunt nec. Fusce pharetra cursus leo, sed rhoncus nunc vehicula eu. Phasellus tempor lobortis lacus non tristique. Phasellus eu velit scelerisque justo aliquet condimentum. Class 
              <div class="read"><a href="#"><img src="metamorph_ball-images/read_more.png" alt=""/></a></div>
                        </div>
                    </div>
                    <div id="left">
                            <h1>Categories</h1>
                     <div class="list">
                               <div class="opt"><div class="opt_a">
                                    <a class="" href="">Lorem ipsum dolor</a>
                                 </div></div>
                                 <div class="opt"><div class="opt_a">
                                   <a class="" href="">Cras in ante quam</a>
                                 </div>
                                </div>
                                 <div class="opt"><div class="opt_a">
                                    <a class="" href="">Phasellus ege</a>
                                 </div>
                                 </div>
                                 <div class="opt"><div class="opt_a">
                                   <a class="" href="">Donec luctus nunc</a>
                                 </div>
                                 </div>
                                 <div class="opt"><div class="opt_a">
                                    <a class="" href="">Nam varius arcu </a>
                                 </div>
                                 </div>
                            </div>
                            <h1>Company News</h1>
                        <div class="box10">
                              <div class="box_top"></div>
                                <div class="left_b"><span class="w">Friday, June 122010</span><br />
                                        In hac habitasse platea dictumst. Pel- lentesque porttitor urna dictum mauris 
                                          <div class="read"><a href="#"><img src="metamorph_ball-images/read_more.png" alt=""/></a></div>
                              </div>
                                <div class="box_bot"></div>
                         </div>
              <div style="height:7px"></div>
                            <div class="box10">
                              <div class="box_top"></div>
                                <div class="left_b"><span class="w">Saturday, June 132010</span><br />
                                        In hac habitasse platea dictumst. Pel- lentesque porttitor urna dictum mauris 
                                          <div class="read"><a href="#"><img src="metamorph_ball-images/read_more.png" alt="" /></a></div>
                              </div>
                                <div class="box_bot"></div>
                         </div>
                     </div>
                <div style="clear: both"></div>
            </div>
    <!-- content ends --> 
<!-- footer begins -->
            <div id="footer">
             <p>Copyright  2010. <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> 
  <p>Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a> for <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a></p>
      </div>
        <!-- footer ends -->
</div>



</body>
</html>

   
    
    
    
    
    
  
Related examples in the same category
1.metamorph_artgallery
2.metamorph_burninghouse
3.metamorph_burningshore
4.metamorph_dreamclouds
5.metamorph_dreamingirl
6.metamorph_ballway
7.metamorph_abstractred
8.metamorph_bubles
9.adornment
10.airwaves
11.metamorph_movie
12.art-gallery
13.artclass
14.artdesign
15.ArtDesign1
16.ArtDesign2
17.ArtDesign3
18.ArtDesign4
19.artist
20.artistic
21.studio-980
22.studio
23.Studio5
24.studio_art
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.