Hello readers, Today in this blog you’ll learn how to create a Creative Product Card UI Design using HTML CSS & JavaScript. Earlier I have shared a blog on how to create a Profile Card with Hover Animation using only HTML & CSS. But now I’m going to create an Awesome Product Card.
A product card used to display a picture of an item that linked in some way to related items, for example, products we sell or recipes. It allows someone to quickly recognize a particular item of interest to them from a group, for example in search results.
In this program (Creative Product Card UI Design), at first, on the webpage, there is only a product image but when you hover on that image then the options/customize container of that product appears with a sliding animation. In the product customize container, there is a product name, size numbers, price value, color options, and buttons. There are only three color options in this product and when you click on each color, the product image, background color, and the color of the customize container change according to your chosen color.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Creative Product Card UI Design).
Video Tutorial of Creative Product Card UI Design
In the video, you have seen how this product card change its color, product image, and background color when you clicked on the specific color option. You have also seen, at first, on the web page, there is only a product image and after hovering on the image then the customize container is shown from the bottom with a smooth sliding animation. This sliding animation is created using only HTML & CSS.
There I used jQuery also to change the product image, colors, and, background color according to the chosen color option/value. Generally, jQuery is the library of JavaScript and it helps to write fewer JavaScript codes. If you like this program (Creative Product Card UI Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
You might like this:
Creative Product Card UI Design [Source Codes]
To create this program (Creative Product Card UI Design). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, 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 these cards won’t appear. You’ve to download files from the given download button to use images also.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Awesome Product Card Design | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<div class="container">
<div class="image">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="">
</div>
<div class="card-content">
<div class="wrapper">
<div class="title">
Adidas Originals
</div>
<p>
Men's running tshirt
</p>
<span class="price">$29.99</span>
<div class="content size">
<div class="name size-name">
Size
</div>
<div class="size-value">
<span class="color">XS</span>
<span class="color">S</span>
<span class="active">M</span>
<span class="color">L</span>
<span class="color">XL</span>
</div>
</div>
<div class="content colour">
<div class="name colour-name">
Colour
</div>
<div class="colour-value">
<span class="white" data-color="lightgrey" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png"></span>
<span class="blue active" data-color="#456ABD" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png"></span>
<span class="yellow" data-color="#EAA523" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png"></span>
</div>
</div>
<div class="btns">
<button>Buy now</button>
<button>Add to cart</button>
</div>
</div>
</div>
</div>
<script>
$(".colour-value span").click(function(){
$(".colour-value span").removeClass("active");
$(this).addClass("active");
$("body").css("background", $(this).attr("data-color"));
$(".wrapper .price").css("color", $(this).attr("data-color"));
$(".size-value span.color").css("color", $(this).attr("data-color"));
$(".size-value span.active").css("background", $(this).attr("data-color"));
$(".image img").attr("src", $(this).attr("data-img"));
$(".btns button").css({
"background": $(this).attr("data-color"),
"border-color": $(this).attr("data-color")
});
});
</script>
</body>
</html>
Second, 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.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #456ABD;
width: 100%;
transition: background 0.3s ease;
}
.container{
position: relative;
height: 500px;
width: 380px;
background: #fff;
overflow: hidden;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.container:hover{
box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}
.container .image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.container .image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.container:hover .image img{
transform: scale(1.1);
}
.container .card-content{
position: relative;
height: 100%;
width: 100%;
}
.card-content .wrapper{
position: absolute;
bottom: -100%;
width: 100%;
background: #fff;
padding: 10px 25px;
box-shadow: -1px -1px 6px rgba(0,0,0,0.1);
transition: bottom 0.3s ease;
}
.container:hover .card-content .wrapper{
bottom: 0px;
}
.wrapper .title{
font-size: 22px;
font-weight: 500;
}
.wrapper p{
font-size: 17px;
color: grey;
}
.wrapper .price{
position: absolute;
top: 10px;
right: 30px;
font-size: 23px;
font-weight: 600;
color: #456ABD;
}
.wrapper .content{
margin: 10px 0;
}
.wrapper .content .name{
font-size: 15px;
text-transform: uppercase;
font-weight: 500;
}
.wrapper .content .size-value{
width: 50%;
display: flex;
margin: 5px 0;
justify-content: space-between;
}
.content .size-value span{
display: block;
height: 28px;
width: 28px;
text-align: center;
line-height: 28px;
border-radius: 50%;
font-size: 15px;
font-weight: 500;
cursor: pointer;
color: #456ABD;
}
.content .size-value span.active{
background: #456ABD;
color: #fff;
}
.content .colour-value{
width: 30%;
display: flex;
margin: 10px 0;
justify-content: space-between;
}
.content .colour-value span{
height: 18px;
width: 18px;
border-radius: 50%;
color: #fff;
cursor: pointer;
position: relative;
}
.content .colour-value span.white{
background: lightgrey;
}
.content .colour-value span.blue{
background: #456ABD;
}
.content .colour-value span.yellow{
background: #EAA523;
}
.content .colour-value span.active:after{
position: absolute;
content: "";
height: 26px;
width: 26px;
left: -4px;
top: -4px;
box-sizing: border-box;
border: 2px solid #456ABD;
border-radius: 50%;
}
.content .colour-value span.white.active:after{
border-color: lightgrey;
}
.content .colour-value span.yellow.active:after{
border-color: #EAA523;
}
.wrapper .btns{
display: flex;
height: 80px;
width: 100%;
align-items: center;
justify-content: center;
}
.wrapper .btns button{
height: 40px;
width: 100%;
margin: 0 10px;
border: 2px solid #456ABD;
background: #456ABD;
outline: none;
color: #fff;
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
}
That’s all, now you’ve successfully created a Creative Product Card UI Design in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
