Product Card Using CSS | Card Design for e-commerce website | CodeWithNizami
Dear friends in this article we will tell you how to design Product Card Using CSS. So i hope you like our article because here you can get the source code free and this code you use in the projects. Guys if you learn more interesting articles then go to search bar and type article name then you can find easily more interested articles.
Card Design
Friends, in this article, we will know how to design a product card using css that we can use in our project and we can apply it in any e-commerce website, so let’s know.
First of all we have to take a code editor like vs code and sublime etc. After that we have to create a folder and save the name of that folder by keeping its accounting, after that open this folder in code editor then create a html file in it After that create a css file.
Now we have to go to the HTML file and there you have to shift +! You have to press so that the syntax of Hutml is generated automatically and this shortcut will work only in vs code, after that you go to the title and write product card using css there then go to body tag and take a class named product card After that take a class named Image then put the tag of the image in it, then take a heading so that we can set the title of the product.
Paste the following code in your html file so that your work will be done easily and you do not have to write much code.
HTML Code.
<div class="card">
<div class="shoe">
<img src="shoe.png" alt="PNG">
</div>
<div class="content">
<h2>Sport Shoes For Men</h2>
<h4>Product Detail</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus
fuga quaerat odio, non itaque et architecto, sed molestiae veniam voluptatem
provident laboriosam.</p>
<div class="quantity">
<h6>Quantity</h6>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="price-btn">
<span>$195.<small>09</small></span>
<button>BUY NOW</button>
</div>
</div>
</div>CSS Code.
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #333;
}
.card{
width: 350px;
height: 290px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 30px;
box-shadow: inset 0 0 20px rgba(0,0,0,0.562);
transition: 0.4s all;
}
.content{
width: 63%;
height: 100%;
background-color: rgb(173,173,173);
box-shadow: inset 0 0 20px rgba(0,0,0,0.562);
border-radius: 0 30px 30px 0;
padding: 30px;
position: relative;
display: none;
}
.content::after{
content: '';
position: absolute;
left: -8px;
top: 49%;
width: 15px;
height: 15px;
transform: rotate(45deg);
background-color: #fff;
}
.content h2{
margin-bottom: 10px;
text-transform: uppercase;
}
.content h4{
margin-bottom: 5px;
color: rgb(104,2,2);
}
.content p{
font-size: 14px;
}
.card .shoe img{
width: 300px;
}
.card .price-btn{
margin-top: 30px;
}
.card .price-btn span{
font-weight: bold;
}
.card .price-btn button{
width: 100px;
height: 30px;
outline: none;
border: none;
background-color: rgb(255,72,0);
box-shadow: inset 0 0 15px rgba(0,0,0,0.4),
0 0 5px black;
color: #fff;
transition: 0.4s;
border-radius: 5px;
margin-left: 20px;
}
.card .price-btn button:hover{
background-color: #333;
color: rgb(255,72,0);
}
.card .quantity{
margin-top: 20px;
}
.card .quantity h6{
margin-bottom: 10px;
opacity: 80%;
}
.card .quantity ul{
display: flex;
}
.card .quantity ul li{
list-style: none;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
background-color: red;
border-radius: 3px;
box-shadow: inset 0 0 15px rgba(0,0,0,0.4),
0 0 5px black;
color: #fff;
transition: 0.4s;
}
.card:hover{
width: 650px;
}
.card .quantity ul li:hover{
background-color: #333;
color: red;
}
.card:hover .shoe{
position: relative;
right: 120px;
width: 37%;
}
.card:hover .content{
display: block;
}
