<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="productbox">
<div class="absolute-aligned">
<img src="http://paritet.profit.in.net/media/UA/img/05649.jpg" class="img-responsive" />
</div>
<span class="round-tag">-15%</span>
<p class="text-justify name-text">The place to be.</p>
<div class="row">
<div class="price col-md-12">
<strong>SCU</strong><span class="pull-right">112233</span>
</div>
<div class="price col-md-12">
<strong>Price</strong><span class="pull-right price-text-color">19.99€</span>
</div>
</div>
<div class="productprice">
<button id="add_d3af2e19a4e14c3029d5698e718dd210" class="btn btn-outline btn-danger btn-sm btn-block btnAddAction btn-primary " onclick="cartAction('add','d3af2e19a4e14c3029d5698e718dd210','000000209')" type="button">
<i class="fa fa-shopping-cart fa-fw"></i>Купить</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="productbox">
<div class="absolute-aligned">
<img src="http://lorempixel.com/460/250/" class="img-responsive">
</div>
<span class="round-tag">-10%</span>
<!-- <div class="producttitle">Twitter, Inc.</div> -->
<p class="text-justify name-text">Sample Product Sample Product Sample Product</p>
<div class="row">
<div class="price col-md-12">
<strong>SCU</strong><span class="pull-right">112233</span>
</div>
<div class="price col-md-12">
<strong>Price</strong><span class="pull-right price-text-color">19.99€</span>
</div>
</div>
<div class="productprice">
<button id="add_d3af2e19a4e14c3029d5698e718dd210" class="btn btn-outline btn-danger btn-sm btn-block btnAddAction btn-primary " onclick="cartAction('add','d3af2e19a4e14c3029d5698e718dd210','000000209')" type="button">
<i class="fa fa-shopping-cart fa-fw"></i>Купить</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="productbox">
<img src="http://lorempixel.com/460/250/" class="img-responsive">
<div class="producttitle">Twitter, Inc.</div>
<p class="text-justify">The place to be.</p>
<div class="row">
<div class="price col-md-12">
<strong>SCU</strong><span class="pull-right">112233</span>
</div>
<div class="price col-md-12">
<strong>Price</strong><span class="pull-right price-text-color">19.99€</span>
</div>
</div>
<div class="productprice">
<button id="add_d3af2e19a4e14c3029d5698e718dd210" class="btn btn-outline btn-danger btn-sm btn-block btnAddAction btn-primary " onclick="cartAction('add','d3af2e19a4e14c3029d5698e718dd210','000000209')" type="button">
<i class="fa fa-shopping-cart fa-fw"></i>Купить</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="productbox">
<img src="http://lorempixel.com/460/250/" class="img-responsive">
<div class="producttitle">Twitter, Inc.</div>
<p class="text-justify">The place to be.</p>
<div class="row">
<div class="price col-md-12">
<strong>SCU</strong><span class="pull-right">112233</span>
</div>
<div class="price col-md-12">
<strong>Price</strong><span class="pull-right price-text-color">19.99€</span>
</div>
</div>
<div class="productprice">
<button id="add_d3af2e19a4e14c3029d5698e718dd210" class="btn btn-outline btn-danger btn-sm btn-block btnAddAction btn-primary " onclick="cartAction('add','d3af2e19a4e14c3029d5698e718dd210','000000209')" type="button">
<i class="fa fa-shopping-cart fa-fw"></i>Купить</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="productbox">
<img src="http://lorempixel.com/460/250/" class="img-responsive">
<div class="producttitle">Twitter, Inc.</div>
<p class="text-justify">The place to be.</p>
<div class="row">
<div class="price col-md-12">
<strong>SCU</strong><span class="pull-right">112233</span>
</div>
<div class="price col-md-12">
<strong>Price</strong><span class="pull-right price-text-color">19.99€</span>
</div>
</div>
<div class="productprice">
<button id="add_d3af2e19a4e14c3029d5698e718dd210" class="btn btn-outline btn-danger btn-sm btn-block btnAddAction btn-primary " onclick="cartAction('add','d3af2e19a4e14c3029d5698e718dd210','000000209')" type="button">
<i class="fa fa-shopping-cart fa-fw"></i>Купить</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="productbox">
<img src="http://lorempixel.com/460/250/" class="img-responsive">
<div class="producttitle">Twitter, Inc.</div>
<p class="text-justify">The place to be.</p>
<div class="row">
<div class="price col-md-12">
<strong>SCU</strong><span class="pull-right">112233</span>
</div>
<div class="price col-md-12">
<strong>Price</strong><span class="pull-right price-text-color">19.99€</span>
</div>
</div>
<div class="productprice">
<button id="add_d3af2e19a4e14c3029d5698e718dd210" class="btn btn-outline btn-danger btn-sm btn-block btnAddAction btn-primary " onclick="cartAction('add','d3af2e19a4e14c3029d5698e718dd210','000000209')" type="button">
<i class="fa fa-shopping-cart fa-fw"></i>Купить</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="productbox">
<img src="http://lorempixel.com/460/250/" class="img-responsive">
<div class="producttitle">Twitter, Inc.</div>
<p class="text-justify">The place to be.</p>
<div class="row">
<div class="price col-md-12">
<strong>SCU</strong><span class="pull-right">112233</span>
</div>
<div class="price col-md-12">
<strong>Price</strong><span class="pull-right price-text-color">19.99€</span>
</div>
</div>
<div class="productprice">
<button id="add_d3af2e19a4e14c3029d5698e718dd210" class="btn btn-outline btn-danger btn-sm btn-block btnAddAction btn-primary " onclick="cartAction('add','d3af2e19a4e14c3029d5698e718dd210','000000209')" type="button">
<i class="fa fa-shopping-cart fa-fw"></i>Купить</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="productbox">
<img src="http://lorempixel.com/460/250/" class="img-responsive">
<div class="producttitle">Twitter, Inc.</div>
<p class="text-justify">The place to be.</p>
<div class="row">
<div class="price col-md-12">
<strong>SCU</strong><span class="pull-right">112233</span>
</div>
<div class="price col-md-12">
<strong>Price</strong><span class="pull-right price-text-color">19.99€</span>
</div>
</div>
<div class="productprice">
<button id="add_d3af2e19a4e14c3029d5698e718dd210" class="btn btn-outline btn-danger btn-sm btn-block btnAddAction btn-primary " onclick="cartAction('add','d3af2e19a4e14c3029d5698e718dd210','000000209')" type="button">
<i class="fa fa-shopping-cart fa-fw"></i>Купить</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="productbox">
<img src="http://lorempixel.com/460/250/" class="img-responsive">
<div class="producttitle">Twitter, Inc.</div>
<p class="text-justify">The place to be.</p>
<div class="row">
<div class="price col-md-12">
<strong>SCU</strong><span class="pull-right">112233</span>
</div>
<div class="price col-md-12">
<strong>Price</strong><span class="pull-right price-text-color">19.99€</span>
</div>
</div>
<div class="productprice">
<button id="add_d3af2e19a4e14c3029d5698e718dd210" class="btn btn-outline btn-danger btn-sm btn-block btnAddAction btn-primary " onclick="cartAction('add','d3af2e19a4e14c3029d5698e718dd210','000000209')" type="button">
<i class="fa fa-shopping-cart fa-fw"></i>Купить</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="productbox">
<img src="http://lorempixel.com/460/250/" class="img-responsive">
<div class="producttitle">Twitter, Inc.</div>
<p class="text-justify">The place to be.</p>
<div class="row">
<div class="price col-md-12">
<strong>SCU</strong><span class="pull-right">112233</span>
</div>
<div class="price col-md-12">
<strong>Price</strong><span class="pull-right price-text-color">19.99€</span>
</div>
</div>
<div class="productprice">
<button id="add_d3af2e19a4e14c3029d5698e718dd210" class="btn btn-outline btn-danger btn-sm btn-block btnAddAction btn-primary " onclick="cartAction('add','d3af2e19a4e14c3029d5698e718dd210','000000209')" type="button">
<i class="fa fa-shopping-cart fa-fw"></i>Купить</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="productbox">
<img src="http://lorempixel.com/460/250/" class="img-responsive">
<div class="producttitle">Twitter, Inc.</div>
<p class="text-justify">The place to be.</p>
<div class="row">
<div class="price col-md-12">
<strong>SCU</strong><span class="pull-right">112233</span>
</div>
<div class="price col-md-12">
<strong>Price</strong><span class="pull-right price-text-color">19.99€</span>
</div>
</div>
<div class="productprice">
<button id="add_d3af2e19a4e14c3029d5698e718dd210" class="btn btn-outline btn-danger btn-sm btn-block btnAddAction btn-primary " onclick="cartAction('add','d3af2e19a4e14c3029d5698e718dd210','000000209')" type="button">
<i class="fa fa-shopping-cart fa-fw"></i>Купить</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="productbox">
<img src="http://lorempixel.com/460/250/" class="img-responsive">
<div class="producttitle">Twitter, Inc.</div>
<p class="text-justify">The place to be.</p>
<div class="row">
<div class="price col-md-12">
<strong>SCU</strong><span class="pull-right">112233</span>
</div>
<div class="price col-md-12">
<strong>Price</strong><span class="pull-right price-text-color">19.99€</span>
</div>
</div>
<div class="productprice">
<button id="add_d3af2e19a4e14c3029d5698e718dd210" class="btn btn-outline btn-danger btn-sm btn-block btnAddAction btn-primary " onclick="cartAction('add','d3af2e19a4e14c3029d5698e718dd210','000000209')" type="button">
<i class="fa fa-shopping-cart fa-fw"></i>Купить</button>
</div>
</div>
</div>
</div>
</div>
.productbox {
background-color:#ffffff;
padding:10px;
margin:15px 0;
border: 1px solid #cfcfcf;
-moz-box-shadow: 2px 2px 4px 0px #cfcfcf;
-webkit-box-shadow: 2px 2px 4px 0px #cfcfcf;
-o-box-shadow: 2px 2px 4px 0px #cfcfcf;
box-shadow: 2px 2px 4px 0px #cfcfcf;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=134, Strength=4);
}
.productbox:hover {
box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 5px 2px;
background: rgba(200, 200, 200, 0.1);
transition: 0.5s;
}
.producttitle {
font-weight:bold;
font-size:1.2em;
padding:5px 0 5px 0;
}
.producttext {
}
.name-text {
min-height: 50px;
}
.productprice {
border-top:1px solid #dadada;
padding-top:5px;
}
.pricetext {
font-weight:bold;
font-size:1.4em;
}
.absolute-aligned {
position: relative;
}
.absolute-aligned img {
min-height: 130px;
}
.round-tag{
width: 60px;
height: 60px;
border-radius: 50% 50% 50% 0;
border: 4px solid #FFF;
background: #37A12B;
position: absolute;
bottom: 160px;
padding: 15px 6px;
font-size: 17px;
color: #FFF;
font-weight: bold;
}
