This {Theme} has 2 versions of Product box
Default (no extra class needed)
Screenshoot
Product Box – Default version
HTML markup
|
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"> <a href="#"> <div class="ct-productImage"> <img src="assets/images/demo-content/productBox-5.jpg" alt="Product"> </div> <div class="ct-productDescription"> <h5 class="ct-fw-600 ct-u-marginBottom10">Developing Mobile Apps</h5> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean .</span> </div> </a> <div class="ct-productMeta"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="starrr" data-rating="4"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa-star-o fa"></i></div> </div> <div class="ct-u-displayTableCell"> <span class="ct-u-colorMotive">190$</span> <span class="ct-u-textLineThrough">290$</span> </div> <a href="#"> <div class="ct-u-displayTableCell"> 15 <i class="fa fa-user"></i> </div> </a> </div> </div> </div> |
Inline (ct-productBox–inline)
This style will set the image to the left and content on the right side.
Screenshoot
Product Box – Inline version
HTML markup
|
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 28 29 30 31 32 33 34 35 36 |
<div class="ct-productBox ct-productBox--inline ct-u-displayTable ct-u-marginBottom30"> <div class="ct-u-displayTableCell"> <div class="ct-productImage"> <a href="course-single.html"> <img src="assets/images/demo-content/product-inline1.jpg" alt="Product"> </a> </div> </div> <div class="ct-u-displayTableCell"> <div class="ct-productDescription"> <h5 class="ct-fw-600 ct-u-marginBottom10">Developing Mobile Apps</h5> <span> Lorem ipsum dolor sit amet, consectetuer adipiscing But I mu explain to you how all this mistaken idea of denouncing pleas ure and praising pain was born and I will give you a complete elit. Aenean . </span> </div> <div class="ct-productMeta"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="starrr" data-rating="4"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa-star-o fa"></i></div> </div> <div class="ct-u-displayTableCell"> <span class="ct-u-colorMotive">190$</span> <span class="ct-u-textLineThrough">290$</span> </div> <div class="ct-u-displayTableCell"> <a href="#"> 15 <i class="fa fa-user"></i> </a> </div> </div> </div> </div> </div> |