realone : Design 7 « Templates « HTML / CSS






realone

  

<!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>RealOne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
* { padding:0; margin:0; 
}
ul {list-style:none;}
.clear {
  clear:both;
  line-height: 0px;
  margin: 0px;
  padding: 0px;
  font-size: 0px;
  height: 0px;
}
#loginform p {
  line-height: 14px;
}
body {background:#fff; font:11px Verdana, Arial, Helvetica, sans-serif; color:#333;}
#wrap {width:948px; margin:auto;}
#topbar {background:url(realone-images/topbar.jpg) no-repeat; height:37px;}
#header {background:url(realone-images/headerbg.jpg) repeat-x; height:128px; margin:0 2px 0 2px;}
#content {padding:0 2px 0 2px;}
#home_main, #main {width:545px; float:left; margin-bottom:8px;}
#home_sidebar, #sidebar { width:390px; float:right; margin-bottom:8px;}
h1#logo { font: bold 48px Tahoma, Geneva, sans-serif; color:#368291;}
#content #sidebar {
  background: url(realone-images/hotbg.jpg) repeat;
}

#search {background:url(realone-images/searchbg.jpg); height:301px;}
.hot {background:url(realone-images/hotbg.jpg); height:301px;}

#topcategorieslink {background:url(realone-images/categoriesbg.jpg); height:44px; margin-bottom:8px;}
#search .container {
  background:#E3F6FC url(realone-images/searchbottom.jpg) left bottom no-repeat;
  height:255px;
  width: 530px;
  margin-right: auto;
  margin-left: auto;
}
#search .tab {
  height:30px;
  padding:5px 20px 0 10px;
}
.tab h2 {
  font: bold 18px "Trebuchet MS", Verdana, Arial, sans-serif;
  text-transform: uppercase;
}

.tab ul {}
.tab li {display:inline;}
.tab a {display:block; background:url(realone-images/searchtab_normal.jpg) repeat-x; height:20px; padding:5px 10px 0 10px; margin:0 2px 0 2px; float:left; font:bold 14px Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration:none; color:#e2f6fc;}
.tab a:visited, .tab a:active {text-decoration:none; color:#e2f6fc;}
.tab .active a, .tab .active a:visited, .tab .active a:active, .tab a:hover {background:url(realone-images/searchtab_active.jpg) repeat-x; color:#000;}
.sidebar_head {
  background: url(realone-images/hotheader.jpg);
  height:29px;
  padding:7px 8px 0;
  font: bold 18px "Trebuchet MS", Arial, sans-serif;
  color:#171717;
  text-transform:uppercase;
  display:block;
}
.sidebar_head .h2link {display:block; background:url(realone-images/hot_heading_button.jpg) no-repeat; width:89px; height:18px; padding:4px 0 0 0; text-align:center; font: normal 11px Verdana, Arial, Helvetica, sans-serif!important; float:right;}
.h2link a {color:#e8e3cd; text-decoration:none;}
.h2link a:visited, .h2link a:active {color:#e8e3cd; text-decoration:none;}
.h2link a:hover {color:#f4f0df; text-decoration:none;}#sitename {
  float: left;
  width: 261px;
}
#shoutout {
  float: left;
  width: 168px;
}
#useractions {
  float: left;
  width: 490px;
  padding-left: 20px;
  background: url(realone-images/header_vertical_devider.jpg) repeat-y 10px 0px;
  height: 117px;
}
#headings {
  background: url(realone-images/header_horizontal_devider.jpg) repeat-x left bottom;
  padding: 3px 0px 2px;
  margin-bottom: 2px;
}
#headings h2 {
  font: bold 14px "Trebuchet MS", Arial, sans-serif;
  text-transform: uppercase;
  display: inline;
  padding-right: 5px;
  padding-left: 5px;
}
#headings a {
  color: #3F3F3F;
  text-decoration: none;
}
.formblock {
  width: 135px;
  float: left;
  padding: 0 5px 5px 0px;
  margin-right: 12px;
}
#sitename #logo {
  padding: 15px 0px 0px 15px;
}
.formblock .textfields {
  background: #FFFFFF;
  border: 1px solid #BADEEF;
  font-size: 14px;
  padding: 3px 5px 0px;
  height: 22px;
  width: 125px;
}
.formblock label {
  display: block;
  padding: 1px 3px;
}
.formblock #button {
  margin-top: 18px;
}
#topcategorieslink h2 {
  background: url(realone-images/topcategories_h2.jpg) no-repeat;
  height: 34px;
  width: 175px;
  padding-top: 12px;
  padding-left: 10px;
  color: #FFFFFF;
  text-transform: uppercase;
  float: left;
  font: bold 18px "Trebuchet MS", Arial, sans-serif;
}
#main h1 {
  background: url(realone-images/mainh2bg.jpg);
  font: bold 18px "Trebuchet MS", Arial, sans-serif;
  color: #000000;
  padding: 5px;
  margin-bottom: 5px;
}
.listing {
  
}
.listing li {
  display: block;
  padding: 10px;
  margin-bottom: 8px;
  background: #f8f8f8;
  border: 1px solid #eee;
}
.listing .listinfo {
  width: 385px;
  float: left;
}
.listinfo .listingimage {
  display: block;
  float: left;
  border: 5px solid #a5a192;
  margin-right: 15px;
}
.listingbtns {
  float: right;
  width: 125px;
}
.listinfo h3 {
  color: #006600;
  font: bold 14px "Trebuchet MS", Arial, sans-serif;
  margin-bottom: 10px;
}
.listingbtns .listbuttons {
  background: url(realone-images/listingbuttons.jpg) no-repeat;
  display: block;
  height: 18px;
  width: 121px;
  padding-top: 4px;
  text-align: center;
  margin-bottom: 5px;
}
.listingbtns .listbuttons a {
  color: #F3F0DF;
  text-decoration: none;
}

