Creating E-commerce Product Card using HTML CSS .



Hello developers, This HTML and CSS code is for a modern UI product card that displays two Nike sneakers. The code includes a container that wraps the two cards, each card having an image of the sneaker, the title, price, and a "View Details" button. The code also includes a "Buy Now" button at the bottom of each card and a footer that gives credit to the creator of the design. The CSS code defines the styles for the various elements of the product card, including the font, background color, size, position, and spacing of the card, the image, and the buttons. Overall, the product card design is simple and clean, with a focus on the image of the product and its title and price. The "View Details" and "Buy Now" buttons are prominently displayed, making it easy for the user to learn more about and purchase the product.

How to create a E-commerce Product Card using HTML 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 lang="en"> <head> <meta charset="UTF-8"> <title>Modern UI Product Card</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <div class="card"> <img src="https://cdn.pixabay.com/photo/2018/09/30/21/27/sneakers-3714720_1280.jpg" alt="" /> <div class="card-body"> <div class="row"> <div class="card-title"> <h4>Nike Sneaker<br>(Green)</h4> <h3>$120</h3> </div> <div class="view-btn"> <a href="">View Details</a> </div> </div> <hr /> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, dignissimos. </p> <div class="btn-group"> <button class="button-29" role="button">Buynow</button> </div> </div> </div> <div class="card"> <img src="https://cdn.pixabay.com/photo/2019/10/01/19/42/basketball-4519198__480.jpg" alt="" /> <div class="card-body"> <div class="row"> <div class="card-title"> <h4>Nike Sneaker<br>(Green)</h4> <h3>$120</h3> </div> <div class="view-btn"> <a href="">View Details</a> </div> </div> <hr /> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, dignissimos. </p> <div class="btn-group"> <button class="button-29" role="button">Buynow</button> </div> </div> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </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 make a file with a .css extension.


@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  
}

.container {
  width: 100%;
  height: 80vh;
  justify-content: center;
  align-items: center;
  display: flex;
}

.card {
  width: 300px;
  height: 420px;
  border-radius: 5px;
  margin:10px 20px;
  background-color: #fff;
  box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}
.card > *:not(img) {
  padding: 5px 10px;
}

.card img {
  width: 90%;
  height: 180px;
  position: relative;
  margin:-50px 5% 0 5%;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.card-body {
  padding: 5px;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

.card-body p {
  color: #3d3d3d;
  margin-bottom: 20px;
  font-size: 14px;
}

.view-btn a {
  padding: 5px 15px;
  border: 1.5px solid #007bff;
  border-radius: 3px;
  text-decoration: none;
  color: #007bff;
}
.view-btn a:hover{
    color: #fff;
    background-color: #007bff;
}
.btn-group {
  display: flex;
}
.button-29 {
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
  border: 0;
  border-radius: 6px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: "JetBrains Mono",monospace;
  height: 48px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 18px;
  width: 100%;
}

.button-29:focus {
  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.button-29:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-29:active {
  box-shadow: #3c4fe0 0 3px 7px inset;
  transform: translateY(2px);
}

.credit a {
    text-decoration: none;
    color: #000;
    font-weight: 800;
  }
  
  .credit {
      color: #000;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
  }
We hope you would like this E-commerce Product Card using HTML CSS.

Thank you for reading our blog. If you face any problem in Creating a E-commerce Product Card using HTML CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

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.

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