Ecommerce Product Diplay Page Using Bootstrap

How To Create Responsive Product Display Page Using Bootstrap

Hello Friends Today i am going to tell you how to create E-commerce Website Product Display layout…

How To Create Responsive Product Display Page Using Bootstrap
How To Create Responsive Product Display Page Using Bootstrap

 

<h2 style="text-align:center;">How To Create Product Display Page Using Bootstrap </h2><br /><div class="container">
<div class="col-md-2 box">
<div class="heart"><i class="fa fa-heart"></i></div>
<div class="hover">Buy Now</div>
<img src="images/1.jpeg" class="img-responsive" />
<div class="holder gap">
<h3>Nike Shoes</h3>
<img src="images/flipkart.png" />
<div class="clearfix"></div>
</div>

<div class="holder pb">
<div class="offer_price">Rs.2460</div>
<div class="price">Rs.2860</div>
<div class="offer">30% Off</div>
<div class="clearfix"></div>
</div>
</div>

<div class="col-md-2 box">
<div class="heart"><i class="fa fa-heart"></i></div>
<div class="hover">Buy Now</div>
<img src="images/2.jpeg" class="img-responsive" />
<div class="holder gap">
<h3>Nike Shoes</h3>
<img src="images/flipkart.png" />
<div class="clearfix"></div>
</div>

<div class="holder pb">
<div class="offer_price">Rs.2460</div>
<div class="price">Rs.2860</div>
<div class="offer">30% Off</div>
<div class="clearfix"></div>
</div>
</div>

<div class="col-md-2 box">
<div class="heart"><i class="fa fa-heart"></i></div>
<div class="hover">Buy Now</div>
<img src="images/3.jpeg" class="img-responsive" />
<div class="holder gap">
<h3>Nike Shoes</h3>
<img src="images/flipkart.png" />
<div class="clearfix"></div>
</div>

<div class="holder pb">
<div class="offer_price">Rs.2460</div>
<div class="price">Rs.2860</div>
<div class="offer">30% Off</div>
<div class="clearfix"></div>
</div>
</div>

<div class="col-md-2 box">
<div class="heart"><i class="fa fa-heart"></i></div>
<div class="hover">Buy Now</div>
<img src="images/4.jpeg" class="img-responsive" />
<div class="holder gap">
<h3>Nike Shoes</h3>
<img src="images/flipkart.png" />
<div class="clearfix"></div>
</div>

<div class="holder pb">
<div class="offer_price">Rs.2460</div>
<div class="price">Rs.2860</div>
<div class="offer">30% Off</div>
<div class="clearfix"></div>
</div>
</div>

<div class="col-md-2 box">
<div class="heart"><i class="fa fa-heart"></i></div>
<div class="hover">Buy Now</div>
<img src="images/5.jpeg" class="img-responsive" />
<div class="holder gap">
<h3>Nike Shoes</h3>
<img src="images/flipkart.png" />
<div class="clearfix"></div>
</div>

<div class="holder pb">
<div class="offer_price">Rs.2460</div>
<div class="price">Rs.2860</div>
<div class="offer">30% Off</div>
<div class="clearfix"></div>
</div>
</div>

<div class="col-md-2 box">
<div class="heart"><i class="fa fa-heart"></i></div>
<div class="hover">Buy Now</div>
<img src="images/6.jpeg" class="img-responsive" />
<div class="holder gap">
<h3>Nike Shoes</h3>
<img src="images/flipkart.png" />
<div class="clearfix"></div>
</div>

<div class="holder pb">
<div class="offer_price">Rs.2460</div>
<div class="price">Rs.2860</div>
<div class="offer">30% Off</div>
<div class="clearfix"></div>
</div>
</div>

</div>
</div>

 

body{font-family:Oswald,sans-serif}h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}.mt{margin-top:15px}.heart{position:absolute;left:20;top:10;width:30px;height:30px}.heart i{font-size:25px;color:#c00}.box{padding:5px;cursor:pointer;background:#fff;position:relative}.box:hover{z-index:10000;-webkit-box-shadow:0 0 24px 0 rgba(235,230,235,1);-moz-box-shadow:0 0 24px 0 rgba(235,230,235,1);box-shadow:0 0 24px 0 rgba(235,230,235,1)}.box img{width:100%;height:100px;text-align:center}.gap{margin-top:50px}.holder img{width:70px;height:20px;float:right;right:10px;margin-top:10px}.holder h3{font-size:13px;font-weight:600;float:left;left:10px}.offer_price{float:left;font-size:11px;font-weight:600}.price{float:left;font-size:11px;font-weight:600;text-decoration:line-through;padding-left:20px}.offer{float:right;font-size:11px;font-weight:600;color:#0d7b6d}.hover{display:none;background:#f90;font-size:13px;padding:3px;margin-left:auto;margin-right:auto;color:#333;border-radius:10px;padding-left:5px;padding-right:5px;text-align:center;left:30%;transition:all ease-out .3s}.box:hover .hover{display:block;position:absolute;top:120px}.pb{padding-bottom:15px}

Leave a Reply

Your email address will not be published. Required fields are marked *