e-comm card
Sun Apr 17 2022 03:26:37 GMT+0000 (Coordinated Universal Time)
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>
Comments