familyportal
<!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=utf-8" />
<title>Family Portal</title>
<style type='text/css'>
/*-------------- DEFAULT ---------------*/
body {
background:#FCF9E3 url(images/main_bg.gif) 0 49px repeat-x; color:#695D1E;
font:normal 11px/15px Verdana, Arial, Helvetica, sans-serif;
margin:0; padding:0;
}
div, p, img, a, ul, form, input, h1, h2 {margin:0; padding:0;}
ul {list-style:none;}
a {text-decoration:none;}
img {border:none;}
.spacer {font-size:0; line-height:0; clear:both;}
/*-------------- HEADER ---------------*/
#header {
width:728px; padding:0 0 0 52px; margin:0 auto; height:242px;
background:url(images/header_pic.jpg) 100% 49px no-repeat; position:relative;
}
/*----- TOP MENU -----*/
#header img {
position:absolute; top:158px; left:622px;
}
#header h2.punchline {
color:#000; font:bold 10px/12px Arial, Helvetica, sans-serif;
position:absolute; left:622px; top:205px; display:block; width:135px;
}
#header ul {
padding:0 0 7px 0; height:42px; font-size:10px; line-height:12px;
font-weight:bold; text-transform:uppercase; position:relative;
}
#header ul li {float:right; padding:0 10px 0 0;}
#header ul li a {
color:#827F1B; background:#FCF9E3; padding:19px 8px 11px 8px; width:auto;
display:block;
}
#header ul li a:hover {background:#F9EFB0; color:#827F1B;}
#header ul li span {
background:#F9EFB0; color:#827F1B; display:block;
padding:19px 8px 11px 8px; width:auto;
}
#header form {
background:#fff url(images/form_bg.gif) 0 0 repeat-y; width:153px;
padding:16px 0 0 10px; height:177px; color:#545453;
}
#header form h2 {
background:url(images/meme_log_hdr.gif) 0 0 no-repeat; height:19px;
font:bold 16px/15px Arial, Helvetica, sans-serif; padding:5px 0 15px 25px;
}
#header form label {
font:bold 10px/13px Verdana, Arial, Helvetica, sans-serif;
padding:0 0 0 10px; height:13px; display:block;
}
#header form input.txtBox {
width:116px; padding:1px 0 0 1px; margin:0 0 0 9px;
}
#header form input.submitBtn {
margin:9px 0 0 76px;
}
/*----------------------- BODY ----------------------*/
#body {
width:721px; padding:9px 0 0 59px; margin:0 auto;
}
/*----------- LEFT PANEL ----------*/
#leftPanel {width:525px; float:left;}
#leftPanel h2 {
height:38px; padding:0 0 0 14px;
font:italic 20px/38px Georgia, "Times New Roman", Times, serif;
background:url(images/body_h2bg.gif) 0 0 repeat-x;
}
#leftPanel p {padding:0 0 0 17px;}
#leftPanel p.moreBtn {
margin:32px 17px 26px 17px; padding:0; height:18px;
background:url(images/more_bg_flat.gif) 0 50% no-repeat;
}
#leftPanel p.moreBtn a {
background:#F1E34C url(images/more_btn.jpg) 0 0 no-repeat; width:59px; height:18px;
display:block; text-align:center; color:#322B01; float:right;
}
/*----- NEWS ------*/
#leftPanel div.news {
width:210px; float:left; padding:16px 31px 0 22px;
}
#leftPanel div.news p {
padding:1px 0 0 0; line-height:14px;
}
#leftPanel div.news p.moreBtn1 {
height:18px; padding:0; background:url(images/more_bg_doted.gif) 0 50% repeat-x;
margin:35px 0 0 0;
}
#leftPanel div.news p.moreBtn1 a {
width:51px; height:18px; text-align:center; display:block; float:right;
color:#322B01; background:#FCF9E3 url(images/more_btn_botom.gif) 0 0 no-repeat;
line-height:18px;
}
#leftPanel div.newsRight {
padding:16px 0 0 28px;
background:url(images/vertical_doted_bdr.gif) left top repeat-y;
}
/*----------- RIGHT PANEL ----------*/
#rightPanel {
width:147px; float:left; padding:0 0 42px 30px;
}
#rightPanel h2 {
height:27px; padding:0 0 0 9px;
font:italic 16px/27px Georgia, "Times New Roman", Times, serif;
background:url(images/right_h2bg.gif) 0 0 repeat-x;
}
#rightPanel ul {
font:bold 12px/24px Arial, Helvetica, sans-serif;
padding:10px 4px 33px 0;
}
#rightPanel ul li {
background:url(images/dotted_black_border.gif) left bottom repeat-x;
padding:0 0 1px 0;
}
#rightPanel ul li a {
height:24px; display:block; padding:0 0 0 12px; color:#393939;
background:#FCF9E3 url(images/bullet_right.gif) 92% 50% no-repeat;
}
#rightPanel ul li a:hover {
background-color:#F5F2D9; color:#000;
}
/*----------------------- FOOTER ----------------------*/
#footer {
background:#FFF6C1 url(images/footer_bg.gif) 0 0 repeat-x;
padding:19px 0 16px 0; color:#685C14;
}
#footer ul {
font-size:10px; line-height:12px; margin:0 auto;
font-weight:bold; text-transform:uppercase; width:570px;
}
#footer ul li {float:right;}
#footer ul li a {
padding:1px 12px; display:block; width:auto; color:#6A6816;
background:#FFF6C1;
}
#footer ul li a:hover {
color:#FFF6C1; background:#6A6816;
}
#footer p {
clear:both; text-align:center; padding:8px 0 0 0;
font:normal 9px/11px Arial, Helvetica, sans-serif;
}
#footer p a {
color:#685C14; text-decoration:none;
}
#footer p a:hover {
text-decoration:underline;
}
/*-------------- MISCLENIOUS ---------------*/
.topPad {padding-top:23px !important;}
</style>
</head>
<body>
<!-- HEADER STARTS -->
<div id="header">
<a href="index.html"><img src="images/logo.gif" alt="Family Portal" width="127" height="42" border="0" title="Family Portal" /></a>
<h2 class="punchline">Make your family together</h2>
<ul>
<li><a href="#" title="CONTACT US">CONTACT US</a></li>
<li><a href="#" title="HOT LINKS">HOT LINKS</a></li>
<li><a href="#" title="KIDS">KIDS</a></li>
<li><a href="#" title="HEALTH">HEALTH</a></li>
<li><a href="#" title="ADVICE">ADVICE</a></li>
<li><a href="#" title="NEWS">NEWS</a></li>
<li><a href="#" title="ABOUT US">ABOUT US</a></li>
<li><span>HOME</span></li>
</ul>
<form action="" method="post" enctype="multipart/form-data">
<h2>Members login</h2>
<label for="name">name</label>
<input name="name" type="text" class="txtBox" id="name" />
<label for="email">email</label>
<input name="email" type="text" class="txtBox" id="email" />
<input type="image" src="images/submit_btn.gif" name="Submit" class="submitBtn" />
</form>
</div>
<!-- HEADER ENDS -->
<!-- BODY STARTS -->
<div id="body">
<!-- LEFT PANEL -->
<div id="leftPanel">
<h2>Welcome to our Family website</h2>
<p class="topPad"><strong>Free CSS Templates</strong> This is Family Portal, 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 youre 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>
<p class="moreBtn"><a href="#" title="more">more</a></p>
<h2>Family News</h2>
<!-- FAMILY NEWS -->
<div class="news">
<p><strong>01.01.2007</strong></p>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit, aliquip ex ea commosunt in culpa qui officia deserunt mollit anim id.</p>
<p class="moreBtn1"><a href="#" title="more">more</a></p>
</div>
<div class="news newsRight">
<p><strong>03.01.2007</strong></p>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit, aliquip ex ea commosunt in culpa qui officia deserunt mollit anim id.</p>
<p class="moreBtn1"><a href="#" title="more">more</a></p>
</div>
</div>
<!-- LEFT PANEL -->
<div id="rightPanel">
<h2>SITE Directory</h2>
<ul>
<li><a href="#" title="Guides">Guides</a></li>
<li><a href="#" title="Helth&Safly">Helth&Safly</a></li>
<li><a href="#" title="Adoption">Adoption</a></li>
<li><a href="#" title="Just for">Just for</a></li>
<li><a href="#" title="Death&Dying">Death&Dying</a></li>
<li><a href="#" title="Fath">Fath</a></li>
<li><a href="#" title="FamilyPlanning">FamilyPlanning</a></li>
<li><a href="#" title="Newborns">Newborns</a></li>
<li><a href="#" title="Children">Children</a></li>
<li><a href="#" title="Work">Work</a></li>
</ul>
<a href="#"><img src="images/banner.jpg" alt="Family Doctor" title="Family Doctor" width="143" height="105" /></a> </div>
<br class="spacer" /></div>
<!-- BODY ENDS -->
<!-- FOOTER STARTS -->
<div id="footer">
<ul>
<li><a href="#" title="CONTACT US">CONTACT US</a></li>
<li><a href="#" title="HOT LINKS">HOT LINKS</a></li>
<li><a href="#" title="KIDS">KIDS</a></li>
<li><a href="#" title="HEALTH">HEALTH</a></li>
<li><a href="#" title="ADVICE">ADVICE</a></li>
<li><a href="#" title="NEWS">NEWS</a></li>
<li><a href="#" title="ABOUT US">ABOUT US</a></li>
<li><a href="#" title="HOME">HOME</a></li>
</ul>
<p>Copyright information goes here<br class="spacer" />
<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>
<!-- FOOTER ENDS -->
</body>
</html>
Related examples in the same category