e-comm card

PHOTO EMBED

Sun Apr 17 2022 03:26:37 GMT+0000 (UTC)

Saved by @realsantosm #css

<div class="card">
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge">
    <button class="btn icon--btn icon--badge">
        <i class="far fa-heart" aria-hidden="true"></i>
    </button>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge">
    <button class="btn icon--btn icon--badge">
        <i class="fas fa-times" aria-hidden="true"></i>
    </button>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge--text">
    <span class="badge--text badge--new">New</span>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge--text card--disabled">
    <span class="badge--text badge--sold">Sold out</span>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
<div class="card card--badge--text">
    <span class="badge--text badge--sold">Sold out</span>
    <div class="card--img--container">
        <img src="https://rukminim1.flixcart.com/image/660/792/k3t21zk0/shirt/g/j/g/m-wish0119-wrogn-original-imafmtz8cr8gkavz.jpeg?q=50" alt="Man in Blue Suit" class="img--res" />
    </div>
    <div class="card--content">
        <div class="card--title">Stylish Blue Shirt</div>
        <div class="card--manufacturer">By LP fashion</div>
        <div class="card--review--container">
            <div class="card--review--star">
                4.2
                <i class="fas fa-star" aria-hidden="true"></i>
            </div>
            <div class="card--review--number">(256)</div>
        </div>
        <div class="card--price--container">
            <div class="actual--price">₹600</div>
            <div class="strike--price">₹1200</div>
            <div class="offer--percentage">(50%off)</div>
        </div>
    </div>
    <div class="card--btn">
        <button class="btn btn--primary w-100">Add to cart</button>
    </div>
</div>
content_copyCOPY