.price {
  display: block;
  font-weight: bold;
  color: #0099CC;
}
.listingbtns .listbuttons a:visited, .listingbtns .listbuttons a:active, .listingbtns .listbuttons a:hover {
  color: #F3F0DF;
  text-decoration: none;
}
.block {
  padding: 5px;
}
a {
  color: #006600;
}
.normalmenu li {
  display: block;
  height: 32px;
  font: bold 16px "Trebuchet MS", Verdana, Arial, sans-serif;
  background: url(realone-images/sidebar_menu_div.jpg) repeat-x left bottom;
}
.normalmenu a {
  display: block;
  height: 25px;
  padding-top: 5px;
  background: url(realone-images/bulletarrow.jpg) no-repeat 5px 12px;
  padding-left: 35px;
  color: #958E82;
  text-decoration: none;
}
#topbar li {
  display: inline;
}
#topbar ul {
  display: block;
  padding-left: 450px;
  padding-top: 5px;
  padding-right: 10px;
}
#topbar a {
  color: #E3F6FC;
  display: block;
  float: left;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 3px;
  margin-left: 3px;
  text-decoration: none;
  height: 27px;
}
#topbar a:visited, #topbar a:active {
  color: #E3F6FC;
  display: block;
  float: left;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 3px;
  margin-left: 3px;
  text-decoration: none;
  height: 27px;
}
#topbar a:hover {
  color: #E3F6FC;
  display: block;
  float: left;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 3px;
  margin-left: 3px;
  text-decoration: none;
  height: 27px;
  background: url(realone-images/activetopmenu.jpg) no-repeat center bottom;
}
#topbar .current a, #topbar .current a:visited, #topbar .current a:active {
  color: #E3F6FC;
  display: block;
  float: left;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 3px;
  margin-left: 3px;
  text-decoration: none;
  height: 27px;
  background: url(realone-images/activetopmenu.jpg) no-repeat center bottom;
}
.normalmenu a:visited, .normalmenu a:active {
  display: block;
  height: 25px;
  padding-top: 5px;
  background: url(realone-images/bulletarrow.jpg) no-repeat 5px 12px;
  padding-left: 35px;
  color: #958E82;
  text-decoration: none;
}
.normalmenu a:hover {
  display: block;
  height: 25px;
  padding-top: 5px;
  background: url(realone-images/bulletarrow.jpg) no-repeat 5px 12px;
  padding-left: 35px;
  color: #404040;
  text-decoration: none;
}
.hot .imageholder {
  display: block;
  height: 66px;
  width: 66px;
  border: 5px solid #C6BBAA;
  float: left;
}
#wrap #content #home_sidebar .hot h3 {
  margin-left: 86px;
  display: block;
  color: #009933;
}
.hot .description {
  display: block;
  margin-left: 86px;
  padding-top: 12px;
  padding-right: 8px;
}
.hot .description .price {
  padding-top: 5px;
}
h1 a, h2 a, h3 a {
  text-decoration: none;
}
h3 a:hover {
  color: #000000;
}
.hot li {
  display: block;
  padding-top: 3px;
  padding-bottom: 5px;
  background: url(realone-images/hotdiv.jpg) repeat-x center bottom;
  margin-right: 8px;
  margin-left: 8px;
}
#wrap #footer {
  background: url(realone-images/footer.jpg) no-repeat;
  height: 132px;
  margin-bottom: 50px;
}
#search .tab h2 {
  color: #33779B;
}
#topcategorieslink ul {
  display: block;
  float: left;
  padding-top: 11px;
  width: 725px;
}
#topcategorieslink li {
  display: inline;
  font: bold 16px "Trebuchet MS", Verdana, Arial, sans-serif;
}
#topcategorieslink a {
  display: block;
  color: #4B7792;
  text-decoration: none;
  height: 23px;
  padding-top: 2px;
  padding-right: 11px;
  padding-left: 8px;
  border-right: 1px solid #9AB5BE;
  float: left;
}
#topcategorieslink a:hover {
  display: block;
  color: #000000;
  text-decoration: none;
  height: 23px;
  padding-top: 2px;
  padding-right: 11px;
  padding-left: 8px;
  border-right: 1px solid #9AB5BE;
  float: left;
}
#footer #upperfooter {
  padding-top: 25px;
  padding-left: 250px;
  padding-right: 200px;
  line-height: 22px;
  height: 70px;
}
#wrap #footer #lowerfooter {
  padding-top: 10px;
  padding-left: 25px;
  padding-right: 25px;
  color: #E3F6FC;
}
.backtotop {
  display: block;
  float: right;
}
#lowerfooter .backtotop {
  color: #E3F4FB;
  text-decoration: none;
}
#lowerfooter a {
  color: #DFF6FC;
  text-decoration: none;
}
#topcategorieslink #searchagain {
  float: left;
  width: 715px;
  padding-top: 2px;
}
a img {
  border-style: none;
}
a.highlight {
  color: #CC0000!important;
}
.smsalert {
  background: #3F3F3F;
  margin-bottom: 5px;
  color: #E8E3CD;
}
.block p {
  line-height: 16px;
  padding: 10px;
}
#paginations li {
  display: inline;
}
#wrap #content #main #paginations a {
  display: block;
  float: left;
  text-align: center;
  height: 20px;
  width: 25px;
  padding-top: 5px;
  margin-right: 5px;
  color: #000000;
  text-decoration: none;
  background: #A5A192;
}
#main #paginations {
  background: #404040;
  padding: 5px;
}
#wrap #content #main #paginations .current a {
  color: #FFFFFF;
  background: #000000;
}
#wrap #content #main #paginations a:hover {
  color: #FFFFFF;
  background: #000000;
}
#main #single_item_details {
  background: #f8f8f8;
}

