Responsive Product Card Design using HTML, CSS & JavaScript

Responsive Product Card Design using HTML, CSS & JavaScript

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.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Product Page || Learning Robo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" /> </head> <body> <div class = "card-wrapper"> <div class = "card"> <!-- card left --> <div class = "product-imgs"> <div class = "img-display"> <div class = "img-showcase"> <img src = "https://cdn.pixabay.com/photo/2016/09/02/11/10/boots-1638873__340.jpg" alt = "shoe image"> <img src = "https://cdn.pixabay.com/photo/2016/01/19/18/06/brown-shoes-1150071__340.jpg" alt = "shoe image"> <img src = "https://cdn.pixabay.com/photo/2016/12/10/16/57/shoes-1897708__340.jpg" alt = "shoe image"> <img src = "https://cdn.pixabay.com/photo/2014/12/31/11/41/shoes-584850__340.jpg" alt = "shoe image"> </div> </div> <div class = "img-select"> <div class = "img-item"> <a href = "#" data-id = "1"> <img src = "https://cdn.pixabay.com/photo/2016/09/02/11/10/boots-1638873__340.jpg" alt = "shoe image"> </a> </div> <div class = "img-item"> <a href = "#" data-id = "2"> <img src = "https://cdn.pixabay.com/photo/2016/01/19/18/06/brown-shoes-1150071__340.jpg" alt = "shoe image"> </a> </div> <div class = "img-item"> <a href = "#" data-id = "3"> <img src = "https://cdn.pixabay.com/photo/2016/12/10/16/57/shoes-1897708__340.jpg" alt = "shoe image"> </a> </div> <div class = "img-item"> <a href = "#" data-id = "4"> <img src = "https://cdn.pixabay.com/photo/2014/12/31/11/41/shoes-584850__340.jpg" alt = "shoe image"> </a> </div> </div> </div> <!-- card right --> <div class = "product-content"> <h2 class = "product-title">puma shoes</h2> <a href = "#" class = "product-link">visit puma store</a> <div class = "product-rating"> <i class = "fas fa-star"></i> <i class = "fas fa-star"></i> <i class = "fas fa-star"></i> <i class = "fas fa-star"></i> <i class = "fas fa-star-half-alt"></i> <span>4.6(29)</span> </div> <div class = "product-price"> <p class = "last-price">Old Price: <span>2570.00</span></p> <p class = "new-price">New Price: <span>2490.00 </span></p> </div> <div class = "product-detail"> <h2>about this item: </h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo eveniet veniam tempora fuga tenetur placeat sapiente architecto illum soluta consequuntur, aspernatur quidem at sequi ipsa!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, perferendis eius. Dignissimos, labore suscipit. Unde.</p> <ul> <li>Color: <span>Black</span></li> <li>Available: <span>in stock</span></li> <li>Category: <span>Shoes</span></li> <li>Shipping Area: <span>All over the world</span></li> <li>Shipping Fee: <span>Free</span></li> </ul> </div> <div class = "purchase-info"> <input type = "number" min = "0" value = "1"> <button type = "button" class = "btn"> Add to Cart <i class = "fas fa-shopping-cart"></i> </button> <button type = "button" class = "btn">Compare</button> </div> <div class = "social-links"> <p>Share At: </p> <a href = "#"> <i class = "fab fa-facebook-f"></i> </a> <a href = "#"> <i class = "fab fa-twitter"></i> </a> <a href = "#"> <i class = "fab fa-instagram"></i> </a> <a href = "#"> <i class = "fab fa-whatsapp"></i> </a> <a href = "#"> <i class = "fab fa-pinterest"></i> </a> </div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </div> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page.To make the page attractive create a CSS file with the name style.css and remember that you have to create a file with a .css 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;
  } 
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


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);
We hope you would like this Responsive Product Card Design using HTML, CSS & JavaScript.

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.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome