Ecommerce Product Card:- Hello readers, Today In this article I am going to show you how to create an Ecommerce Product Card Design using HTML & CSS. This type of Ecommerce Product Card Design using HTML & CSS is used on the websites for Product Card Design. One of the most beautiful and good-looking designs of a Ecommerce Product Card.
You easily create an Ecommerce Product Card Design using HTML & CSS then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Ecommerce Product Card Design
A product Card is the image of items sold on the E-Commerce website. Its task is to be catchy, give relevant information – both visual and textual as you can see on the image. There is an Apple Ecommerce card design with details. and the apple image is shown on the card with shadow.
Watch the video tutorial to create Ecommerce Product Card
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Ecommerce Product Card Design step by step completely beautifully. So you can learn how to make these Ecommerce Product Card. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Ecommerce Product Card Design Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- How To Make Portfolio Website Using HTML & CSS
- Pricing Card Tables using HTML, CSS & JS
- Responsive Bootstrap Login Form
Ecommerce Product Card | Source Codes
You have to create an HTML and CSS File For this Ecommerce Product Card. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ecommerce Product Card</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!----Font CDN Link---->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<section class="product">
<div class="product__photo">
<div class="photo-container">
<div class="photo-main">
<div class="controls">
<i class="material-icons">share</i>
<i class="material-icons">favorite_border</i>
</div>
<img src="https://res.cloudinary.com/john-mantas/image/upload/v1537291846/codepen/delicious-apples/green-apple-with-slice.png" alt="green apple slice">
</div>
<div class="photo-album">
<ul>
<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537302064/codepen/delicious-apples/green-apple2.png" alt="green apple"></li>
<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537303532/codepen/delicious-apples/half-apple.png" alt="half apple"></li>
<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537303160/codepen/delicious-apples/green-apple-flipped.png" alt="green apple"></li>
<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537303708/codepen/delicious-apples/apple-top.png" alt="apple top"></li>
</ul>
</div>
</div>
</div>
<div class="product__info">
<div class="title">
<h1>Delicious Apples</h1>
<span>COD: 45999</span>
</div>
<div class="price">
R$ <span>7.93</span>
</div>
<div class="variant">
<h3>SELECT A COLOR</h3>
<ul>
<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537302064/codepen/delicious-apples/green-apple2.png" alt="green apple"></li>
<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537302752/codepen/delicious-apples/yellow-apple.png" alt="yellow apple"></li>
<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537302427/codepen/delicious-apples/orange-apple.png" alt="orange apple"></li>
<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537302285/codepen/delicious-apples/red-apple.png" alt="red apple"></li>
</ul>
</div>
<div class="description">
<h3>BENEFITS</h3>
<ul>
<li>Apples are nutricious</li>
<li>Apples may be good for weight loss</li>
<li>Apples may be good for bone health</li>
<li>They're linked to a lowest risk of diabetes</li>
</ul>
</div>
<button class="buy--btn">ADD TO CART</button>
</div>
</section>
</body>
</html>
Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
/* ----- Variables ----- */
/* ----- Global ----- */
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: grid;
grid-template-rows: 1fr;
font-family: "Raleway", sans-serif;
background-color: #01e37f;
}
h3 {
font-size: 0.7em;
letter-spacing: 1.2px;
color: #a6a6a6;
}
img {
max-width: 100%;
filter: drop-shadow(1px 1px 3px #a6a6a6);
}
/* ----- Product Section ----- */
.product {
display: grid;
grid-template-columns: 0.9fr 1fr;
margin: auto;
padding: 2.5em 0;
min-width: 600px;
background-color: white;
border-radius: 5px;
}
/* ----- Photo Section ----- */
.product__photo {
position: relative;
}
.photo-container {
position: absolute;
left: -2.5em;
display: grid;
grid-template-rows: 1fr;
width: 100%;
height: 100%;
border-radius: 6px;
box-shadow: 4px 4px 25px -2px rgba(0, 0, 0, 0.3);
}
.photo-main {
border-radius: 6px 6px 0 0;
background-color: #9be010;
background: radial-gradient(#e5f89e, #96e001);
}
.photo-main .controls {
display: flex;
justify-content: space-between;
padding: 0.8em;
color: #fff;
}
.photo-main .controls i {
cursor: pointer;
}
.photo-main img {
position: absolute;
left: -3.5em;
top: 2em;
max-width: 110%;
filter: saturate(150%) contrast(120%) hue-rotate(10deg) drop-shadow(1px 20px 10px rgba(0, 0, 0, 0.3));
}
.photo-album {
padding: 0.7em 1em;
border-radius: 0 0 6px 6px;
background-color: #fff;
}
.photo-album ul {
display: flex;
justify-content: space-around;
}
.photo-album li {
float: left;
width: 55px;
height: 55px;
padding: 7px;
border: 1px solid #a6a6a6;
border-radius: 3px;
}
/* ----- Informations Section ----- */
.product__info {
padding: 0.8em 0;
}
.title h1 {
margin-bottom: 0.1em;
color: #4c4c4c;
font-size: 1.5em;
font-weight: 900;
}
.title span {
font-size: 0.7em;
color: #a6a6a6;
}
.price {
margin: 1.5em 0;
color: #ff3f40;
font-size: 1.2em;
}
.price span {
padding-left: 0.15em;
font-size: 2.9em;
}
.variant {
overflow: auto;
}
.variant h3 {
margin-bottom: 1.1em;
}
.variant li {
float: left;
width: 35px;
height: 35px;
padding: 3px;
border: 1px solid transparent;
border-radius: 3px;
cursor: pointer;
}
.variant li:first-child, .variant li:hover {
border: 1px solid #a6a6a6;
}
.variant li:not(:first-child) {
margin-left: 0.1em;
}
.description {
clear: left;
margin: 2em 0;
}
.description h3 {
margin-bottom: 1em;
}
.description ul {
font-size: 0.8em;
list-style: disc;
margin-left: 1em;
}
.description li {
text-indent: -0.6em;
margin-bottom: 0.5em;
}
.buy--btn {
padding: 1.5em 3.1em;
border: none;
border-radius: 7px;
font-size: 0.8em;
font-weight: 700;
letter-spacing: 1.3px;
color: #fff;
background-color: #ff3f40;
box-shadow: 2px 2px 25px -7px #4c4c4c;
cursor: pointer;
}
.buy--btn:active {
transform: scale(0.97);
}
now you’ve successfully created these Responsive Ecommerce Product Card HTML and CSS. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
