Bootstrap snippet: real state dashboard

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: real state



<div class="row"> <div class="col-md-6 col-sm-6"> <div class="real-estate-quick-view shadow"> <h3 class="title text-capitalize"><a href="#">21 forest view dr, san francisco, CA</a></h3> <div class="media"> <div class="media-left"> <a href="#"> <img src="http://themes.djavaui.com/blankon-fullpack-admin-theme/img/media/house/2.jpg" alt="..."> </a> </div> <div class="media-body"> <h3 class="media-heading"> <span class="text-right text-strong">$478,000</span> <span class="text-right text-muted">Multi Family</span> </h3> <table class="table table-condensed"> <tbody> <tr> <td class="text-left">Beds</td> <td class="text-right">3</td> </tr> <tr> <td class="text-left">Baths</td> <td class="text-right">3</td> </tr> <tr> <td class="text-left">Square feet</td> <td class="text-right">3540</td> </tr> <tr> <td class="text-left">Lot size</td> <td class="text-right">6570</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="real-estate-quick-view shadow"> <h3 class="title text-capitalize"><a href="#">1602 oakwood dr, modesto, CA</a></h3> <div class="media"> <div class="media-left"> <a href="#"> <img src="http://themes.djavaui.com/blankon-fullpack-admin-theme/img/media/house/3.jpg" alt="..."> </a> </div> <div class="media-body"> <h3 class="media-heading"> <span class="text-right text-strong">$351,500</span> <span class="text-right text-muted">Multi Family</span> </h3> <table class="table table-condensed"> <tbody> <tr> <td class="text-left">Beds</td> <td class="text-right">3</td> </tr> <tr> <td class="text-left">Baths</td> <td class="text-right">2</td> </tr> <tr> <td class="text-left">Square feet</td> <td class="text-right">1390</td> </tr> <tr> <td class="text-left">Lot size</td> <td class="text-right">9800</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="real-estate-quick-view shadow"> <h3 class="title text-capitalize"><a href="#">225 rosemont ave, modesto, CA</a></h3> <div class="media"> <div class="media-left"> <a href="#"> <img src="http://themes.djavaui.com/blankon-fullpack-admin-theme/img/media/house/4.jpg" alt="..."> </a> </div> <div class="media-body"> <h3 class="media-heading"> <span class="text-right text-strong">$678,000</span> <span class="text-right text-muted">Single Family</span> </h3> <table class="table table-condensed"> <tbody> <tr> <td class="text-left">Beds</td> <td class="text-right">4</td> </tr> <tr> <td class="text-left">Baths</td> <td class="text-right">2</td> </tr> <tr> <td class="text-left">Square feet</td> <td class="text-right">4890</td> </tr> <tr> <td class="text-left">Lot size</td> <td class="text-right">15400</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="real-estate-quick-view shadow"> <h3 class="title text-capitalize"><a href="#">215 olivero rd, modesto, CA</a></h3> <div class="media"> <div class="media-left"> <a href="#"> <img src="http://themes.djavaui.com/blankon-fullpack-admin-theme/img/media/house/1.jpg" alt="..."> </a> </div> <div class="media-body"> <h3 class="media-heading"> <span class="text-right text-strong">$430,000 /month</span> <span class="text-right text-muted">Condo/Apartment</span> </h3> <table class="table table-condensed"> <tbody> <tr> <td class="text-left">Beds</td> <td class="text-right">2</td> </tr> <tr> <td class="text-left">Baths</td> <td class="text-right">1</td> </tr> <tr> <td class="text-left">Square feet</td> <td class="text-right">2450</td> </tr> <tr> <td class="text-left">Lot size</td> <td class="text-right">10890</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="real-estate-quick-view shadow"> <h3 class="title text-capitalize"><a href="#">3623 McKinley blvd, sacramento, CA</a></h3> <div class="media"> <div class="media-left"> <a href="#"> <img src="http://themes.djavaui.com/blankon-fullpack-admin-theme/img/media/house/5.jpg" alt="..."> </a> </div> <div class="media-body"> <h3 class="media-heading"> <span class="text-right text-strong">$1,600 /month</span> <span class="text-right text-muted">Condo/Apartment</span> </h3> <table class="table table-condensed"> <tbody> <tr> <td class="text-left">Beds</td> <td class="text-right">2</td> </tr> <tr> <td class="text-left">Baths</td> <td class="text-right">1</td> </tr> <tr> <td class="text-left">Square feet</td> <td class="text-right">4370</td> </tr> <tr> <td class="text-left">Lot size</td> <td class="text-right">12980</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="real-estate-quick-view shadow"> <h3 class="title text-capitalize"><a href="#">1124 perkins way, sacramento, CA</a></h3> <div class="media"> <div class="media-left"> <a href="#"> <img src="http://themes.djavaui.com/blankon-fullpack-admin-theme/img/media/house/6.jpg" alt="..."> </a> </div> <div class="media-body"> <h3 class="media-heading"> <span class="text-right text-strong">$475,000</span> <span class="text-right text-muted">Single Family</span> </h3> <table class="table table-condensed"> <tbody> <tr> <td class="text-left">Beds</td> <td class="text-right">6</td> </tr> <tr> <td class="text-left">Baths</td> <td class="text-right">4</td> </tr> <tr> <td class="text-left">Square feet</td> <td class="text-right">3678</td> </tr> <tr> <td class="text-left">Lot size</td> <td class="text-right">16900</td> </tr> </tbody> </table> </div> </div> </div> </div> </div>
body{margin-top:20px; background:#eee; } /* ======================================================================== * DASHBOARD REAL ESTATE * ======================================================================== */ .list-real-estate { position: relative; margin: 0; } .list-real-estate li { padding: 10px 0; border-bottom: 1px dashed #DDD; } .list-real-estate li:first-child { padding-top: 0; } .list-real-estate li:last-child { padding-bottom: 0; border-bottom: none; } .list-real-estate li a { text-decoration: none; } .list-real-estate li a p { margin: 0; color: #B3B3B3; text-transform: uppercase; font-weight: 300; } .list-real-estate li a h3 { margin: 3px 0 0 0; color: #333; font-size: 20px; font-weight: 300; } .list-real-estate li a h3 .counter { font-size: 20px !important; } .list-real-estate li a h3 span { font-size: 15px; } .list-real-estate li a .status i { font-size: 25px; margin-top: 15px; } .sales-price { margin: 10px 0; } .ct-series-a .ct-line { stroke: #8CC152; } .ct-series-a .ct-point { stroke: #4b6d27; } .ct-series-a .ct-area { fill: #4b6d27; } .real-estate-quick-view { position: relative; background-color: #ffffff; padding: 10px; margin-bottom: 20px; } .real-estate-quick-view .title { margin-top: 0; font-size: 15px; font-weight: bold; } .real-estate-quick-view .title a { color: #636E7B; } .real-estate-quick-view .media { margin-top: 10px; } .real-estate-quick-view .media .media-heading { font-size: 10px; text-align: right; } .real-estate-quick-view .media .media-heading span { display: block; } .real-estate-quick-view .table tbody tr td { font-size: 10px; } @media (max-width: 360px) { .ct-label.ct-horizontal.ct-end { font-size: 7px; } } @media (max-width: 320px) { .real-estate-quick-view .title { text-align: center; margin-top: 5px; margin-bottom: 20px; } .media-body, .media-left, .media-right { display: block; } .media-left { text-align: center; margin-bottom: 20px; } .media-body { width: 100%; } }
Dey-Dey

real state dashboard

Dey-Dey
  Apr 9th, 10:54
75 Views