Hello Guys! Welcome to Coding Torque. In this blog, I’m going to explain to you how to make Interactive Product Card using HTML, CSS and JavaScript. You can use this effect on your website/portfolio to showcase any skills/features. This will be a step-by-step guide. Let’s get started 🚀.
Before we start, here are some JavaScript Games you might like to create:
1. Snake Game using JavaScript
2. 2D Bouncing Ball Game using JavaScript
3. Rock Paper Scissor Game using JavaScript
4. Tic Tac Toe Game using JavaScript
5. Whack a Mole Game using JavaScript
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
HTML CodeÂ
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interactive product card - @codingtorque</title>
</head>
<body>
<!-- Further code here -->
</body>
</html>
Paste the below code in your <body> tag
<div class="card" id="card">
<!-- -->
<h2 class="title">FUTURISTIC</h2>
<div class="card__img">
<div class="scene"></div>
<h2 class="subtitle">DRONE</h2>
</div>
<!-- -->
<div class="card__description">
<div class="card__container">
<!-- -->
<div class="card__info">
<div class="card__header">
<div class="card__rating">
<svg height="25" width="23" class="star rating" data-rating="1">
<polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" />
</svg>
<svg height="25" width="23" class="star rating" data-rating="1">
<polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" />
</svg>
<svg height="25" width="23" class="star rating" data-rating="1">
<polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" />
</svg>
<svg height="25" width="23" class="star rating" data-rating="1">
<polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" />
</svg>
<svg height="25" width="23" class="star rating" data-rating="1">
<polygon points="9.9, 1.1, 3.3, 21.78, 19.8, 8.58, 0, 8.58, 16.5, 21.78" />
</svg>
</div>
<p class="card__price">$220</p>
</div>
<h1 class="card__title">Futuristic Drone</h1>
<h2 class="card__subtitle">FHC - 250x</h2>
</div>
<!-- -->
<div class="colors">
<span class="color__title">COLOR</span>
<div class="color__container">
<div class="color__item"></div>
<div class="color__item"></div>
<div class="color__item"></div>
<div class="color__item"></div>
<div class="color__item"></div>
</div>
</div>
<!-- -->
<a class="card__button">ADD TO CART</a>
</div>
</div>
</div>CSS CodeÂ
Create a file style.css and paste the code below.
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/************/
html,
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
min-width: 650px;
min-height: 500px;
font-size: 11px;
font-family: 'Montserrat', sans-serif;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-image: linear-gradient(-120deg, #4B5A45, #1E4954);
color: #232323;
user-select: none;
}
ul {
list-style: none;
}
svg {
fill: #ffd055
}
/************/
.card {
display: flex;
position: relative;
width: 650px;
height: 400px;
transform-style: preserve-3d;
transition: .5s ease;
@media(max-width: 1000px) {
transform: scale(.8);
}
@media(max-width: 800px) {
transform: scale(.6);
}
@media(max-width: 600px) {
transform: scale(.5);
}
}
/**/
.card__img {
position: relative;
width: 325px;
height: 100%;
background-image: linear-gradient(-120deg, #91D277, #008CB3);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.scene {
position: absolute;
top: 35px;
left: -25px;
width: 350px;
min-height: 325px;
z-index: 10;
}
.title,
.subtitle {
position: absolute;
color: #ffffff;
font-size: 72px;
opacity: .075;
letter-spacing: 4px;
font-weight: bolder;
}
.title {
transform: rotateZ(-90deg) translateX(-73%) translateY(30%);
transform-origin: bottom left;
}
.subtitle {
bottom: 0;
right: 10px;
}
/**/
.card__description {
position: absolute;
top: 0;
right: 0;
width: 325px;
height: 100%;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card__container {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
top: -25px;
width: 100%;
height: 450px;
padding: 30px;
background-color: #ffffff;
}
.card__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.card__rating {
display: flex;
}
.card__price {
width: 100%;
font-size: 32px;
text-align: right;
}
.card__title,
.card__subtitle {
font-size: 24px;
font-weight: 400;
line-height: 1.6;
}
.card__subtitle {
font-size: 16px;
}
.card__button {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 100%;
font-size: 12px;
font-weight: bolder;
letter-spacing: 1px;
border-radius: 35px;
color: #ffffff;
background-color: #36D1E7;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
cursor: pointer;
}
.card__button,
.card__info,
.colors {
transform: translateZ(35px);
}
/**/
.colors {
display: flex;
flex-direction: column;
width: 100%;
}
.color__title {
line-height: 2;
font-size: 12px;
color: #868686;
letter-spacing: 1px;
}
.color__container {
display: flex;
}
.color__item {
height: 25px;
width: 25px;
margin-right: 10px;
border-radius: 50%;
background-color: #fff;
}
.color__item:nth-of-type(1) {
border: 4px solid #36D1E7;
}
.color__item:nth-of-type(2) {
background-color: #394282;
}
.color__item:nth-of-type(3) {
border: 4px solid #6BDA94;
}
.color__item:nth-of-type(4) {
border: 4px solid #FBCB61;
}
.color__item:nth-of-type(5) {
border: 4px solid #6A73CF;
}
Output Till Now
JavaScript CodeÂ
check the below codepen for javascript code.
See the Pen
Product Card – Three JS by Ricardo Oliva Alonso (@ricardoolivaalonso)
on CodePen.
Written by: Piyush Patil
Code Credits:Â @ricardoolivaalonso
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖
