Beautiful Bootstrap 4 product card
A simple HTML CSS style product card for a website.
Super
0
813
A beautiful example of a product card code. CSS HTML style. There are all necessary attributes.
Color, price, photo, discount, like, size.
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Snippet - GoSNippets</title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'>
<style>body {
background-color: #eee
}
.container {
width: 900px
}
.card {
background-color: #fff;
border: none;
border-radius: 10px;
width: 190px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.image-container {
position: relative
}
.thumbnail-image {
border-radius: 10px !important
}
.discount {
background-color: red;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 4px;
padding-right: 4px;
font-size: 10px;
border-radius: 6px;
color: #fff
}
.wishlist {
height: 25px;
width: 25px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.first {
position: absolute;
width: 100%;
padding: 9px
}
.dress-name {
font-size: 13px;
font-weight: bold;
width: 75%
}
.new-price {
font-size: 13px;
font-weight: bold;
color: red
}
.old-price {
font-size: 8px;
font-weight: bold;
color: grey
}
.btn {
width: 14px;
height: 14px;
border-radius: 50%;
padding: 3px
}
.creme {
background-color: #fff;
border: 2px solid grey
}
.creme:hover {
border: 3px solid grey
}
.creme:focus {
background-color: grey
}
.red {
background-color: #fff;
border: 2px solid red
}
.red:hover {
border: 3px solid red
}
.red:focus {
background-color: red
}
.blue {
background-color: #fff;
border: 2px solid #40C4FF
}
.blue:hover {
border: 3px solid #40C4FF
}
.blue:focus {
background-color: #40C4FF
}
.darkblue {
background-color: #fff;
border: 2px solid #01579B
}
.darkblue:hover {
border: 3px solid #01579B
}
.darkblue:focus {
background-color: #01579B
}
.yellow {
background-color: #fff;
border: 2px solid #FFCA28
}
.yellow:hover {
border-radius: 3px solid #FFCA28
}
.yellow:focus {
background-color: #FFCA28
}
.item-size {
width: 15px;
height: 15px;
border-radius: 50%;
background: #fff;
border: 1px solid grey;
color: grey;
font-size: 10px;
text-align: center;
align-items: center;
display: flex;
justify-content: center
}
.rating-star {
font-size: 10px !important
}
.rating-number {
font-size: 10px;
color: grey
}
.buy {
font-size: 12px;
color: purple;
font-weight: 500
}
.voutchers {
background-color: #fff;
border: none;
border-radius: 10px;
width: 190px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
overflow: hidden
}
.voutcher-divider {
display: flex
}
.voutcher-left {
width: 60%
}
.voutcher-name {
color: grey;
font-size: 9px;
font-weight: 500
}
.voutcher-code {
color: red;
font-size: 11px;
font-weight: bold
}
.voutcher-right {
width: 40%;
background-color: purple;
color: #fff
}
.discount-percent {
font-size: 12px;
font-weight: bold;
position: relative;
top: 5px
}
.off {
font-size: 14px;
position: relative;
bottom: 5px
}</style>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js'></script>
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js'></script>
</head>
<body oncontextmenu='return false' class='snippet-body'>
<div class="container mt-5">
<div class="row">
<div class="col-md-3">
<div class="card">
<div class="image-container">
<div class="first">
<div class="d-flex justify-content-between align-items-center"> <span class="discount">-25%</span> <span class="wishlist"><i class="fa fa-heart-o"></i></span> </div>
</div> <img src="https://i.imgur.com/8JIWpnw.jpg" class="img-fluid rounded thumbnail-image">
</div>
<div class="product-detail-container p-2">
<div class="d-flex justify-content-between align-items-center">
<h5 class="dress-name">White traditional long dress</h5>
<div class="d-flex flex-column mb-2"> <span class="new-price">$3.99</span> <small class="old-price text-right">$5.99</small> </div>
</div>
<div class="d-flex justify-content-between align-items-center pt-1">
<div class="color-select d-flex "> <input type="button" name="grey" class="btn creme"> <input type="button" name="red" class="btn red ml-2"> <input type="button" name="blue" class="btn blue ml-2"> </div>
<div class="d-flex "> <span class="item-size mr-2 btn" type="button">S</span> <span class="item-size mr-2 btn" type="button">M</span> <span class="item-size btn" type="button">L</span> </div>
</div>
<div class="d-flex justify-content-between align-items-center pt-1">
<div> <i class="fa fa-star-o rating-star"></i> <span class="rating-number">4.8</span> </div> <span class="buy">BUY +</span>
</div>
</div>
</div>
<div class="mt-3">
<div class="card voutchers">
<div class="voutcher-divider">
<div class="voutcher-left text-center"> <span class="voutcher-name">Monday Happy</span>
<h5 class="voutcher-code">#MONHPY</h5>
</div>
<div class="voutcher-right text-center border-left">
<h5 class="discount-percent">20%</h5> <span class="off">Off</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="image-container">
<div class="first">
<div class="d-flex justify-content-between align-items-center"> <span class="discount">-25%</span> <span class="wishlist"><i class="fa fa-heart-o"></i></span> </div>
</div> <img src="https://i.imgur.com/PtepOpe.jpg" class="img-fluid rounded thumbnail-image">
</div>
<div class="product-detail-container p-2">
<div class="d-flex justify-content-between align-items-center">
<h5 class="dress-name">Long sleeve denim jacket</h5>
<div class="d-flex flex-column mb-2"> <span class="new-price">$3.99</span> <small class="old-price text-right">$5.99</small> </div>
</div>
<div class="d-flex justify-content-between align-items-center pt-1">
<div class="color-select d-flex "> <input type="button" name="grey" class="btn creme"> <input type="button" name="darkblue" class="btn darkblue ml-2"> </div>
<div class="d-flex "> <span class="item-size mr-2 btn" type="button">S</span> <span class="item-size mr-2 btn" type="button">M</span> <span class="item-size btn" type="button">L</span> </div>
</div>
<div class="d-flex justify-content-between align-items-center pt-1">
<div> <i class="fa fa-star-o rating-star"></i> <span class="rating-number">4.8</span> </div> <span class="buy">BUY +</span>
</div>
</div>
</div>
<div class="mt-3">
<div class="card voutchers">
<div class="voutcher-divider">
<div class="voutcher-left text-center"> <span class="voutcher-name">Payday Surprise</span>
<h5 class="voutcher-code">#SRPSPYDY</h5>
</div>
<div class="voutcher-right text-center border-left">
<h5 class="discount-percent">20%</h5> <span class="off">Off</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="image-container">
<div class="first">
<div class="d-flex justify-content-between align-items-center"> <span class="discount">-25%</span> <span class="wishlist"><i class="fa fa-heart-o"></i></span> </div>
</div> <img src="https://i.imgur.com/ePJKs8Q.jpg" class="img-fluid rounded thumbnail-image">
</div>
<div class="product-detail-container p-2">
<div class="d-flex justify-content-between ">
<h5 class="dress-name">Hush Puppies</h5>
<div class="d-flex flex-column mb-2"> <span class="new-price">$3.99</span> <small class="old-price text-right">$5.99</small> </div>
</div>
<div class="d-flex justify-content-between align-items-center pt-1">
<div class="color-select d-flex "> <input type="button" name="grey" class="btn creme"> <input type="button" name="yellow" class="btn yellow ml-2"> <input type="button" name="blue" class="btn blue ml-2"> </div>
<div class="d-flex "> <span class="item-size mr-2 btn" type="button">S</span> <span class="item-size mr-2 btn" type="button">M</span> <span class="item-size btn" type="button">L</span> </div>
</div>
<div class="d-flex justify-content-between align-items-center pt-1">
<div> <i class="fa fa-star-o rating-star"></i> <span class="rating-number">4.2</span> </div> <span class="buy">BUY +</span>
</div>
</div>
</div>
<div class="mt-3">
<div class="card voutchers">
<div class="voutcher-divider">
<div class="voutcher-left text-center"> <span class="voutcher-name">First order</span>
<h5 class="voutcher-code">#HPYFRST</h5>
</div>
<div class="voutcher-right text-center border-left">
<h5 class="discount-percent">20%</h5> <span class="off">Off</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="image-container">
<div class="first">
<div class="d-flex justify-content-between align-items-center"> <span class="discount">-25%</span> <span class="wishlist"><i class="fa fa-heart-o"></i></span> </div>
</div> <img src="https://i.imgur.com/snffLH3.jpg" class="img-fluid rounded thumbnail-image">
</div>
<div class="product-detail-container p-2">
<div class="d-flex justify-content-between ">
<h5 class="dress-name">Athens skirt </h5>
<div class="d-flex flex-column mb-2"> <span class="new-price">$3.99</span> <small class="old-price text-right">$5.99</small> </div>
</div>
<div class="d-flex justify-content-between align-items-center pt-1">
<div class="color-select d-flex "> <input type="button" name="grey" class="btn creme"> <input type="button" name="red" class="btn red ml-2"> <input type="button" name="blue" class="btn blue ml-2"> </div>
<div class="d-flex "> <span class="item-size mr-2 btn" type="button">S</span> <span class="item-size mr-2 btn" type="button">M</span> <span class="item-size btn" type="button">L</span> </div>
</div>
<div class="d-flex justify-content-between align-items-center pt-1">
<div> <i class="fa fa-star-o rating-star"></i> <span class="rating-number">3.8</span> </div> <span class="buy">BUY +</span>
</div>
</div>
</div>
<div class="mt-3">
<div class="card voutchers">
<div class="voutcher-divider">
<div class="voutcher-left text-center"> <span class="voutcher-name">Vegetarian Food</span>
<h5 class="voutcher-code">#VEGANLOVE</h5>
</div>
<div class="voutcher-right text-center border-left">
<h5 class="discount-percent">20%</h5> <span class="off">Off</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript'></script>
</body>
</html>link to the author's website
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
