How to create product listing HTML code
There are three different styles of product listing page, if you get the code copy and paste from my blog.
<!DOCTYPE html>
<html>
<head>
<title>Product Listing</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style type="text/css">
body {margin:0; padding: 0px; font-family: 'Roboto', sans-serif; background-color: #f1f1f1;}
.wrapper{width: 100%; max-width: 1200px; margin: 0 auto;}
section{margin-bottom: 15px;}
ul:after{clear: both; content: '';}
a {color: #3c8dbc; text-decoration: none;}
ul{margin: 0px; padding: 0px;}
ul li {display: inline-block; position: relative;}
ul li a{display: inline-block; }
.floatLeft {float: left;}
.floatRight{float: right;}
.box{background-color: #fff; padding: 15px; max-width: 400px; border-radius: 3px;border-top: 3px solid #d2d6de; margin-bottom: 20px;width: 100%;box-shadow: 0 1px 1px rgba(0,0,0,0.1); float: left;}
.products-list .productImg{width: 80px; height: 80px; background-color: #d2d6de;}
.products-list .productInfo{margin-left: 90px;}
.products-list .productInfo p{ color: #999; font-size: 14px; margin-top: 0px; margin-bottom: 5px;}
.products-list .price{font-size: 12px;}
.products-list .item{ border-bottom: 1px solid #f4f4f4; padding: 10px 0;}
.title{ font-size: 18px; font-weight: normal;}
.box h3{margin: 0px; padding-bottom: 8px; border-bottom: 1px solid #f4f4f4; margin-bottom:10px; }
.btn{font-size: 12px; padding: 6px; color: #fff; background-color: #3c8dbc;}
.boxes-3 .box{ width: 30%;min-height: 100px; margin-right: 0.5%; }
.fullWidth .productImg{width: 100%; height: 100px; background-color: #d2d6de;}
.fullWidth .products-list .productInfo{margin-left: 0px;}
.fullWidth .productInfo a{padding-top: 10px;}
.productInfo.nomargin{margin: 0px;}
</style>
</head>
<body>
<div class="wrapper">
<h2></h2>
<section class="boxes-3">
<!-- Product Listing html Start -->
<div class="box">
<h3 class="title">Product Listing <a class="btn floatRight" href="javascript:void(0)">View All</a></h3>
<ul class="products-list">
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
</ul>
</div>
<!-- Product Listing html End -->
<!-- Product Listing html Start -->
<div class="box fullWidth">
<h3 class="title">Product Listing <a class="btn floatRight" href="javascript:void(0)">View All</a></h3>
<ul class="products-list">
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
</ul>
</div>
<!-- Product Listing html End -->
<!-- Product Listing html Start -->
<div class="box">
<h3 class="title">Product Listing <a class="btn floatRight" href="javascript:void(0)">View All</a></h3>
<ul class="products-list">
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
<li class="item">
<div class="floatRight productImg"></div>
<div class="productInfo nomargin">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
<li class="item">
<div class="floatRight productImg"></div>
<div class="productInfo nomargin">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
<li class="item">
<div class="floatLeft productImg"></div>
<div class="productInfo">
<a href="javascript:void(0)" class="product-title">Title Here</a>
<p>Dummy paragraph is smooth and easy text of the graphics and printing media for use of dummy text.</p>
<i class="price">$120.99</i>
</div>
</li>
</ul>
</div>
<!-- Product Listing html End -->
</section>
</div>
<!-- .wrapper html ended -->
</body>
</html>
Comments
Post a Comment