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

This is the HTML code for this bootstrap snippet

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

<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>

This is the CSS code for this bootstrap snippet

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

.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;
}
                                    

Information about this bootstrap 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