Cart menu
|
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 |
<div class="ct-cart-tag" data-placement="left"> <i class="fa fa-shopping-cart"></i> <div class="ct-cart-window"> <div class="ct-cart-product"><img src="assets/images/cart-sm.jpg" alt=""/></div> <div class="ct-cart-details"> <span class="h6 ct-u-fontType-2 ct-u-colorWhite">$1500</span> <div class="ct-raiting ct-u-colorWhite"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star ct-u-colorFaint"></i> <i class="fa fa-star ct-u-colorFaint"></i> </div> <span class="ct-u-colorWhite ct-u-colorFaint">Nemo enim ipsam</span> </div> <div class="ct-cart-total ct-u-marginTop30"> <div class="ct-u-displayTable ct-u-colorWhite"> <div class="ct-u-displayTableCell text-uppercase">Total</div> <div class="ct-u-displayTableCell ct-cart-total--price">$350</div> </div> </div> <div> <button class="btn btn-link btn-link--white ct-u-colorWhite"> <span>Go to Cart</span><i class="fa fa-angle-right"></i> </button> </div> </div> </div> |
CSS Classes:
ct-cart-tag: Base class for cart window.
ct-cart-window: It displays cart window.
ct-cart-product: Wrapper for product image.
ct-cart-details: Wrapper for Cart’s product content.
ct-cart-total: Total price for all products.
ct-cart-total–price: style for price.
ct-u-colorWhite: gives white color to component.
ct-u-colorFaint: Lowers component opacity.
|
1 2 3 4 5 6 |
.ct-u-displayTable{ display: table; } .ct-u-displayTableCell{ display: table-cell } |
fa, fa-star: font awesome classes used to display stars in ratings.