dating-online
<!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>
<title>Dating Online</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*--------------- DEFAULT -----------------*/
body{
margin:0; padding:0; background:#fff; color:#000;
font:normal 12px/16px Arial, Helvetica, sans-serif;
}
p, img, ul, a, form, input, h1, h2, h3 {margin:0; padding:0;}
ul{list-style:none;}
a{text-decoration:none; outline:none;}
.spacer{font-size:0; line-height:0; clear:both;}
img {border:none;}
/*--------------- HEADER -----------------*/
#header {
width:697px; margin:0 auto; background:url(dating-online-images/header_bg.jpg) 0 0 no-repeat;
height:256px; padding:0 0 0 83px;
}
#header div {width:504px; height:256px; float:left;}
#header div img { display:block;}
#header div h2 {
background:url(dating-online-images/punchline.jpg) 0 0 no-repeat; width:245px; line-height:0;
height:29px; text-indent:-2000px; margin:76px 0 0 0; font-size:0;
}
#header ul {
width:128px; height:185px; background:url(dating-online-images/topmenu_bg.jpg) 0 0 no-repeat;
padding:71px 0 0 22px; font-weight:bold; float:left;
}
#header ul li {
background:url(dating-online-images/topmenu_libg.gif) left bottom repeat-x;
padding:0 0 1px 0;
}
#header ul li a {
color:#000; height:18px; display:block; padding:0 0 0 9px;
background:url(dating-online-images/bull_topmenu.gif) 0 40% no-repeat;
}
#header ul li a:hover {
color:#fff;
background:url(dating-online-images/bull_topmenu_hover.gif) 0 40% no-repeat;
}
#header ul li span {
color:#fff; height:18px; display:block; padding:0 0 0 9px; cursor:default;
background:url(dating-online-images/bull_topmenu_hover.gif) 0 40% no-repeat;
}
/*------------------- BODY -----------------------*/
#body {
width:768px; background:#E4DDCB url(dating-online-images/body_bg.gif) 0 0 repeat-x;
padding:29px 0 0 12px; margin:0 auto; color:#000;
}
#body h2 {text-indent:-2000px; line-height:0; font-size:0;}
/*----------- LEFT PANEL ----------*/
#leftPanel {width:228px; float:left; padding:0 39px 0 0;}
#leftPanel form {
background:#D8CDB4; padding:1px 1px 15px 1px; color:#000; margin:0 0 37px 0;
}
#leftPanel form h2.formHeader {
height:30px;margin:0 0 12px 0; color:#fff;
background:#CDC4AE url(dating-online-images/form_hdr.gif) 0 0 no-repeat;
}
#leftPanel form label {
float:left; width:92px; line-height:16px; height:16px; background:#D8CDB4;
padding:0 0 12px 16px; font-weight:bold; color:#D84576;
}
#leftPanel form input {
width:109px; height:15px; float:left; padding:1px 0 0 1px;
}
#leftPanel form .small {width:34px; padding:1px 0 0 1px;}
#leftPanel form input.goBtn {
width:31px; height:20px; margin:3px 0 0 187px; float:none;
}
#leftPanel h2.latestHeader {
background:url(dating-online-images/latest_hdr.gif) 0 0 no-repeat;
height:44px;
}
#leftPanel p {
font:normal 11px/15px Arial, Helvetica, sans-serif; padding:24px 4px 0 12px;
clear:both;
}
#leftPanel a.readmoreBtn {
color:#7C0E33; text-decoration:underline; font-weight:bold; float:right;
font-size:11px; background-color:#E4DDCB;
}
#leftPanel a.readmoreBtn:hover {text-decoration:none;}
/*----------- RIGHT PANEL ----------*/
#rightPanel {
width:466px; float:left; padding:0 0 15px 0;
}
#rightPanel h2.welcomeHeader {
background:url(dating-online-images/welcome_hdr.gif) 0 0 no-repeat; height:38px;
}
#rightPanel p {padding:0 0 10px 3px;}
#rightPanel p.readmore {
height:16px; background:url(dating-online-images/midline_bg.gif) 0 50% repeat-x;
margin:0 9px 10px 6px; padding:0;
}
#rightPanel p.readmore a {
background:#E4DDCB url(dating-online-images/readmore_bg.gif) 0 0 no-repeat; display:block; width:58px;
height:16px; float:right; color:#FCC7A9; text-align:center;
font:bold 10px/15px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif
}
#rightPanel p.readmore a:hover {
color:#fff; background:#E4DDCB url(dating-online-images/readmore_bg.gif) 0 0 no-repeat;
}
#rightPanel h2.coupleHeader {
background:url(dating-online-images/couple_hdr.gif) 0 0 no-repeat; height:38px;
}
#rightPanel h2.profilesHeader {
background:url(dating-online-images/profiles_hdr.gif) 0 0 no-repeat; height:33px;
}
#rightPanel ul.profiles li {float:left; padding:0 1px 0 0;}
#rightPanel ul.pagination li {
float:left; color:#7C1F3E; background-color:#E4DDCB; font-weight:bold;
padding:0 6px 0 0;
}
#rightPanel ul.pagination {padding:10px 0 0 7px;}
#rightPanel ul.pagination li a {color:#7C1F3E; background-color:#E4DDCB; margin:0 6px 0 0;}
#rightPanel ul.pagination li.left { padding-right:116px;}
#rightPanel ul.pagination li.right { padding-left:122px;}
#footer {
width:780px; margin:0 auto; padding:25px 0 0 0; color:#000;
background:#F4F2EA url(dating-online-images/fo0ter_bg.gif) 0 0 repeat-x;
}
#footer ul {font-weight:bold; width:480px; margin:0 auto;}
#footer ul li { float:left; padding:0 1px;}
#footer ul li a {
padding:1px 10px; color:#7C1F3E; display:block; background:#F4F2EA;
}
#footer ul li a:hover {
color:#F4F2EA; background:#7C1F3E;
}
#footer p {clear:both; padding:8px 0 17px 0; font-size:11px; text-align:center;}
#footer p a{ color:#000; text-decoration:underline;}
#footer p a:hover{ text-decoration:none;}
/*--------------- MISCLENIOUS -----------------*/
.centerAlign {text-align:center !important;}
.botPad {padding-bottom:25px !important;}
</style>
</head>
<body>
<div id="header">
<div> <a href="http://www.free-css.com/"><img src="dating-online-images/logo.jpg" width="240" height="76" border="0" alt="" /></a>
<h2>Someone Special is waiting for you...</h2>
</div>
<ul>
<li><span>Home</span></li>
<li><a href="http://www.free-css.com/">Search</a></li>
<li><a href="http://www.free-css.com/">Photo Gallery</a></li>
<li><a href="http://www.free-css.com/">My Account</a></li>
<li><a href="http://www.free-css.com/">Membership</a></li>
<li><a href="http://www.free-css.com/">Contact us</a></li>
</ul>
</div>
<div id="body">
<div id="leftPanel">
<form action="http://www.free-css.com/" method="post" enctype="multipart/form-data">
<h2 class="formHeader">Partner Search</h2>
<label>I am a</label>
<input type="text" name="" />
<br class="spacer" />
<label>Seeking a</label>
<input type="text" name="" />
<br class="spacer" />
<label>Between ages</label>
<input type="text" name="" class="small" />
<label class="small centerAlign">And</label>
<input type="text" name="" class="small" />
<br class="spacer" />
<label>Photos only</label>
<input type="text" name="" />
<br class="spacer" />
<input type="image" src="dating-online-images/go_btn.gif" title="Go" class="goBtn" />
<br class="spacer" />
</form>
<h2 class="latestHeader">Latest Updates</h2>
<p><strong>Lorem ipsum dolor</strong> sit amet, consectetur adipisicing elit, aliquip ex ea commosunt in culpa qui officia deserunt mollit anim id.</p>
<a href="http://www.free-css.com/" class="readmoreBtn">read more</a>
<p><strong>Lorem ipsum dolor</strong> sit amet, consectetur adipisicing elit, aliquip ex ea commosunt in culpa qui officia deserunt mollit anim id.</p>
<a href="http://www.free-css.com/" class="readmoreBtn">read more</a> </div>
<div id="rightPanel">
<h2 class="welcomeHeader">Welcome to Dating Online</h2>
<p class="botPad">This is <strong>Dating Online</strong>, a free, fully standards-compliant CSS template designed by Free CSS Templates. <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="readmore"><a href="http://www.free-css.com/">read more</a></p>
<h2 class="coupleHeader">Couple of the month</h2>
<p><strong>Lorem Ipsum has been</strong> the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.</p>
<p class="readmore"><a href="http://www.free-css.com/">read more</a></p>
<h2 class="profilesHeader">Couple of the month</h2>
<ul class="profiles">
<li><a href="http://www.free-css.com/"><img src="dating-online-images/profile_pic1.jpg" alt="" width="152" height="125" /></a></li>
<li><a href="http://www.free-css.com/"><img src="dating-online-images/profile_pic2.jpg" alt="" width="154" height="125" /></a></li>
<li><a href="http://www.free-css.com/"><img src="dating-online-images/profile_pic3.jpg" alt="" width="154" height="125" /></a></li>
</ul>
<br class="spacer" />
<ul class="pagination">
<li class="left"><a href="http://www.free-css.com/">< Previous</a></li>
<li><a href="http://www.free-css.com/">1</a>|</li>
<li><a href="http://www.free-css.com/">2</a>|</li>
<li><a href="http://www.free-css.com/">3</a>|</li>
<li><a href="http://www.free-css.com/">4</a>|</li>
<li><a href="http://www.free-css.com/">5</a></li>
<li class="right"><a href="http://www.free-css.com/">Next ></a></li>
</ul>
</div>
<br class="spacer" />
</div>
<div id="footer">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Search</a></li>
<li><a href="http://www.free-css.com/">Photo Gallery</a></li>
<li><a href="http://www.free-css.com/">My Account</a></li>
<li><a href="http://www.free-css.com/">Membership</a></li>
<li><a href="http://www.free-css.com/">Contact us</a></li>
</ul>
<p>Copyright information goes here<br class="spacer" />
Designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>, Thanks to <a href="http://www.dubaiapartments.biz/">Dubai Apartments</a></p>
</div>
</body>
</html>
Related examples in the same category