horizontal card

PHOTO EMBED

Sun Feb 13 2022 06:15:24 GMT+0000 (UTC)

Saved by @developerchef #html #css #javascript

<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>
content_copyCOPY