Simple Product Card using HTML and CSS

With every E-commerce website displaying the products is one of the very important feature, we can make a very simple Product Card using the Pure HTML and CSS only. This will help us to practice our HTML and CSS skills. This could be used as an exercise to excel our CSS Skills. In our previous post we created a simple Profile Card, today’s post is very similar to that Profile card but we change it to display our product card.

Product Cart HTML

First of all let’s create a very simple component of creating a product card using pure HTML. We are creating these few basic information required for the Product card,

• Product Image
• Product Name
• Product Price
• Product Description
• Add to cart button

Here is how we create a very simple HTML to display all above information.

<div class="product-card">
    <img src="https://via.placeholder.com/350x200" alt="Product Image" class="product-image">
    <div class="product-details">
      <h5 class="product-title">Product Name</h5>
      <p class="product-description">This is a short description of the product. It highlights key features in a few sentences.</p>
      <div class="product-price">$49.99</div>
      <button class="btn buy-btn">Add to Cart</button>
    </div>
  </div>Code language: JavaScript (javascript)

This will create the look which is something similar to as following image.

Creating a Card with Pure CSS

Now let’s just change the card with simple CSS. Here are the CSS Classes which we need to modify and here is how we are modifying it.

.product-card {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      max-width: 350px;
      margin: auto;
      overflow: hidden;
    }

 .product-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
Code language: CSS (css)

It will make the Product Card look like this.

Product Details CSS

Now we are going to change the Product descriptions CSS to properly format the Product information. This could be done with following simple CSS.

.product-details {
      padding: 15px;
    }
    .product-title {
      font-size: 1.25rem;
      font-weight: 600;
      color: #333;
    }

 .product-description {
      font-size: 0.9rem;
      color: #666;
      margin-bottom: 15px;
    }
    .product-price {
      font-size: 1.5rem;
      font-weight: 700;
      color: #1877f2;
      margin-bottom: 15px;
    }


Code language: CSS (css)

It will make our card like this.

Add to Cart Button CSS

Now that we have our product card ready let’s give it final touch by changing the CSS for the Add to Cart button. This is the CSS which is used to create a Add to Cart button for the .buy-btn class.

.buy-btn {
      background-color: #1877f2;
      color: white;
      border-radius: 5px;
      padding: 10px 20px;
      font-weight: bold;
      width: 100%;
    }Code language: CSS (css)