<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--===============================code==========================-->
<section class="module properties">
<div class="container">
<div class="module-header">
<h2>Recently Added <strong>Properties</strong></h2>
<img src="divider.png" alt="">
<p>Morbi accumsan ipsum velit nam nec tellus a odiose tincidunt auctor a ornare odio sed non mauris vitae erat consequat auctor</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-4">
<div class="property shadow-hover">
<a href="#" class="property-img">
<div class="img-fade"></div>
<div class="property-tag button alt featured">Featured</div>
<div class="property-tag button status">For Sale</div>
<div class="property-price">$150,000</div>
<div class="property-color-bar"></div>
<img src="http://www.flatzee.com/uploads/f15c308ed99419e00ada667b80d3e404_property-img1.jpg" alt="">
</a>
<div class="property-content">
<div class="property-title">
<h4><a href="#">Modern Family Home</a></h4>
<p class="property-address"><i class="fa fa-map-marker icon"></i>123 Smith Dr, Annapolis, MD</p>
</div>
<table class="property-details">
<tbody><tr>
<td><i class="fa fa-bed"></i> 3 Beds</td>
<td><i class="fa fa-tint"></i> 2 Baths</td>
<td><i class="fa fa-expand"></i> 25,000 Sq Ft</td>
</tr>
</tbody></table>
</div>
<div class="property-footer">
<span class="left"><i class="fa fa-calendar-o icon"></i> 5 days ago</span>
<span class="right">
<a href="#"><i class="fa fa-heart-o icon"></i></a>
<a href="#"><i class="fa fa-share-alt"></i></a>
</span>
<div class="clear"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="property shadow-hover">
<a href="#" class="property-img">
<div class="img-fade"></div>
<div class="property-tag button alt featured">Featured</div>
<div class="property-tag button status">For Rent</div>
<div class="property-price">$6,500 <span>Per Month</span></div>
<div class="property-color-bar"></div>
<img src="http://www.flatzee.com/uploads/f15c308ed99419e00ada667b80d3e404_property-img1.jpg" alt="">
</a>
<div class="property-content">
<div class="property-title">
<h4><a href="#">Beautiful Waterfront Condo</a></h4>
<p class="property-address"><i class="fa fa-map-marker icon"></i>123 Smith Dr, Annapolis, MD</p>
</div>
<table class="property-details">
<tbody><tr>
<td><i class="fa fa-bed"></i> 3 Beds</td>
<td><i class="fa fa-tint"></i> 2 Baths</td>
<td><i class="fa fa-expand"></i> 25,000 Sq Ft</td>
</tr>
</tbody></table>
</div>
<div class="property-footer">
<span class="left"><i class="fa fa-calendar-o icon"></i> 1 week ago</span>
<span class="right">
<a href="#"><i class="fa fa-heart-o icon"></i></a>
<a href="#"><i class="fa fa-share-alt"></i></a>
</span>
<div class="clear"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="property shadow-hover">
<a href="#" class="property-img">
<div class="img-fade"></div>
<div class="property-tag button alt featured">Featured</div>
<div class="property-tag button status">For Rent</div>
<div class="property-price">$150,000</div>
<div class="property-color-bar"></div>
<img src="http://www.flatzee.com/uploads/f15c308ed99419e00ada667b80d3e404_property-img1.jpg" alt="">
</a>
<div class="property-content">
<div class="property-title">
<h4><a href="#">Modern Family Home</a></h4>
<p class="property-address"><i class="fa fa-map-marker icon"></i>123 Smith Dr, Annapolis, MD</p>
</div>
<table class="property-details">
<tbody><tr>
<td><i class="fa fa-bed"></i> 3 Beds</td>
<td><i class="fa fa-tint"></i> 2 Baths</td>
<td><i class="fa fa-expand"></i> 25,000 Sq Ft</td>
</tr>
</tbody></table>
</div>
<div class="property-footer">
<span class="left"><i class="fa fa-calendar-o icon"></i> 2 weeks ago</span>
<span class="right">
<a href="#"><i class="fa fa-heart-o icon"></i></a>
<a href="#"><i class="fa fa-share-alt"></i></a>
</span>
<div class="clear"></div>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</section>
<!--===============================code==========================-->
.module {
position: relative;
padding: 70px 0px 70px 0px;
}
.shadow-hover {
transition: all 0.4s linear;
}
.shadow-hover:hover {
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}
/*========================================================*/
/*========================================================*/
.module-header {
margin-bottom: 50px;
text-align: center;
}
.module-header h2 {
font-weight: 300;
font-size: 25px;
margin-bottom: 15px;
}
.module-header img {
margin-bottom: 15px;
}
.module-header p {
font-size: 16px;
margin: 0 auto;
width: 60%;
}
.property {
background: #f5f5f5;
position: relative;
margin-bottom: 30px;
}
.property-img {
position: relative;
display: block;
}
.img-fade {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}
.property-tag.featured {
right: 10px;
margin-top: 10px;
}
.button.alt {
background-color: #4fba6f;
}
.property-tag {
position: absolute;
padding: 3px 8px;
font-size: 12px;
z-index: 20;
}
.property-tag.status {
right: 10px;
bottom: 10px;
}
.property-price {
color: white;
position: absolute;
font-weight: 700;
font-size: 23px;
bottom: 10px;
left: 15px;
z-index: 20;
}
.property-color-bar {
background: #48a0dc;
height: 3px;
width: 0;
position: absolute;
z-index: 20;
bottom: 0px;
transition: all 0.4s;
}
.property-img img {
max-width: 100%;
height: auto;
}
.property-content {
padding: 5%;
}
.property-title {
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
padding-bottom: 20px;
margin-bottom: 20px;
}
.property-title h4 {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.property-title a {
color: #3a464e;
font-size: 18px;
}
.property-details {
color: #9eaab2;
font-weight: 700;
width: 100%;
font-size: 13px;
}
.property-details td {
width: 33.33%;
}
.property-footer {
background: #d4e0e7;
padding: 3% 5%;
color: #86929a;
font-size: 13px;
font-weight: 400;
}
.left {
float: left;
}
.icon {
margin-right: 4px;
}
.right {
float: right;
}
.clear {
clear: both;
}
