Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Estilo inmueble item"
Bootstrap 3.3.0 Snippet by
gbg933
3.3.0
Preview
HTML
CSS
View Full Screen
Fork
Fork this
1.9K
 
0 Fav
Post to Facebook
Tweet this
<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%; }
Related:
See More
Free Template
Rotating CSS Card
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76