dating-agency
<!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 Agency</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Verdana, Arial, san-serif;
font-size: 11px;
color: #3d3939;
background: #d95995 url(dating-agency-images/main_bg.jpg) top repeat-x;
}
a:link, a:visited { color: #262324; text-decoration: none; font-weight: bold;}
a:active, a:hover { color: #262324; text-decoration: underline;}
p {
margin: 0px;
padding: 0px;
}
img {
border: 5px solid #f5d0e1;
}
.cleaner {
clear: both;
width: 100%;
height: 1px;
font-size: 1px;
}
.cleaner_with_height {
clear: both;
width: 100%;
height: 30px;
font-size: 1px;
}
.cleaner_with_divider {
clear: both;
width: 100%;
height: 40px;
font-size: 1px;
margin: 15px 0 30px 0;
background:url(dating-agency-images/divider.jpg) center center no-repeat;
}
#container{
width: 960px;
margin: 0 auto;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
background-color: #f8bbd7;
}
/* header */
#header {
width: 920px;
height: 205px;
padding: 0px 20px;
background: url(dating-agency-images/header_bg.jpg);
}
#header #login_box {
float: right;
width: 520px;
padding-top: 7px;
}
#header #login_box a {
font-size: 14px;
color: #fe0077;
}
#header #login_box form {
float: left;
padding: 0px;
margin: 0px;
margin-right: 10px;
color: #fff;
}
#header #login_box form label {
margin-right: 10px;
}
#login_box form .inputfield {
width: 120px;
color: #000;
background:#743050;
border: 1px solid #8b4264;
font-variant: normal;
height: 12px;
padding: 4px;
}
#login_box form .button{
background: url(dating-agency-images/login_btn.jpg) no-repeat;
border: none;
color: #f6d848;
cursor: pointer;
font-size: 12px;
font-weight: bold;
height: 21px;
margin: 0 0 0 7px;
padding: 0 8px 0 4px;
text-align: center;
vertical-align: bottom;
white-space: pre;
width: 50px;
}
/* end of header */
/* menu */
#menu {
clear: both;
width: 960px;
height: 55px;
background: url(dating-agency-images/menu_bg.jpg) no-repeat;
}
#menu ul {
padding: 15px 0 0 0;
margin: 0 0 0 80px;
list-style: none;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #571a37;
}
#menu li a:hover, #menu li .current{
color: #ee3f91;
}
/* end of menu*/
/* content */
#content {
width: 920px;
padding: 40px 20px 0px 20px;
}
#content #content_left {
float: left;
width: 560px;
}
.content_left_section_01 .welcome_title {
width: 100%;
height: 40px;
background: url(dating-agency-images/welcome_title.jpg) no-repeat;
margin-bottom: 30px;
}
.content_left_section_01 h1 {
font-size: 24px;
color: #720035;
margin: 0 0 15px 0;
padding: 5px 0 15px 0;
border-bottom: 1px solid #720035;
}
#content_left .content_left_section_01 img {
margin: 0 0 0 15px;
}
#content_left p {
margin: 0px;
padding-bottom: 10px;
text-align: justify;
}
#content_left .content_left_section_02 {
clear: both;
overflow: hidden;
padding: 20px;
position: relative;
color: #fff;
background: #794f63 url(dating-agency-images/content_left_section_top_bg.jpg) top center no-repeat;
}
.content_left_section_02 span{
position: absolute;
bottom: 0px;
left: 0px;
display: block;
width: 100%;
height: 5px;
background: url(dating-agency-images/content_left_section_bottom_bg.jpg) bottom center no-repeat;
}
.content_left_section_02 .latest_profile_title{
font-size: 20px;
font-weight: bold;
color: #ffffff;
margin: 0 0 30px 0;
padding: 10px 0 5px 50px;
border-bottom: 1px solid #653f51;
background:url(dating-agency-images/profile_icon.jpg) bottom left no-repeat;
}
.content_left_section_02 .latest_profile_box {
float: left;
width: 250px;
}
.latest_profile_box .name {
font-weight: bold;
color: #FFF;
}
.latest_profile_box img {
float: left;
margin-right: 15px;
padding: 0px;
}
.content_left_section_02 .cleaner_with_width {
float: left;
display: inline-block;
height: 20px;
width: 20px;
font-size: 1px;
}
#content #content_right {
float: right;
width: 310px;
}
#content_right #templatmeo_quick_search {
clear: both;
position: relative;
width: 310px;
margin-bottom: 30px;
color: #fff;
background: #ee3f91 url(dating-agency-images/quick_search_bg_top.jpg) top center no-repeat;
}
#templatmeo_quick_search h1 {
margin: 0px;
font-size: 22px;
border-bottom: 1px solid #d32275;
margin-bottom: 15px;
padding: 15px 20px;
color: #fff;
}
#templatmeo_quick_search form {
margin: 0px;
padding: 0 20px 20px 20px;
text-align: right;
}
#templatmeo_quick_search form label {
width: 200px;
margin-right: 5px;
}
#templatmeo_quick_search form .form_row{
margin-bottom: 10px;
}
#templatmeo_quick_search form .inputfield {
color: #000;
font-variant: normal;
height: 16px;
padding: 2px;
}
#templatmeo_quick_search span {
position: absolute;
bottom: 0px;
display: block;
width: 310px;
height: 10px;
background:url(dating-agency-images/quick_search_bg_bottom.jpg) no-repeat;
}
#content_right .content_right_section {
clear: both;
}
.content_right_section img {
border: 5px solid #f5d0e1;
margin-bottom: 15px;
}
.content_right_section h1 {
font-size: 20px;
color:#720035;
margin: 0px;
margin-bottom: 10px;
padding: 0px;
padding-bottom: 10px;
border-bottom: 1px dotted #720035;
}
.content_right_section h2 {
font-size: 16px;
color: #524e50;
margin: 0 0 5px 0;
padding: 0 0 5px 0;
padding-bottom: 10px;
}
.content_right_section p{
margin: 0 0 0 0;
padding: 0 0 10px 0;
}
/* end of content */
/* footer */
#footer {
clear: both;
width: 960px;
padding: 20px 0px 20px 0;
text-align: center;
background-color: #eaa9c7;
}
#footer a{
color: #333;
font-weight: normal;
}
/* end of menu */
</style>
<script language="javascript" type="text/javascript">
function clearText(field)
{
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="login_box">
<form method="get" action="http://www.free-css.com/">
<label>Email</label>
<input class="inputfield" name="email_address" type="text" />
<label>Password</label>
<input class="inputfield" name="password" type="password" />
<input class="button" type="submit" name="Submit" value="" />
</form>
<a href="http://www.free-css.com/">Sign up</a> </div>
<!-- end of login box -->
</div>
<!-- end of header -->
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="http://www.free-css.com/">Search</a></li>
<li><a href="http://www.free-css.com/">Successful Stories</a></li>
<li><a href="http://www.free-css.com/">Last Added</a></li>
<li><a href="http://www.free-css.com/">Your Profile</a></li>
<li><a href="http://www.free-css.com/">Company</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<!-- end of menu -->
<div id="content">
<div id="content_left">
<div class="content_left_section_01">
<div class="welcome_title"></div>
<!-- <h1>Welcome to our Dating website!</h1> -->
<img src="dating-agency-images/image_02.jpg" alt="" style="float: right" />
<p> The <strong>Dating Agency</strong> web template is provided by TemplateMo.com. You may download, edit and use this template layout for your websites. Credit goes to Photovaco.com for photos used in this template. </p>
<p> Nulla et nunc commodo ante ornare imperdiet. Donec nunc neque, pulvinar a, vestibulum eget, luctus id, orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum enim a augue. Donec in nisi. </p>
</div>
<div class="cleaner_with_divider"> </div>
<div class="content_left_section_02">
<div class="latest_profile_title">Latest Members</div>
<div class="latest_profile_box"> <img src="dating-agency-images/image_03.jpg" alt="" />
<div class="name">Donec a purus vel</div>
Age: 18<br />
Mauris pede nisl, placerat nec, lobortis vitae.<br />
<div class="readmore"><a href="http://www.free-css.com/">Details »</a></div>
</div>
<div class="cleaner_with_width"> </div>
<div class="latest_profile_box"> <img src="dating-agency-images/image_04.jpg" alt="" />
<div class="name">Sed pellentesque</div>
Age: 24<br />
Suspendisse ac magna quis est eleifend dictum.<br />
<div class="readmore"><a href="http://www.free-css.com/">Details »</a></div>
</div>
<div class="cleaner_with_height"> </div>
<div class="latest_profile_box"> <img src="dating-agency-images/image_05.jpg" alt="" />
<div class="name">Sed justo dolor</div>
Age: 22<br />
Morbi nec magna pulvinar mi scelerisque posuere.<br />
<div class="readmore"><a href="http://www.free-css.com/">Details »</a></div>
</div>
<div class="cleaner_with_width"> </div>
<div class="latest_profile_box"> <img src="dating-agency-images/image_06.jpg" alt="" />
<div class="name">Quisque ut odio</div>
Age: 20<br />
Fusce non lacus et lorem ornare interdum.<br />
<div class="readmore"><a href="http://www.free-css.com/">Details »</a></div>
</div>
<div class="cleaner"> </div>
<span></span> </div>
<!-- end of section 2 -->
</div>
<!-- end of content left -->
<div id="content_right">
<div id="templatmeo_quick_search">
<h1>Quick Search</h1>
<form method="get" action="http://www.free-css.com/">
<div class="form_row">
<label>I am</label>
<select name="i_am">
<option>man</option>
<option>woman</option>
</select>
<label>Seeking</label>
<select name="seeking">
<option>man</option>
<option>woman</option>
</select>
</div>
<div class="form_row">
<label>Looking for</label>
<select name="seeking">
<option>friendship</option>
<option>a date</option>
</select>
</div>
<div class="form_row">
<label>I was born</label>
<select name="day">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="month">
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
<input class="inputfield" name="year" type="text" value="year" style="width:50px;" onfocus="clearText(this)" onblur="clearText(this)" />
</div>
<div class="form_row">
<label>By Profile</label>
<input class="inputfield" name="email_address" type="text" />
</div>
<div class="form_row">
<label>Show Photo</label>
<input type="checkbox" name="option1" />
</div>
<input type="submit" value="Submit" id="Submit" />
</form>
<div class="cleaner"> </div>
<span></span> </div>
<!-- end of quick search -->
<div class="content_right_section">
<h1>Successful Stories</h1>
<img src="dating-agency-images/image_01.jpg" alt="" />
<h2>Vestibulum auctor odio eget</h2>
<p>Quisque dictum pharetra neque. Aliquam pretium porta odio. Fusce quis diam sit amet tortor luctus pellentesque. </p>
<a href="http://www.free-css.com/" class="readmore">Read more »</a> </div>
</div>
<!-- end of content right -->
<div class="cleaner_with_height"> </div>
</div>
<!-- end of content -->
<div id="footer">
<div style="clear: both; margin-bottom: 10px;"> <a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/dating-agency-images/vcss-blue" alt="" vspace="8" border="0" /></a> </div>
<a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Search</a> | <a href="http://www.free-css.com/">Terms of use</a> | <a href="http://www.free-css.com/">Privacy Policies</a> | <a href="http://www.free-css.com/">FAQs</a> | <a href="http://www.free-css.com/">Contact Us</a><br />
Copyright © 2024 <a href="http://www.free-css.com/"><strong>Your Company Name</strong></a> | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a> </div>
<!-- end of footer -->
</div>
<!-- end of container -->
</body>
</html>
Related examples in the same category