Hello readers, Today In this article we’ll learn how to create a Responsive E-Commerce Product Card UI Design Using HTML, CSS & JavaScript. This type of Product Card is used on the websites for the E-Commerce Product Card. One of the most beautiful and good-looking designs of a Modern Website Design.
You easily create this Responsive E-Commerce Product Card UI Design Using HTML, CSS & JS. then this article will definitely help you. For this, you need to have an idea about basic HTML, CSS & JS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This E-Commerce Product Card UI Design
In the product customize container, there is a product name, size numbers, price value, color options, and buttons. There are five 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. This card is fully mobile responsive.
Watch the video tutorial to create Product Card UI 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 these E-Commerce Product Card UI Design step by step completely beautifully. So you can learn how to make these E-Commerce Product Card UI 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 Responsive E-Commerce Product Card UI Design Tutorial. 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 Sidebar Menu Using HTML, CSS & JS
- Responsive Login Form using Bootstrap
- Neumorphism Analog Clock Using HTML, CSS & JS
Product Card UI Design | Source Codes
You have to create an HTML, CSS & JS File For this Product Card UI Design. After creating these files just paste the following codes into your file.
The 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. You’ve to download files from the given download button to use.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product Card UI Design</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!----Font CDN Link---->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="shoeBackground">
<div class="gradients">
<div class="gradient second" color="blue"></div>
<div class="gradient" color="red"></div>
<div class="gradient" color="green"></div>
<div class="gradient" color="orange"></div>
<div class="gradient" color="black"></div>
</div>
<h1 class="nike">nike</h1>
<img src="https://raw.githubusercontent.com/sefyudem/Product-Card-Using-HTML-CSS/master/img/logo.png" alt="" class="logo">
<a href="#" class="share"><i class="fas fa-share-alt"></i></a>
<img src="https://raw.githubusercontent.com/sefyudem/Product-Card-Using-HTML-CSS/master/img/blue.png" alt="" class="shoe show" color="blue">
<img src="https://raw.githubusercontent.com/sefyudem/Product-Card-Using-HTML-CSS/master/img/red.png" alt="" class="shoe" color="red">
<img src="https://raw.githubusercontent.com/sefyudem/Product-Card-Using-HTML-CSS/master/img/green.png" alt="" class="shoe" color="green">
<img src="https://raw.githubusercontent.com/sefyudem/Product-Card-Using-HTML-CSS/master/img/orange.png" alt="" class="shoe" color="orange">
<img src="https://raw.githubusercontent.com/sefyudem/Product-Card-Using-HTML-CSS/master/img/black.png" alt="" class="shoe" color="black">
</div>
<div class="info">
<div class="shoeName">
<div>
<h1 class="big">Nike Zoom KD 12</h1>
<span class="new">new</span>
</div>
<h3 class="small">Men's running shoes</h3>
</div>
<div class="description">
<h3 class="title">Product Info</h3>
<p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
</div>
<div class="color-container">
<h3 class="title">Color</h3>
<div class="colors">
<span class="color active" primary="#2175f5" color="blue"></span>
<span class="color" primary="#f84848" color="red"></span>
<span class="color" primary="#29b864" color="green"></span>
<span class="color" primary="#ff5521" color="orange"></span>
<span class="color" primary="#444" color="black"></span>
</div>
</div>
<div class="size-container">
<h3 class="title">size</h3>
<div class="sizes">
<span class="size">7</span>
<span class="size">8</span>
<span class="size active">9</span>
<span class="size">10</span>
<span class="size">11</span>
</div>
</div>
<div class="buy-price">
<a href="#" class="buy"><i class="fas fa-shopping-cart"></i>Add to card</a>
<div class="price">
<i class="fas fa-dollar-sign"></i>
<h1>189.99</h1>
</div>
</div>
</div>
</div>
</div>
<!----JS CDN Link--->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!---Custom JS File-->
<script src="js.js"></script>
</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:
:root{
--primary: #2175f5;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background-color: #efefef;
}
.container{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
overflow: hidden;
}
.card{
display: flex;
justify-content: center;
align-items: center;
width: 860px;
}
.shoeBackground{
position: relative;
width: 50%;
height: 475px;
box-shadow: -15px 0 35px rgba(0, 0, 0, 0.1),
0 -15px 35px rgba(0, 0, 0, 0.1),
0 15px 35px rgba(0, 0, 0, 0.1);
transition: .5s;
}
.gradients{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.gradient{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -2;
}
.first{
z-index: 0;
animation: 1s width ease;
}
@keyframes width{
from{
width: 0%;
}
to{
width: 100%;
}
}
.second{
z-index: -1;
}
.gradient[color="blue"]{
background-image: linear-gradient(45deg, #0136af, #22abfa);
}
.gradient[color="red"]{
background-image: linear-gradient(45deg, #d62926, #ee625f);
}
.gradient[color="green"]{
background-image: linear-gradient(45deg, #11998e, #1ce669);
}
.gradient[color="orange"]{
background-image: linear-gradient(45deg, #fc4a1a, #f7b733);
}
.gradient[color="black"]{
background-image: linear-gradient(45deg, #111, #666);
}
.logo{
position: absolute;
width: 100px;
left: 20px;
top: 20px;
}
.share{
position: absolute;
top: 15px;
right: 15px;
background-color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
font-size: 1.3rem;
text-decoration: none;
color: var(--primary);
transition: .5s;
}
.share:hover{
transform: scale(1.1);
}
.share i{
line-height: 50px;
}
.nike{
position: absolute;
top: 85px;
left: 15px;
font-size: 11rem;
text-transform: uppercase;
line-height: .9;
color: #fff;
opacity: .1;
}
.shoe{
position: absolute;
width: 140%;
opacity: 0;
bottom: 0;
right: 0;
transform: rotate(-20deg);
transition: .5s;
}
.shoe.show{
opacity: 1;
}
.info{
width: 50%;
background-color: #fff;
z-index: 1;
padding: 35px 40px;
box-shadow: 15px 0 35px rgba(0, 0, 0, 0.1),
0 -15px 35px rgba(0, 0, 0, 0.1),
0 15px 35px rgba(0, 0, 0, 0.1);
}
.shoeName{
padding: 0 0 10px 0;
}
.shoeName div{
display: flex;
align-items: center;
}
.shoeName div .big{
margin-right: 10px;
font-size: 2rem;
color: #333;
line-height: 1;
}
.shoeName div .new{
background-color: var(--primary);
text-transform: uppercase;
color: #fff;
padding: 3px 10px;
border-radius: 5px;
transition: .5s;
}
.shoeName .small{
font-weight: 500;
color: #444;
margin-top: 3px;
text-transform: capitalize;
}
.shoeName, .description, .color-container, .size-container{
border-bottom: 1px solid #dadada;
}
.description{
padding: 10px 0;
}
.title{
color: #3a3a3a;
font-weight: 600;
font-size: 1.2rem;
text-transform: uppercase;
}
.text{
color: #555;
font-size: 17px;
}
.color-container{
padding: 10px 0;
}
.colors{
padding: 8px 0;
display: flex;
align-items: center;
}
.color{
width: 25px;
height: 25px;
border-radius: 50%;
margin: 0 10px;
border: 5px solid;
cursor: pointer;
transition: .5s;
}
.color[color="blue"]{
background-color: #2175f5;
border-color: #2175f5;
}
.color[color="red"]{
background-color: #f84848;
border-color: #f84848;
}
.color[color="green"]{
background-color: #29b864;
border-color: #29b864;
}
.color[color="orange"]{
background-color: #ff5521;
border-color: #ff5521;
}
.color[color="black"]{
background-color: #444;
border-color: #444;
}
.color.active{
border-color: #fff;
box-shadow: 0 0 10px .5px rgba(0, 0, 0, 0.2);
transform: scale(1.1);
}
.size-container{
padding: 10px 0;
margin-bottom: 10px;
}
.sizes{
padding: 8px 0;
display: flex;
align-items: center;
}
.size{
width: 40px;
height: 40px;
border-radius: 6px;
background-color: #eee;
margin: 0 10px;
text-align: center;
line-height: 40px;
font-size: 1.1rem;
font-weight: 500;
cursor: pointer;
transition: .3s;
}
.size.active{
background-color: var(--primary);
color: #fff;
transition: .5s;
}
.buy-price{
padding-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.price{
color: #333;
display: flex;
align-items: flex-start;
}
.price h1{
font-size: 2.1rem;
font-weight: 600;
line-height: 1;
}
.price i{
font-size: 1.4rem;
margin-right: 1px;
}
.buy{
padding: .7rem 1rem;
background-color: var(--primary);
text-decoration: none;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
font-size: 1.1rem;
transition: .5s;
}
.buy:hover{
transform: scale(1.1);
}
.buy i{
margin-right: 2px;
}
@media (max-width: 1070px){
.shoe{
width: 135%;
}
}
@media (max-width: 1000px){
.card{
flex-direction: column;
width: 100%;
box-shadow: 0 0 35px 1px rgba(0, 0, 0, 0.2);
}
.card > div{
width: 100%;
box-shadow: none;
}
.shoe{
width: 100%;
transform: rotate(-5deg) translateY(-50%);
top: 55%;
right: 2%;
}
.nike{
top: 20%;
left: 5%;
}
}
@media (max-width: 600px){
.share{
width: 40px;
height: 40px;
}
.share i {
font-size: 1rem;
line-height: 40px;
}
.logo{
width: 70px;
}
}
@media (max-width: 490px){
.nike{
font-size: 7rem;
}
.shoeName div .big{
font-size: 1.3rem;
}
.small{
font-size: 1rem;
}
.new{
padding: 2px 6px;
font-size: .9rem;
}
.title{
font-size: .9rem;
}
.text{
font-size: .8rem;
}
.buy{
padding: .5rem .8rem;
font-size: .8rem;
}
.price h1{
font-size: 1.5rem;
}
.price i{
font-size: .9rem;
}
.size{
width: 30px;
height: 30px;
margin: 0 8px;
font-size: .9rem;
line-height: 30px;
}
.color{
margin: 0 6px;
width: 0 20px;
width: 20px;
height: 20px;
border-width: 4px;
}
.share{
width: 35px;
height: 35px;
top: 10px;
right: 10px;
}
.share i{
font-size: .8rem;
line-height: 35px;
}
.logo{
width: 60px;
top: 10px;
left: 10px;
}
.info{
padding: 20px;
}
}
@media (max-width: 400px){
.buy i{
display: none;
}
.container{
padding: 20px;
}
}the third step, you have to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
const sizes = document.querySelectorAll('.size');
const colors = document.querySelectorAll('.color');
const shoes = document.querySelectorAll('.shoe');
const gradients = document.querySelectorAll('.gradient');
const shoeBg = document.querySelector('.shoeBackground');
let prevColor = "blue";
let animationEnd = true;
function changeSize(){
sizes.forEach(size => size.classList.remove('active'));
this.classList.add('active');
}
function changeColor(){
if(!animationEnd) return;
let primary = this.getAttribute('primary');
let color = this.getAttribute('color');
let shoe = document.querySelector(`.shoe[color="${color}"]`);
let gradient = document.querySelector(`.gradient[color="${color}"]`);
let prevGradient = document.querySelector(`.gradient[color="${prevColor}"]`);
if(color == prevColor) return;
colors.forEach(c => c.classList.remove('active'));
this.classList.add('active');
document.documentElement.style.setProperty('--primary', primary);
shoes.forEach(s => s.classList.remove('show'));
shoe.classList.add('show');
gradients.forEach(g => g.classList.remove('first', 'second'));
gradient.classList.add('first');
prevGradient.classList.add('second');
prevColor = color;
animationEnd = false;
gradient.addEventListener('animationend', () => {
animationEnd = true;
})
}
sizes.forEach(size => size.addEventListener('click', changeSize));
colors.forEach(c => c.addEventListener('click', changeColor));
let x = window.matchMedia("(max-width: 1000px)");
function changeHeight(){
if(x.matches){
let shoeHeight = shoes[0].offsetHeight;
shoeBg.style.height = `${shoeHeight * 0.9}px`;
}
else{
shoeBg.style.height = "475px";
}
}
changeHeight();
window.addEventListener('resize', changeHeight);now you’ve successfully created these Responsive E-Commerce Product Card UI Design HTML, CSS & JavaScript. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
