metamorph_iceflower : Ice « Templates « HTML / CSS






metamorph_iceflower

   

<!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_iceflower-images/back_all.gif) 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: #0F7EAC;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 1em;
}


a {
  color: #0F7EAC;
}

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

/* Header */

#header {
  width: 890px;
  height: 404px;
  margin: 0px auto;
  background: url(metamorph_iceflower-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: 10px;
}

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

/* Menu */

#menu {
  float: right;
}

#menu ul {
  margin: 0px;
  padding: 343px 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_iceflower-images/bg04.jpg) repeat-x top left;
  border: 5px solid #ffffff;
}

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

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

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

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

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

/* Sidebar */

#sidebar {
  float: right;
  margin-top: 50px;
  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: 20px;
}

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

#sidebar a {
}

#sidebar a:hover {
}

/* Footer */

#footer {
  clear: both;
  margin: 0px;
  padding-top: 20px;
  height: 60px;
  border-top: #0F7EAC solid 4px;
  background: #F2F2F2 url(metamorph_iceflower-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="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Metamorph_iceflower</a></h1>
      <h2><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw" id="metamorph">Design by Metamorphosis Design</a></h2>
  </div>
  <div id="menu">
    <ul>
      <li class="active"><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Home</a></li>
      <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Blog</a></li>
      <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Gallery</a></li>
      <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">About</a></li>
      <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">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="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Metamorphosis Design </a></small></p>      
      <p>This website template is released 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">Proin gravida orci porttitor </h2>
      <p class="byline"><small>Posted on March 15th, 2008 by <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">admin</a> | <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Edit</a></small></p>
      <div class="entry">
        <h4><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Web Design Starter's Guide</a></h4>
          <ol>
        <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">More Free Website Templates</a></li>
        <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Flash Templates</a></li>
                <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Top Hosting Providers</a></li>
                <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Support For Free Website Templates</a></li>
             
      </ol>
      <br />
      </div>      
    </div>
    
    <div class="post">
      <h2 class="title">Risus Pellentesque Pharetra</h2>
      <p class="byline"><small>Posted on March 25th, 2008 by <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">admin</a> | <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">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="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Ornare ac, malesuada</a></li>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Eget nonummy</a></li>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Velit semper nisi</a></li>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Fusce dui fringilla</a></li>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Eget tempor eget </a></li>
        </ul>
      </li>
      <li>
        <h2>Volutpat Dolore</h2>
        <ul>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Magna lacus bibendum </a></li>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Velit semper  molestie</a></li>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Nec metus sed donec</a></li>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Magna bibendum mauris</a></li>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Fusce dui neque fringilla</a></li>
        </ul>
      </li>
      <li>
        <h2>Lorem Ipsum</h2>
        <ul>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Fusce dui neque fringilla</a></li>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Eget eget nonummy</a></li>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Magna lacus  mauris</a></li>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Velit semper nisi molestie</a></li>
          <li><a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Eget tempor nonummy</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- end sidebar -->
</div>
<!-- end page -->
<div id="footer">
  <p>Copyright &copy; 2008. <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates</a>, coded by <a href="http://www.flashtemplatesdesign.com" title="Free Templates">Free Templates</a> | <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Privacy Policy</a> | <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw">Terms of Use</a> | <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://www.free-css-layouts.com/bz99wxw.php?go=wxw" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p> 
  <p>Design downloaded from <a href="http://www.webhostingservices.us/">Web Hosting Services</a>

    </p>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.metamorph_ice
2.ice-bubble
3.icemedia