Responsive Product Cards design with HTML and CSS

0





























Hello Developers, Learning Robo’s product card snippet is a dynamic and eye-catching product card snippet that shows the information in an easy-to-understand format. This profile card snippet is exactly how it looks using HTML and CSS. A product card snippet displays the name of the product, accompanied by an image at the top of the card to give a positive impression of the product. In addition, a short description of the product can be added further down the page. The "Add to Cart" and "Add to Favourites" options can be used at the bottom of the page to add the product to the cart or mark it as a favourite. CSS can be used to add hover effects and a responsive design can be used. The product card snippets are interactive and can be displayed on multiple devices. They're fully responsive, so the product information can be displayed on a desktop, laptop, tablet or smartphone screen. With this HTML and CSS-supported product card snippet, you not only pass on information, but also set an example of your commitment to professionalism and modern web design. Make a statement and connect with people around the world with this innovative product card snippet. Note: CSS is a type of markup language that is embedded in a standalone file that is linked to the HTML file.

How to make Responsive Product Cards design with HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. 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> <title>Product Card UI design - learningrobo</title> <meta name="description" content="Product Card UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="product card,responsive,learningrobo.com,html & css projects,project"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="section1"> <div class="card"> <div class="cardin1"> <div class="cardin1c1"> <img src="https://cdn.pixabay.com/photo/2019/06/18/06/05/chair-4281517_1280.png" alt="Profile Image"> </div> <div class="cardin1c2"> <h2>Office Chair</h2> <h6>Color : Black</h6> <p>An office chair is a crucial piece of furniture designed to provide comfort and support during long hours of work. These chairs typically feature adjustable height, lumbar support, and ergonomic designs to ensure proper posture and reduce strain on the body. The seat and backrest are often padded with cushioning materials for added comfort. Office chairs come in various styles, including executive chairs, task chairs, and ergonomic options, allowing individuals to choose the one that best suits their needs and workspace aesthetics.</p> <br> <div class="star-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> </div> </div> </div> <div class="cardin2"> <button><i class="fa-solid fa-heart"></i> Add To Favorite</button> <button><i class="fa-solid fa-cart-shopping"></i> Add To Cart</button> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> <!--Check our website Regularly For New Snippets Post--> </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 make a file with a .css extension. 


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
*{
    box-sizing: border-box;
}
body{
    font-family: Arial, sans-serif;
    margin:0%;
}
.section1{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);  
}
.card{
    display: flex;
    flex-direction:column;
    align-items:center;
    border-radius: 10px;
    width:700px;
    height:460px;
    background-color:#262626;
    color:#fff;
    padding:10px;
    row-gap:10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.cardin1{
    padding:10px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    width:100%;
    height:350px;
    background-color: #343434;
}
.cardin1c1{
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    width:50%;
    height:350px;
}
.cardin1c1 .star-rating{
    font-size: 14px;
}
.cardin1c2 .star-rating .fas.fa-star{
    color: gold;
}
.cardin1c2 .star-rating .fas.fa-star-half-alt{
    color: gold; 
    border: none; 
}
.cardin1c2{
    display: flex;
    flex-direction:column;
    align-items:start;
    width:50%;
    height:350px;
}
.cardin1c1 img{
    width: 250px;
    height:330px;
    border-radius: 5px;
    object-fit:cover;
    filter: drop-shadow(0px 0px 15px #000000);
}
.cardin1c2 h2{
    margin:10px 0px 0px 0px;
    font-family: 'Play', sans-serif;
    font-size: 59px;
    color:#7babff
}
.cardin1c2 h6{
    margin:2px 0px 10px 0px;
    font-size:10px;
}
.cardin1c2 p{
    margin:0px;
    font-size:14px;
    color:#ddd;
}
.cardin2{
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    border-radius: 10px;
    width:100%;
    height:80px;
}
.cardin2 button{
    margin:auto;
    border:none;
    padding:15px;
    background-color:#343434;
    border-radius:10px;
    font-size:16px;
    transition:.5s;
    color: #ddd;
    width:46%;
    cursor: pointer;
}
.cardin2 button:nth-child(1):hover{
    transform: scale(1.05);
    color:hotpink;
}
.cardin2 button:nth-child(2):hover{
      transform: scale(1.05);
      color:rgb(79, 173, 255);
}
@media only screen and (max-width: 630px){
    .section1{
        height: fit-content;
    }
    .card{
        margin-top:20px;
        width:90%;
        height:100%;
    }
    .cardin1{
        flex-direction: column;
        height:100%;
    }
    .cardin1c1{
        width:100%;
    }
    .cardin1c2 h2{
        font-size:30px;
    }
    .cardin1c2{
        width:100%;
    }
    .cardin2 button{
        font-size:12px;
        height:100%;
    }
}
.credit a{
    text-decoration: none;
    color: #fff;
    font-weight: 800;
}
.credit{
    color: #fff;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Responsive Product Cards design with HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Responsive Product Cards design with HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome