• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
Animated Product Card using HTML CSS and JavaScript
Hello guys, we are going to create an Animated Product Card using HTML CSS, and JavaScript. Before I have created lots of product card design by using HTML CSS, Animated Profile Cards is one of them but today we will add Little JavaScript too, and I sure that helps to make out Product Card Template more beautiful.
What is a Product Card?
A product card is a sample of the specific product from where the user can choose the product, product’s size, colour and designs as they need. Basically, product card on the webpages helps for users to find products for buying and for the company to sell.
The image of the Responsive Product Card that you are seen on the webpage is not only a design, but it is also an animated design. I mean that when I clicked on the colour option, the shoe colour changes according to the circle colour.
Product Card HTML CSS | Free Source Code
To create this Product Card, follow the given steps line by line:
1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css
4. Create a script.js file. The file name must be script and its extension .js
First, paste the following codes into your index.html file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Coding by CodingNepal | www.codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Responsive Animated Product Card | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="product-card">
<div class="logo-cart">
<!--<img src="images/logo.jpg" alt="logo">-->
<i class='bx bx-shopping-bag'></i>
</div>
<div class="main-images">
<img id="blue" class="blue active" src="images/blue.png" alt="blue">
<img id="pink" class="pink" src="images/pink.png" alt="blue">
<img id="yellow" class="yellow" src="images/yellow.png" alt="blue">
</div>
<div class="shoe-details">
<span class="shoe_name">ADDIDAS GAZE ZX</span>
<p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p>
<div class="stars">
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bxs-star' ></i>
<i class='bx bx-star' ></i>
</div>
</div>
<div class="color-price">
<div class="color-option">
<span class="color">Colour:</span>
<div class="circles">
<span class="circle blue active" id="blue"></span>
<span class="circle pink " id="pink"></span>
<span class="circle yellow " id="yellow"></span>
</div>
</div>
<div class="price">
<span class="price_num">$09.00</span>
<span class="price_letter">Nine dollar only</span>
</div>
</div>
<div class="button">
<div class="button-layer"></div>
<button>Add To Cart</button>
</div>
</div>
<script>
let circle = document.querySelector(".color-option");
circle.addEventListener("click", (e)=>{
let target = e.target;
if(target.classList.contains("circle")){
circle.querySelector(".active").classList.remove("active");
target.classList.add("active");
document.querySelector(".main-images .active").classList.remove("active");
document.querySelector(`.main-images .${target.id}`).classList.add("active");
}
});
</script>
</body>
</html>
<!DOCTYPE html> <!-- Coding by CodingNepal | www.codingnepalweb.com --> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title> Responsive Animated Product Card | CodingLab </title> <link rel="stylesheet" href="style.css"> <!-- Boxicons CDN Link --> <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="product-card"> <div class="logo-cart"> <!--<img src="images/logo.jpg" alt="logo">--> <i class='bx bx-shopping-bag'></i> </div> <div class="main-images"> <img id="blue" class="blue active" src="images/blue.png" alt="blue"> <img id="pink" class="pink" src="images/pink.png" alt="blue"> <img id="yellow" class="yellow" src="images/yellow.png" alt="blue"> </div> <div class="shoe-details"> <span class="shoe_name">ADDIDAS GAZE ZX</span> <p>Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!</p> <div class="stars"> <i class='bx bxs-star' ></i> <i class='bx bxs-star' ></i> <i class='bx bxs-star' ></i> <i class='bx bxs-star' ></i> <i class='bx bx-star' ></i> </div> </div> <div class="color-price"> <div class="color-option"> <span class="color">Colour:</span> <div class="circles"> <span class="circle blue active" id="blue"></span> <span class="circle pink " id="pink"></span> <span class="circle yellow " id="yellow"></span> </div> </div> <div class="price"> <span class="price_num">$09.00</span> <span class="price_letter">Nine dollar only</span> </div> </div> <div class="button"> <div class="button-layer"></div> <button>Add To Cart</button> </div> </div> <script> let circle = document.querySelector(".color-option"); circle.addEventListener("click", (e)=>{ let target = e.target; if(target.classList.contains("circle")){ circle.querySelector(".active").classList.remove("active"); target.classList.add("active"); document.querySelector(".main-images .active").classList.remove("active"); document.querySelector(`.main-images .${target.id}`).classList.add("active"); } }); </script> </body> </html>
Second, paste the following codes into your style.css file
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
/* Google Fonts Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);
}
.product-card {
position: relative;
max-width: 355px;
width: 100%;
border-radius: 25px;
padding: 20px 30px 30px 30px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index: 3;
overflow: hidden;
}
.product-card .logo-cart{
display: flex;
align-items: center;
justify-content: space-between;
}
.product-card .logo-cart img{
height: 60px;
width: 60px;
object-fit: cover;
}
.product-card .logo-cart i{
font-size: 27px;
color: #707070;
cursor: pointer;
transition: color 0.3s ease;
}
.product-card .logo-cart i:hover{
color: #333;
}
.product-card .main-images{
position: relative;
height: 210px;
}
.product-card .main-images img{
position: absolute;
height: 300px;
width: 300px;
object-fit: cover;
transform: rotate(18deg);
left: 12px;
top: -40px;
z-index: -1;
opacity: 0;
transition: opacity 0.5s ease;
}
.product-card .main-images img.active{
opacity: 1;
}
.product-card .shoe-details .shoe_name{
font-size: 24px;
font-weight: 500;
color: #161616;
}
.product-card .shoe-details p{
font-size: 12px;
font-weight: 400;
color: #333;
text-align: justify;
}
.product-card .shoe-details .stars i{
margin: 0 -1px;
color: #333;
}
.product-card .color-price .color-option{
display: flex;
align-items: center;
}
.color-price{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.color-price .color-option .color{
font-size: 18px;
font-weight: 500;
color: #333;
margin-right: 8px;
}
.color-option .circles{
display: flex;
}
.color-option .circles .circle{
height: 18px;
width: 18px;
background: #0071C7;
border-radius: 50%;
margin: 0 4px;
cursor: pointer;
transition: all 0.4s ease;
}
.color-option .circles .circle.blue.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #0071C7;
}
.color-option .circles .circle.pink{
background: #FA1795;
}
.color-option .circles .circle.pink.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #FA1795;
}
.color-option .circles .circle.yellow{
background: #F5DA00;
}
.color-option .circles .circle.yellow.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #F5DA00;
}
.color-price .price{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.color-price .price .price_num{
font-size: 25px;
font-weight: 600;
color: #707070;
}
.color-price .price .price_letter{
font-size: 10px;
font-weight: 600;
margin-top: -4px;
color: #707070;
}
.product-card .button{
position: relative;
height: 50px;
width: 100%;
border-radius: 25px;
margin-top: 30px;
overflow: hidden;
}
.product-card .button .button-layer{
position: absolute;
height: 100%;
width: 300%;
left: -100%;
background-image: linear-gradient(135deg,#9708CC, #43CBFF,#9708CC, #43CBFF );
transition: all 0.4s ease;
border-radius: 25PX;
}
.product-card .button:hover .button-layer{
left: 0;
}
.product-card .button button{
position: relative;
height: 100%;
width: 100%;
background: none;
outline: none;
border: none;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
}
/* Google Fonts Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ height: 100vh; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%); } .product-card { position: relative; max-width: 355px; width: 100%; border-radius: 25px; padding: 20px 30px 30px 30px; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); z-index: 3; overflow: hidden; } .product-card .logo-cart{ display: flex; align-items: center; justify-content: space-between; } .product-card .logo-cart img{ height: 60px; width: 60px; object-fit: cover; } .product-card .logo-cart i{ font-size: 27px; color: #707070; cursor: pointer; transition: color 0.3s ease; } .product-card .logo-cart i:hover{ color: #333; } .product-card .main-images{ position: relative; height: 210px; } .product-card .main-images img{ position: absolute; height: 300px; width: 300px; object-fit: cover; transform: rotate(18deg); left: 12px; top: -40px; z-index: -1; opacity: 0; transition: opacity 0.5s ease; } .product-card .main-images img.active{ opacity: 1; } .product-card .shoe-details .shoe_name{ font-size: 24px; font-weight: 500; color: #161616; } .product-card .shoe-details p{ font-size: 12px; font-weight: 400; color: #333; text-align: justify; } .product-card .shoe-details .stars i{ margin: 0 -1px; color: #333; } .product-card .color-price .color-option{ display: flex; align-items: center; } .color-price{ display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .color-price .color-option .color{ font-size: 18px; font-weight: 500; color: #333; margin-right: 8px; } .color-option .circles{ display: flex; } .color-option .circles .circle{ height: 18px; width: 18px; background: #0071C7; border-radius: 50%; margin: 0 4px; cursor: pointer; transition: all 0.4s ease; } .color-option .circles .circle.blue.active{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0071C7; } .color-option .circles .circle.pink{ background: #FA1795; } .color-option .circles .circle.pink.active{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #FA1795; } .color-option .circles .circle.yellow{ background: #F5DA00; } .color-option .circles .circle.yellow.active{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px #F5DA00; } .color-price .price{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .color-price .price .price_num{ font-size: 25px; font-weight: 600; color: #707070; } .color-price .price .price_letter{ font-size: 10px; font-weight: 600; margin-top: -4px; color: #707070; } .product-card .button{ position: relative; height: 50px; width: 100%; border-radius: 25px; margin-top: 30px; overflow: hidden; } .product-card .button .button-layer{ position: absolute; height: 100%; width: 300%; left: -100%; background-image: linear-gradient(135deg,#9708CC, #43CBFF,#9708CC, #43CBFF ); transition: all 0.4s ease; border-radius: 25PX; } .product-card .button:hover .button-layer{ left: 0; } .product-card .button button{ position: relative; height: 100%; width: 100%; background: none; outline: none; border: none; font-size: 18px; font-weight: 600; letter-spacing: 1px; color: #fff; }
If you face any difficulties while creating your Animated Product Card or your code is not working as expected, you can download the source code files for this Product Card with Color Switcher for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}