How to create HTML Product Card - HTML Ecommerce Tutorial

HTML Product Card is part of html page where user orders a product.

HTML Product Card belongs details of product.

CSS Code

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
*
{ -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;
}
body
{ font-family: 'Roboto', sans-serif;
}
a
{ text-decoration: none;
}
.product-card { width: 380px; position: relative; box-shadow: 0 2px 7px #dfdfdf; margin: 50px auto; background: #fafafa;
}
.badge { position: absolute; left: 0; top: 20px; text-transform: uppercase; font-size: 13px; font-weight: 700; background: red; color: #fff; padding: 3px 10px;
}
.product-tumb { display: flex; align-items: center; justify-content: center; height: 300px; padding: 50px; background: #f0f0f0;
}
.product-tumb img { max-width: 100%; max-height: 100%;
}
.product-details { padding: 30px;
}
.product-catagory { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; color: #ccc; margin-bottom: 18px;
}
.product-details h4 a { font-weight: 500; display: block; margin-bottom: 18px; text-transform: uppercase; color: #363636; text-decoration: none; transition: 0.3s;
}
.product-details h4 a:hover { color: #fbb72c;
}
.product-details p { font-size: 15px; line-height: 22px; margin-bottom: 18px; color: #999;
}
.product-bottom-details { overflow: hidden; border-top: 1px solid #eee; padding-top: 20px;
}
.product-bottom-details div { float: left; width: 50%;
}
.product-price { font-size: 18px; color: #fbb72c; font-weight: 600;
}
.product-price small { font-size: 80%; font-weight: 400; text-decoration: line-through; display: inline-block; margin-right: 5px;
}
.product-links { text-align: right;
}
.product-links a { display: inline-block; margin-left: 5px; color: #e1e1e1; transition: 0.3s; font-size: 17px;
}
.product-links a:hover { color: #fbb72c;
}
</style>
<link href="https://use.fontawesome.com/7dd91a0fb4.css" media="all" rel="stylesheet">

HTML Code

<body translate="no"> <div class="product-card">	<div class="badge">Hot</div>	<div class="product-tumb">	<img src="https://i.imgur.com/xdbHo4E.png" alt="">	</div>	<div class="product-details">	<span class="product-catagory">Women,bag</span>	<h4><a href="">Women leather bag</a></h4>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, possimus nostrum!</p>	<div class="product-bottom-details">	<div class="product-price"><small>$96.00</small>$230.99</div>	<div class="product-links">	<a href=""><i class="fa fa-heart"></i></a>	<a href=""><i class="fa fa-shopping-cart"></i></a>	</div>	</div>	</div>	</div>

Javascript Code

<script src="https://use.fontawesome.com/7dd91a0fb4.js"></script>

Full Code Example of HTML Product Card

index.html

Example: HTML

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
*
{ -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;
}
body
{ font-family: 'Roboto', sans-serif;
}
a
{ text-decoration: none;
}
.product-card { width: 380px; position: relative; box-shadow: 0 2px 7px #dfdfdf; margin: 50px auto; background: #fafafa;
}
.badge { position: absolute; left: 0; top: 20px; text-transform: uppercase; font-size: 13px; font-weight: 700; background: red; color: #fff; padding: 3px 10px;
}
.product-tumb { display: flex; align-items: center; justify-content: center; height: 300px; padding: 50px; background: #f0f0f0;
}
.product-tumb img { max-width: 100%; max-height: 100%;
}
.product-details { padding: 30px;
}
.product-catagory { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; color: #ccc; margin-bottom: 18px;
}
.product-details h4 a { font-weight: 500; display: block; margin-bottom: 18px; text-transform: uppercase; color: #363636; text-decoration: none; transition: 0.3s;
}
.product-details h4 a:hover { color: #fbb72c;
}
.product-details p { font-size: 15px; line-height: 22px; margin-bottom: 18px; color: #999;
}
.product-bottom-details { overflow: hidden; border-top: 1px solid #eee; padding-top: 20px;
}
.product-bottom-details div { float: left; width: 50%;
}
.product-price { font-size: 18px; color: #fbb72c; font-weight: 600;
}
.product-price small { font-size: 80%; font-weight: 400; text-decoration: line-through; display: inline-block; margin-right: 5px;
}
.product-links { text-align: right;
}
.product-links a { display: inline-block; margin-left: 5px; color: #e1e1e1; transition: 0.3s; font-size: 17px;
}
.product-links a:hover { color: #fbb72c;
}
</style>
<link href="https://use.fontawesome.com/7dd91a0fb4.css" media="all" rel="stylesheet">
<body translate="no"> <div class="product-card">	<div class="badge">Hot</div>	<div class="product-tumb">	<img src="https://i.imgur.com/xdbHo4E.png" alt="">	</div>	<div class="product-details">	<span class="product-catagory">Women,bag</span>	<h4><a href="">Women leather bag</a></h4>	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, possimus nostrum!</p>	<div class="product-bottom-details">	<div class="product-price"><small>$96.00</small>$230.99</div>	<div class="product-links">	<a href=""><i class="fa fa-heart"></i></a>	<a href=""><i class="fa fa-shopping-cart"></i></a>	</div>	</div>	</div>	</div> <script src="https://use.fontawesome.com/7dd91a0fb4.js"></script>

Output should be:

Category :	Web Tutorial
Sub Category :	HTML Ecommerce Tutorial
Uploaded by :	Admin

Read Article

https://horje.com/learn/1434/reference