Build a Modern Product Card using HTML and CSS
Enhance your website's product display with an aesthetically pleasing and functional product card! In this comprehensive tutorial, we'll guide you through the creation of a sleek product card using HTML and CSS.
Also Read: Image Fold/Unfold Effect using HTML and CSS only | See Magic on Hover
From the card layout to interactive elements, this guide covers every aspect of designing an engaging product showcase.
HTML Structure
<div class="main-container">
<div class="card">
<a href="#">
<div class="thumbnail">
<img src="https://i.ibb.co/xzg6ThJ/img.jpg" alt="MacBook"></div>
<h3 class="title">Apple MacBook Pro</h3>
</a>
<div class="description">APPLE 2023 MacBook Pro Apple Max - (16 GB/1 TB SSD/macOS Ventura) ABCDSA/A
(12 Inch, Light Grey, 2 Kg)
</div>
<div class="rating">
<span class="stars">
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</span>
<span class="rating-count">9.2K Ratings</span>
</div>
<div class="prices">
<span class="d-price">₹ 1,09,999.00</span>
<span class="mrp">₹ 1,29,999.00</span>
</div>
<div class="btns">
<div class="cart-btn">
<span class="fas fa-shopping-cart"></span>Add to cart
</div>
<a href="#">
<button class="buy-btn">Buy Now</button>
</a>
</div>
</div>
</div>
The <div class="main-container"> serves as the main container, ensuring a centered display on the webpage. Inside it, the <div class="card"> encapsulates all the elements of our product card. The <a> tag wraps the product image and title, creating a clickable link.
The product thumbnail is represented by <div class="thumbnail">, containing an <img> element with the product image. The product title is structured using an <h3> tag with the class "title." The product description is housed within a <div class="description"> element.
Also Read: Star Rating System using HTML and CSS only
The star rating section consists of a <div class="rating"> containing star icons and a rating count. The prices section includes the discounted price (<span class="d-price">) and the Maximum Retail Price (<span class="mrp">). Action buttons for adding to the cart and buying now are placed inside "btns".
This well-organized HTML structure provides the necessary groundwork for the subsequent CSS styling. In the following sections, we'll delve into styling each component to achieve an elegant and functional product card.
CSS Styling
Now we have a solid HTML structure in place, it's time to bring our product card to life with stylish CSS. Let's go step by step, exploring the styling for each component to achieve an elegant and visually appealing design.
Overall Layout
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.css');
.main-container {
display: flex;
min-height: 100vh;
min-width: 380px;
align-items: center;
justify-content: center;
}
.card {
width: 380px;
display: flex;
position: relative;
border-radius: 12px;
flex-direction: column;
padding: 10px 10px 15px;
font-family: Arial, sans-serif;
border: 1px solid #272727;
background: rgb(255 255 255 / 4%);
}
Let's start by styling the overall layout of our product card. The use of flexbox and positioning will ensure a centered and cohesive design. #main-container employs flexbox to center the card both horizontally and vertically on the webpage.
The class card represents the styling for our product card. It defines the card width, sets border-radius for a rounded appearance, and applies a subtle border and background color for an elegant look.
Thumbnail Animation and other Styling
Next, let's add a subtle scaling effect to the product thumbnail when hovered.
a {
text-decoration: none;
}
.thumbnail {
overflow: hidden;
border-radius: 10px;
}
.thumbnail img {
width: 100%;
transition: .3s;
}
.thumbnail:hover img {
transform: scale(1.1);
}
.title {
text-align: center;
margin: 12px 0;
color: white;
}
.description {
font-size: 12px;
color: rgb(159, 159, 159);
letter-spacing: .2px;
line-height: 15px;
}
.rating {
margin-top: 8px;
user-select: none;
}
.rating .stars {
font-size: 22px;
margin-right: 5px;
display: inline-flex;
color: rgb(231, 151, 3);
-webkit-text-stroke: 1px rgb(111 111 111 / 27%);
}
.stars span:last-child {
color: transparent;
}
.rating-count {
color: rgb(142, 142, 142);
letter-spacing: .5px;
font-size: 10px;
}
The class 'thumbnail' styles the container for our product image. It applies border-radius for a rounded look and hides any overflowing content. The <img> inside thumbnail is set to transition over 0.3 seconds. On hover, it scales up by 10%, providing a smooth and visually pleasing effect.
Note: Here star rating is used to show an instance, you have to use JS logic to show the correct rating.
Price Display and Action Buttons
.prices {
margin-top: 6px;
letter-spacing: .5px;
}
.mrp {
color: rgb(252, 133, 133);
text-decoration: line-through;
font-size: 12px;
white-space: nowrap;
}
.d-price {
color: rgb(65, 235, 156);
font-size: 18px;
white-space: nowrap;
margin-right: 10px;
}
.btns {
display: flex;
gap: 10px;
color: rgb(232, 232, 232);
font-weight: bold;
font-size: 14px;
margin-top: 25px;
flex-wrap: wrap;
}
.cart-btn:hover,
.buy-btn:hover {
filter: brightness(0.8);
}
.cart-btn {
background: rgb(15, 69, 110);
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
}
.buy-btn {
background: rgb(24, 156, 57);
border: none;
color: white;
padding: 6px 10px;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
}
.cart-btn .fas {
margin-right: 10px;
}The cart-btn and buy-btn styles the "Add to Cart" and "Buy Now" buttons with distinct colors, padding, border-radius, and bold text. Hover effects are added to both buttons for visual feedback, and a slight brightness reduction is applied during hover.
As we conclude this tutorial, you'll have gained valuable insights into creating an elegant and functional product card using HTML and CSS. Elevate your website's product showcase with this stylish card layout, and provide users with an engaging shopping experience. Stay tuned for more web design tutorials and tips.
