Interactive Product Card using HTML, CSS and JavaScript - Coding Torque

byPiyush Patil -October 25, 2022

0

Interactive Product Card

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 🚀.

Let's go step by step:

Step 1: HTML Code

<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>

Step 2: CSS(SCSS) Code

*,
*::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;
}