How To Create A Product Card Using HTML & CSS

Create A Product Card Using HTML & CSS

When you're browsing online E-commerce sites, you've probably seen those cards showcasing products. They typically show the product's name, image/picture, price, and any discounts available. It's easy to make these boxes using CSS on a website. These cards  make the website look good as well as give more info about the products in the limited space available on the page.

In this Blog, we’re going to create a product card with the product name a picture, and price, also shows detailed information along with "buy now" and "add to card" button. 

When we make a product card using HTML ,we usually start with a container that holds the product's picture and information .The image is put inside an "img" tag, while the product name and buttons are placed within a "div" or similar container element.

Here is the HTML Structure for product card:

    <div class="container">
      <div class="product-card">
        <div class="product-image">
          <!-- Add your image here -->
          <img src="product.png" alt="Product Image" />
        </div>
        <div class="product-details">
          <h2 class="product-name">Genuine Leather Bag</h2>
          <h4 class="product-price">$20</h4>
          <button class="add-to-cart-btn">Add to Cart</button>
          <button class="buy-btn">Buy Now</button>
        </div>
      </div>
    </div>

By Using CSS style the product card and its elements, such as font size, color, spacing, and alignment. This CSS code defines the appearance and layout of a product card. It styles the container, product image, name, price, and buttons, ensuring they have appropriate sizes, colors, and spacing. Additionally, it includes hover effects for the buttons to enhance user interaction.

Here is the CSS styles for product card:

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: cornflowerblue;
}

.container {
  margin: 0 auto;
  text-align: center;
}

.product-card {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ccc;
  padding: 10px;
  width: 300px;
  margin: 60px auto;
}

.product-image {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
  text-align: center;
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
}

.product-name {
  font-size: 24px;
  margin: 0;
  text-align: center;
}

.product-price {
  font-size: 20px;
  margin: 0;
  text-align: center;
}

.add-to-cart-btn,
.buy-btn {
  background-color: #ff5e6c;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.25s ease;
}

.add-to-cart-btn:hover,
.buy-btn:hover { 
  opacity: 0.8;
}

The Output/Result: