Hi guys, In this post we are give you real estate templete box design. also using this design you can display product. free one page real estate website templates with source code. this design you can use for give rant property. in design also provide booking button.

We allows to free snippets of bootstrap real estate template free , you can download full code of best real estate website templates free download layout. Here in this post i will give you example of real estate bootstrap template snippet and you will get simple code of html, css and jquery. In real estate responsive website templates free download html with css snippet i give you three tab with html, css and js, you can easily get code of real estate html5 template free download layout.


<!DOCTYPE html> <html> <head> <title>Real Estate Design</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body> <div class="container main-section"> <div class="row"> <div class="col-lg-4"> <div class="section border bg-white rounded p-2"> <div class="row"> <div class="col-lg-12 img-section"> <img src="http://nicesnippets.com/demo/re-image6.jpg" class="p-0 m-0 res-ponsive"> <span class="badge badge-danger add-sens p-2 rounded-0">NOW</span> </div> <div class="col-lg-12 sectin-title"> <h1 class="pt-2 pb-2">This Is a Nice Palace</h1> </div> <div class="col-lg-12"> <div class="row"> <div class="col-lg-2"> <span class="badge badge-success p-2">$ 300</span> </div> <div class="col-lg-10 text-right"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star-half-alt"></i></span><br> </div> </div> <hr> </div> <div class="col-lg-12 section-detail"> <p class="ml-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><hr> </div> <div class="col-lg-12 pb-2"> <div class="row"> <div class="col-lg-6"> <a href="#" class="btn btn-danger btn-block btn-sm">Book Now</a> </div> <div class="col-lg-6"> <a href="#" class="btn btn-info btn-block btn-sm">Apply For Rent</a> </div> </div> </div> </div> </div> </div> <div class="col-lg-4"> <div class="section border bg-white rounded p-2"> <div class="row"> <div class="col-lg-12 img-section"> <img src="http://nicesnippets.com/demo/re-image4.jpg"> <span class="badge badge-danger add-sens p-2 rounded-0">NOW</span> </div> <div class="col-lg-12 sectin-title"> <h1 class="pt-2">This Is a Nice Palace</h1> </div> <div class="col-lg-12"> <div class="row"> <div class="col-lg-2"> <span class="badge badge-success p-2">$ 300</span> </div> <div class="col-lg-10 text-right"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star-half-alt"></i></span><br> </div> </div> <hr> </div> <div class="col-lg-12 section-detail"> <p class="ml-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><hr> </div> <div class="col-lg-12 pb-2"> <div class="row"> <div class="col-lg-6"> <a href="#" class="btn btn-danger btn-block btn-sm">Book Now</a> </div> <div class="col-lg-6"> <a href="#" class="btn btn-info btn-block btn-sm">Apply For Rent</a> </div> </div> </div> </div> </div> </div> <div class="col-lg-4"> <div class="section border bg-white rounded p-2"> <div class="row"> <div class="col-lg-12 img-section"> <img src="http://nicesnippets.com/demo/re-image5.jpeg"> <span class="badge badge-danger add-sens p-2 rounded-0">NOW</span> </div> <div class="col-lg-12 sectin-title"> <h1 class="pt-2">This Is a Nice Palace</h1> </div> <div class="col-lg-12"> <div class="row"> <div class="col-lg-2"> <span class="badge badge-success p-2">$ 300</span> </div> <div class="col-lg-10 text-right"> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star"></i></span> <span><i class="fas fa-star-half-alt"></i></span><br> </div> </div> <hr> </div> <div class="col-lg-12 section-detail"> <p class="ml-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><hr> </div> <div class="col-lg-12 pb-2"> <div class="row"> <div class="col-lg-6"> <a href="#" class="btn btn-danger btn-block btn-sm">Book Now</a> </div> <div class="col-lg-6"> <a href="#" class="btn btn-info btn-block btn-sm">Apply For Rent</a> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
body{ background-color: #f5f5f5; font-family: 'Roboto Condensed', sans-serif; } .main-section{ margin-top:20px; } .add-sens{ position: absolute; top:0px; right:50px; } .img-section{ overflow: hidden; } .img-section img{ overflow: hidden; width:100%; } .img-section img:hover{ opacity:0.6; transition: 0.5s; cursor: pointer; } .sectin-title h1{ font-weight:700; font-size:23px; color:#285A63; } .section-detail p{ color:#756d6d; letter-spacing: 1px; } .fa-star,.fa-star-half-alt{ color:#FEC00B; } .fa-star-half-alt{ margin-right: 10px; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post