DEV Community

Cover image for How to create an awesome product card with HTML & CSS only
Aniket
Aniket

Posted on • Updated on

How to create an awesome product card with HTML & CSS only

Hello Everyone,
In this post, we are gone be discussing, How to create an awesome product card using HTML & CSS which includes some Fancy CSS Transitions & little animations as well.

Important ⚠️
For Icons, I have used the heroicons

First of all starting with the HTML, as we know it very well HTML is used for creating the markups for a minimal webpage it is must be included.

HTML Markup 

<div class="container">
    <div class="card">
        <div class="imgBx">
            <img src="./nike-main.png" alt="nike_main">
        </div>
        <div class="contentBx">
            <h2>Nike Air</h2>
            <p>Air Jordan 1 Mid</p>
            <!-- Stars -->

            <div class="stars">
                <ul>
                    <li>
                        <svg  fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                    </li>
                    <li>
                        <svg  fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                    </li>

                    <li>
                        <svg  fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                    </li>

                    <li>
                        <svg  fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                    </li>

                    <li>
                        <svg  fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                    </li>
                </ul>
            </div>


            <div class="size">
                <h3>Size : </h3>
                <div class="sizes_">
                    <ul>
                        <li class="active">7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                    </ul>
                </div>
            </div>

            <div class="color">
                <div>
                    <h3>Color : </h3>
                    <div class="colors_">
                        <ul>
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <div class="price">
                    <h5>$100.20</h5>
                </div>
            </div>

            <div class="buy_btn">
                <a href="javascript:void(0)">BUY</button>
            </div>
        </div>
    </div>
</div>
```


Here we are ended with HTML Markup, Now **Styling this markup** 
####CSS


```
/* Imported Font Family from google fonts => Oswald */
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
/* Root */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Oswald', sans-serif;
overflow: hidden !important;
}
/* Body */
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #131313;
}
/* CONTAINER */
.container{
position: relative;
animation: fadeIn 1.5s;
}
/* CONTAINER - ANIMATION */
@keyframes fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 100;
    }
}
/* CARD */
.container .card{
position: relative;
width: 320px;
height: 555px;
background-color: #232323;
border-radius: 20px;
overflow: hidden;
}

/* BEFORE */
.container .card::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffbe00;
clip-path: circle(222px at 90% 17%);
transition: 0.5s ease-in-out;
}
.container .card:hover:before{
clip-path: circle(222px at 50% 0%);
}
.container .card:after{
content: 'Nike Air';
position: absolute;
top: 30%;
left: 9%;
font-size: 5rem;
font-weight: normal;
text-transform: uppercase;
color: white;
transition: 0.5s;
}
/* IMGBOX */
.container .card .imgBx{
position: absolute;
top: 45%;
transform: translateY(-50%);
width: 100%;
z-index: 1000;
height: 220px;
transition: 0.5s;
}
.container .card:hover .imgBx{
top: 5%;
transform: translateY(0%);
}
.container .card:hover::after{
top: 5%;
transform: translateY(0%);
}
/* IMAGE  */
.container .card .imgBx img{
position: absolute;
top: 48%;
left: 48%;
transform: translate(-60%, -60%) rotate(-25deg);
width: 300px;
filter: drop-shadow(0 4px 4px rgba(39,39,39,0.8));
}
/* CONTENTBOX */
.container .card .contentBx{
position: absolute;
bottom: 2.5%;
width: 100%;
height: 100px; 
z-index: 10;
padding: 1.2rem;
transition: 0.5s;
}
.container .card .contentBx:hover{
height: 290px;
}
.container .card .contentBx h2{
font-size: 15px;
color: #ffff;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
}
.container .card .contentBx p{
font-size: 22px;
text-transform: capitalize;
font-weight: 500;
letter-spacing: 1px;
color: #ffffffe8;
}
/* STARS */
.container .card .contentBx .stars ul  {
display: flex;
align-items: center;
margin: 2px;
}
.container .card .contentBx .stars ul li svg{
width: 15px;
color: #ffbe00;
}
.container .card .contentBx .stars ul li:nth-child(5) svg{
width: 15px;
color: rgb(223, 223, 223);
}
/* SIZE */
.container .card .contentBx .size h3, .container .card .contentBx .color h3{
font-size: 15px;
color: #dfdfdf;
font-weight: normal;
text-transform: uppercase;
margin-top: 10px;
}
.container .card .contentBx .size span {
width: 12px;
height: 12px;
border-radius: 7px;
background-color: #dfdfdf;
}
.container .card .contentBx .size .sizes_ ul{
display: flex;
align-items: center;
}
.container .card .contentBx .size .sizes_ ul li.active{
background-color: #ffbe00;
}
.container .card .contentBx .size .sizes_ ul li{
font-size: 15px;
width: 20px;
height: 19px;
border-radius: 3px;
background-color: #e6e6e6;
display: flex;
align-items: center;
justify-content: center;
margin: 8.5px;
}
/* COLOR */
.container .card .contentBx .color{
display: flex;
justify-content: space-between;
}
.container .card .contentBx .color .price{
float: right;
margin-top: 10px;
}
.container .card .contentBx .color .price h5{
color: #dfdfdf;
font-size: 17px;
font-weight: normal;
}
.container .card .contentBx .color .colors_ ul{
display: flex;
align-items: center;
}
.container .card .contentBx .color .colors_ ul li{
width: 15px;
height: 15px;
border-radius: 25px;
margin: 6px;
}
.container .card .contentBx .color .colors_ ul li.active{
background-color: #ffbe00;
}
.container .card .contentBx .color .colors_ ul li:nth-child(2){
background-color: #e6e6e6;
}
.container .card .contentBx .color .colors_ ul li:nth-child(3){
background-color: #0d7f7f;
}
/* BUY BUTTON */
.container .card .contentBx .buy_btn{
width: 100%;
height: fit-content;
background-color: #ffbe00;
text-align: center;
border-radius: 7px;
padding: 7px;
margin-top: 1rem;
}
.container .card .contentBx .buy_btn a {
text-decoration: none;
color: black;
font-size: 18px;
}
```



If you think is this so much to watch & read, check out this full step by step tutorial 
[Click to watch](https://youtu.be/s6VN1BpPErU)

Thanks for watching & Happy Coding !!
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

okibaba profile image

zoomcamp data engineering project - part 5

Okibaba -

smcilegend profile image

My IBM Final Project

Smcilegend -

flyingandfly profile image

How to implement multi-group bar chart and interact with highlighting by grouping dimension?

FlyingAndFly -

okibaba profile image

zoomcamp data engineering project - part 4

Okibaba -