family template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>family</title>
<style type='text/css'>
*{font-family:Tahoma, Verdana, Helvetica, sans-serif; font-size:11px; }
body
{
padding:0 0 0 0;
margin:0 0 0 0;
background-color:#BEBEBE;
color:#474747;
}
div.spacer
{
clear: both;
}
a
{
color:#D6D6D6;
padding:0 1px 0 1px;
background-color:inherit;
}
a:hover
{
text-decoration:none;
}
form
{
padding:0 0 0 0;
margin:0 0 0 0;
}
.div-wrapper
{
width:698px;
height:auto;
margin:0 auto 0 auto;
padding:0;
background-image:url(images/body-background.gif);
background-repeat:repeat-y;
}
.div-wrapper-body
{
width:698px;
height:auto;
margin:0 auto 0 auto;
padding:0;
background-image:url(images/body-bg.gif);
background-repeat:repeat-y;
}
p
{
margin:0 0 0 0;
padding:0 0 0 0;
}
ul
{
list-style-type:none;
padding:10px 0 0 25px;
margin:0 0 0 0;
}
li
{
list-style-type:none;
background-image:url(images/bullets.gif);
background-repeat:no-repeat;
background-position:0 50%;
padding:3px 5px 3px 18px;
}
.banner-bg
{
background-image:url(images/banner-bg.jpg);
background-repeat:no-repeat;
width:393px;
height:244px;
float:left;
}
.image-holder
{
float:left;
width:305px;
height:244px;
background:url(images/banner.jpg) no-repeat 0 0;
}
.logo
{
padding:15px 0 0 100px;
}
.menu
{
padding:28px 0 0 38px;
}
ul.link{
font-size:0; line-height:0; height:25px; margin:20px 0 0 0;
}
ul.link li{
float:left; line-height:19px; border-right:#FFFFFF 1px solid; padding:0 15px; background-image:none;
}
ul.link li.nobor{
border-right:none;
}
ul.link li a{
text-decoration:none; color:#FFFFFF; background-color:#5D7C91;
font:bold 15px/19px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
ul.link li a:hover{
color:#FFD16E; background-color:inherit;
}
.links-top
{
padding:0 15px 5px 15px;
}
.top-heading
{
padding:8px 0 0 55px;
}
.body-background
{
background-image:url(images/body-bg.gif);
background-repeat:repeat-y;
background-position:288px 0 ;
}
.left-body-wrapper
{
width:233px;
float:left;
}
.right-body-wrapper
{
width:453px;
float:left;
background-color:#F2F0F0;
color:#474747;
}
.right-body-wrapper2
{
width:453px;
float:left;
}
.heading
{
font-weight:bold;
color:#ffffff;
padding:10px 0 10px 20px;
background-image:url(images/select-info-bg.jpg);
background-repeat:repeat-y;
background-color:inherit;
}
.black-heading
{
color:#000000;
font-weight:bold;
padding:10px 0 5px 20px;
float:left;
background-color:inherit;
}
.float-right
{
float:right;
padding:4px 0 4px 0;
}
.float-left
{
float:left;
padding:0 0 0 0;
}
.image-1
{
padding-left:10px;
width:210px;
float:left;
color:#474747;
background-color:inherit;
}
.image-1 a
{
padding-left:150px;
color:#474747;
background-color:inherit;
}
.body-text-01
{
width:250px;
padding:0 15px 0 15px;
float:left;
}
.border-bottom
{
border-bottom:1px solid #D6D6D6;
float:left;
width:100%;
}
.yellow-headings
{
color:#825900;
font-weight:bold;
margin:5px 0 0 0;
float:left;
background-color:inherit;
}
.footer
{
padding:25px 0 0 20px;
font-weight:bold;
float:left;
}
.footer a{
text-decoration:underline; color:#474747; background-color:inherit;
}
.footer a:hover{
text-decoration:none;
}
.footer1{
padding-top:5px;
padding-bottom:25px;
}
.login
{
padding:0px 0 0 38px;
}
.id
{
width:75px;
float:left;
}
.input-field
{
background-color:#ffffff;
border:1px solid #000000;
margin-top:2px;
width:175px;
color:#000000;
}
.input-button
{
background-color:#ffffff;
border:1px solid #000000;
margin-top:2px;
width:56px;
color:#000;
}
</style>
</head>
<body>
<div class="div-wrapper">
<div class="banner-bg">
<p class="logo"><a href="index.html"><img src="images/logo.gif" alt="Family site" width="181" height="63" border="0" title="Family site" /></a></p>
<ul class="link">
<li><a href="#" title="Kids">Kids</a></li>
<li><a href="#" title="Moms">Moms</a></li>
<li><a href="#" title="Dads">Dads</a></li>
<li><a href="#" title="news">News</a></li>
<li class="nobor"><a href="#" title="Links">Links</a></li>
</ul>
<!--<p class="menu"><img src="images/kids.gif" alt="kids" width="27" height="14" class="links-top" /><img src="images/divider.gif" alt="divider" width="1" height="25" /><img src="images/moms.gif" alt="moms" width="38" height="14" class="links-top" /><img src="images/divider.gif" alt="divider" width="1" height="25" /><img src="images/dads.gif" alt="dads" width="32" height="14" class="links-top" /><img src="images/divider.gif" alt="divider" width="1" height="25" /><img src="images/news.gif" alt="news" width="35" height="14" class="links-top" /><img src="images/divider.gif" alt="divider" width="1" height="25" /><img src="images/links.gif" alt="links" width="35" height="14" class="links-top" /></p> -->
<p class="top-heading"><img src="images/heading-top.gif" alt="Heading" width="162" height="17" /></p>
<div class="spacer"> </div>
<div class="login">
<p class="yellow-headings">Member's Login</p><br /><br />
<p class="id"><strong>User Name:</strong></p>
<form id="form1" name="form1" method="post" action="">
<p><input name="textfield" type="text" class="input-field" />
</p>
<p class="id"><strong>Password: </strong></p>
<p><input name="textfield2" type="text" class="input-field" />
<input name="Submit" type="submit" class="input-button" value="Login" />
</p>
</form>
</div>
</div>
<div class="image-holder"></div>
</div>
<div class="spacer" style="height:.1px"></div>
<div class="div-wrapper-body">
<p><img src="images/body-top.jpg" alt="body" width="698" height="45" /></p>
<div class="left-body-wrapper">
<p class="heading">Select Informations</p>
<ul>
<li><a href="#">Duis eu urna a lectus</a></li>
<li><a href="#">Dapibus viverra. </a></li>
<li><a href="#">Vivamus ut tortor eget justo </a></li>
<li><a href="#">luctus dapibus.</a></li>
<li><a href="#">Nunc fermentum lacinia</a></li>
<li><a href="#">Nunc eu massa nec quam </a></li>
<li><a href="#">vulputate vulputate. Morbi </a></li>
<li><a href="#">malesuada mollis quam. </a></li>
<li><a href="#">Fusce tempus diam ac </a></li>
<li><a href="#">neque. Nam tempor.</a></li>
<li><a href="#">Duis eu urna a lectus</a></li>
<li><a href="#">Dapibus viverra. </a></li>
<li><a href="#">Vivamus ut tortor eget justo </a></li>
<li><a href="#">luctus dapibus. </a></li>
<li><a href="#">Nunc fermentum lacinia</a></li>
<li><a href="#">Nunc eu massa nec quam </a></li>
<li><a href="#">vulputate vulputate. Morbi </a></li>
<li><a href="#">malesuada mollis quam. </a></li>
<li><a href="#">Fusce tempus diam ac </a></li>
</ul>
</div>
<div class="right-body-wrapper">
<p class="black-heading">The Most Popular</p>
<p class="float-right"><img src="images/body-design.gif" alt="design" width="298" height="30" /></p>
<div class="spacer"> </div>
<p class="image-1"><img src="images/image-01.jpg" alt="" title="image 01" width="192" height="66" /><br />
<span class="yellow-headings">11/22/2006</span><br />
<br />
Duis arcu. Ut mattis erat ac arcu. <u>Nulla ipsum tellus, lobortis ut</u>, posuere sed, <br /><br />
<a href="#">More..</a><br />
</p>
<p class="image-1"><img src="images/image-02.jpg" alt="" title="image 02" width="192" height="66" /><br />
<span class="yellow-headings">11/22/2006</span><br />
<br />
Duis arcu. Ut mattis erat ac arcu. Nulla ipsum tellus, lobortis ut, posuere sed, <br /><br />
<a href="#">More..</a><br />
<br /><br />
</p>
<div class="spacer"> </div>
</div>
<div class="right-body-wrapper2">
<p class="black-heading">Family Relationship</p>
<p class="float-right"><img src="images/body-design.gif" alt="design" width="298" height="30" /></p>
<div class="spacer"> </div>
<p class="float-left"><img src="images/image-03.jpg" alt="" title="image 03" width="168" height="113" /></p>
<p class="body-text-01"> This is Family, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.
<br /> This free template is released under a Creative Commons Attributions 2.5 license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)
</p>
<div class="spacer" style="height:50px"> </div>
<p class="border-bottom"> </p>
<div><p class="footer">Copyright 2006, <a href="#">www.familysite.com</a>, All rights reserved</p>
<p class="footer footer1"><a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></p>
</div>
</div>
<div class="spacer"> </div>
</div>
</body>
</html>
Related examples in the same category