<div class="card-horizontal"> <div class="card-horizontal-media"> <img class="responsive-img" src="/src/img/backpack1.jpg" alt="no img"> </div> <div class="d-flex flex-column p-1 gap-1 w-100-per"> <div class="card-body-header"> <h2 class="font-size-md m-0">Backpack</h2> <h class="font-size-sm color-gray-500">Grey & Black</h> <div class="d-flex flex-column font-weight-600"> <div class="d-flex gap-1"> <span>₹ 699 </span> <span class="text-decoration-linethrough"> ₹ 1398</span> </div> <div class="color-green-600">50% off</div> </div> </div> <button class="btn btn-add-cart btn-secondary w-100-per font-size-regular">Add to Cart</button> <button class="btn btn-add-cart btn-outline w-100-per font-size-regular">Remove From Wishlist</button> </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