metamorph_bugs : Animal « Templates « HTML / CSS






metamorph_bugs

      

<!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
*/

body {
  margin: 0;
  padding: 0;
  background:  #FFFFFF url(metamorph_bugs-images/bg01.jpg) repeat-x top left;
  font-size: 13px;
  color: #7F7F7F;
}

body, th, td, input, textarea, select, option {
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

h1, h2, h3 {
  font-weight: normal;
  color: #484848;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 1em;
}


a {
  color: #D79B00;
}

a:hover {
  text-decoration: none;
  color: #D79B00;
}

/* Header */

#header {
  width: 890px;
  height: 254px;
  margin: 0px auto;
  background: url(metamorph_bugs-images/header.jpg) no-repeat;
}

/* Logo */

#logo {
  float: left;
  padding: 40px 0 0 0;
}

#logo h1 {
  margin: 0;
  text-transform: lowercase;
  font-size: 24px;
  font-weight: normal;
  color: #FFFFFF;
}

#logo h1 a {
  padding-right: 20px;
  text-decoration: none;
  color: #FFFFFF;
}

#logo H2 {
  text-transform: uppercase;
  font-size: 12px;
}

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

/* Menu */

#menu {
  float: right;
}

#menu ul {
  margin: 0px;
  padding: 193px 0px 0px 0px;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  margin-left: 20px;
  text-decoration: none;
  text-transform: lowercase;
  font-size: 1.36em;
  color: #FFFFFF;
}

#menu a:hover, .active a {
  border-bottom: 3px solid #FFFFFF;
}


/* Page */

#page {
  width: 830px;
  margin: 0 auto;
}

/* Content */

#content {
  float: left;
  width: 590px;
}

.post {
  padding: 20px 20px;
  background: url(metamorph_bugs-images/bg04.jpg) no-repeat top left;
}

.title {
  margin: 0;
  color: #484848;
}

.byline {
  margin: 0;
  color: #D79B00;
}

.meta {
  text-align: left;
  color: #646464;
}

.meta .more {
  padding-left: 20px;
  background: url(metamorph_bugs-images/img03.gif) no-repeat left center;
}

.meta .comments {
  padding-left: 20px;
  background: url(metamorph_bugs-images/img04.gif) no-repeat left center;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 200px;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar li {
}

#sidebar li ul {
  padding: 15px 0;
}

#sidebar li li {
  padding: 5px;
  padding-left: 10px;
}

#sidebar h2 {
  margin: 0;
  padding: 10px 0 0 20px;
  height: 40px;
  color: #000000;
  background: url(metamorph_bugs-images/small.gif) repeat-x;
}

#sidebar a {
}

#sidebar a:hover {
}

/* Footer */

#footer {
  clear: both;
  margin: 0px;
  padding-top: 20px;
  height: 60px;
  border-top: #D79B00 solid 4px;
  background: #F2F2F2 url(metamorph_bugs-images/bg02.jpg) repeat-x left top;
}

#footer p {
  margin: 0px;
  padding: 0px;
  font-size: 10px;
  text-align: center;
  color: #717171;
}

</style>


</head>
<body>
<!-- start header -->
<div id="header">
  <div id="logo">
    <h1><a href="#">Metamorph_bugs</a></h1>
      <h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
  </div>
  <div id="menu">
    <ul>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact </a></li>
    </ul>
  </div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
  <!-- start content -->
  <div id="content">
    <div class="post">
      <h1 class="title">Welcome To Our Website</h1>
      <p class="descr"><small>Posted on January 24th, 2008 by <a href="#">Metamorphosis Design </a></small></p>      
      <p>This website template is repeased under  a Creative Commons Attribution 2.5 License</p>
          <p>We request you retain the full copyright notice below including the link to www.metamorphozis.com.<br />
            This not only gives respect to the large amount of time given freely by the developers 
            but also helps build interest, traffic and use of our free and paid designs. If you cannot (for good 
            reason) retain the full copyright we request you at least leave in place the 
            Website Templates line, with Website Templates  linked to www.metamorphozis.com. If you refuse 
            to include even this then support may be affected.<br />
                <br />
            You are allowed to use this design only if you agree to the following conditions:<br />
            - You cannot remove copyright notice from this design without our permission.<br />
            - If you modify this design it still should contain copyright because it is based on our work.<br />
            - You may copy, distribute, modify, etc. this template as long as link to our website remains untouched.<br />
            For support visit <a href="http://www.metamorphozis.com/contact/contact.php">http://www.metamorphozis.com/contact/contact.php</a><br />
  <br />
            The Metamorphosis Design : 2008 </p>
    </div>
    <div class="post">
      <h2 class="title">Risus Pellentesque Pharetra</h2>
      <p class="byline"><small>Posted on March 25th, 2008 by <a href="#">admin</a> | <a href="#">Edit</a></small></p>
      <div class="entry">
        <p>Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. </p>
      </div>      
    </div>
  </div>
  <!-- end content -->
  <!-- start sidebar -->
  <div id="sidebar">
    <ul>      
      <li>
        <h2>Lorem Ipsum</h2>
        <ul>
          <li><a href="#">Fusce dui neque fringilla</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
        </ul>
      </li>
      <li>
        <h2>Volutpat Dolore</h2>
        <ul>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Fusce dui neque fringilla</a></li>
        </ul>
      </li>
      <li>
        <h2>Lorem Ipsum</h2>
        <ul>
          <li><a href="#">Fusce dui neque fringilla</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- end sidebar -->
</div>
<!-- end page -->
<div id="footer">
  <p>Copyright &copy; 2008. Design by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a></p>
    <p><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>
</div>
</body>
</html>

   
    
    
    
    
    
  








Related examples in the same category

1.metamorph_swan
2.metamorph_tiger
3.metamorph_cats
4.metamorph_catsworld
5.metamorph_dolphins
6.metamorph_eagle
7.metamorph_feather
8.butterfly-garden
9.butterfly
10.birdwatch
11.celestial
12.cellulose
13.metamorph_cell
14.animal-planet
15.animals-and-pets
16.exotic-birds
17.bugslife
18.dogcare
19.dogspalace
20.metamorph_snail
21.metamorph_killerwhale
22.bestfriends
23.petswebsite
24.petcharms
25.petpaws
26.pets