Real state

This bootstrap snippet called "Real state" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: real state

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container bootstrap snippet">
<div class="row">
    <div class="col-md-8">
        <div class="wp-block property list">
                <div class="wp-block-title">
                    <h3><a href="#">3015 Grand Avenue, CocoWalk</a></h3>
                </div>
                <div class="wp-block-body">
                    <div class="wp-block-img">
                        <a href="#">
                            <img src="https://lorempixel.com/300/300/nature/1/" alt="">
                        </a>
                    </div>
                    <div class="wp-block-content">
                        <small>10 days only</small>
                        <h4 class="content-title">Special Offer</h4>
                        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisg elitm Ut tincidunt purus iaculis ipsum dctum non dtum quam.</p>
                        <span class="pull-left">
                            <span class="price">$230</span> 
                            <span class="period">per month</span>
                        </span>
                        <span class="pull-right">
                        <span class="capacity">
                            <i class="fa fa-user"></i>
                            <i class="fa fa-user"></i>
                        </span>
                    </span></div>
                </div>
                <div class="wp-block-footer">
                    <ul class="aux-info">
                        <li><i class="fa fa-building"></i>2300<sup>2</sup> Feet</li>
                        <li><i class="fa fa-user"></i> 5 Bedrooms</li>
                        <li><i class="fa fa-tint"></i> 2 Bathrooms</li>
                        <li><i class="fa fa-car"></i> 3 Garages</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="wp-block property list">
                <div class="ribbon base"><span>Limited Offer</span></div>
                <div class="wp-block-title">
                    <h3><a href="#">3015 Grand Avenue, CocoWalk</a></h3>
                </div>
                <div class="wp-block-body">
                    <div class="wp-block-img">
                        <a href="#">
                            <img src="https://lorempixel.com/300/300/nature/2/" alt="">
                        </a>
                    </div>
                    <div class="wp-block-content">
                        <small>10 days only</small>
                        <h4 class="content-title">Special Offer</h4>
                        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisg elitm Ut tincidunt purus iaculis ipsum dctum non dtum quam.</p>
                        <span class="pull-left">
                            <span class="price">$230</span> 
                            <span class="period">per month</span>
                        </span>
                        <span class="pull-right">
                        <span class="capacity">
                            <i class="fa fa-user"></i>
                            <i class="fa fa-user"></i>
                            <i class="fa fa-user"></i>
                        </span>
                    </span></div>
                </div>
                <div class="wp-block-footer">
                    <ul class="aux-info">
                        <li><i class="fa fa-building"></i>2300<sup>2</sup> Feet</li>
                        <li><i class="fa fa-user"></i> 5 Bedrooms</li>
                        <li><i class="fa fa-tint"></i> 2 Bathrooms</li>
                        <li><i class="fa fa-car"></i> 3 Garages</li>
                    </ul>
                </div>
            </div>
        </div>
    </div> 
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

.wp-block.property.list {
  border: 1px solid #e0eded;
}

.wp-block {
  margin: 0 0 15px 0;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  position: relative;
  cursor: default;
  border-radius: 2px;
}

.wp-block.property.list .wp-block-title {
  padding: 15px 15px 0 15px;
}

.wp-block.property.list .wp-block-title h3 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
}

.wp-block .wp-block-body {
  padding: 15px;
}

.wp-block.property.list .wp-block-img {
  display: table-cell;
  width: 250px;
}

.wp-block.property.list .wp-block-img img {
  width: 100%;
}

.wp-block.property.list .wp-block-content .content-title {
  font-size: 20px;
  color: #3498db;
  margin-bottom: 5px;
}

.wp-block.property.list .wp-block-body .wp-block-content {
  display: table-cell;
  vertical-align: top;
  padding-left: 15px;
}

.wp-block.property.list .wp-block-content .description {
  padding-bottom: 10px;
  border-bottom: 1px solid #e0eded;
}

.wp-block.property.list .wp-block-footer ul.aux-info {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  background: #fcfcfc;
  border-top: 1px solid #e0eded;
}

.wp-block.property.list .wp-block-footer ul.aux-info li {
  display: table-cell;
  padding: 10px 15px;
  vertical-align: middle;
  border-right: 1px solid #e0eded;
}

.ribbon.base {
  background: #3498db;
  color: #fff;
  border-right: 5px solid #8bc4ea;
}

.ribbon {
  position: absolute;
  top: 20px;
  right: -5px;
  padding: 15px;
}

.base {
  background: #3498db;
  color: #fff !important;
}

.ribbon:before, .ribbon:after {
  content: '';
  position: absolute;
  left: -9px;
  border-left: 10px solid transparent;
}

.ribbon:before {
  top: 0;
}

.ribbon.base:before {
  border-top: 27px solid #3498db;
}

.ribbon.base:after {
  border-bottom: 27px solid #3498db;
}

.ribbon:after {
  bottom: 0;
}
                                    

Similar snippets

Bootstrap snippet Real Estates Property Detail

Real Estates Property Detail

View

Bootstrap snippet Real State Property List

Real State Property List

View

Bootstrap snippet Real State Property Column

Real State Property Column

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: May 10th 2015, 00:52

Views: 3.2K

Rated 5/5 based on 3 reviews