Bootstrap Snippet Real Estate Listing using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
 <section class="listing-page-builing">
      <div class="container">
         <div class="row">
            <div class="listing-box">
               <div class="col-md-3 mr-iob-blr">
                  
                  <div style="background: url('https://content.makaan.com/16/6109519/274/6863152.jpeg?width=360&height=270') 0 0 no-repeat; height:30vh; background-size:cover; 
                  background-position:center; border:#ccc 1px solid"></div>
                  
                  
                  <ul class="list-of-ratings">
                     <li><img src="images/logo.png" width="30%"></li>
                     <li><strong><a href="">Square Yards</a><br/> </strong>EXPERT DEAL MAKER</li>
                    </ul>
                    
                    <span class="rating-box-iob">4.3</span>
                    
                    
                    
                </div>
               <div class="col-md-6">
                  <h4><strong><a href="#">4  BHK Apartment</a></strong> in Ideal Greens<br/>
                     <span>Tollygunge, Kolkata</span>
                  </h4>
                  <ul class="poperty-details-iob">
                     <li><span>87.12 L</span><br/>
                        4,250 / sq ft
                     </li>
                     <li><span>2050</span><br/>
                        Area in sq ft
                     </li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
      body{font-family:'Roboto';}
      .listing-box h4{line-height:30px; color:#e55122}
      .listing-box{background:#f2f4f4; padding:5px; float:left; width:100%; }
      .poperty-details-iob {margin:5px 0; padding:8px 0; display:inline-block; border-top:#e5e5e5 1px solid;  border-bottom:#e5e5e5 1px solid; 
      width:100%;}
      .poperty-details-iob li{margin:0; padding:8px 15px; display:inline-block; font-family:'Roboto'; color:#333; border-right:#e5e5e5 1px solid; }
      .poperty-details-iob li span{font-size:22px; color:#000;}
      .listing-box p{font-size:12px; color:#838383;}
      .list-of-ratings{margin:-40px 10px; padding:0; display:block; width:100%; float:left; position:relative;}
      .list-of-ratings li{margin:0; padding:10px 15px 0px 0px; display:block;  width:100%; font-size:16px;}
      .mr-iob-blr{margin-top:20px;}
      .listing-box ul li a{color:#e55122;}
      .cls-for-btn-listing{margin:0; padding:0; display:inline-block; text-align:center; width:100%; margin-top:130px;}
      .cls-for-btn-listing li{margin:0; padding:0; display:inline-block; }
      .cls-for-btn-listing li a{margin:0; padding:10px 15px; display:inline-block; background:#e55122 !important; border-radius:20px; color:#fff !important; }
      .star-list-iob{margin:16px 0; padding:0; display:block; position:relative; float:right}
      .star-list-iob li{margin:0; padding:0 3px; display:block; }
      .rating-box-iob{background:#e55122; padding:8px; border-radius:5px; position:absolute; color:#fff; right:20px; margin-top:40px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Real Estate Listing "
Bootstrap 3.0.0 Snippet by babai8961

Related: See More

Questions / Comments:

"Real Estate Listing " Bootstrap 3.0.0 Snippet by babai8961

Related: See More

Questions / Comments:

"Real Estate Listing "
Bootstrap 3.0.0 Snippet by babai8961