You will learn how to create an E-commerce product card design using only HTML and CSS today in this blog. The sliding card has a hover effect and a basic design. I previously wrote a blog post to create a To-do list using html css and JavaScrip.
A card slider is a set of cards with a sliding feature that allows you to view the cards that are hidden and are arranged upward. Any content can be on the card. such as blogs cards, profile cards, and cards for e-commerce products, among others.
The process of designing a visually appealing and user-friendly layout for products to be displayed on an e-commerce website is known as HTML e-commerce product card design. In order to accomplish this, a layout that presents product photos, descriptions, prices, and other pertinent information in an orderly and appealing way is usually created using HTML and CSS.
Create a E-commerce product card design html
Make a design for an e-commerce product card. The HTML and CSS files are the two that you must first create. After creating these files, just copy and paste the provided codes into your file. You can also download the source code files for this to-do app by clicking the download button below.
Create an HTML document named index.html first, and then insert the given codes into it. Remember that you have to make a file with the extension.html.
<!DOCTYPE html>
<html>
<head>
<title>Product Card UI Design</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="card">
<div class="imgBx">
<img src="shoe.png">
</div>
<div class="details">
<h3>Nike Air Max<br><span>Men's Shoe</span></h3>
<h4>Product Details</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla ducimus iusto.</p>
<h4>Size</h4>
<ul class="size">
<li>32</li>
<li>36</li>
<li>40</li>
<li>44</li>
<li>46</li>
</ul>
<div class="group">
<h2><sup>$</sup>399<small>.99</small></h2>
<a href="#">Buy Now</a>
</div>
</div>
</div>
</body>
</html>
Next, create a CSS file named style.css and add the given codes to it. Remember that you need to make a file with the extension ".css."
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(#fdfeff 0,#f0f2f3 50%,#b04b4b 50%,#7d2525 100%);
min-height: 100vh;
}
.card
{
position: relative;
width: 300px;
height: 380px;
background: #0000;
display: flex;
box-shadow: 0 15px 45px rgba(14, 13, 13, 0.1);
overflow: hidden;
transition: 0.5s ease-in-out;
}
.card:hover
{
width: 600px;
}
.card .imgBx
{
position: relative;
min-width: 300px;
height: 100%;
background: #931e1c;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.card .imgBx img
{
max-width: 250px;
overflow: none;
transition: 0.5s ease-in-out;
}
.card:hover .imgBx img
{
transform: rotate(35deg) translateX(20px);
}
.card .details
{
position: absolute;
left: 0;
width: 300px;
height: 100%;
background: #fefdff;
display: flex;
justify-content: center;
padding: 20px;
flex-direction: column;
transition: 0.5s ease-in-out;
}
.card:hover .details
{
left: 300px;
}
.card .details::before
{
content: '';
position: absolute;
left: 0px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #931e1c;
z-index: 1;
}
.card .details h3
{
color: #000;
text-transform: uppercase;
font-weight: 600;
font-size: 1.5em;
line-height: 1em;
}
.card .details h3 span
{
font-size: 0.65em;
font-weight: 300;
opacity: 0.85;
text-transform: none;
}
.card .details h4
{
color: #000;
text-transform: uppercase;
font-weight: 600;
font-size: 0.9em;
line-height: 1em;
margin-top: 20px;
margin-bottom: 10px;
}
p
{
color: #000;
font-size: 0.8em;
opacity: 0.85;
}
.size
{
display: flex;
gap: 10px;
}
.size li
{
list-style: none;
color: #000;
font-size: 0.9em;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #000;
cursor: pointer;
font-weight: 500;
opacity: 0.5;
}
.size li:hover
{
background: #000;
color: #ffffff;
opacity: 1;
}
.group
{
position: relative;
display: flex;
justify-content: space-between;
margin-top: 20px;
align-items: center;
}
.card .details h2
{
color: #000;
text-transform: uppercase;
font-weight: 600;
font-size: 2em;
}
.card .details h2 sup
{
font-weight: 300;
}
.card .details h2 small
{
font-size: 0.75em;
}
.card .details a
{
display: inline-flex;
padding: 10px 25px;
background: #000;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #ffffff;
}