metamorph_mywaves
<!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;
}
form {
margin:0px;
padding: 0px;
border: none;
text-align:left;}
fieldset {
padding: 0px;
}
img
{
border: 0px;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
line-height:20px;
background: url(metamorph_mywaves-images/bot.jpg) bottom repeat-x;
}
#bg {
background: url(metamorph_mywaves-images/top.gif) top repeat-x;}
#main {
width: 1011px;
margin: 0px auto;
border-left: 3px solid #FFFFFF;
border-right: 3px solid #FFFFFF;
}
#header {
width:1011px;
padding: 0px 0px 0px 0px;
height: 265px;
}
#logo {
color:#FFFFFF;
padding: 0px 10px 0px 0px;
background: url(metamorph_mywaves-images/logo.jpg) 0px 0px no-repeat;
height: 213px;
}
#logo a {
color:#FFFFFF;
text-decoration: none;
}
#logo H2 {
font-size: 13px;
}
#search {
padding-top: 0px;
padding-left:0px;
height: 22px;
width: 300px;
float:right;
}
#search form {
margin: 0;
}
#search input {
float: left;
font: 12px Arial, Helvetica, sans-serif;
}
#search-text {
width: 196px;
height: 15px;
font-size: 12px;
padding: 2px 5px 2px 5px;
border: none;
background: #FFFFFF;
background-repeat:no-repeat;
background-position:left top;
color: #000000;
border: 1px solid #12537C;
margin-top: 15px;
}
#search-submit {
width: 76px;
height: 29px;
background: url(metamorph_mywaves-images/b_search.gif) left top no-repeat;
background-repeat:no-repeat;
background-position:left top;
border: none;
margin-left: 6px;
margin-top: 10px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
.CNGH {
font-family: Arial Narrow, Arial, Helvetica, sans-serif;
font-size:18px;
padding: 160px 0px 0px 415px;
font-style:italic;
font-weight:bold;
}
#buttons{
width: 1011px;
height: 49px;
background: url(metamorph_mywaves-images/but_bg.jpg) repeat-x;
text-align:center;
padding-left: 0px
}
.but {
float:left;}
#buttons a {
font-family: Arial Narrow, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:normal;
display: block;
float: left;
width: 140px;
height: 35px;
text-decoration: none;
color: #FFFFFF;
padding-top: 14px;
text-align: center;
font-weight:bold;
}
#buttons a:hover {
text-decoration: underline;
background: url(metamorph_mywaves-images/over.jpg) 0px repeat-x;
}
#content{
width: 990px;
padding: 8px 5px 15px 16px;
background: #D9D8D9;
margin: 0px 0px 0px 0px;
}
#right{
width: 295px;
margin: 0px 0px 0px 0px;
float: right;
color:#000000;
}
.right_b { background: url(metamorph_mywaves-images/fish_inp.png) 9px 20px no-repeat;
padding-left: 29px;
padding-top: 15px;
width: 256px;}
.img { float:right;
margin: 5px 0px 5px 12px;
}
span { color:#12537C;
font-weight:bold;
}
.dat { text-decoration: underline;
color:#0D2C55;}
.dot {
border-bottom: 1px dotted #12537C;
color:#12537C;
font-weight:bold;
padding-top:5px;
text-decoration:none;
height:30px;}
.spis {padding: 3px 0px 0px 0px;
list-style-type: none;}
.spis li {
padding-top: 5px;}
.col_b {color:#0D2C55;}
#right H1{
font-family: Arial Narrow, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: bold;
color: #23456B;
text-align: left;
background: url(metamorph_mywaves-images/tit.gif) bottom repeat-x;
padding-top: 10px;
padding-bottom: 3px;
}
#left H2{
font-family: Arial Narrow, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight: bold;
color: #12537C;
padding-bottom: 3px;
padding-top: 4px;
text-align: left;
background: url(metamorph_mywaves-images/tit.gif) bottom repeat-x;
width: 100%;
padding-top: 10px;
}
.more{
text-align:right;
padding-right:10px;
padding-top: 5px;
font-weight:bold;
text-decoration:none;
}
#log{
background: url(metamorph_mywaves-images/inp_bg.jpg) top no-repeat #FFFFFF;
padding-left: 9px;
padding-right: 9px;
padding-bottom: 20px;
border: 1px solid #385E8A;
}
#log fieldset {
border: none;
}
#log label {
font-family: Arial Narrow, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #12537C;
text-align:left;
padding-bottom: 43px;
padding-top: 10px;
line-height: 25px;
}
#login-submit{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #ffffff;
width: 60px;
height: 18px;
background: url(metamorph_mywaves-images/b_login.gif) left top no-repeat;
border: none;
margin: 15px 0px 10px 215px;
}
#text1, #text2 {
width: 263px;
height: 14px;
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
border: none;
background: #FFFFFF;
background-repeat:no-repeat;
background-position:left top;
color: #000000;
padding-bottom: 5px;
border: 1px solid #02525D;
}
#right #log a{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #12537C;
}
#right #log a:hover{
color: #12537C;
text-decoration: none;
}
#log H3{
font-family: Arial Narrow, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #1F4066;
text-align:center;
padding: 7px 0px 5px 0px;
}
.col_l { padding: 10px 5px 0px 0px;}
#left{
float: left;
width: 676px;
background: url(metamorph_mywaves-images/bg_left.jpg) left 25px repeat-x;
margin-right: 0px;
padding: 0px 0px 0px 0px;
}
.tit_bot { background:url(metamorph_mywaves-images/bot_bg.png) left top no-repeat;}
#footer{
height: 44px;
width: 100%;
font-size: 10px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 8px 0px 0px 0px;
}
#footer a{
color: #FFFFFF;
font-size: 10px;
text-decoration: none;
}
#footer a:hover{
color: #FFFFFF;
font-size: 10px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="bg">
<div id="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<div class="CNGH"><a href="#">metamorph_mywaves</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2></div>
</div>
<div id="buttons">
<div class="but"><a href="#" title="">Home</a></div>
<div class="but"><a href="#" title="">Blog</a></div>
<div class="but"><a href="#" title="">Gallery</a></div>
<div class="but"><a href="#" title="">About us</a></div>
<div class="but"><a href="#" title="">Contact us</a></div>
<div id="search">
<form method="get" action="">
<fieldset>
<input type="text" name="s" id="search-text" size="15" />
<input type="submit" id="search-submit" value="" />
</fieldset>
</form>
</div>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="right">
<div id="log">
<h3>User Login</h3>
<div>
<form id="form" method="post" action="#">
<fieldset>
<label for="text1"> Username</label><br />
<input id="text1" type="text" name="text1" value="" />
<label for="text2"> Password</label><br />
<input id="text2" type="password" name="text2" value="" />
<input type="submit" id="login-submit" value="" />
</fieldset>
</form>
</div>
<img src="metamorph_mywaves-images/fish_inp.png" title="" alt="" style="padding-right: 5px; padding-bottom: 0px;"/><a href="#">Create new account</a><br />
<img src="metamorph_mywaves-images/fish_inp.png" title="" alt="" style="padding-right: 5px; padding-bottom: 0px;"/><a href="#">Request new password</a>
</div>
<h1>Company News</h1>
<div class="tit_bot">
<div class="right_b"><span class="col_b">Nunc lobortis dignissim tempor. Nunc vestibulum tincidunt orci. </span><br />
Vivamus blandit faucibus aliquam. Suspendisse pulvinar luctus ipsum, et ultrices ipsum lacinia quis. Nulla mauris tellus, pellentesque quis mollis et, interdum in neque. Aliquam luctus aliquet aliquam. Proin eu tortor vitae... </div>
<div class="more"><a href="#"><img src="metamorph_mywaves-images/b_more.gif" alt="" /></a></div>
<div class="right_b"><span class="col_b">Nunc lobortis dignissim tempor. Nunc vestibulum tincidunt orci. </span><br />
Vivamus blandit faucibus aliquam. Suspendisse pulvinar luctus ipsum, et ultrices ipsum lacinia quis. Nulla mauris tellus, pellentesque quis mollis et, interdum in neque. Aliquam luctus aliquet aliquam. Proin eu tortor vitae... </div>
<div class="more"><a href="#"><img src="metamorph_mywaves-images/b_more.gif" alt="" /></a></div>
</div>
</div>
<div id="left">
<h2>Company Text Goes Here</h2>
<div class="col_l">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et erat quis lectus malesuada imperdiet. Nulla id ultricies velit. Phasellus consequat interdum venenatis. Integer aliquam nulla laoreet dolor sodales vitae ornare risus egestas. Nulla et risus orci, ac dignissim purus. </span><br />
<br />
<img src="metamorph_mywaves-images/img1.jpg" class="img" alt="" /> Nam quis pellentesque orci. Praesent scelerisque fermentum tempor. Nam imperdiet arcu libero. Sed imperdiet vestibulum ipsum, a cursus turpis aliquam vel. Etiam placerat enim vitae felis molestie euismod. Cras est nisl, cursus et mollis ut, adipiscing at est. Nam rhoncus dictum hendrerit. Nam congue ipsum vestibulum augue dictum sit amet porttitor libero aliquet. Sed venenatis metus a metus cursus nec bibendum tortor interdum. Morbi et cursus libero. Donec rhoncus nisl et urna vehicula in semper ligula elementum. Sed semper dui in sem. <br />
<div class="more"><a href="#"><img src="metamorph_mywaves-images/b_more.gif" alt="" /></a></div>
</div><br />
<h2>Company Text Goes Here</h2>
<div class="col_l"><span>Proin accumsan malesuada nibh vitae aliquet. Sed metus dui, porta vitae tempor non, faucibus eget lorem. Morbi rhoncus porta cursus. Etiam facilisis dictum erat, at rutrum nulla bibendum nec. </span><br />
<br />
Nullam mollis dictum ante, eget bibendum ipsum vehicula ac. Nulla mollis imperdiet nunc quis dictum. Donec et dolor tellus. Nulla pellentesque purus vitae nisi rhoncus vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eu ante eu mauris sagittis tristique. Nunc erat magna, adipiscing interdum aliquet sit amet, porttitor pulvinar sem. Quisque eget volutpat ante. Morbi volutpat varius mi, eu pellentesque orci ullamcorper a. Nullam commodo orci ut justo sollicitudin sodales. Aliquam erat volutpat.<br /><br />
<span>Aenean elementum est et dolor posuere ac mattis risus aliquam. Nam vel hendrerit nisl. </span><br />Sed congue, orci id ultricies sollicitudin, arcu mauris tincidunt libero, vitae elementum enim ipsum commodo dolor. Curabitur a lectus velit. Nullam varius urna at lectus viverra lacinia. Quisque vitae tellus nibh. Maecenas eget sapien sem.<br />
<ul class="spis">
<li><a href="#" class="dot">Duis imperdiet venenatis ligula, quis bibendum mi fermentum et.</a></li>
<li><a href="#" class="dot">Vestibulum neque justo, vehicula ac tempus sit amet, hendrerit sed tortor.</a><br /></li>
<li><a href="#" class="dot">Maecenas eget sapien sem, ac auctor sem.</a><br /></li>
</ul>
</div>
</div>
<div style="clear: both"><img src="metamorph_mywaves-images/spaser.gif" alt="" width="1" height="1" /></div>
<div style="clear: both"><img src="metamorph_mywaves-images/spaser.gif" alt="" width="1" height="1" /></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