Bootstrap Offer List

This free bootstrap template renders a standard offers layout. There is a total of three offers in the template. Each one has hover effects, which can increase the size of the focused offer.

buy

Standard listing

Buy items on normal prices. No discounts available for this listing.

50%

Discount listing

Buy now - 50% off.

hot

Hot Offer

Best selling for this period.

Example template:

 <div class="container">
 <div class="row">
 <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
 <div class="listing listing-default">
 <div class="shape">
 <div class="shape-text">buy</div>
 </div>
 <div class="listing-content">

 <h3 class="lead">Standard listing</h3>
 <p>Buy items on normal prices. No discounts available for this listing.</p>
 </div>
 </div>>
 </div>
 <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
 <div class="listing listing-radius listing-success">
 <div class="shape">
 <div class="shape-text">50%</div>
 </div>
 <div class="listing-content">
 <h3 class="lead">Discount listing</h3>
 <p>Buy now - 50% off.</p>
 </div>
 </div>
 </div>
 <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
 <div class="listing listing-danger">
 <div class="shape">
 <div class="shape-text">hot</div>
 </div>
 <div class="listing-content">
 <h3 class="lead">Hot Offer</h3>
 <p>Best selling for this period.</p>
 </div>
 </div>
 </div>
 </div>
 </div>



<style>
.shape {
border-style: solid;
border-width: 0 70px 40px 0;
float: right;
height: 0px;
width: 0px;
-ms-transform: rotate(360deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
transform: rotate(360deg);

}
.listing {
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
margin: 15px 0;
overflow: hidden;
}
 .listing:hover {
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: rotate scale(1.1);
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}
.shape {
border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
}
.listing-radius {
border-radius: 7px;
}
.listing-danger {
border-color: #d9534f;
}
.listing-danger .shape {
border-color: transparent #d9533f transparent transparent;
}
.listing-success {
border-color: #5cb85c;
}
.listing-success .shape {
border-color: transparent #5cb75c transparent transparent;
}
.listing-default {
border-color: #999999;
}
.listing-default .shape {
border-color: transparent #999999 transparent transparent;
}
.listing-primary {
border-color: #428bca;
}
.listing-primary .shape {
border-color: transparent #318bca transparent transparent;
}
.listing-info {
border-color: #5bc0de;
}

.listing-info .shape {
border-color: transparent #5bc0de transparent transparent;
}
.listing-warning {
border-color: #f0ad4e;
}
.listing-warning .shape {
border-color: transparent #f0ad4e transparent transparent;
}
.shape-text {
color: #fff;
font-size: 12px;
font-weight: bold;
position: relative;
right: -40px;
top: 2px;
white-space: nowrap;
-ms-transform: rotate(30deg); /* IE 9 */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
transform: rotate(30deg);

}
.listing-content {
padding: 0 20px 10px;
}
</style>