We would like to share this concept for Ecommerce website product card items using html and css, javascript. Product card is important for Ecommerce website. One product card show to the all about the product details like price, size and colors.This product show product image and add cart icon and product name, product price. See the image
Code:
Html:
<div class="product-card">
<div class="badge">Best Seller</div>
<div class="product-tumb">
<img src="https://media.istockphoto.com/photos/unicorn-plush-toy-sitting-isolated-on-white-background-picture-id1314268502?b=1&k=20&m=1314268502&s=170667a&w=0&h=1xhVFZZHKwxaSVA1icOWVfuITE7jFGSBOU3Ud_aC0So=" alt="">
</div>
<div class="product-details">
<span class="product-catagory">Toys</span>
<h4><a href="">Unicorn Toys</a></h4>
<div class="product-bottom-details">
<div class="product-price">Rs. 250</div>
<div class="product-links">
<a href=""><i class="fa fa-heart"></i></a>
<a href=""><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
</div>
</div>
Css:
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
*
{
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body
{
font-family: 'Roboto', sans-serif;
}
a
{
text-decoration: none;
}
.product-card {
width: 380px;
position: relative;
box-shadow: 0 2px 7px #dfdfdf;
margin: 50px auto;
background: #fafafa;
}
.badge {
position: absolute;
left: 0;
top: 20px;
text-transform: uppercase;
font-size: 13px;
font-weight: 700;
background: red;
color: #fff;
padding: 3px 10px;
}
.product-tumb {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
padding: 50px;
background: #f0f0f0;
}
.product-tumb img {
max-width: 100%;
max-height: 100%;
}
.product-details {
padding: 30px;
}
.product-catagory {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: #ccc;
margin-bottom: 18px;
}
.product-details h4 a {
font-weight: 500;
display: block;
margin-bottom: 18px;
text-transform: uppercase;
color: #363636;
text-decoration: none;
transition: 0.3s;
}
.product-details h4 a:hover {
color: #fbb72c;
}
.product-details p {
font-size: 15px;
line-height: 22px;
margin-bottom: 18px;
color: #999;
}
.product-bottom-details {
overflow: hidden;
border-top: 1px solid #eee;
padding-top: 20px;
}
.product-bottom-details div {
float: left;
width: 50%;
}
.product-price {
font-size: 18px;
color: #fbb72c;
font-weight: 600;
}
.product-price small {
font-size: 80%;
font-weight: 400;
text-decoration: line-through;
display: inline-block;
margin-right: 5px;
}
.product-links {
text-align: right;
}
.product-links a {
display: inline-block;
margin-left: 5px;
color:purple;
transition: 0.3s;
font-size: 17px;
}
.product-links a:hover {
color: #fbb72c;
}
0 Comments