alouette-agency
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Alouette Agency</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body { margin: 0; padding: 0; background: #cde3f1 url('alouette-agency-images/pattern.gif'); color: #014ccc; font: normal 75% Arial, Helvetica, sans-serif; }
a { color: #014ccc; text-decoration: underline; font-weight: bold; }
a:hover { color: #014ccc; text-decoration: none; }
#container { width: 760px; margin: 0; padding: 0; margin: 0 auto; background: transparent url('alouette-agency-images/bg.png') repeat-y; }
#nav { float: right; margin-right: 14px; }
#nav li { display: inline; margin: 0; padding: 0px 10px; }
#nav li a { font-size: 120%; text-decoration: none; padding: 10px; }
#nav li a:hover, #nav #current { background-color: #014ccc; color: #fff; text-decoration: underline; }
/*-------------------- HEADER --------------------*/
#header { clear: both; background: transparent url('alouette-agency-images/logo.gif') no-repeat 45px 17px; height: 170px; padding: 0; margin: 0; }
h1 { display: block; font-size: 440%; padding: 45px 0 0 195px; text-align: left; margin: 0; }
h1 span { display: block; font-size: 40%; font-style: italic; }
h2 { font-size: 200%; line-height: 35px; }
h3 { font-size: 150%; }
h4 { font-size: 110%; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; color: #014ccc; }
/*--------------------SIDEBAR --------------------*/
#sidebar { float: right; width: 215px; margin-right: 24px; }
#sidebar h2 { background: #fff url('alouette-agency-images/top_search.gif') no-repeat top left; color: #fff; background-color: #3881fe; margin: 0; padding: 12px 0 0 12px; border-bottom: 1px dashed #fff; }
#sidebar fieldset { border: none; padding-left: 15px; margin: 0 10px 0 0; width: 200px; }
#sidebar form { background: #3881fe url('alouette-agency-images/bottom_search.gif') no-repeat bottom left; margin-top: 0; padding-top: 1em; }
#sidebar input, #sidebar select, #sidebar label { font-size: 90%; }
#sidebar label, #sidebar input { float: left; display: block; margin-bottom: 10px; }
#sidebar label { width: 80px; text-align: left; padding-right: 5px; color: #fff; }
#sidebar input { width: 90px; }
#sidebar select, #sidebar input { border: 1px solid #fff; }
#sidebar br { clear: left; }
.button { color: #014ccc; background: url('alouette-agency-images/button_bg.gif'); font-weight: bold; border: 1px solid #014ccc; padding: 2px; }
#sidebar ul { margin: 3em 0; padding: 0; }
#sidebar ul li { margin: 5px 0; padding: 0 0 5px 15px; list-style-type: none; border-bottom: 1px dotted #aaa; }
/*-------------------- MAIN CONTENT --------------------*/
#main { float: left; width: 480px; padding: 0 0px 12px 25px; margin: 0; }
#main p { text-align: justify; line-height: 2em; color: #666; }
#main h2 { clear: both; background: #fff url('alouette-agency-images/bird.gif') no-repeat; padding-left: 45px; margin-top: 12px; }
div.divider { clear: both; background: url('alouette-agency-images/pattern.gif') repeat-x; height: 10px; margin: 10px 24px; }
img.alignright { padding: 4px; margin: 0 0 2px 15px; display: inline; border: 0; }
img.alignleft { padding: 4px; margin: 0 15px 2px 0; display: inline; border: 0; }
img.centered { display: block; margin-left: auto; margin-right: auto; border: 0; }
.alignright { float: right; }
.alignleft { float: left }
/*-------------------- FOOTER --------------------*/
#footer { clear: both; text-align: center; }
#footer p { font-size: 90%; padding: 1em; margin: 0; }
</style>
</head>
<body>
<div id="container">
<ul id="nav">
<li><a href="http://www.free-css.com/" id="current">buy</a></li>
<li><a href="http://www.free-css.com/" title="sell">sell</a></li>
<li><a href="http://www.free-css.com/" title="let">let</a></li>
<li><a href="http://www.free-css.com/" title="contact">contact</a></li>
</ul>
<div class="divider"></div>
<div id="header">
<h1>Alouette agency<span>overseas properties</span></h1>
</div>
<div class="divider"></div>
<div id="sidebar">
<h2>Property search</h2>
<form method="post" action="http://www.free-css.com/">
<fieldset>
<label for="location">Location</label>
<input type="text" id="location" name="location" />
<br />
<label for="radius">Within</label>
<select id="radius" name="radius">
<option value="1">1 Mile</option>
<option value="2">2 Miles</option>
<option value="3">3 Miles</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
</select>
<br />
<label for="minprice">Min. Price</label>
<select id="minprice" name="minprice">
<option value="50000">£50,000</option>
<option value="75000">£75,000</option>
<option value="100000">£100,000</option>
<option value="150000">£150,000</option>
<option value="200000">£200,000</option>
<option value="250000">£250,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000+</option>
</select>
<br />
<label for="maxprice">Max. Price</label>
<select id="maxprice" name="maxprice">
<option value="75000">£75,000</option>
<option value="100000">£100,000</option>
<option value="150000">£150,000</option>
<option value="200000">£200,000</option>
<option value="250000">£250,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000+</option>
</select>
<br />
<label for="minbedrooms">Min. Bedrooms</label>
<select id="minbedrooms" name="minbedrooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5+</option>
</select>
<br />
<label for="ptype">Property type</label>
<select id="ptype" name="ptype">
<option value="flats">Flat</option>
<option value="house">House</option>
<option value="bungalow">Bungalow</option>
</select>
<br />
<br />
<input type="submit" id="submit" name="submit" class="button" value="Search" />
<br />
</fieldset>
</form>
<ul>
<li><a href="http://www.free-css.com/">Mortgage calculator</a></li>
<li><a href="http://www.free-css.com/">FREE valuation</a></li>
<li><a href="http://www.free-css.com/">Terms & conditions</a></li>
<li><a href="http://www.free-css.com/">Prices in your area</a></li>
<li><a href="http://www.free-css.com/">Tips about selling</a></li>
<li><a href="http://www.free-css.com/">Community</a></li>
<li><a href="http://www.free-css.com/">Contact us</a></li>
</ul>
</div>
<div id="main">
<h2>Spain: How about some sun?</h2>
<img src="alouette-agency-images/property.jpg" height="227" width="169" alt="" class="alignright" />
<p>Tired of the rainy UK? We have some newly developped properties only 30 minutes from <a href="http://www.free-css.com/">Barcelona</a> the capital of Catalonia. Known for its cultural heritage and architecture, Barcelona is the 2nd largest city in Spain and was home of artists like Gaudi or Miro. From 2 bedrooms flats to 4 bedrooms prestigious villas, these high-standards properties won't stay long on the market!. <a href="http://www.free-css.com/">Contact us</a> for more information on these properties.</p>
<h2>About alouette</h2>
<p> <strong>alouette</strong> is a free and valid XHTML / CSS based website template. It is released under a <a target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Licence</a>. This means you can use it for personal or commercial projects. The only thing I ask is a link back to my website (doesn't have to be in the footer, any link will do). </p>
<p>The image is from Steve Woods. That's it, hope you like it.</p>
</div>
<div id="footer">
<p>© 2007 Website.com. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>. Website template by <a href="http://arnaudvalle.free.fr">Arnaud Valle</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category