metamorph_naturefield
<!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
*/
*
{
margin: 0px;
padding: 0px;
}
a:link {
color: #1F5111;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:visited {
color: #1F5111;
}
body {
background: #75DAFF url(metamorph_naturefield-images/back_all.jpg) repeat-x;
font: 13px Arial, Helvetica, sans-serif;
color: #666666;
}
#content
{
}
#back
{
width: 778px;
background: #EAF6AA;
border: 15px solid #EAF6AA;
margin: 0 auto;
}
#header {
height: 418px;
text-align: left;
}
#menu
{
width: 678px;
height: 61px;
padding-left: 100px;
background: url(metamorph_naturefield-images/menu.gif) repeat-x;
}
#menu ul {
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
float: left;
width: 120px;
height: 41px;
display: block;
text-align: center;
text-decoration: none;
color: #1E5010;
font-weight: bold;
padding-top: 20px;
font-size: 16px;
text-transform: lowercase;
}
#menu a:hover {
width: 120px;
height: 44px;
color: #F8FAF7;
text-decoration: underline;
background: url(metamorph_naturefield-images/menu_r.gif) repeat-x
}
#logo {
background: url(metamorph_naturefield-images/header.jpg) no-repeat;
width: 778px;
height: 355px;
text-align: left;
margin-bottom: 10px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 16px;
color: #F8FAF7;
}
#logo H1
{
padding: 0px;
margin: 0px;
}
#logo H2 a
{
font-size: 10px;
padding: 0px;
margin: 0px;
}
.logo_text
{
background: url(metamorph_naturefield-images/menu.gif) repeat-x;
height: 61px;
padding-top: 10px;
padding-left: 30px;
}
.logo_text H1
{
font-size: 18px;
}
.logo_text H2 a
{
font-size: 11px;
text-decoration: none
}
#main
{
padding: 10px;
padding-top: 10px;
}
#left
{
width: 229px;
}
#left H3
{
width: 209px;
height: 35px;
font-size: 14px;
font-weight: bold;
padding-left: 20px;
padding-top: 17px;
text-transform: uppercase;
color: #1E5010;
background: url(metamorph_naturefield-images/title.gif) repeat-x
}
#left ul {
list-style: none;
}
#left li
{
background: #E9EFE4;
border-left: 1px solid #1F5111;
border-right: 1px solid #1F5111;
border-bottom: 1px solid #1F5111;
}
#left li ul {
border: 0px;
margin-left: 20px;
margin-bottom: 10px;
}
#left li li {
padding: 4px 20px;
background: url(metamorph_naturefield-images/small.gif) no-repeat left;
border: 0px;
}
#left a {
color: #1F5111;
}
#left a:visited {
color: #1F5111;
}
#left p
{
padding: 10px;
}
#calendar1 {
padding: 0 10px 20px 10px;
}
#calendar table {
width: 100%;
text-align: center;
}
#calendar thead {
}
#calendar tbody td {
border: 1px solid #F1F1F1;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
#calendar #now {
background: #696969;
border: 1px solid #ff0000;
font-weight: bold;
color: #ffffff
}
#right .date2 {
margin: 10px;
padding: 0;
padding-top: 3px;
}
.date2 {
float: left;
width: 53px;
height: 54px;
background: url(metamorph_naturefield-images/date.gif) no-repeat;
text-transform: uppercase;
text-align: center;
font-size: 8px;
font-weight: bold;
color: #FFFFFF;
vertical-align: middle;
}
.date2 b {
display: block;
font-size: 35px;
color: #2F6AA2;
}
#right
{
float: right;
width: 500px;
padding-right: 10px;
}
#right H4
{
margin: 0;
padding: 0px;
font-size: 12px;
color: #1F5111;
}
#right a
{
color: #1F5111;
text-decoration: none;
}
#right p {
margin: 0;
padding: 0;
padding-bottom: 10px;
}
#right h2 {
margin: 0;
padding: 0;
padding-top: 10px;
color: #1F5111;
}
.date {
text-align: right;
color: #808080;
font-size: 11px;
}
.date a {
color: #D72020;
}
#footer {
height: 50px;
clear: both;
padding-top: 20px;
border-top: 5px solid #1E5010;
background: url(metamorph_naturefield-images/footer.gif) repeat-x bottom;
}
#footer p {
margin: 0;
font-size: 10px;
text-align: center;
color: #1F5111;
}
#footer a {
color: #1F5111;
}
/* Header Scroll */
.nivoSlider { position:relative;}
.nivoSlider img { position:absolute; top:0px; left:0px;}
.nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none;}
.nivo-slice { display:block; position:absolute; z-index:50; height:100%; }
.nivo-caption { position:absolute; left:0px; bottom:0px; color:#fff; width:100%; z-index:89; padding-left: 10px; font-weight: bold; }
.nivo-caption p { padding:10px 5px; margin:0; text-indent:-9999%;}
.nivo-directionNav a {position:absolute; width:45px; height: 60px; top:41%; z-index:99; cursor:pointer; text-indent:-9999%;}
.nivo-prevNav { background-position: left bottom; left:25px; margin-top: 20px; background:url(metamorph_naturefield-images/but_left.png) no-repeat;}
.nivo-nextNav { background-position: left top; right: 0px; margin-top: 20px; background:url(metamorph_naturefield-images/but_right.png) no-repeat;}
.nivo-controlNav { bottom:-20px; position:absolute; right:0;}
.nivo-controlNav a { float:left; width:14px; height:14px; display:block; position:relative; z-index:99; cursor:pointer; text-indent:-9999%; }
.nivo-controlNav a.active { background-position:left top; margin-top:-1px;}
</style>
<!-- Begin JavaScript -->
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
<script type="text/javascript" src="lib/jquery.custom.js"></script>
</head>
<body>
<div id="content">
<div id="back">
<!-- header begins -->
<div id="header">
<div id="menu">
<ul>
<li><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</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</div>
<div id="logo">
<div id="slider_bg">
<div class="waveshow">
<img src="metamorph_naturefield-images/header.jpg" alt="" title="Some Text 1 Goes Here" />
<img src="metamorph_naturefield-images/header2.jpg" alt="" title="Some Text 2 Goes Here" />
<img src="metamorph_naturefield-images/header3.jpg" alt="" title="Some Text 3 Goes Here" />
</div> <!-- waveshow -->
</div> <!-- slider_bg -->
</div>
</div>
<div class="logo_text">
<h1><a href="#">metamorph_naturefield</a></h1>
<h2><a href="#">Company Slogan Goes Here</a></h2>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="main">
<div id="right">
<h2>Welcome To Our Website</h2><br />
<h4><a href="#">METAMORPHOSIS DESIGN</a></h4><br />
<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 />
<br />
The Metamorphosis Design : 2011 </p>
<p class="date"><img src="metamorph_naturefield-images/comment.gif" alt="" /> <a href="#">Comments(2)</a> <img src="metamorph_naturefield-images/timeicon.gif" alt="" /> 16.23.</p>
<h4><a href="#">Web Design Starter's Guide</a></h4><br />
<p><b>Quisque tincidunt volutpat tellus eget hendrerit.</b><br />
Proin sollicitudin urna sapien, eu commodo dolor. Etiam fermentum eros id leo tincidunt malesuada ac vitae massa. Nullam convallis felis id nibh sodales scelerisque. Proin est turpis, pretium non fermentum et, mollis a risus. Aliquam erat volutpat. Aliquam erat volutpat. Sed at erat sem. Phasellus rutrum odio a lorem vehicula sed elementum est auctor. Aliquam erat volutpat. Nam id ipsum quis nunc ornare ornare ut viverra magna. Aenean in ante tellus.<br /><br />
Aenean dictum iaculis nulla, quis viverra erat gravida eu. Aenean nunc tortor, tempus vitae pharetra sit amet, adipiscing ut mi. Sed tincidunt dapibus ligula, ut pharetra urna rutrum ac. Mauris vestibulum, diam eget malesuada rhoncus, tortor quam condimentum lorem, eget tristique erat nunc in diam. In interdum laoreet nisi id sagittis. Nam ultricies ligula eu purus adipiscing rutrum varius ante vulputate. Cras egestas sapien ut tortor convallis placerat.</p>
<p class="date"><img src="metamorph_naturefield-images/comment.gif" alt="" /> <a href="#">Comments(21)</a> <img src="metamorph_naturefield-images/timeicon.gif" alt="" /> 13.06.</p>
<h4><a href="#">SOME TEXT GOES HERE </a></h4>
<br />
<p>In posuere eleifend odio quisque semper augue mattis wisi maecenas ligulIn posuere eleifend odio quisque semper augue mattis wisi maecenas ligul<br /><br />
Quisque semper augue mattis wisi maecenas ligul In posuere eleifend odio quisque semper augue mattis wisi maecenas ligulIn posuere eleifend odio quisque semper augue mattis wisi maecenas ligul</p>
<p class="date"><img src="metamorph_naturefield-images/comment.gif" alt="" /> <a href="#">Comments(2)</a> <img src="metamorph_naturefield-images/timeicon.gif" alt="" /> 23.06.</p>
</div>
<div id="left">
<h3>Nunc pellentesque</h3>
<ul>
<li><ul>
<li><a href="#">Vivamus id arcu</a></li>
<li><a href="#">Duis congue ultricies</a></li>
<li><a href="#">Purus in mollis purus</a></li>
<li><a href="#">Orci nonummy fringilla</a></li>
<li><a href="#">Pellentesque at lorem</a></li>
<li><a href="#">Enim vivamus convallis</a></li>
</ul>
</li>
</ul>
<br />
<h3>Calendar</h3>
<ul>
<li id="calendar">
<div id="calendar1">
<table id="calendar2" summary="Calendar">
<caption>
January 2011
</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="Des" colspan="3" id="prev"><a href="#">« Des</a></td>
<td class="pad"> </td>
<td abbr="Feb" colspan="3" id="next" class="pad"><a href="#">Feb »</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2" class="pad"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td id="now">21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="pad" colspan="2"> </td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
<br />
<h3>Lorem ipsum dolor</h3>
<p>Vivamus sagittis bibendum erat. Curabitur lorem ipsum dolore malesuada. <a href="#">More...</a></p>
<br />
</div>
<!--content ends -->
<!--footer begins -->
</div>
<div id="footer">
<p>Copyright © 2011. <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>
</p>
</div>
<div style="clear: both"></div>
</div>
</div>
<!-- footer ends-->
</body>
</html>
Related examples in the same category