Responsive Website Design: real estate responsive website templates

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Template</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="header1">
  
  <div class="header-left-1">
    <ul>
      <li><a href="#">Partner Sites</a></li>
      <li><a href="#">Sitemap</a></li>
    </ul>
  </div>
  <div class="header-left-2">
    <ul>
      <li><a href="#"><span style="font-family:Geneva, Arial, Helvetica, sans-serif;padding:7px"> f</span></a></li>
      <li><a href="#"><span style="font-family:Geneva, Arial, Helvetica, sans-serif;padding:7px">li</span></a></li>
      <li><a href="#"><span style="font-family:Geneva, Arial, Helvetica, sans-serif;padding:7px">tw</span></a></li>
      <li><a href="#"><span style="font-family:Geneva, Arial, Helvetica, sans-serif;padding:7px">g+</span></a></li>
    </ul>
  </div>
</div>

<div class="wrapper">
  
  <div class="menu">
    
    <div class="menu_left">
      
      <h2><a href="#">LOGO</a></h2>
    </div>
    
    <div class="menu_right">
      
      <ul>
        <li><a href="#"><span class="active1"> Home</span></a></li>
        <li><a href="#"> About</a></li>
        <li><a href="#"> Services</a></li>
        <li><a href="#"> What We Do</a></li>
        <li><a href="#"> Who We Are</a></li>
        <li><a href="#"> Contacts</a></li>
      </ul>
    </div>
    
  </div>
  
  <div class="banner">
    
    <div class="banner_left">
      
      <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider1.png" height="235" width="100%"> </div>
    
    <div class="banner_left">
      
      <form>
        <div class="divider">
          <label>p type</label>
          <select>
            <optgroup>
            <option>work</option>
            <option>work2</option>
            <option>work</option>
            <option>work2</option>
            <option>work</option>
            <option>work2</option>
            </optgroup>
          </select>
          <label>Area</label>
          <select>
            <optgroup>
            <option>work</option>
            <option>work2</option>
            <option>work</option>
            <option>work2</option>
            <option>work</option>
            <option>work2</option>
            </optgroup>
          </select>
          <label>s type</label>
          <select>
            <optgroup>
            <option>work</option>
            <option>work2</option>
            <option>work</option>
            <option>work2</option>
            <option>work</option>
            <option>work2</option>
            </optgroup>
          </select>
        </div>
        <div class="divider">
          <label>Price</label>
          <select>
            <optgroup>
            <option>work</option>
            <option>work2</option>
            <option>work</option>
            <option>work2</option>
            <option>work</option>
            <option>work2</option>
            </optgroup>
          </select>
          <label>p Area</label>
          <select>
            <optgroup>
            <option>work</option>
            <option>work2</option>
            <option>work</option>
            <option>work2</option>
            <option>work</option>
            <option>work2</option>
            </optgroup>
          </select>
        </div>
        <div class="divider">
          <label>Sale</label>
          <input type="radio">
          <label>Rent</label>
          <input type="radio">
          <label>Ledge</label>
          <input type="radio">
        </div>
        <label>Search</label>
        <input type="text">
        <input type="button" value="search" name="search">
      </form>
    </div>
    
  </div>
  
  <div class="block-container">
    
    <div class="pic">
      
      <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider2.png" height="200" width="200">
      <div class="text"> This site is for Sale </div>
    </div>
    
    <div class="pic">
      
      <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider2.png" height="200" width="200">
      <div class="text"> This site is for Sale </div>
    </div>
    
    <div class="pic">
      
      <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider2.png" height="200" width="200">
      <div class="text"> This site is for Sale </div>
    </div>
    
    <div class="pic">
      
      <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider2.png" height="200" width="200">
      <div class="text"> This site is for Sale </div>
    </div>
    
    <div class="pic">
      
      <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider2.png" height="200" width="200">
      <div class="text"> This site is for Sale </div>
    </div>
    
  </div>
  
  
  <div class="image-container">
    
    <div class="image-zoom-container">
      <div class="zoom-container"> <a href="#"> <span class="zoom-caption">
        <h3>Search</h3>
        </span> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" /> </a> </div>
      
      <div class="zoom-container"> <a href="#"> <span class="zoom-caption">
        <h3>Your Place</h3>
        </span> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" /> </a> </div>
      
      <div class="zoom-container"> <a href="#"> <span class="zoom-caption">
        <h3>Here</h3>
        </span> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" /> </a> </div>
    </div>
    
  </div>
  
</div>

<div class="footer">
  
  <div class="block">
    <ul>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
      <li>Home</li>
    </ul>
  </div>
</div>
</body>
</html>

Create style.css

