Product Card Using HTML and CSS

0



























Hello Developers, Learning Robo provides a dynamic and eye-catching product card snippet to display your details at a glance. This product card snippet is exactly how it looks in HTML and CSS. A product card snippet shows the name of your product along with an image at the top of the card to give a good first impression of your product. You can also add a short description of your product further down the page. At the bottom of the page, you can use the "Add to cart" option to add your product to the cart. With CSS you can add hover effects and a responsive design. The product card snippet is interactive and can be displayed on multiple devices. It is fully responsive, so you can display your product information on your desktop, laptop, tablet or smartphone. By using this product card snippet in HTML and CSS format, you’re not only sharing your information, but you’re also demonstrating your dedication to professionalism and contemporary web design. Impress the world with this creative and informative product card and make a connection. Note: CSS is a piece of code that is stored in a separate file that is connected to the HTML file. The transform property is used in this snippet. If you want to change it, you can do so in the CSS file  @keyframes spin  transform: rotate();

How to make Product Card Using 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"> <img src="https://freepngimg.com/thumb/pizza/46-pizza-png-image-thumb.png" alt="Profile Image"> </div> <div class="cardin2"> <h2>PIZZA</h2> <h6>Size : Large</h6> <p>Savor the perfect slice of Italy with our classic Margherita pizza recipe, featuring fresh basil, ripe tomatoes, and creamy mozzarella.</p> <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 top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);  
}
.card{
    display: flex;
    flex-direction:column;
    align-items:center;
    border-radius: 10px;
    width:300px;
    height:450px;
    background-color:#262626;
    color:#fff;
    padding: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;
    flex-direction:column;
    align-items: center;
    border-radius: 10px;
    width:100%;
    height:210px;
}
.cardin1 img{
    width: 200px;
    height:200px;
    border-radius: 5px;
    object-fit:cover;
    filter: drop-shadow(0px 0px 15px #000000);
    animation-name: spin;
    animation-duration: 15000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin{ 
    from{ 
        transform: rotate(0deg); 
    } 
    to{ 
      transform: rotate(360deg); 
    }
}
.cardin2 h2{
    margin:10px 0px 0px 0px;
    font-family: 'Play', sans-serif;
    font-size: 29px;
}
.cardin2 h6{
    margin:2px 0px 10px 0px;
    font-size:10px;
}
.cardin2{
    padding:10px;
    display: flex;
    flex-direction:column;
    justify-content:end;
    border-radius: 10px;
    height:220px;
}
.cardin2 p{
    margin:0px;
    font-size:14px;
}
.cardin2 button{
    margin:10px 0px;
    border:none;
    padding:15px 15px;
    background-color:#2a5298;
    border-radius:10px;
    font-size:16px;
    transition:.5s;
    color: #ddd;
}
.cardin2 button:hover{
    transform: scale(1.05);
    cursor: pointer;
    color:#fff;
}
@media only screen and (max-width: 630px){
    .card{
        width:90%;
    }
}
.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 Product Card Using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Product Card Using 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