Product box

• Posted: September 6, 2015
• / By: Magda
• / In:

Product box – type 1

 

HTML markup

CSS

<div class="media ct-productBox ct-productBox--type1"> <div class="media-left"> <img class="media-object" src="../assets/images/demo-content/product-1.jpg" alt="Image"> </div> <div class="media-body"> <h5 class="media-heading">French</h5> <p class="ct-productBox-description">1 Croissant, Butter, Jam or <br>Honey</p> <span class="ct-productBox-price">4, 50 &euro;</span> </div> </div>

1 2 3 4 5 6 7 8 9 10

<div class="media ct-productBox ct-productBox--type1">   <div class="media-left">    <img class="media-object" src="../assets/images/demo-content/product-1.jpg" alt="Image">   </div>   <div class="media-body">    <h5 class="media-heading">French</h5>    <p class="ct-productBox-description">1 Croissant, Butter, Jam or <br>Honey</p>    <span class="ct-productBox-price">4, 50 &euro;</span>    </div> </div>

 

Screenshot

Product box 1

Product box – type 2

 

HTML markup

CSS

<div class="ct-productBox ct-productBox--type2 ct-u-paddingBottom40"> <div class="row"> <div class="col-md-8"> <img src="../assets/images/demo-content/product-7.jpg" class="center-block ct-u-left--sm ct-u-marginBottom30" alt="Image"/> </div> <div class="col-md-4"> <div class="ct-productBox-content"> <div class="ct-productBox-header"> <h4 class="text-capitalize ct-productBox-title">Single Room</h4> <p>A comfortable and quiet room facing the inner courtyard.</p> <span class="ct-hr ct-hr--type1 ct-u-marginTop20 ct-u-marginBottom20" data-background="#f7f7f7">Line break</span> </div> <div class="ct-productBox-price"> <span>from</span> <p>25.00&euro; / night</p> </div> <ul class="list-unstyled ct-list--type2 ct-list--striped ct-icon--motive ct-u-paddingTop25"> <li><i class="fa fa-check-circle-o"></i>Shower / WC</li> <li><i class="fa fa-check-circle-o"></i>TV</li> <li><i class="fa fa-check-circle-o"></i>Breakfast buffet incl.</li> <li><i class="fa fa-check-circle-o"></i>Parking sticker incl.</li> </ul> <a href="#section8" class="btn btn-primary ct-u-marginTop20 ct-js-btnScroll">Book now</a> </div> </div> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<div class="ct-productBox ct-productBox--type2 ct-u-paddingBottom40">   <div class="row">    <div class="col-md-8">     <img src="../assets/images/demo-content/product-7.jpg" class="center-block ct-u-left--sm ct-u-marginBottom30" alt="Image"/>    </div>    <div class="col-md-4">     <div class="ct-productBox-content">      <div class="ct-productBox-header">       <h4 class="text-capitalize ct-productBox-title">Single Room</h4>       <p>A comfortable and quiet room facing the inner courtyard.</p>       <span class="ct-hr ct-hr--type1 ct-u-marginTop20 ct-u-marginBottom20" data-background="#f7f7f7">Line break</span>      </div>      <div class="ct-productBox-price">       <span>from</span>       <p>25.00&euro; / night</p>      </div>      <ul class="list-unstyled ct-list--type2 ct-list--striped ct-icon--motive ct-u-paddingTop25">       <li><i class="fa fa-check-circle-o"></i>Shower / WC</li>       <li><i class="fa fa-check-circle-o"></i>TV</li>       <li><i class="fa fa-check-circle-o"></i>Breakfast buffet incl.</li>       <li><i class="fa fa-check-circle-o"></i>Parking sticker incl.</li>      </ul>      <a href="#section8" class="btn btn-primary ct-u-marginTop20 ct-js-btnScroll">Book now</a>     </div>    </div>   </div> </div>

 

Screenshot

Product box 2