dating website template
<!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>
<title>Dating website template provided by http://www.getcsstemplates.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
background-color : #ffffff;
font-family : Helvetica, Arial, sans-serif;
font-size : 12px;
color : #6e6e6e;
}
img {
padding : 3px;
border : 1px solid #b1c6d9;
}
img.floatTL {
float : left;
margin-right : 7px;
margin-bottom : 2px;
margin-top : 5px;
margin-left : 5px;
}
#container {
margin : 5px auto;
width : 690px;
}
#header {
width : 450px;
height : 190px;
background-image : url(images/header.jpg);
background-position : center 0%;
background-repeat : no-repeat;
float : left;
}
#nav {
width : 220px;
float : right;
margin-left : 10px;
padding : 0;
margin-bottom : 20px;
}
#nav-in-top {
background-image : url(images/nav_haut.jpg);
background-position : top center;
background-repeat : no-repeat;
background-color : #e2e8ef;
padding : 0;
margin : 0;
height : 12px;
width : 220px;
}
#nav-in-middle {
border-left : 1px solid #c4c4c4;
border-right : 1px solid #c4c4c4;
background-color : #e2e8f8;
color : #000000;
width : 208px;
padding : 5px;
}
#nav-in-bottom {
background-image : url(images/nav_bas.jpg);
background-position : bottom center;
background-repeat : no-repeat;
background-color : #e2e8f8;
color : #000000;
padding : 0;
margin : 0;
height : 12px;
width : 220px;
}
#content {
width : 440px;
padding : 10px;
margin-bottom : 5px;
text-align : justify;
float : left;
font-size : 14px;
}
#footer {
clear : both;
width : 690px;
height : 15px;
color : #ffffcc;
text-align : center;
padding : 10px;
background-image : url(images/fbg.jpg);
background-repeat : no-repeat;
}
.title2 {
background-color : inherit;
border-bottom : 1px solid #cccccc;
color : #006699;
font-size : 14px;
}
p {
padding : 0;
margin : 5px 0 0 0;
}
.menu {
background-color : inherit;
display : block;
width : 110px;
padding : 5px 0 5px 5px;
margin-top : 5px;
color : #666666;
border : 1px solid #cccccc;
text-decoration : none;
}
.menu:hover {
background-color : #c5d7f8;
color : #666666;
border : 1px solid #666666;
}
.link:link, .link:visited {
background-color : inherit;
color : #993300;
text-decoration : none;
border-bottom : 1px dotted #993300;
}
.link:hover {
background-color : inherit;
color : #993300;
text-decoration : none;
cursor : help;
border-bottom : 1px dotted #993300;
}
.title {
background-color : inherit;
text-align : right;
padding-top : 0;
padding-right : 20px;
font-weight : lighter;
color : #ff0207;
font-size : 24px;
letter-spacing : -2px;
}
.title a {
color : #f6661d;
}
.subtitle {
background-color : inherit;
text-align : right;
padding-right : 20px;
font-weight : bold;
color : #ffffff;
font-family : Helvetica, Arial, sans-serif;
}
.intro-part1 {
background-color : inherit;
padding-top : 85px;
padding-left : 20px;
font-weight : bold;
font-size : 14px;
color : #f6661d;
}
.intro-part2 {
background-color : inherit;
padding-left : 20px;
font-weight : bold;
font-size : 14px;
color : #f6661d;
font-weight : bold;
}
.intro-part2 a {
color : #f6661d;
}
.button {
background-color : #eeeeee;
border : 1px solid #cccccc;
color : #666666;
}
.txt {
background-color : #eeeeee;
border : 1px solid #cccccc;
color : #666666;
}
#box {
margin-top : 5px;
font-family : Helvetica, Arial, sans-serif;
font-size : 11px;
}
.content_right {
margin : 0 auto;
display : inline;
float : right;
width : 205px;
text-align : justify;
margin-right : 5px;
padding-left : 5px;
padding-bottom : 5px;
padding-right : 5px;
padding-top : 2px;
line-height : 1.5em;
}
.content_left {
margin : 0 auto;
padding : 5px;
display : inline;
float : left;
width : 205px;
text-align : justify;
line-height : 1.5em;
}
.content_left h3 {
padding-left : 5px;
font-size : 1.2em;
margin-bottom : 5px;
font-family : Times, "Times New Roman", serif;
color : #ec845b;
font-family : Helvetica, Arial, sans-serif;
}
.content_right h3 {
font-size : 1.2em;
margin-bottom : 2px;
margin-top : 5px;
font-family : Times, "Times New Roman", serif;
color : #ec845b;
font-family : Helvetica, Arial, sans-serif;
}
.form {
padding-top : 5px;
padding-bottom : 5px;
margin : 5px;
border : 1px solid #cccccc;
text-align : center;
}
form {
margin-top : 0;
width : 150px;
margin-left : 10px;
margin-right : 5px;
margin-bottom : 15px;
background-color : #fff;
border : 1px solid #d0660a;
}
form p {
padding-top : 10px;
padding-left : 5px;
padding-bottom : 5px;
color : #cd6209;
}
.reg p {
padding-left : 20px;
color : #666;
}
.reg a {
color : #d0660a;
text-decoration : none;
}
.link {
margin : 0.2em 0 0.2em 1em;
width : auto;
position : relative;
min-width : 120px;
border-left : 4px solid #009730;
}
.link a {
font-size : 11px;
color : #00932c;
text-decoration : none;
}
.link a:hover {
color : #bbcc65;
text-decoration : underline;
font-size : 12px;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><div class="title"><u><a href="#">datingwebsitedotcom</a></u></div><div class="subtitle">find your date</div><div class="intro-part1"><u>free template provided by</u></div><div class="intro-part2"><a href="http://www.getcsstemplates.com">css website templates</a></div></div>
<div id="nav">
<div id="nav-in-top">
</div>
<div id="nav-in-middle">
<p class="title2"><u>find a date</u></p><br>
<span>
<a class="menu" href="index.html">Home</a>
<a class="menu" href="#">Link 2</a>
<a class="menu" href="#">Link 3</a>
<a class="menu" href="#">Link 4</a>
<a class="menu" href="#">Link 5</a>
</span>
<p class="title2">advertise here</p>
<p> </p>
<div class="form">
<h3>User Login</h3>
<form action="a" method="get" >
<p>
Username: <br /><input name="a" type="text" size="16" /><br />
Password: <br /><input name="a" type="password" size="16" /><br /><br />
<input name="a" type="submit" class="login" value="Login" />
</p>
</form>
<div class="reg">
<p>New User Register <a href="#">here</a>.</p>
</div></div>
<br/>
<p class="title2">advertise here</p>
<p> </p>
</div>
<div id="nav-in-bottom"></div>
</div>
<div id="content">
<p class="title2"><b>dating</b></p>
<br>
<blockquote>
<p>This is a free 100% CSS/XHTML valid <strong>Web Site Design</strong> from <a href="http://www.getcsstemplates.com">Get CSS Web Design Templates for Free</a>. You can link back to my site if you use my template but you don't have to.</p>
</blockquote>
<br>
<div id="box">
<div class="content_left">
<h3>Lorem Ipsum</h3>
<div class="form">
<form action="a" method="get" >
<p>
I am a<br />
<select name="looking_for_person">
<option value="1" selected>Man
<option value="2">Woman
</select>
<br />
Seeking a<br />
<select name="find_sex">
<option value="1">Man
<option value="2" selected>Woman
</select>
<br />
Between the ages of<br />
<input type=text size=2 name=min_age value="18" maxlength=2> and <input type=text size=2 name=max_age value="99" maxlength=2><br />
<br />
<input name="a" type="submit" class="search" value="Search" />
</p>
</form>
</div>
</div>
<div class="content_right">
<h3>Lorem Ipsum</h3>
<img src="images/img2.jpg" class="floatTL" alt="#" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat.
</div>
</div>
</div>
<div id="footer"><span>designed by : <a href="http://www.getcsstemplates.com">css website templates</a> : : copyright © 2007 by <b>datng for busy professionals</b></span></div>
</div>
</body>
</html>
Related examples in the same category