Hello readers, today i am going to learn how to create E-commerce Product Card UI design using HTML and CSS. You easily create this product card design using HTML & CSS by follow these tutorials and steps. You will build this awesome Product card design by just following this video tutorial or these steps which i given bellow. In addition, common HTML and CSS programming codes have been used. It is designed in a completely modern way.
Some information about this Product Card Design
This Product Card design, which uses beautiful colors & image has gained the best of beauty. there middle of the web page show on box. there have image with background color and under content about product card with button. normaly on the box show image with background color and content hide. when hover on the box then image small size with animation and background color box rotate with animation that is eye catching. hover on the box content show in the box.
Watch the video tutorial to create Product Card Design
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this design step by step. So you can learn how to make this beautiful Product Card design. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this login form. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Responsive Login Form Create using HTML & CSS
- Personal Portfolio Website using HTML & CSS
- Shiney Glass Social Media Icon Hover Effects
E-commerce Product Card | Source Codes
You have to create HTML and CSS File For this design. After creating these files just paste the following codes into your file.
First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Card Design</title>
<!----css custom file link-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="imgBx">
<img src="./image/headphone.png">
</div>
<div class="contextBx">
<h3>Wireless Headphone</h3>
<h2 class="price">$245<small>.22</small></h2>
<a href="#" class="buy">Buy now</a>
</div>
</div>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700;800&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #09161d;
}
.card{
position: relative;
width: 320px;
height: 420px;
background: #122936;
border-radius: 20px;
overflow: hidden;
}
.card::before{
content: '';
position: absolute;
top: -50%;
width: 100%;
height: 100%;
background: #2196f3;
transform: skewY(345deg);
transition: 0.5s;
}
.card:hover::before{
top: -60%;
transform: skewY(390deg);
}
.card::after{
content: 'Urban';
position: absolute;
bottom: 0;
left: 0;
font-weight: 600;
font-size: 8em;
color: rgba(0, 0, 0, 0.1);
}
.imgBx{
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
z-index: 1;
}
.imgBx img{
max-width: 90%;
transition: 0.5s;
}
.card:hover .imgBx img{
max-width: 70%;
}
.contextBx{
position: relative;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 1;
}
.contextBx h3{
font-size: 18px;
color: #fff;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.contextBx .price{
font-size: 24px;
color: #fff;
font-weight: 500;
letter-spacing: 1px;
}
.contextBx .buy{
position: relative;
top: 200px;
opacity: 0;
padding: 10px 30px;
margin-top: 15px;
color: #fff;
text-decoration: none;
background: #2196f3;
border-radius: 30px;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.5s;
}
.contextBx .buy{
top:0;
opacity: 1;
}now you’ve successfully created this Product Card design using HTML and CSS. If your code does not work or faced any error/problem to comment down or contact us through the contact page.
