Create a product card using HTML and CSS

Create A Product Card Using HTML & CSS

In this blog, We are going to create a product card using HTML and CSS.

Creating a product card for an e-commerce website or an online store.
This product card typically displays the product’s image, title, and price, and two buttons Add to Cart and View. The Add to Cart the button allows users to add the product to their cart, while the Viewbutton usually takes them to a separate page that provides more information about the product, such as its features, specifications, and reviews.

The HTML code for a product card typically includes a container element that wraps around the product’s image and details. The image is usually contained within an img tag, while the product title and buttons are typically placed inside a div or other container element.

Here is the code of the HTML elements:

<div class="container">
  <div class="product-card">
    <div class="product-image">
      <!-- Add your image here -->
      <img src="product.jpg" alt="Product Image" />
    </div>
    <div class="product-details">
      <h2 class="product-title">Awesome</h2>
      <h4 class="product-price">$10</h4>
      <button class="add-to-cart-btn">Add to Cart</button>
      <button class="view-btn">View</button>
    </div>
  </div>
</div>

The CSS is then used to style the product card and its elements, such as font size, color, spacing, and alignment.

Here is the code of the CSS styles:

body {
    font-family: sans-serif;
    background-color: cornflowerblue;
}

.container {
    margin: 0px auto 0px 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-left: auto;
    margin-right: auto;
    margin-top: 60px;
}

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

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

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

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

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

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

The Output/Result:

Product Card

Overall, creating a product card is an essential part of building an e-commerce website or online store, as it helps customers quickly and easily view and interact with the products on offer.

Thank you for taking the time to read this blog about the basics of the creating the product card using html and css. I hope that you found the information presented here useful and informative.

If you have any questions or comments about the information presented in this blog, please feel free to reach out. Thank you again for reading!

Support my passion for sharing development knowledge by making a donation to Buy Me a Coffee. Your contribution helps me create valuable content and resources. Thank you for your support!