Hello developers, today in this blog you'll learn to create a Responsive Product Card Design using HTML, CSS & JavaScript.
The Product card is used to display a picture or photo of a product with some information about the product. It makes someone to know the details of the product.In this blog (Responsive Product Card Design) on the right side of the webpage, there is a product name, price value, rating, some description about the product, some specification of the product like color, availability, category, shipping area, and shipping fee. There are two buttons which are named Add to cart and compare, that are used to collect and compare the products. There are some social media icons, to share this website with their neihgbours or friends.
And on the left side of the webpage, there is a image gallery of the product. There is a image at the top, which is followed by four small images, that are arranged horizontally. While clicking on any small image, that particular image will slide over and will be displayed in the gallery. The CSS box-shadow property has been used. The hover effect has been given to the social media icons, while hovering on any icon, color of the icon changes.
The source code of this Responsive Product Card Design is given below, if you want the source code of this program, you can copy it. You can use this Responsive Product Card Design code with your creativity and can take this product card to the next level.
Responsive Product Card Design [Source Code]
To make this website (Responsive Product Card Design), you need to create three files: an HTML file, a CSS file and a JavaScript. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
}
body{
line-height: 1.5;
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
.card-wrapper{
max-width: 1100px;
margin: 0 auto;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 12px;
background-color: #fff;
}
img{
width: 100%;
display: block;
}
.img-display{
overflow: hidden;
margin: 5px;
border-radius: 12px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.img-showcase{
display: flex;
width: 100%;
transition: all 0.5s ease;
border-radius: 12px;
}
.img-showcase img{
min-width: 100%;
}
.img-select{
display: flex;
}
.img-item{
margin: 0.3rem;
}
.img-item:nth-child(1),
.img-item:nth-child(2),
.img-item:nth-child(3){
margin-right: 0;
}
.img-item:hover{
opacity: 0.8;
}
.product-content{
padding: 2rem 1rem;
}
.product-title{
font-size: 3rem;
text-transform: capitalize;
font-weight: 700;
position: relative;
color: #12263a;
margin: 1rem 0;
margin-top: 130px;
}
.product-title::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 4px;
width: 80px;
background: #12263a;
}
.product-link{
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 0.9rem;
display: inline-block;
margin-bottom: 0.5rem;
background: #256eff;
color: #fff;
padding: 0 0.3rem;
transition: all 0.5s ease;
}
.product-link:hover{
opacity: 0.9;
}
.product-rating{
color: #ffc107;
}
.product-rating span{
font-weight: 600;
color: #252525;
}
.product-price{
margin: 1rem 0;
font-size: 1rem;
font-weight: 700;
}
.product-price span{
font-weight: 400;
}
.last-price span{
color: #f64749;
text-decoration: line-through;
}
.new-price span{
color: #256eff;
}
.product-detail h2{
text-transform: capitalize;
color: #12263a;
padding-bottom: 0.6rem;
}
.product-detail p{
font-size: 0.9rem;
padding: 0.3rem;
opacity: 0.8;
}
.product-detail ul{
margin: 1rem 0;
font-size: 0.9rem;
}
.product-detail ul li{
margin: 0;
list-style: none;
background: url(shoes_images/checked.png) left center no-repeat;
background-size: 18px;
padding-left: 1.7rem;
margin: 0.4rem 0;
font-weight: 600;
opacity: 0.9;
}
.product-detail ul li span{
font-weight: 400;
}
.purchase-info{
margin: 1.5rem 0;
}
.purchase-info input,
.purchase-info .btn{
border: 1.5px solid #ddd;
border-radius: 25px;
text-align: center;
padding: 0.45rem 0.8rem;
outline: 0;
margin-right: 0.2rem;
margin-bottom: 1rem;
}
.purchase-info input{
width: 60px;
}
.purchase-info .btn{
cursor: pointer;
color: #fff;
}
.purchase-info .btn:first-of-type{
background: #256eff;
}
.purchase-info .btn:last-of-type{
background: #f64749;
}
.purchase-info .btn:hover{
opacity: 0.9;
}
.social-links{
display: flex;
align-items: center;
}
.social-links a{
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: #0093E9;
border: 1px solid #000;
margin: 0 0.2rem;
border-radius: 50%;
text-decoration: none;
font-size: 0.8rem;
transition: all 0.5s ease;
}
.social-links a:hover{
background: #256eff;
border-color: transparent;
color: #fff;
}
@media screen and (min-width: 992px){
.card{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1.5rem;
}
.card-wrapper{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.product-imgs{
display: flex;
flex-direction: column;
justify-content: center;
}
.product-content{
padding-top: 0;
}
}
.credit{
text-align: center;
color: #000;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}
const imgs = document.querySelectorAll('.img-select a');
const imgBtns = [...imgs];
let imgId = 1;
imgBtns.forEach((imgItem) => {
imgItem.addEventListener('click', (event) => {
event.preventDefault();
imgId = imgItem.dataset.id;
slideImage();
});
});
function slideImage(){
const displayWidth = document.querySelector('.img-showcase img:first-child').clientWidth;
document.querySelector('.img-showcase').style.transform = `translateX(${- (imgId - 1) * displayWidth}px)`;
}
window.addEventListener('resize', slideImage);
Thank you for reading our blog. If you face any problem in creating this Responsive Product Card Design using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team