<div class="card card__horizontal"> <img class="card__img card__img__horizontal" src="../../assets/camera.jpg" alt="img" /> <div class="card__details__horizontal"> <div class="card__details"> <h3 class="card__title">Canon D6500</h3> <small class="card__sub-title">Canon D6500 super zoom camera</small> </div> <div class="card__price-section card__horizontal__price"> <strong class="selling__price">₹ 20000</strong> <small class="original__price">₹ 40000</small> <p class="card__discount">(50% off)</p> </div> <div class="card__quantity"> <p> Quantity: <button type="button" class="btn--float card__quantity-btn"> <i class="ri-subtract-line"></i> </button> <input type="text" class="quantity-value" value="1" /> <button type="button" class="btn--float card__quantity-btn"> <i class="ri-add-line"></i> </button> </p> </div> <div class="card__horizontal__buttons"> <button type="button" class="btn card__btn card__btn__horizontal"> <i class="ri-shopping-cart-2-fill card__icon"></i> Add to cart </button> <button type="button" class="btn card__btn__horizontal"> <i class="ri-heart-fill card__icon card__icon__horizontal"></i> Wishlist </button> </div> </div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter