<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-6"> <div class="propertyItem"> <div class="propertyContent"> <a class="propertyType" href="#">FAMILY HOME</a> <a href="property_single.html" class="propertyImgLink"><img class="propertyImg" src="http://rypecreative.com/easy-living/images/home4.jpg" alt=""></a> <h4><a href="property_single.html">587 Smith Avenue</a></h4> <p>Baltimore, MD</p> <div class="divider thin"></div> <p class="forSale">FOR SALE</p> <p class="price">$687,000</p> </div> <table border="1" class="propertyDetails"> <tbody><tr> <td><i class="fa fa-arrows-alt" style="margin-right:7px;"></i>2,412m</td> <td><i class="fa fa-bed" style="margin-right:7px;"></i>6 Beds</td> <td><i class="fa fa-tint" style="margin-right:7px;"></i>3 Baths</td> </tr> </tbody></table> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="propertyItem"> <div class="propertyContent row"> <div class="col-lg-4 col-md-4 col-sm-4"> <a class="propertyType" href="#">FAMILY HOME</a> <a href="property_single.html" class="propertyImgLink"><img class="propertyImgRow" src="http://rypecreative.com/easy-living/images/home1.jpg" alt=""></a> </div> <div class="col-lg-8 col-md-8 col-sm-8 rowText"> <p class="price">$687,000</p> <p class="forSale">FOR SALE</p> <h4><a href="property_single.html">587 Smith Avenue</a></h4><br> <p>Baltimore, MD</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vehicula dapibus mauris, quis ullamcorper enim aliquet sed. Maecenas eget tellus dui. Vivamus condimentum egestas nulla quis vehicula. Sed justo turpis, commodo sit amet.</p><br> <table border="1" class="propertyDetails"> <tbody> <tr> <td><img src="images/icon-area.png" alt="" style="margin-right:7px;">2,412m</td> <td><img src="images/icon-bed.png" alt="" style="margin-right:7px;">6 Beds</td> <td><img src="images/icon-drop.png" alt="" style="margin-right:7px;">3 Baths</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600); .propertyItem { font-family: 'Open Sans', sans-serif; background-color:white; box-shadow: 0px 1px 3px #d4d4d4; margin-bottom:30px; } .propertyContent { padding:9px; } .propertyContent a { color:#2a2a2a; } .propertyContent a:hover { color:#4a4786; } .propertyImg { max-width:100%; margin-bottom:15px; } .propertyImgLink { -webkit-transition: opacity 0.3s linear; -moz-transition: copacity 0.3s linear; -ms-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .propertyImgLink:hover { opacity:0.8; } .propertyType { position:absolute; font-family: 'Open Sans', sans-serif; font-size:12px; background-color:#4a4786; color:white !important; padding:7px; z-index:1; } .openHouse { position:absolute; font-family: 'Open Sans', sans-serif; color:white; font-size:13px; right:7px; background-image: url('../images/open-house-bg.png'); background-repeat:no-repeat; padding:19px 13px 15px 15px; z-index:1; } .forSale { float:left; font-family: 'Open Sans', sans-serif; font-size:15px; background-color:#d5d5d5; color:white; padding:4px 9px 4px 9px; border-radius:4px; display:inline-block; } .price { font-family: 'Open Sans', sans-serif; float:right; color:#4a4786; font-size:23px; } .propertyDetails { background-color:#f8f8f8; margin-top:0px; border:1px solid #cacaca; width:100%; text-align:center; } .propertyDetails td { font-family: 'Open Sans', sans-serif; font-size:12px; width:33.6%; height:45px; border-color:#cacaca; color:#ababab; } .pageList { text-align:center; margin-top:20px; } .pageList li { display:inline; } .pageList li .current { background-color:#4a4786; color:white; font-family: 'Open Sans', sans-serif; } .pageList li a { color:#a1a1a1; padding:4px 10px 4px 10px; border-radius:3px; background-color:#dcdcdc; } .pageList li a:hover { background-color:#4a4786; color:white; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -ms-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; } .masonryRow .col-lg-3 { width:292px; } .masonryRow .col-lg-3.wide { width:583px; } /** PROPERTIES ROW **/ .rowText { padding-top:17px; padding-right:33px; } .rowText h4 { float:left; font-size:19px; margin-bottom:0px; } .rowText .price { float:right; } .rowText .forSale { float:right; margin-right:20px; } .propertyImgRow { max-width:100%; }