metamorph_imaginary : Effect « Templates « HTML / CSS






metamorph_imaginary

       

<!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 {text-decoration: underline;}


#right a{
  color: #074959;
  text-decoration: underline;
}

#right a:hover{
  text-decoration: none;
  color: #C80909;
  text-decoration: underline;
}

body{
  font: 12px Arial, Helvetica, sans-serif;
  color: #000000;
  background: url(metamorph_imaginary-images/bg.jpg) center top no-repeat #074959;
  margin: 31px 0px 33px 0px;
  line-height: 20px;
}

#main {
  width: 1014px;
  margin-left: 0px;
  background: url(metamorph_imaginary-images/top.gif) top no-repeat ;
  padding: 5px 5px 0px 5px;
}

#main_bot {
width: 1024px;
background: url(metamorph_imaginary-images/bottom.gif) bottom no-repeat #FFFFFF;
margin: 0px auto;
}


#header { 
width:1024px;
padding: 0px 0px 0px 0px;
background: url(metamorph_imaginary-images/big.jpg) left top no-repeat;
}

#logo {  font-family: Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    font-size:18px;
    font-style:italic;
    padding: 88px 0px 0px 460px;
    background: url(metamorph_imaginary-images/big_img.jpg) left top no-repeat;
    height: 192px;
}

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


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

#buttons{
  width: 1014px;
  background: url(metamorph_imaginary-images/bg_but.jpg) left top no-repeat;
  text-align:center;
  padding-left:20px;
  padding-top: 0px;
  height: 55px;
}

#buttons a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  display: block;
  float: left;
  height: 35px;
  text-decoration: none;
  color: #FFFFFF;
  padding-top: 20px;
  padding-left: 60px;
  text-align: left;
  width: 140px;
  background: url(metamorph_imaginary-images/but.gif) 30px 20px no-repeat;
}

#buttons a:hover {
  text-decoration: none;
  background: url(metamorph_imaginary-images/over.jpg) 30px 20px no-repeat;
  font-size: 20px;
}

#content{
  width: 1016px;
  padding: 0px 0px 0px 0px;
  background: url(metamorph_imaginary-images/content.gif) left repeat-y;
  margin: 0px 0px 0px 0px;
}

#content_top{
  width: 1016px;
  padding: 0px 0px 0px 0px;
  background: url(metamorph_imaginary-images/left_top.gif) left top no-repeat;
  margin: 0px 0px 0px 0px;
}

#content_bot{
  width: 1016px;
  padding: 0px 0px 0px 0px;
  background: url(metamorph_imaginary-images/left_bot.gif) left bottom no-repeat;
  margin: 0px 0px 0px 0px;
}

#right{
  width: 663px;
  margin: 0px 0px 0px 0px;
  float: right;
  color:#000000;
}

.right_b {  background: url(metamorph_imaginary-images/fish.png)  0px 8px no-repeat;
    padding-left: 22px;
    padding-top: 5px;
    padding-right: 5px;
}

.text{
  padding: 10px 0px 0px 5px;
}

.img {  float:left;
    margin: 0px 16px 3px 0px;
}

#right span {  color:#074959;
    font-weight:bold;
}

#left span {  color:#074959;
    font-weight:bold;
}

#right H1{
  font-family: Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: 100;
  color: #074959;
  text-align:left;
  padding: 15px 0px 4px 0px;
}

#left H2{
  font-family: Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: 100;
  color: #074959;
  padding-top: 12px;
  padding-left: 0px;
  text-align: left;
  padding: 15px 0px 4px 0px;
}

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

#left{
float: left;
width: 330px;
margin-left: 0px;
padding: 0px 8px 0px 8px;
}

.tit_bot { background: url(metamorph_imaginary-images/right_bg.jpg) left top no-repeat;
padding: 0px 15px 0px 14px;}

.col_l { width: 295px;
float:left;}

.col_r { width: 298px;
float:left;
margin-left: 22px}

#footer{
  height: 53px;
  width: 100%;
  font-size: 12px;
  color: #FFFFFF;
  text-align: center;
  clear:both;
  padding: 12px 0px 0px 0px;
  background: url(metamorph_imaginary-images/footer.jpg) 0px 5px 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_bot">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="buttons">
          <div ><a href="#" class="but"  title="">Home</a></div>
          <div ><a href="#" class="but" title="">Blog</a></div>
          <div><a href="#"  class="but" title="">Gallery</a></div>
          <div><a href="#"  class="but" title="">About us</a></div>
          <div ><a href="#" class="but" title="">Contact us</a></div>
    </div>
    <div id="logo"><a href="#">metamorph_imaginary</a>
        <h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
    </div>