@charset "utf-8";
body {
 background:#99C871;
}
label {
 padding:10px;
 color:#FFFFFF;
 font-weight:bold;
 font-size:18px;
}
select {
 padding:10px;
 background:#FFFFFF;
}
.divider {
 background: #99c871;
 border-radius: 10px;
 margin: auto auto 10px;
 padding: 10px;
}
.header1 {
 background-color: #333;
 margin: -7px auto auto;
 padding: 16px;
}
.header-left-1 {
 float:left;
 width:70%;
}
.header-left-1 ul {
 padding:0px;
 margin:-9px;
}
.header-left-1 ul li {
 list-style-type:none;
 padding-left:10px;
 display:inline;
}
.header-left-1 ul li a {
 text-decoration:none;
 color:#999999;
}
.header-left-1 ul li a:hover {
 color:#FF0000;
 text-decoration:none;
}
.header-left-2 {
 float: right;
}
.header-left-2 ul {
 padding:0px;
 margin:-9px;
}
.header-left-2 ul li {
 list-style-type:none;
 padding-left:10px;
 display:inline;
}
.header-left-2 ul li a {
 text-decoration:none;
 color:#999999;
}
.header-left-2 ul li a:hover {
 color:#FF0000;
 text-decoration:none;
 background:#FFFFFF;
}
.wrapper {
 padding:20px;
 margin: 1px auto auto;
 overflow:auto;
 background:#FFFFFF;
}
.menu {
 padding: 32px;
 margin:auto;/*background:#006600;*/
}
.menu_left {
 float:left;
 /*background:#333333;*/
margin: -13px;
}
.menu_left h2 {
 margin-top: -2px;
}
.menu_left a {
 color:#97C670;
 text-decoration:none;
}
.menu_right {
 float:right;
}
.menu_right ul {
 margin: -11px;
 padding: 1px;
}
.menu_right ul li {
 display: inline;
 list-style-type: none;
 margin: 10px;
}
.menu_right ul li a {
 text-decoration:none;
 color:#666666;
 text-transform:uppercase;
}
.menu_right ul li a:hover {
 color:#00CC66;
}
.active1 {
 color:#97C670;
}
.banner {
 padding:10px;
 margin:auto;
}
.banner_left {
 float: left;
 margin: 10px;
 padding: 13px;
 width: 46%;
 background: #a9db80; /* Old browsers */
 background: -moz-linear-gradient(top, #a9db80 0%, #96c56f 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a9db80), color-stop(100%, #96c56f)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #a9db80 0%, #96c56f 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #a9db80 0%, #96c56f 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #a9db80 0%, #96c56f 100%); /* IE10+ */
 background: linear-gradient(to bottom, #a9db80 0%, #96c56f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f', GradientType=0 ); /* IE6-9 */
}
.block-container {
 margin: auto auto 10px;
 padding:10px;
 /*background:#006666;*/
overflow:auto;
 width: 100%;
 min-height: 207px;
}
.block {
 background:#97C670;
 float: left;
 /*height: 200px;*/
    margin: 10px;
 padding: 9px;
 width: 98px;
}
.footer {
 padding:10px;
 background:#85BE71;
 overflow:auto;
}
 .image-container {
 padding:10px;
 margin:auto;
 background:#000033;
}
.image-zoom-container {
 list-style: none;
 font-size: 0px;
}
.zoom-container {
 position: relative;
 overflow: hidden;
 display: inline-block;
 width: 33.33%;
 font-size: 16px;
 font-size: 1rem;
 border: 1px solid #fff;
 vertical-align: top;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
.zoom-container img {
 display: block;
 width: 100%;
 height: auto;
 -webkit-transition: all .5s ease; /* Safari and Chrome */
 -moz-transition: all .5s ease; /* Firefox */
 -ms-transition: all .5s ease; /* IE 9 */
 -o-transition: all .5s ease; /* Opera */
 transition: all .5s ease;
}
.zoom-container .zoom-caption {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 10;
 background: rgba(0, 0, 0, .5);
 -webkit-transition: all .5s ease; /* Safari and Chrome */
 -moz-transition: all .5s ease; /* Firefox */
 -ms-transition: all .5s ease; /* IE 9 */
 -o-transition: all .5s ease; /* Opera */
 transition: all .5s ease;
}
.zoom-container .zoom-caption h3 {
 display: block;
 text-align: center;
 font-family: 'Source Sans Pro', sans-serif;
 font-size: 1.5em;
 font-weight: 900;
 letter-spacing: -1px;
 text-transform: uppercase;
 color: #fff;
 margin: 23% 0 0;
 padding: 10px 0;
 border-top: 5px solid #333333;
 border-bottom: 5px solid #000000;
}
.zoom-container:hover img {
 -webkit-transform:scale(1.25); /* Safari and Chrome */
 -moz-transform:scale(1.25); /* Firefox */
 -ms-transform:scale(1.25); /* IE 9 */
 -o-transform:scale(1.25); /* Opera */
 transform:scale(1.25);
}
.zoom-container:hover .zoom-caption {
 background: none;
}
 @media (max-width: 767px) {
 .zoom-container {
 width: 50%;
}
}
 @media (max-width: 480px) {
 .zoom-container {
 width: 100%;
}
}
/*----------------------------------------------Float shadow effect on mouse hover---------------------------------------------*/
 .pic {
 background:#97C670;
 float: left;
 height: 200px;
 margin: 10px;
 padding: 9px;
 width: 199px;
}
.text {
 background:#97C670;
 height: 126px;
 margin-top: -195px;
 opacity: 0;
 position: relative;
 width: 140px;
}
.pic:hover .text {
 opacity:0.6;
 text-align:justify;
 color:#0099FF;
 font-size:20px;
 font-weight:700;
 font-family:"Times New Roman", Times, serif;
 padding:30px;
}
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .banner_left {
 margin: 10px auto;
 padding: 0px;
 text-align:center;
 width:100%;
}
 .pic {
 background:#97C670;
 float: none!important;
 height: 200px;
 margin: 10px;
 padding: 9px;
 width: 199px;
}
 .menu_right {
 float: none;
 overflow: auto;
 width: 100%;
}
.menu_right ul {
 margin:0px;
 padding:0px;
}
.menu_right ul li {
 list-style-type: none;
 display:inline-block;
}
}

Thursday 30 April 2015

real estate responsive website templates

Create index.html

Create style.css

No comments:

Post a Comment