Product Card in HTML and CSS
In this blog post, I am going to give you free source code that you can use to create a Product Card in HTML CSS. A product card is one of the most basic and yet required factors when it comes to any eCommerce website or project display.
This article will help you in designing a fully responsive and appealing product card, which you can use in your website.
Features
The product card that I am providing comes with several great features that make it easy to use and compatible with any type of website:
- Fully Responsive Design: The product card is also adaptive, so it is optimized to be viewed on both large, desktop screens and small, mobile screens.
- Cross-Browser Compatibility: This code is optimized for the modern browsers including chrome, Firefox, safari and edge.
- Customizable: The major advantages are that it is not difficult to change the colours, fonts and even images to fit the style of the website.
- CMS Integration: The code is easy to implement in all content management systems like the WordPress, Joomla, and other systems with HTML coded interfaces.
Technologies Used
Here are the programming languages and technologies used to create the Product Card:
- HTML
- CSS
Video Preview
Below is the video preview of the Product Card, so you can have a visual understanding of how it works:
Steps to Build Card
Follow these simple steps to build your own Product Card:
- Create a Project Folder: Firstly, user have to make a new folder which should be placed on the desktop and it has to be called product-card-project.
- Create an Images Folder: As seen earlier, within the project folder, another sub-folder should be created and it should be named images. This is where you will be placing your product images.
- Create the HTML File: Create a new file named index.html. This will consist of the framework to the product card.
- Create the CSS File: Create a new file and name it style.css
After you have completed the above steps of organizing the system and creating a project folder, you are ready to go for coding part.
To implement code you may need VS Code Installation.
HTML
Here is the HTML code for your index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Responsive product card</title>
</head>
<body>
<div class="container">
<div class="card">
<img src="images/visionpro.png" alt="" class="card__img">
<div class="card__data">
<h1 class="card__title">Apple Vision Pro</h1>
<span class="card__preci">$99</span>
<p class="card__description">Apple Vision Pro — the ultimate augmented reality headset.</p>
<a href="#" class="card__button">Buy Now</a>
</div>
</div>
</div>
</body>
</html>CSS
Here is the complete code for style.css file to style the card.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
*, ::before, ::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-size: 1rem;
}
h1, p {
margin: 0;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #212122;
}
.card {
width: 320px;
height: 400px;
background-color: #ffffff;
border-radius: 1rem;
padding: 4rem 2rem 0;
color: #2c2c2c;
overflow-y: hidden;
box-shadow: 0 0px 15px rgba(245, 241, 241, 0.3); /* Added shadow */
}
.card:hover {
box-shadow: 0 0px 10px rgba(245, 241, 241, 0.8); /* Added shadow */
}
.card__img {
position: absolute;
width: 260px;
filter: drop-shadow(5px 10px 15px rgba(8, 9, 13, 0.8));
}
.card__data {
transform: translateY(13.2rem);
text-align: center;
}
.card__title {
font-size: 1.5rem;
color: #252525;
margin-bottom: 0.5rem;
}
.card__preci {
display: inline-block;
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 1.25rem;
}
.card__description {
font-size: 0.875rem;
text-align: initial;
margin-bottom: 1.25rem;
opacity: 0;
}
.card__button {
display: block;
width: max-content;
padding: 0.7rem 2rem;
background-color: #252525; /* first-color */
color: #E9EAEC; /* white-color */
border-radius: 0.5rem;
font-weight: 600;
transition: 0.2s;
opacity: 0;
box-shadow: 0 18px 40px -12px rgba(41, 41, 40, 0.4);
}
.card__button:hover {
box-shadow: 0 18px 40px -12px rgba(41, 41, 40, 0.9);
}
.card__img,
.card__data,
.card__title,
.card__preci,
.card__description {
transition: 0.5s;
}
.card:hover .card__img {
transform: translate(-1.5rem, -9.5rem) rotate(-20deg);
}
.card:hover .card__data {
transform: translateY(4.8rem);
}
.card:hover .card__title {
transform: translateX(-2.3rem);
margin-bottom: 0;
}
.card:hover .card__preci {
transform: translateX(-6.8rem);
}
.card:hover .card__description,
.card:hover .card__button {
transition-delay: 0.2s;
opacity: 1;
}Download Source Code
Here I am providing you the HTML, CSS source code for Product Card absolutely for free. It becomes clear that there are no such things as copyrights and you can download the code, images and files without any restrictions.
Conclusion
This Product Card in HTML, CSS can be easily added in any website whether it is developed in WordPress, Joomla or even Custom html frameworks. The source code is recommended to use it in any project because it is a free code.
If you have any problem when using the product card please leave a comment and I will be pleased to offer assistance. Also, any information you provide will be highly appreciated!
