Product Card Design using HTML & CSS

Product Card Design using HTML & CSS

Hello developers, today in this blog you'll learn to create a Product Card Design using HTML & CSS.

The Product card is used to display a picture or photo of a product that is linked in some way to the related products. It makes someone know the details of the product.

In this blog (Product Card Design) on the right side of the webpage, there is the product name, price value, rating, and description of that particular product. There are also two buttons which are named Add to cart and buy now that are used to collect and buy the product. And on the left side of the webpage, there is a product image.

The CSS box-shadow property has been used. The hover effect has been given to the buttons, while hovering on the buttons the background color of the button changes with box-shadow.

The source code of this Product Card Design is given below, if you want the source code of this program, you can copy it. You can use this Product Card Design code with your creativity and can take this product card to the next level.

Product Card Design [Source Code]

To make this website (Product Card Design), you need to create two files: an HTML file and 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 lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Product Card Design || Learning Robo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel ="stylesheet" href = "style.css"> </head> <body> <div class="wrapper"> <div class="product-img"> <img src="https://cdn.pixabay.com/photo/2016/06/17/00/30/clock-1462392__340.jpg"> </div> <div class="product-info"> <div class="product-text"> <h1>Watch</h1> <h4>Targeted To Your Wrist</h4> <p class="price">$1500</p> <div class="rating"> <span><i class="fa fa-star"></i></span> <span><i class="fa fa-star"></i></span> <span><i class="fa fa-star"></i></span> <span><i class="fa fa-star"></i></span> <span><i class="fa fa-star-half-alt"></i></span>   <span>(250 rating)</span> </div> <p class="desc"> A watch is a watch that offers extra functionality and connectivity on top of the features offered by standard watches also handle some extra bells and whistles. </p> </div> <div class="product-price-btn"> <button type="button" class="add-cart-btn"> <i class="fa fa-shopping-cart"></i>Add to cart </button> <button type ="button" class="buy-now-btn"> <i class="fa fa-wallet"></i>Buy Now </button> </div> </div> </div> <div class="credit">Made with  <span style="color:white">❤</span>  by <a href="https://www.learningrobo.com/"> Learning Robo</a></div> </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=Roboto:wght@400;500&display=swap');
*{
  box-sizing: border-box;
}
body{
    font-family: arial;
    background: #202124;
    color: #000;
}
.wrapper {
  height: 500px;
  margin:auto;
  width: 850px;
  margin-top: 5%;
  border-radius: 7px;
  box-shadow: 0 20px 50px rgba(255,255,255,0.15);
  background: rgba(255, 255, 255, 0.75);
  border: 2px solid #3c1361;
    z-index: 10;
}
img{
  float: left;
  width: 380px;
  height: 496px;
  border-radius: 7px 0 0 7px;
}
.product-info {
  float: right;
  height: 500px;
  width: 450px;
  padding: 20px;
}
h1,h4,p{
  display: flex;
  justify-content: center;
}
.rating{
    display:flex;
    justify-content: center;
}
.rating span{
  font-size:20px;
}

.price{
  font-size: 24px;
  font-weight: 600;
}

.desc{
  line-height: 1.6;
  font-size: 18px;
  width: 400px;
}
.product-price-btn {
  display:flex;
  justify-content: space-around;
  padding: 20px;
}
.product-price-btn button {
  padding:18px;
  border: transparent;
  border-radius: 20px;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
}

.product-price-btn button i{
    margin-right: 8px;
}
.add-cart-btn{
    background-color: #000;
    color: #fff;
}
.add-cart-btn:hover,.buy-now-btn:hover{
    background-color: #fff;
    color: #000;
    box-shadow:0 0 5px grey;
}
.buy-now-btn{
    background-color: #000;
    color:#fff;
}
.credit{
    width: 100%;
    display: flex;
    justify-content: center;
    color: #fff;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
    text-decoration: none;
    color:#fff;
    font-weight: bold;
} 
We hope you would like this Product Card Design using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Product Card Design using HTML & CSS, 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