metamorph_spaceglowing
<!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_spaceglowing-images/bg.jpg);
}
#main {
width: 907px;
background: #FFFFFF;
border-left: 5px solid #D5D6D8;
border-right: 5px solid #D5D6D8;
margin: 0px auto;
border: 11px solid #FFFFFF;
}
#header {
width:907px;
padding: 0px 0px 0px 0px;
height: 316px;
background: url(metamorph_spaceglowing-images/big.jpg) left top no-repeat;
}
#logo {
color:#FFFFFF;
padding: 0px 10px 0px 0px;
background: url(metamorph_spaceglowing-images/logo.jpg) 0px 0px no-repeat;
height: 250px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #ffffff;
}
#logo H2 a{
font-size: 12px;
}
#search {
padding-top: 20px;
padding-left:600px;
height: 22px;
}
#search form {
margin: 0;
}
#search input {
float: left;
font: 12px Arial, Helvetica, sans-serif;
}
#search-text {
width: 191px;
height: 17px;
font-size: 12px;
padding-top: 4px;
padding-left: 3px;
padding-right: 3px;
border: none;
background: #FFFFFF;
background-repeat:no-repeat;
background-position:left top;
color: #000000;
border: 1px solid #23456B;
}
#search-submit {
width: 92px;
height: 24px;
background: url(metamorph_spaceglowing-images/b_search.gif) left top no-repeat;
background-repeat:no-repeat;
background-position:left top;
border: none;
margin-left: 6px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
.CNGH {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:18px;
padding: 63px 0px 0px 600px;
}
#buttons{
width: 907px;
height: 54px;
background: url(metamorph_spaceglowing-images/bg_but.gif) left top no-repeat;
text-align:center;
padding-left: 0px
}
.but {
background: url(metamorph_spaceglowing-images/razd_b.gif) right no-repeat;
height:54px;
float:left;}
.but_1 {background: url(metamorph_spaceglowing-images/razd_b.gif) right no-repeat;
height:54px;
float:left;
margin-left:2px;}
.but_2 {background: none;
height:54px;
float:left;}
#buttons a {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight:normal;
display: block;
float: left;
width: 178px;
height: 38px;
text-decoration: none;
color: #FFFFFF;
padding-top: 16px;
margin-right:3px;
text-align: center;
}
#buttons a:hover {
text-decoration: underline;
background: url(metamorph_spaceglowing-images/b_ov.jpg) right 2px repeat-x;
margin-right:3px;
}
#content{
width: 905px;
padding: 8px 0px 8px 0px;
background: #D3D3D3;
margin: 0px 0px 0px 0px;
}
#content_razd{
width: 887px;
padding: 0px 0px 0px 0px;
background: url(metamorph_spaceglowing-images/razd.gif) 593px 0px repeat-y;
margin: 0px 9px 0px 9px;
}
#right{
width: 287px;
margin: 0px 0px 0px 0px;
float: right;
color:#000000;
}
.right_b { background: url(metamorph_spaceglowing-images/fish.gif) 0px 19px no-repeat;
padding-left: 24px;
padding-top: 15px;
width: 266px;}
.img { float:left;
margin: 5px 12px 5px 0px;
}
span { color:#0D2C55;
font-weight:bold;
}
.dat { text-decoration: underline;
color:#0D2C55;}
.col_b {color:#0D2C55;}
#right H1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #23456B;
text-align: left;
background: url(metamorph_spaceglowing-images/tit.gif) bottom repeat-x;
padding-top: 10px;
padding-bottom: 3px;
}
#left H2{
font-family: Georgia, "Times New Roman", Times, serif;
font-size:18px;
font-weight: 100;
color: #23456B;
padding-bottom: 3px;
padding-top: 4px;
text-align: left;
background: url(metamorph_spaceglowing-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_spaceglowing-images/right_inp.jpg) top no-repeat #FFFFFF;
padding-left: 15px;
padding-right: 14px;
padding-bottom: 15px;
border: 1px solid #385E8A;
}
#log fieldset {
border: none;
}
#log label {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #004fac;
text-align:left;
padding-bottom: 3px;
padding-top: 5px;
}
#login-submit{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #ffffff;
width: 58px;
height: 20px;
background: url(metamorph_spaceglowing-images/b_log.gif) left top no-repeat;
border: none;
margin: 5px 0px 0px 185px;
}
#text1, #text2 {
width: 191px;
height: 18px;
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
border: none;
background: url(metamorph_spaceglowing-images/inp.gif) left top no-repeat;
background-repeat:no-repeat;
background-position:left top;
color: #000000;
padding-bottom: 5px;
}
#right #log a{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #004fac;
}
#right #log a:hover{
color: #004fac;
text-decoration: none;
}
#log H3{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
color: #1F4066;
text-align:center;
padding: 7px 0px 0px 0px;
}
.col_l { padding: 10px 5px 0px 0px;}
.col_l a { color: #385E8A }
#left{
float: left;
width: 589px;
background: url(metamorph_spaceglowing-images/bg_left.jpg) left 25px repeat-x;
margin-right: 0px;
padding: 0px 0px 0px 0px;
}
.tit_bot { background:url(metamorph_spaceglowing-images/bot_bg.png) left top no-repeat;}
#footer{
height: 48px;
width: 100%;
font-size: 10px;
color: #FFFFFF;
text-align: center;
clear:both;
padding: 19px 0px 0px 0px;
background: url(metamorph_spaceglowing-images/bg_but.gif) bottom repeat-x;
}
#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="main">
<!-- header begins -->
<div id="header">
<div id="logo">
<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 class="CNGH"><a href="#">metamorph_spaceglowing</a>
<h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2></div>
</div>
<div id="buttons">
<div class="but_1"><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_2"><a href="#" title="">Contact us</a></div>
</div>
</div>
<!-- header ends -->
<!-- content begins -->
<div id="content">
<div id="content_razd">
<div id="right">
<div id="log">
<h3>User Login</h3>
<div>
<form id="formr" method="post" action="#">
<fieldset>
<label for="text1">Username</label><br />
<input id="text1" type="text" name="text1" value="" /><br />
<label for="text2">Password</label><br />
<input id="text2" type="password" name="text2" value="" />
<br />
<input type="submit" id="login-submit" value="" />
</fieldset>
</form>
</div>
<img src="metamorph_spaceglowing-images/fish_inp.gif" title="" alt="" style="padding-right: 5px; padding-bottom: 2px;"/><a href="#">Create new account</a><br />
<img src="metamorph_spaceglowing-images/fish_inp.gif" title="" alt="" style="padding-right: 5px; padding-bottom: 2px;"/><a href="#">Request new password</a>
</div>
<h1>Company News</h1>
<div class="tit_bot">
<div class="right_b"><span class="col_b">Pellentesque pharetra iaculis ultricies. Proin eu ante urna.</span><br />
Aliquam neque sem, vehicula vitae suscipit non, condimentum eget nunc. Praesent condimen-tum, dui non pulvinar interdum, arcu nisl lacinia.</div>
<div class="more"><a href="#"><img src="metamorph_spaceglowing-images/b_more.gif" alt="" /></a></div>
<div class="right_b"><span class="col_b">Pellentesque pharetra iaculis ultricies. Proin eu ante urna.</span><br />
Aliquam neque sem, vehicula vitae suscipit non, condimentum eget nunc. Praesent condimen-tum, dui non pulvinar interdum, arcu nisl lacinia.</div>
<div class="more"><a href="#"><img src="metamorph_spaceglowing-images/b_more.gif" alt="" /></a></div>
</div>
</div>
<div id="left">
<h2>Metamorphosis Design</h2>
<div class="col_l">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis venenatis quam. Integer a malesuada velit. Praesent sit amet purus vel felis rutrum varius at vestibulum sapien.</span><br /><br />
Ut molestie, dui eget bibendum vestibulum, dolor velit molestie tellus, et cursus ipsum ipsum vel sapien. Sed semper orci urna. Proin ante purus, condimentum vel dignissim eget, placerat eget nisl. Pellentesque scelerisque quam non nulla aliquet condimentum. Morbi ut turpis eget mi rutrum suscipit ac in felis. Nunc pellentesque leo sem. Vivamus a metus elit. Morbi sit amet justo eget arcu mollis adipiscing vulputate non neque. Nulla eu arcu leo. Aliquam fringilla gravida lorem, ac blandit ipsum pulvinar et. <br />
<div class="more"><a href="#"><img src="metamorph_spaceglowing-images/b_more.gif" alt="" /></a></div>
</div><br />
<h2>FREE WEBSITE TEMPLATES USEFUL LINKS</h2>
<div class="col_l">
<ol>
<li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">Free Website Templates</a></li>
<li><a href="http://www.metamorphozis.com/free_flash_templates/free_flash_templates.php">Free Flash Templates</a></li>
<li><a href="http://www.metamorphozis.com/shop/flash_templates.php">Flash Templates</a></li>
<li><a href="http://www.metamorphozis.com/shop/easy_flash_templates.php">Easy Flash Templates</a> (no flash experience needed to edit)</li>
<li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
</ol>
<div class="more"><a href="#"><img src="metamorph_spaceglowing-images/b_more.gif" alt="" /></a></div>
</div><br />
<h2>Company Text Goes Here</h2>
<div class="col_l">
<img src="metamorph_spaceglowing-images/img1.jpg" width="202" height="135" class="img" alt="" />
<span>Duis sed enim turpis, eget pulvinar urna. Quisque interdum molestie arcu, id dictum tellus egestas sit amet. Vivamus ante ipsum, faucibus quis dignissim ut, aliquet molestie nulla. </span><br />
<br />
Phasellus lacinia vestibulum tellus id adipiscing. Aenean a ligula enim, et dapibus metus. Morbi fringilla pretium risus, at interdum ipsum fermentum blandit. Nulla facilisi. Sed eu dui ac urna cursus aliquet in sed sapien. Aliquam et hendrerit nulla. Nunc imperdiet <br />
scelerisque justo quis cursus. In ultrices velit diam. Mauris dignissim risus et lectus semper at posuere sapien pharetra. Praesent non magna eget eros elementum fermentum eget non orci. Ut neque lectus faucibus ut imperdiet feugiat, lobortis in erat. Suspendisse potenti. Nam ornare fermentum tortor, sed. <br />
<div class="more"><a href="#"><img src="metamorph_spaceglowing-images/b_more.gif" alt="" /></a></div>
</div>
</div>
<div style="clear: both"><img src="metamorph_spaceglowing-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<div style="clear: both"><img src="metamorph_spaceglowing-images/spaser.gif" alt="" width="1" height="1" /></div>
</div>
<!-- content ends -->
<!-- footer begins -->
<div id="footer">
<p>Copyright 2010. <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> for <a href="http://www.flashtemplatesdesign.com/" title="Free Flash Templates">Free Flash Templates</a></p>
</div>
<!-- footer ends -->
</div>
</body>
</html>
Related examples in the same category