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 !!
Top comments (0)