Example of a product card

-20%
Still life of vegetables
$200 $160
In stock: 25 pcs.
★★★★☆ (4.5)
-20%
Still life of vegetables
$200 $160
In stock: 25 pcs.
★★★★☆ (4.5)
HTML, CSS code of adaptive two product cards

<div class="product-container">
<div class="product-card">
  <div class="discount">-20%</div>
  <img src="product-image.jpg" alt="Product Photography" class="product-image"/>
  <div class="product-details">
    <p class="product-name">Product Name</p>
    <div class="price">
      <span class="old-price">$200</span>
      <span class="new-price">$160</span>
    </div>
    <div class="availability">In stock: 25 pcs.</div>
    <div class="rating">
      ★★★★☆ (4.5)
    </div>
    <button class="buy-button">Add Buy</button>
  </div>
</div>
<!-- HTML -->
<div class="product-container">
<div class="product-card">
  <div class="discount">-20%</div>
  <img src="product-image.jpg" alt="Product Photography" class="product-image"/>
  <div class="product-details">
    <p class="product-name">Product Name</p>
    <div class="price">
      <span class="old-price">$200</span>
      <span class="new-price">$160</span>
    </div>
    <div class="availability">In stock: 25 pcs.</div>
    <div class="rating">
      ★★★★☆ (4.5)
    </div>
    <button class="buy-button">Add to Cart</button>
  </div>
</div>
<style>
/* CSS */
.product-container {
  display: flex;
  flex-wrap: wrap; /* Adaptive behavior */
  justify-content: space-between; /* Width distribution */
  gap: 20px; /* Padding between cards */
}
.product-card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  font-family: Arial, sans-serif;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.discount {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background-color: #ff5050;
  color: #fff;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 4px;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-details {
  padding: 15px;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

.price {
  margin: 10px 0;
}

.old-price {
  text-decoration: line-through;
  color: #888;
  margin-right: 10px;
}

.new-price {
  color: #e63946;
  font-size: 20px;
  font-weight: bold;
}

  .availability {
  margin: 10px 0;
  font-size: 16px;
  color: #28a745;
  font-weight: bold;
}
  
.rating {
  color: #ffc107;
  margin: 10px 0;
}

.buy-button {
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.buy-button:hover {
  background-color: #218838;
}
  /* Media query for mobile devices */
@media (max-width: 768px) {
  .product-card {
    width: 100%; /* One card per line */
  }
}
  </style>