</div>
<!-- header ends -->
    <!-- content begins -->
    
      <div id="content">
        <div id="content_top">
        <div id="content_bot">
          <div id="right">
              <div class="tit_bot">
              <h1>Metamorphosis Design</h1>
                  <div class="right_b"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac tellus vel dui iaculis rutrum sed at nisi. Vestibulum consectetur accumsan volutpat. </span><br />
                    <br />
                    Aliquam ut enim in nibh porta faucibus. Cras at libero sed massa pretium ullamcorper. Nunc posuere eros et <br /><img src="metamorph_imaginary-images/img.jpg" width="152" height="114" class="img" alt="" />
                    vitae tortor eget velit malesuada commodo. Donec eu tempus mi. Curabitur nec justo eget ligula tristique rhoncus id id turpis. Nulla vel felis vitae dolor facilisis convallis at sed neque. Duis sed eros ligula. Praesent vestibulum cursus elementum. Nunc congue orci neque. Mauris ipsum dolor, viverra vel ornare in, mollis eu erat. Praesent in elit dui, id ultrices dui. Phasellus ultricies nulla et erat scelerisque nec auctor nisl viverra. Vivamus non nisl at ligula. <br />
                  <span>Donec eu tempus mi. Curabitur nec justo eget ligula tristique rhoncus id id turpis. Nulla vel felis vitae. </span>
                  </div>
              </div><br />
              <div class="tit_bot">
                <h1>Free Website Templates</h1>
                <div class="col_l">
                  <div class="right_b"><span class="col_b">Vestibulum quis leo sem, ac fringilla tortor. Morbi semper, ligula vitae rutrum egestas, mauris.</span><br />
                  Metus imperdiet nisi, nec pharetra felis lectus quis tortor. Etiam tempus elementum tellus, ac facilisis orci porta eu. Etiam mattis, augue a varius consequat, ante erat egestas diam, scelerisque pretium lectus libero quis mauris. Curabitur lacus tellus, varius ac fermentum eget, mattis et felis. Aenean felis nulla, rhoncus ut... </div>
                    <div class="read"><a href="#">read more</a></div>
                </div>
                <div class="col_r">
                  <div class="right_b"><span class="col_b">Ut a laoreet mi. Duis fringilla rutrum tellus. Integer vulputate convallis massa, sit amet cursus erat posuere nec.</span><br />
                  Fusce et imperdiet est. Sed viverra mauris eget lacus mollis fermentum. Curabitur laoreet mattis iaculis. Nulla ultricies egestas ornare. Nullam vulputate lobortis cursus. Cras elit enim, condimentum eu vestibulum ac, tristique et eros. Nulla adipiscing scelerisque quam sit amet viverra. Integer sed elit non odio mattis...     </div>
                    <div class="read"><a href="#">read more</a></div>
                </div>
                <div style="clear: both"><img src="metamorph_imaginary-images/spaser.gif" alt="" width="1" height="1" /></div>
              </div>
             </div>  
            <div id="left">
                    <h2>Company News</h2>
                      <div class="right_b"><span class="col_b">Nam non urna a sapien auctor pretium. Ut fringilla odio condimentum orci aliquet tempor. </span><br />
                         Aliquam quam tellus, dictum nec varius vel, viverra eu massa. Vestibulum non metus sed nisl consequat consequat eget ac nulla. Donec et velit nisl. Donec eget nunc risus. Curabitur nibh lectus, congue et egestas ac, hendrerit non eros. Pellentesque ut pharetra nunc. Duis eget ante sed nisi luctus hendrerit condimentum eget. </div>
                        <div class="read"><a href="#"><img src="metamorph_imaginary-images/b_read.gif" alt="" /></a></div><br />
                        <div class="right_b"><span class="col_b">Nam non urna a sapien auctor pretium. Ut fringilla odio condimentum orci aliquet tempor. </span><br />
                         Aliquam quam tellus, dictum nec varius vel, viverra eu massa. Vestibulum non metus sed nisl consequat consequat eget ac nulla. Donec et velit nisl. Donec eget nunc risus. Curabitur nibh lectus, congue et egestas ac, hendrerit non eros. Pellentesque ut pharetra nunc. Duis eget ante sed nisi luctus hendrerit condimentum eget. </div>
                   <div class="read"><a href="#"><img src="metamorph_imaginary-images/b_read.gif" alt="" /></a></div><br />
            </div>
            <br />
            <div style="clear: both"><img src="metamorph_imaginary-images/spaser.gif" alt="" width="1" height="1" /></div>
        <div class="bot"></div>
        </div>
        </div> 
        </div>
    <!-- content ends -->
    <!-- footer begins -->
    <div id="footer">
  Copyright  2010. 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>
</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_violet
18.metamorph_violetdream
19.metamorph_mydesign
20.metamorph_myst
21.metamorph_mywaves
22.metamorph_myweb
23.metamorph_freedom_lt
24.metamorph_gloryfield
25.metamorph_horizon
26.bubble
27.classic-luxury
28.classic
29.classique
30.classliclink
31.civilized
32.metamorph_cool
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