xhtmldev_RealEstate
<!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" xml:lang="en" lang="en">
<head>
<title>????????? ????????</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Site Description" />
<meta name="keywords" content="Keywords" />
<meta http-equiv="imagetoolbar" content="no" />
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
html {
font-size: 100.01%;
}
body {
font: 62.5%/1.4 Verdana, Arial, sans-serif;
color: #000;
background: url(xhtmldev_RealEstate-img/bg.png) repeat-x #287fa8;
}
/* Clear */
.clear {
clear: both;
font-size: 0;
line-height: 0;
}
a img {border: 0;}
/* Link */
a:link,
a:visited,
a:hover,
a:active {
color: #0065a9;
}
/* Typography */
h1, h2, h3 {
clear: both;
font-weight: normal;
}
h1 {
font-size: 2.4em;
margin: 0 0 .5em 0;
color: #0065a9;
}
h2 {
font-size: 1.7em;
margin: 1.5em 0 0 0;
color: #0065a9;
}
h3 {
font-size: 110%;
margin: 1em 0 0 0;
color: #000;
}
p {
font-size: 1.2em;
margin: 0 0 1em 0;
}
ul, ol {
margin: 0 0 .5em 3em;
}
li {
font-size: 1.2em;
}
li li {
font-size: 1em;
}
/* hr */
div.hr {
clear: both;
height: 5px;
background: url(xhtmldev_RealEstate-img/bg_hr.gif) repeat-x 50% 50%;
margin: 0;
}
div.hr hr { display: none; }
/* Image in Content */
.img-right {
float: right;
margin: 5px 0 5px 10px;
}
.img-left {
float: left;
margin: 5px 10px 5px 0;
}
/* Box */
.box {
background: #f6f4ea;
margin: 0 0 1em 0;
}
.box .padding {
padding: .5em 1em;
}
.box h2 {
font-size: 1.8em;
color: #9a957b;
margin: 0;
}
b.rtop,
b.rbottom {
display: block;
background: #FFF;
}
b.rtop b,
b.rbottom b {
display: block;
height: 1px;
overflow: hidden;
background: #f6f4ea;
}
b.r1 {margin: 0 5px;}
b.r2 {margin: 0 3px;}
b.r3 {margin: 0 2px;}
b.rtop b.r4,
b.rbottom b.r4 {
margin: 0 1px;
height: 2px;
}
/* Search */
#search {
font-size: 1.7em;
margin: 0;
color: #000;
}
#search select {
margin: 0 2em 1em .5em;
}
#search input {
margin: 0 1em 0 .5em;
}
/* New offer*/
.new-offer {
float: left;
margin: 1em 0;
}
.new-offer .house {
float: left;
margin: 6px 10px 0 0;
}
.new-offer .description {
float: left;
width: 300px;
}
.new-offer .description h2 {
font-size: 1.4em;
color: #000;
font-weight: bold;
margin: 0 0 .2em 0;
}
.new-offer .price {
display: inline;
font-size: 1.7em;
color: #fff;
background: url(xhtmldev_RealEstate-img/bg_price.gif) no-repeat #c80100;
padding: .3em 1em .3em 1.3em;
}
.new-offer .price a:link,
.new-offer .price a:visited,
.new-offer .price a:hover,
.new-offer .price a:active {
color: #fff;
text-decoration: none;
}
/* News */
#news dl dt {
font-size: 1.2em;
font-weight: bold;
}
#news dl dd {
font-size: 1.2em;
margin: 0 0 1em 0;
}
#news dl dd.date {
font-size: 1.1em;
color: #999;
margin: 0;
}
/* Thumbnails */
.thumbnails {
float: left;
width: 265px;
margin: 0 0 1em 0;
}
.thumb {
float: left;
margin: 0 5px 0 0;
}
.text {
float: left;
width: 196px;
padding: 5px 0 0 0;
}
.text h2 {
font-size: 1.3em;
font-weight: bold;
margin: 0;
}
/* Navigation */
#navigation ul {
list-style: none;
margin: 0;
}
#navigation li {
font-size: 1.3em;
font-weight: bold;
color: #9a957b;
margin: 0;
}
#navigation li a:link,
#navigation li a:visited,
#navigation li a:active {
display: block;
color: #000;
text-decoration: none;
background: #f6f4ea;
padding: .2em .5em;
border-bottom: 1px solid #ebe8d9;
}
#navigation li a:hover {
color: #fff;
text-decoration: none;
background: #9a957b;
}
/* Container */
#container {
width: 980px;
margin: 0 auto;
}
/* Header */
#header {
height: 120px;
background: url(xhtmldev_RealEstate-img/bg_header.gif) no-repeat 0 100%;
}
/* Logo */
#logo {
float: left;
width: 250px;
padding: 20px 0 0 20px;
}
#logo a:link,
#logo a:visited,
#logo a:hover,
#logo a:active {
color: #fc0;
text-decoration: none;
}
#logo h2 {
font-size: 2.4em;
line-height: 1.2;
color: #fc0;
margin: 0;
}
#logo p {
font-size: 1.1em;
line-height: 1.2;
color: #fff;
margin: 0;
}
/* Agent */
#agent {
float: right;
height: 80px;
font-size: 2.4em;
color: #fff;
padding: 25px 0 0 80px;
background: url(xhtmldev_RealEstate-img/bg_agent.gif) no-repeat 0 50%;
}
#agent h2 {
font-size: .8em;
line-height: .9;
margin: 0;
padding: 0;
}
#agent a:link,
#agent a:visited,
#agent a:hover,
#agent a:active {
color: #fc0;
text-decoration: none;
}
#agent small {
font-size: .7em;
}
/* Wrapper */
#wrapper {
float: left;
width: 100%;
background: #fff;
}
/* Content */
#content {
margin: 0 200px 0 250px;
padding: 0;
}
/* Sidebar right */
#sidebar-right {
float: left;
width: 170px;
margin-left: -200px;
padding: 75px 10px 20px 20px;
}
/* Sidebar left */
#sidebar-left {
float: left;
width: 220px;
margin-left: -980px;
padding: 79px 10px 20px 20px;
}
/* Footer */
#footer {
clear: left;
width: 100%;
overflow: hidden;
border-top: 3px solid #fc0;
}
#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active {
color: #fff;
text-decoration: none;
}
#footer p {
font-size: 1.2em;
color: #fff;
}
#design, #copyright {
width: 410px;
padding: 1em 20px 1.2em 20px;
}
#copyright {
float: left;
}
#design {
float: right;
text-align: right;
}
</style>
<link rel="icon" href="xhtmldev_RealEstate-img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="xhtmldev_RealEstate-img/favicon.ico" type="image/x-icon" />
<script src="js/javascript.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<h2><a href="/">Company Name Here Realty</a></h2>
</div>
<div id="agent">
<h2><a href="#">Meet Our Agent</a></h2>
<small>(123)</small> 456-78-XX
</div>
</div>
<div id="wrapper">
<div id="content">
<div class="thumbnails">
<div class="thumb"><a href="#"><img src="xhtmldev_RealEstate-img/icon_2.jpg" alt="" title="" /></a></div>
<div class="text">
<h2><a href="#">Lorem ipsum dolor</a></h2>
<p>sit amet consectetuer tellus nulla ut risus semper.</p>
</div>
</div>
<div class="thumbnails">
<div class="thumb"><a href="#"><img src="xhtmldev_RealEstate-img/icon_1.jpg" alt="" title="" /></a></div>
<div class="text">
<h2><a href="#">Amet lacinia interdum</a></h2>
<p>Cum odio lacus hac Integer justo vel augue.</p>
</div>
</div>
<div class="box">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="padding">
<div id="search">
City<select><option>San Francisco</option></select>Property Type<select><option>House & Condo</option></select><br />
From $<input type="text" style="width: 70px;" />To $<input type="text" style="width: 70px;" />
<input type="button" value="Search" />
</div>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<div class="box">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="padding">
<h2>New Listings</h2>
<div class="new-offer">
<div class="house"><a href="#"><img src="xhtmldev_RealEstate-img/house.jpg" alt="" title="" /></a></div>
<div class="description">
<h2><a href="#">Real estate template</a></h2>
<p>It is a free template, designed and coded by <a href="http://xhtmldev.net/">xhtmldev.net</a>. It is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5 License</a>. Photos are from <a href="http://pdproto.org">pdphoto.org</a>.
You may use this template for both commercial or personal use. The only requirement is to keep a link to our <a href="http://xhtmldev.net">website</a>.</p>
<p class="price"><a href="#">$ 1,295,000</a></p>
</div>
</div>
<div class="hr"><hr /></div>
<div class="new-offer">
<div class="house"><a href="#"><img src="xhtmldev_RealEstate-img/house1.jpg" alt="" title="" /></a></div>
<div class="description">
<h2><a href="#">Cool icons</a></h2>
<p>
Cool icons in the top are from <a href="http://www.webappers.com/2008/02/12/webappers-released-free-web-application-icons-set/">Webappers</a>.
They have Creative Commons Attributions 3.0 License.
Nulla enim tellus urna lacus sapien venenatis Praesent quis fringilla Curabitur.
</p>
<p class="price"><a href="#">$ 699,000</a></p>
</div>
</div>
<div class="clear"></div>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<h2>San Francisco Living</h2>
<img src="xhtmldev_RealEstate-img/san.jpg" alt="" title="" />
<p><strong>The Richmond</strong><br />
Lorem ipsum dolor sit amet consectetuer elit convallis pede vitae mi.
Nulla enim tellus urna lacus sapien venenatis Praesent quis fringilla Curabitur.
Lorem ipsum dolor sit amet consectetuer elit convallis pede vitae mi.
Nulla enim tellus urna lacus sapien venenatis Praesent quis fringilla Curabitur.</p>
</div>
</div>
<div id="sidebar-left">
<div class="box">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home Sale Analysis</a></li>
<li><a href="#">Saving Comparison</a></li>
<li><a href="#">Service and Marketing List</a></li>
<li><a href="#">Current Listing</a></li>
<li><a href="#">Recently Sold Homes</a></li>
</ul>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div>
<div id="sidebar-right">
<div id="news">
<dl>
<dd class="date">17.11.08</dd>
<dt><a href="#">Lorem ipsum dolor</a></dt>
<dd>sit amet consectetuer elit convallis pede vitae mi.</dd>
<dd class="date">10.11.08</dd>
<dt><a href="#">Nulla enim tellus urna</a></dt>
<dd>lacus sapien venenatis Praesent quis fringilla Curabitur.</dd>
<dd class="date">04.10.08</dd>
<dt><a href="#">Eget tincidunt cursus</a></dt>
<dd>Integer ut malesuada et mauris ipsum justo Phasellus.</dd>
</dl>
</div>
<div class="hr"><hr /></div>
</div>
<!-- Footer -->
<div id="footer">
<div id="copyright"><p>© 2008—2009 «Your company»</p></div>
<div id="design"><p><a href="http://xhtmldev.net/">Designed by</a> — <a href="http://xhtmldev.net/">xhtmldev.net</a></p></div>
</div>
<!-- /Footer -->
</div>
</body>
</html>
Related examples in the same category