<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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-sm-12 clearfix"> <div class="hr-link"> <hr class="mBtm-50" data-symbol="FEATURED DEALS"> <div class="view-all"> <a href="index.html"> VIEW ALL </a> </div> </div> </div> </div> </div> <div class="container"> <div class="col-sm-4"> <div class="deal-entry orange"> <div class="image"> <a href="#" target="_blank" title="#"> <img src="https://images.pexels.com/photos/532079/pexels-photo-532079.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="#" class="img-responsive"> </a> <span class="bought"> <i class="ti-tag"> </i> 169 </span> </div> <!-- /.image --> <div class="title"> <a href="#" target="_blank" title="ATLETIKA 3 mēnešu abonements"> SS Pvt. Crane Services </a> </div> <div class="entry-content"> <div class="prices clearfix"> <div class="procent"> -65% </div> <div class="price"> <i class="ti-money"> </i> <b> 5000/day </b> </div> <div class="old-price"> <span> <i class="ti-money"> </i> 171,00 </span> </div> </div> <p> Immerse Yourself in the Magic of Cambodia with a Luxurious Eight Day/Seven Night Escape at Two of the World’s Finest Hotels! </p> </div> <!--/.entry content --> <footer class="info_bar clearfix"> <ul class="unstyled list-inline row"> <li class="time col-sm-7 col-xs-6 col-lg-8"> <i class="ti-timer"> </i> <b> 8 </b> d. <b> 20 </b> st. <b> 58 </b> min. </li> <li class="info_link col-sm-5 col-xs-6 col-lg-4"> <a href="#" class="btn btn-block btn-default btn-raised btn-sm"> CONTACT NOW </a> </li> </ul> </footer> </div> </div> <div class="col-sm-4"> <div class="deal-entry orange"> <div class="image"> <a href="#" target="_blank" title="#"> <img src="https://images.pexels.com/photos/532079/pexels-photo-532079.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="#" class="img-responsive"> </a> <span class="bought"> <i class="ti-tag"> </i> 169 </span> </div> <!-- /.image --> <div class="title"> <a href="#" target="_blank" title="ATLETIKA 3 mēnešu abonements"> SS Pvt. Crane Services </a> </div> <div class="entry-content"> <div class="prices clearfix"> <div class="procent"> -65% </div> <div class="price"> <i class="ti-money"> </i> <b> 5000/day </b> </div> <div class="old-price"> <span> <i class="ti-money"> </i> 171,00 </span> </div> </div> <p> Immerse Yourself in the Magic of Cambodia with a Luxurious Eight Day/Seven Night Escape at Two of the World’s Finest Hotels! </p> </div> <!--/.entry content --> <footer class="info_bar clearfix"> <ul class="unstyled list-inline row"> <li class="time col-sm-7 col-xs-6 col-lg-8"> <i class="ti-timer"> </i> <b> 8 </b> d. <b> 20 </b> st. <b> 58 </b> min. </li> <li class="info_link col-sm-5 col-xs-6 col-lg-4"> <a href="#" class="btn btn-block btn-default btn-raised btn-sm"> CONTACT NOW </a> </li> </ul> </footer> </div> </div> <div class="col-sm-4"> <div class="deal-entry orange"> <div class="image"> <a href="#" target="_blank" title="#"> <img src="https://images.pexels.com/photos/532079/pexels-photo-532079.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="#" class="img-responsive"> </a> <span class="bought"> <i class="ti-tag"> </i> 169 </span> </div> <!-- /.image --> <div class="title"> <a href="#" target="_blank" title="ATLETIKA 3 mēnešu abonements"> SS Pvt. Crane Services </a> </div> <div class="entry-content"> <div class="prices clearfix"> <div class="procent"> -65% </div> <div class="price"> <i class="ti-money"> </i> <b> 5000/day </b> </div> <div class="old-price"> <span> <i class="ti-money"> </i> 171,00 </span> </div> </div> <p> Immerse Yourself in the Magic of Cambodia with a Luxurious Eight Day/Seven Night Escape at Two of the World’s Finest Hotels! </p> </div> <!--/.entry content --> <footer class="info_bar clearfix"> <ul class="unstyled list-inline row"> <li class="time col-sm-7 col-xs-6 col-lg-8"> <i class="ti-timer"> </i> <b> 8 </b> d. <b> 20 </b> st. <b> 58 </b> min. </li> <li class="info_link col-sm-5 col-xs-6 col-lg-4"> <a href="#" class="btn btn-block btn-default btn-raised btn-sm"> CONTACT NOW </a> </li> </ul> </footer> </div> </div> </div>

.deal-entry { padding: 0; float: left; width: 100%; background-color: #FFF; zoom: 1; margin-bottom: 30px; position: relative; box-shadow: 0 2px 3px -1px #DCDCDC; transition: all .3s; } .deal-entry .image { margin: 0; max-width: 100%; display: block; position: relative; } a { color: #aacc4e; } .deal-entry.orange .bought, .deal-entry.orange .offer-discount { background-color: #ff5722; } .deal-entry .bought { position: absolute; bottom: 0; right: 0; z-index: 1; color: #FFF; padding: 2px 15px; font-size: 13px; } .deal-entry.orange .title { border-left: 5px solid #FF5722; } .deal-entry .title { padding: 20px 15px; margin: 0; color: #000; font-size: 18px; line-height: 24px; font-weight: 700; text-shadow: 0 1px 0 #FFF; overflow: hidden; } .deal-entry .title a { color: #272630; text-decoration: none; } .entry-content { padding: 10px 15px; overflow: hidden; } .deal-entry .prices { padding: 0 0 10px; margin: 0; display: block; } .deal-entry.orange .procent { color: #FF0623; } .deal-entry .procent { padding: 0; margin: 0; font-size: 29px; line-height: 30px; float: left; color: #ff5722; font-weight: 500; } .deal-entry .price { padding: 0; margin: 0; color: #333; font-size: 14px; line-height: 30px; float: right; } .deal-entry .price b { color: #333; font-size: 32px; font-size: 29px; } .deal-entry .old-price { padding: 0 8px 0 0; margin: 0; color: #B4B4B4; line-height: 30px; text-align: right; float: right; } .deal-entry .old-price span { font-size: 14px; text-decoration: line-through; } .deal-entry .prices { padding: 0 0 10px; margin: 0; display: block; } p { margin: 0 0 1.75em; } .entry-content { padding: 10px 15px; overflow: hidden; } .deal-entry .info_bar { border-top: 1px solid #ededed; font-size: 12px; padding: 10px 5px; /* background: #f7f8fa; */ } .deal-entry .info_bar ul { margin: 0; padding: 0; width: 100%; justify-content: flex-start; display: flex; } .deal-entry .info_bar .time { padding: 5px 8px 0 5px; } .deal-entry .info_bar ul li { text-align: center; word-wrap: break-word; } .deal-entry .info_bar .info_link { text-align: center; } .deal-entry .info_bar .info_link .btn { font-size: 14px; text-transform: capitalize; } .deal-entry .info_bar ul { margin: 0; padding: 0; width: 100%; justify-content: flex-start; display: flex; } } .mBtm-50 { margin-bottom: 50px; } .hr-link .view-all { position: absolute; top: 35px; right: 15px; font-size: 12px; } div [data-symbol]:before { padding: 3px 0; border-top: 1px solid #ff5722; color: #000; content: attr(data-symbol); letter-spacing: 2px; font-weight: 600; font-size: 14px; font-family: Montserrat, Helvetica, Arial, sans-serif; position: absolute; left: 15px; /* top: -1px; */ }