ECommerce Product Grid in HTML
Product Grid plays an important role in any e-commerce website or online platform that displays our products. With the help of Product Grid, you can display your product feature on the front page of any website in a very small area. This HTML5 Product Grid view will be very helpful for web designers and developers, who are going to design an eCommerce website for their clients. This Product Grid view in HTML will reduce your valuable working time and increase your productivity.
Hi Friends, Today I am going to explain how to create a Responsive eCommerce Product Grid view using Bootstrap, HTML and CSS. In the earlier article, I explained How can we create an Attractive Responsive Login form using HTML and CSS. So, now I am going to design an eCommerce Product Grid.
Features of eCommerce Product Grid
- Fully Responsive eCommerce Product Grid view in HTML
- Easy to customize and user friendly
- Clean Code
- All Device support (desktop, laptop, tablet, and mobile-friendly)
- Only pure HTML and CSS, no Javascript or any other external plugins
- Google Fonts
- SEO-Friendly eCommerce Product Grid view
- Easy to setup and usability
- Free to use
- Free Font awesome icons integrated
- Cross-browser compatibility (supported by all browsers)
How to use eCommerce Product Grid?
This free HTML5 eCommerce Product Grid view will be simple to use if you know the basics of HTML and CSS. The necessary code only has to be copied and pasted into your website. If you need to change the font, simply go to the Google Fonts page, select the font you want, and incorporate it into your site. Or if you want to change the image, then just select the image and paste it into the image folder, and call the image name in the <img >
tag.
Follow the steps to create an eCommerce Product Grid view in HTML CSS
Before starting the HTML code, we need to add the bootstrap CSS and the font Awesome library to the head section of your website.
<link rel="stylesheet" media="all" href="css/style.css" />
<link rel="stylesheet" media="all" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />HTML Code
This section will contain all the HTML codes that will help you create the basic structure of the eCommerce product grid view.
<section class="courses-grid-section sp-three">
<div class="container">
<div class="row">
<div class="col-xl-12 col-sm-12">
<div class="left-side-area">
<div class="row">
<article class="col-xl-4 col-md-12 col-sm-12">
<div class="gallery-item">
<div class="image-box"> <img src="images/gallery/7.jpg" alt="">
<div class="overlay"> <a class="link-btn" href="courses-single.html"> <i class="fa fa-link"></i> </a> </div>
</div>
<div class="image-content">
<div class="date-box">
<h6>$300</h6>
</div>
<div class="reting clearfix">
<div class="float-left">
<div class="reting-star"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-half-o" aria-hidden="true"></i> </div>
</div>
<div class="float-right"> <a href="#"><span>Join Now</span></a> </div>
</div>
<div class="bottom-text"> <a href="courses-single.html">
<h6>Computer Management System with Infomatics</h6>
</a> </div>
<div class="info clearfix">
<div class="float-left">
<p><i class="fa fa-calendar" aria-hidden="true"></i>Start date: 05 Dec 2022</p>
</div>
<div class="float-right">
<p><i class="fa fa-user" aria-hidden="true"></i>512 Students</p>
</div>
</div>
</div>
</div>
</article>
<article class="col-xl-4 col-md-12 col-sm-12">
<div class="gallery-item">
<div class="image-box"> <img src="images/gallery/8.jpg" alt="">
<div class="overlay"> <a class="link-btn" href="courses-single.html"> <i class="fa fa-link"></i> </a> </div>
</div>
<div class="image-content">
<div class="date-box">
<h6>Free</h6>
</div>
<div class="reting clearfix">
<div class="float-left">
<div class="reting-star"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-half-o" aria-hidden="true"></i> </div>
</div>
<div class="float-right"> <a href="#"><span>Join Now</span></a> </div>
</div>
<div class="bottom-text"> <a href="courses-single.html">
<h6>Software Management System with Infomatics</h6>
</a> </div>
<div class="info clearfix">
<div class="float-left">
<p><i class="fa fa-calendar" aria-hidden="true"></i>Start date: 05 Dec 2022</p>
</div>
<div class="float-right">
<p><i class="fa fa-user" aria-hidden="true"></i>52 Students</p>
</div>
</div>
</div>
</div>
</article>
<article class="col-xl-4 col-md-12 col-sm-12">
<div class="gallery-item">
<div class="image-box"> <img src="images/gallery/9.jpg" alt="">
<div class="overlay"> <a class="link-btn" href="courses-single.html"> <i class="fa fa-link"></i> </a> </div>
</div>
<div class="image-content">
<div class="date-box">
<h6>$400</h6>
</div>
<div class="reting clearfix">
<div class="float-left">
<div class="reting-star"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-half-o" aria-hidden="true"></i> </div>
</div>
<div class="float-right"> <a href="#"><span>Join Now</span></a> </div>
</div>
<div class="bottom-text"> <a href="courses-single.html">
<h6>Embedded Systems of Arithmetic & Logarthm</h6>
</a> </div>
<div class="info clearfix">
<div class="float-left">
<p><i class="fa fa-calendar" aria-hidden="true"></i>Start date: 05 Dec 2022</p>
</div>
<div class="float-right">
<p><i class="fa fa-user" aria-hidden="true"></i>300 Students</p>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</section>CSS Code
The CSS style will help you provide some style in the product grid view, which makes the eCommerce product grid view look beautiful.
a, a:hover, a:active, a:focus {
text-decoration: none;
outline: none;
border: none;
}
.gallery-item .bottom-text h6 {
font-size: 18px;
color: #333333;
line-height: 27px;
font-weight: 600;
transition: .5s ease;
}
.sp-three {
padding: 130px 0px 100px;
}
.left-side-area {
margin-right: -20px;
}
.gallery-item {
position: relative;
overflow: hidden;
width: 100%;
display: inline-block;
margin-bottom: 30px;
}
.gallery-item .image-box {
position: relative;
overflow: hidden;
}
.gallery-item:hover .image-box:before {
opacity: 1;
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
}
.gallery-item .image-box:before {
position: absolute;
content: '';
left: 0px;
top: 0px;
width: 100%;
height: 100%;
display: block;
z-index: 8;
opacity: 0;
-webkit-transform: perspective(400px) rotateX(-90deg);
-ms-transform: perspective(400px) rotateX(-90deg);
transform: perspective(400px) rotateX(-90deg);
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
background-color: rgba(0, 0, 0, 0.75);
}
img {
vertical-align: middle;
border-style: none;
}
.gallery-item .overlay {
left: 0;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
z-index: 10;
}
.gallery-item .overlay a {
background: rgba(255, 255, 255, 0.85) none repeat scroll 0 0;
border-radius: 50%;
color: #222;
font-size: 20px;
height: 60px;
margin: 0 5px;
line-height: 60px;
opacity: 0;
display: inline-block;
text-align: center;
-webkit-transform: translateX(0%) translateY(-30%) scale(0.9);
-ms-transform: translateX(0%) translateY(-30%) scale(0.9);
transform: translateX(0%) translateY(-30%) scale(0.9);
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
width: 60px;
}
.gallery-item:hover .overlay a {
opacity: 1;
-webkit-transform: translateX(0) translateY(0%) scale(1);
-ms-transform: translateX(0) translateY(0%) scale(1);
transform: translateX(0) translateY(0%) scale(1);
}
.gallery-item:hover .overlay {
opacity: 1;
}
.gallery-item .image-content {
position: relative;
padding: 30px 30px;
background: #fafafa;
}
.gallery-item .date-box {
position: absolute;
top: -32px;
left: 50%;
margin-left: -32px;
display: inline-block;
}
.gallery-item .date-box h6 {
position: relative;
z-index: 8;
font-size: 17px;
color: #000000;
width: 65px;
height: 65px;
text-align: center;
line-height: 55px;
border-radius: 50%;
background: #f9be4d;
border: 6px solid #ffffff;
font-family: 'Roboto', sans-serif;
}
.gallery-item .reting i, .gallery-item .reting span {
color: #f36371;
font-size: 14px;
line-height: 26px;
font-weight: 400;
font-style: normal;
}
.gallery-item .info p {
color: #333333;
font-weight: 500;
margin-bottom: 0px;
font-size: 14px;
}
.gallery-item .info p i {
margin-right: 8px;
color: #f9be4d;
}
.gallery-item .bottom-text {
padding: 6px 0px 20px;
}
.gallery-item .info {
position: relative;
padding-top: 15px;
border-top: 1px solid #e8e8e8;
}
.gallery-item img {
width: 100%;
transform: scale(1);
transition: .5s ease;
}
img {
max-width: 100%;
height: auto;
}
@media only screen and (max-width: 1199px){
.left-side-area {
margin-right: 0px;
}
}
@media only screen and (max-width: 1199px){
.left-side-area {
margin-bottom: 40px;
}
.left-side-area {
margin-right: -20px;
}
}
@media only screen and (max-width: 400px){
.gallery-item .image-content{
padding: 20px 10px;
}
.gallery-item .info .float-left,
.gallery-item .info .float-right{
float: none !important;
margin-bottom: 10px;
}
}
@media only screen and (max-width: 767px){
.sp-three {
padding: 100px 0px 70px;
}
.sp-three {
padding: 130px 0px 100px;
}
}
@media only screen and (max-width: 400px){
.gallery-item .image-content {
padding: 20px 10px;
}
.gallery-item .image-content {
position: relative;
padding: 30px 30px;
background: #fafafa;
}
.gallery-item .info .float-left, .gallery-item .info .float-right {
float: none !important;
margin-bottom: 10px;
}
}Conclusion
Hope this tutorial, will help you to create a Responsive eCommerce Product Grid View. If you have any problems using this snippet, please comment below.
Download Source Code
Related Post