#leftcolumn {
  float: left;
  width: 240px;
  padding: 5px;
}
#rightcolumn {
  float: right;
  padding: 5px;
  width: 280px;
}
#rightcolumn .price {
  font: bold 14px "Trebuchet MS", Verdana, Arial, sans-serif;
  color: #FF0000;
  padding-top: 8px;
  padding-bottom: 8px;
}
.previewimg {
  display: block;
  margin: auto auto 15px;
  background: #efefef;
  padding: 5px;
  border: 1px solid #ccc;
}
#single_item_details  h2 {
  color: #006600;
  font: 18px "Trebuchet MS", Verdana, Arial, sans-serif;
  display: block;
  margin-bottom: 15px;
}
#single_item_details .user {
  display: block;
  font: bolder 16px "Trebuchet MS", Verdana, Arial, sans-serif;
  margin-bottom: 8px;
}
#imagesgallerylisting {
  margin-right: 145px;
  padding: 5px;
}
#moredetails h3 {
  font: bold 14px "Trebuchet MS", Verdana, Arial, sans-serif;
  display: block;
  padding: 3px;
}
#moredetails li {
  padding: 3px;
  display: block;
}
#listing_details td {
  padding: 3px;
  vertical-align: top;
}

#moredetails {
  margin-top: 8px;
  background: #E3F0F4;
  padding: 5px;
}
#listing_details {
  padding: 5px;
}
#midraw_details {
  background: #F3F0DF;
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.imagegallink {
  background: url(realone-images/imagegallink.jpg) no-repeat;
  height: 53px;
  width: 240px;
  margin-top: 6px;
  padding-left: 70px;
  padding-top: 10px;
  margin-left: 15px;
}
.imagegallink a {
  display: block;
  font: bold 18px "Trebuchet MS", Verdana, Arial, sans-serif;
  text-transform: uppercase;
  color: #903F00;
  text-decoration: none;
}
.hiddentab a {display:inline!important;}
.hiddentab a:hover {color:#000!important;}


</style>


<link href="css/forms.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="js/jquery.tabs.css" type="text/css" media="print, projection, screen">
</head>
<body>
<div id="wrap">
  <div id="topbar">
    <ul>
      <li class="current"><a href="index.html">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact us</a></li>
      <li><a href="singleitem.html">Single Template</a></li>
      <li><a href="searchresult.html">Search Results Template</a></li>
    </ul>
  </div>
  <div id="header">
    <div id="sitename">
      <h1 id="logo">RealOne</h1>
    </div>
    <div id="shoutout"><img src="realone-images/joinnow_shoutout.jpg" alt="" width="168" height="126" /></div>
    <div id="useractions">
      <div id="headings">
        <h2><img src="realone-images/create_indi_usr.jpg" alt="" width="25" height="22" /> <a href="#">Create Individual Account</a> </h2>
        <h2><img src="realone-images/create_agent_icon.jpg" alt="" width="27" height="22" /> <a href="#">Create Agent Accoun</a>t</h2>
      </div>
      <div id="login">
        <p><strong>Already registered ?</strong> Login here to access your account</p>
        <div id="loginform">
          <form action="#">
            <div class="formblock">
              <label>Username</label>
              <input name="user" type="text" class="textfields" />
            </div>
            <div class="formblock">
              <label>Password</label>
              <input name="user" type="text" class="textfields"/>
            </div>
            <div class="formblock">
              <input type="image" src="realone-images/loginbutton.jpg" name="button" id="button" value="Submit" />
            </div>
            <div class="clear">&nbsp;</div>
            <p>
              <input name="" type="checkbox" value="" />
              Remember me on this computer | Forgot password ? </p>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div id="content">
    <div id="home_main">
      <div id="search">
        <div class="tab">
          <h2>Search Property To Buy / Rent</h2>
        </div>
        <div class="container">
          <form id="form1" action="#">
            <table class="search_form" style="width:100%; border:none;">
              <tr>
                <td width="10%" class="label">Address</td>
                <td colspan="3"><label>
                    <input type="text" name="textfield" id="textfield" class="text longfield" />
                  </label></td>
              </tr>
              <tr>
                <td class="label">&nbsp;</td>
                <td colspan="3">Example : City, State / or use Zip Code - 123456</td>
              </tr>
              <tr>
                <td class="label">Type</td>
                <td width="34%"><label>
                    <select name="select" id="select" class="select_field">
                      <option>Flat</option>
                      <option>Apartment</option>
                      <option>House</option>
                      <option>Villa</option>
                      <option>Land</option>
                      <option>Estate</option>
                    </select>
                  </label></td>
                <td width="14%" class="label">Minimum Price Rs.</td>
                <td width="42%"><input type="text" name="textfield4" id="textfield4" class="text" /></td>
              </tr>
              <tr>
                <td class="label">To</td>
                <td><label>
                    <select name="select2" id="select2" class="select_field">
                      <option selected="selected">Buy</option>
                      <option>Rent</option>
                      <option>Search Both</option>
                    </select>
                  </label></td>
                <td class="label">Maximum Price Rs.</td>
                <td><input type="text" name="textfield2" id="textfield2" class="text" /></td>
              </tr>
              <tr>
                <td class="label">Bed Rooms</td>
                <td><label>
                    <input type="text" name="textfield5" id="textfield5" class="text smalltextarea" />
                  </label></td>
                <td class="label">Bathrooms</td>
                <td><input type="text" name="textfield3" id="textfield3" class="text" /></td>
              </tr>
              <tr>
                <td class="label">Lot Size</td>
                <td><label></label>
                  <input type="text" name="textfield7" id="textfield7" class="text" /></td>
                <td class="label">UOM</td>
                <td><input name="" type="radio" value="" />
                  </label>
                  Cents /
                  <input name="" type="radio" value="" />
                  </label>
                  Acres /
                  <input name="" type="radio" value="" />
                  Sq. Ft.</td>
              </tr>
              <tr>
                <td class="label">&nbsp;</td>
                <td>&nbsp;</td>
                <td colspan="2" class="label"><label>
                    <input type="image" src="realone-images/searchbtn.gif" alt="search" name="button2" id="button2" value="Submit" />
                  </label></td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </div>
    <div id="home_sidebar">
      <div class="hot">
        <h2 class="sidebar_head"><span class="h2link"><a href="#">View More</a></span> Hot Properties </h2>
        <ul>
          <li><span class="imageholder"> <img src="realone-images/imageplaceholder.jpg" alt="" width="66" height="66" /> </span>
            <h3><a href="#">5 Room Flat at PlaceName</a></h3>
            <p class="description"> Lorem Ipsum Dolor Sit Amet <span class="price">Rs. 500,000.00</span> </p>
            <div class="clear">&nbsp;</div>
          </li>
          <li><span class="imageholder"> <img src="realone-images/imageplaceholder.jpg" alt="" width="66" height="66" /> </span>
            <h3><a href="#">5 Room Flat at PlaceName</a></h3>
            <p class="description"> Lorem Ipsum Dolor Sit Amet <span class="price">Rs. 500,000.00</span> </p>
            <div class="clear">&nbsp;</div>
          </li>
          <li><span class="imageholder"> <img src="realone-images/imageplaceholder.jpg" alt="" width="66" height="66" /> </span>
            <h3><a href="#">5 Room Flat at PlaceName</a></h3>
            <p class="description"> Lorem Ipsum Dolor Sit Amet <span class="price">Rs. 500,000.00</span> </p>
            <div class="clear">&nbsp;</div>
          </li>
        </ul>
      </div>
    </div>
    <div id="topcategorieslink" class="clear">
      <h2>Categories</h2>
      <ul>
        <li><a href="#">Villas</a> </li>
        <li><a href="#">Houses</a> </li>
        <li><a href="#">Flats</a> </li>
        <li><a href="#">Apartments</a> </li>
        <li><a href="#">Raw Land</a> </li>
        <li><a href="#">Estates</a> </li>
        <li><a href="#">Shop / OFfice</a> </li>
        <li><a href="#">For Rent</a> </li>
      </ul>
    </div>
    <div class="clear">&nbsp;</div>
    <div id="main">
      <h1>Featured Listing</h1>
      <ul class="listing">
        <li>
          <div class="listinfo"> <img src="realone-images/imageholder.jpg" alt="" class="listingimage" />
            <h3>5 Room Villa at PlaceName</h3>
            <p> Lorem Ipsum Dolor Sit Amet</p>
            <span class="price">Rs. 500,000 </span> <span class="media"> <img src="realone-images/icon_img.jpg" alt="" width="19" height="15" /> 12 Images <img src="realone-images/videos_icon.jpg" alt="" width="21" height="18" /></span> 1 Video</div>
          <div class="listingbtns"> <span class="listbuttons"> <a href="#">View Details</a></span> <span class="listbuttons"> <a href="#">Add To Favorites</a></span> <span class="listbuttons"> <a href="#">Contact Seller</a></span></div>
          <div class="clear">&nbsp;</div>
        </li>
        <li>
          <div class="listinfo"> <img src="realone-images/imageholder.jpg" alt="" class="listingimage" />
            <h3>5 Room Villa at PlaceName</h3>
            <p> Lorem Ipsum Dolor Sit Amet</p>
            <span class="price">Rs. 500,000 </span> <span class="media"> <img src="realone-images/icon_img.jpg" alt="" width="19" height="15" /> 12 Images <img src="realone-images/videos_icon.jpg" alt="" width="21" height="18" /></span> 1 Video</div>
          <div class="listingbtns"> <span class="listbuttons"> <a href="#">View Details</a></span> <span class="listbuttons"> <a href="#">Add To Favorites</a></span> <span class="listbuttons"> <a href="#">Contact Seller</a></span></div>
          <div class="clear">&nbsp;</div>
        </li>
        <li>
          <div class="listinfo"> <img src="realone-images/imageholder.jpg" alt="" class="listingimage" />
            <h3>5 Room Villa at PlaceName</h3>
            <p> Lorem Ipsum Dolor Sit Amet</p>
            <span class="price">Rs. 500,000 </span> <span class="media"> <img src="realone-images/icon_img.jpg" alt="" width="19" height="15" /> 12 Images <img src="realone-images/videos_icon.jpg" alt="" width="21" height="18" /></span> 1 Video</div>
          <div class="listingbtns"> <span class="listbuttons"> <a href="#">View Details</a></span> <span class="listbuttons"> <a href="#">Add To Favorites</a></span> <span class="listbuttons"> <a href="#">Contact Seller</a></span></div>
          <div class="clear">&nbsp;</div>
        </li>
        <li>
          <div class="listinfo"> <img src="realone-images/imageholder.jpg" alt="" class="listingimage" />
            <h3>5 Room Villa at PlaceName</h3>
            <p> Lorem Ipsum Dolor Sit Amet</p>
            <span class="price">Rs. 500,000 </span> <span class="media"> <img src="realone-images/icon_img.jpg" alt="" width="19" height="15" /> 12 Images <img src="realone-images/videos_icon.jpg" alt="" width="21" height="18" /></span> 1 Video</div>
          <div class="listingbtns"> <span class="listbuttons"> <a href="#">View Details</a></span> <span class="listbuttons"> <a href="#">Add To Favorites</a></span> <span class="listbuttons"> <a href="#">Contact Seller</a></span></div>
          <div class="clear">&nbsp;</div>
        </li>
        <li>
          <div class="listinfo"> <img src="realone-images/imageholder.jpg" alt="" class="listingimage" />
            <h3>5 Room Villa at PlaceName</h3>
            <p> Lorem Ipsum Dolor Sit Amet</p>
            <span class="price">Rs. 500,000 </span> <span class="media"> <img src="realone-images/icon_img.jpg" alt="" width="19" height="15" /> 12 Images <img src="realone-images/videos_icon.jpg" alt="" width="21" height="18" /></span> 1 Video</div>
          <div class="listingbtns"> <span class="listbuttons"> <a href="#">View Details</a></span> <span class="listbuttons"> <a href="#">Add To Favorites</a></span> <span class="listbuttons"> <a href="#">Contact Seller</a></span></div>
          <div class="clear">&nbsp;</div>
        </li>
        <li>
          <div class="listinfo"> <img src="realone-images/imageholder.jpg" alt="" class="listingimage" />
            <h3>5 Room Villa at PlaceName</h3>
            <p> Lorem Ipsum Dolor Sit Amet</p>
            <span class="price">Rs. 500,000 </span> <span class="media"> <img src="realone-images/icon_img.jpg" alt="" width="19" height="15" /> 12 Images <img src="realone-images/videos_icon.jpg" alt="" width="21" height="18" /></span> 1 Video</div>
          <div class="listingbtns"> <span class="listbuttons"> <a href="#">View Details</a></span> <span class="listbuttons"> <a href="#">Add To Favorites</a></span> <span class="listbuttons"> <a href="#">Contact Seller</a></span></div>
          <div class="clear">&nbsp;</div>
        </li>
        <li>
          <div class="listinfo"> <img src="realone-images/imageholder.jpg" alt="" class="listingimage" />
            <h3>5 Room Villa at PlaceName</h3>
            <p> Lorem Ipsum Dolor Sit Amet</p>
            <span class="price">Rs. 500,000 </span> <span class="media"> <img src="realone-images/icon_img.jpg" alt="" width="19" height="15" /> 12 Images <img src="realone-images/videos_icon.jpg" alt="" width="21" height="18" /></span> 1 Video</div>
          <div class="listingbtns"> <span class="listbuttons"> <a href="#">View Details</a></span> <span class="listbuttons"> <a href="#">Add To Favorites</a></span> <span class="listbuttons"> <a href="#">Contact Seller</a></span></div>
          <div class="clear">&nbsp;</div>
        </li>
        <li>
          <div class="listinfo"> <img src="realone-images/imageholder.jpg" alt="" class="listingimage" />
            <h3>5 Room Villa at PlaceName</h3>
            <p> Lorem Ipsum Dolor Sit Amet</p>
            <span class="price">Rs. 500,000 </span> <span class="media"> <img src="realone-images/icon_img.jpg" alt="" width="19" height="15" /> 12 Images <img src="realone-images/videos_icon.jpg" alt="" width="21" height="18" /></span> 1 Video</div>
          <div class="listingbtns"> <span class="listbuttons"> <a href="#">View Details</a></span> <span class="listbuttons"> <a href="#">Add To Favorites</a></span> <span class="listbuttons"> <a href="#">Contact Seller</a></span></div>
          <div class="clear">&nbsp;</div>
        </li>
      </ul>
    </div>
    <div id="sidebar">
      <div class="block advert"> <img src="realone-images/advertisehere.jpg" alt="" /> </div>
      <div class="menulist block">
        <h2 class="sidebar_head">Quick Links</h2>
        <ul class="normalmenu">
          <li><a href="#">Pro Agent Account</a></li>
          <li><a href="#">Find Agents</a></li>
          <li><a href="#">Banking &amp; Finance Help</a></li>
          <li><a href="#">Help &amp; Support</a></li>
          <li><a href="#">SMS Alerts</a></li>
          <li><a href="#">Email Alerts</a></li>
          <li><a href="#">Advertising in RealOne</a></li>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
        <div class="clear">&nbsp;</div>
      </div>
      <div class="block"> <img src="realone-images/dreamcar.jpg" alt="" /> </div>
      <div class="block"><img src="realone-images/dreamcar.jpg" alt="" /></div>
      <div class="block"><img src="realone-images/dreamcar.jpg" alt="" /></div>
    </div>
    <div class="clear">&nbsp;</div>
  </div>
  <div id="footer">
    <div id="upperfooter"> <a href="#">Home</a> | <a href="#">Search</a> | <a href="#">Register</a> | <a href="#">Pro Agent Account</a> | <a href="#">About Us</a> | <a href="#">Contact Us</a> |<a href="#"> Privacy Policy</a> <a href="#">Terms Of Use</a> | <a href="#">Advertise With Us</a> </div>
    <div id="lowerfooter"> <span class="backtotop"> <a href="#">Back To Top</a> </span><a href="http://ramblingsoul.com">Free CSS Template</a> by RamblingSoul </div>
  </div>
</div>
</body>
</html>

   
    
  








Related examples in the same category

1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
5.simplestyle_4
6.simplestyle_5
7.simplestyle_6
8.pomodoro
9.portcentral
10.portfolio-extended
11.portfolio
12.postscriptum
13.powderpuff
14.power
15.precision
16.predilection
17.premiumseries
18.prepaid
19.presented
20.pressurized
21.prideandprejudice
22.primitiveelement
23.printing
24.pristine
25.private-lawyer-co
26.product-landing-page
27.production
28.ProductPackage
29.programme
30.progress
31.projection
32.proofing
33.Prosperity
34.province
35.purensimple
36.purgatory_shuffle
37.puzzled
38.quadrangle
39.quartz-istorage
40.quatrain
41.racetrackplaya
42.radiance
43.rainonleaves
44.ramblingsoul-2
45.ramblingsoul-9
46.ramblingsoul3
47.ramblingsoul4
48.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
51.ramblingsoul_3
52.random
53.rational
54.realize
55.rebel-magazine
56.reckoning
57.recreations
58.reference
59.regeneracy
60.rehabilitation
61.reinvent
62.replenish
63.republic
64.resizeme
65.resplendissant
66.revolt-01
67.ridinghood
68.rockband
69.rogue
70.Rothko
71.route66
72.rust
73.safe-as-houses
74.sahara
75.sampling
76.Sapphire
77.schemermag
78.scotchmark
79.scribbled
80.secretlab
81.seduction
82.selcouth
83.sensa
84.settings
85.shallowgrunge
86.shalom-typo
87.shape
88.she
89.showcase
90.sifiso
91.silenceandharmony
92.SILK
93.Simpatico
94.sindromk
95.singapore
96.sinorcaish
97.six-oh-six
98.sixpence
99.sixties_style
100.skipopia
101.skitemplate
102.sky
103.sliced
104.slight_amnesia
105.socialnet
106.softenedcells
107.solemnity
108.solitude
109.soloss
110.solutions
111.somewhere-peaceful
112.soniatemplate
113.space
114.spaced
115.spasaloon
116.spatter
117.speedracing
118.spheroids
119.spidercity
120.splash
121.splatt
122.spontaneous