<link href="//cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="product-list"> <ul> <li> <div class="white-box"> <div class="wishlist-icon"> <a href="javascript:void(0);"><img src="https://pngimage.net/wp-content/uploads/2018/06/wishlist-icon-png-3.png" /></a> </div> <div class="product-img"> <img src="https://www.91-img.com/pictures/laptops/asus/asus-x552cl-sx019d-core-i3-3rd-gen-4-gb-500-gb-dos-1-gb-61721-large-1.jpg"> </div> <div class="product-bottom"> <div class="product-name">Asus X552CL-SX019D Laptop</div> <div class="price"> <span class="rupee-icon">₹</span> 32,000 </div> <a href="#" class="blue-btn">Add to cart</a> </div> </div> </li> <li> <div class="white-box"> <div class="wishlist-icon"> <a href="javascript:void(0);"><img src="https://static.thenounproject.com/png/635650-200.png" /></a> </div> <div class="product-img"> <img src="https://images-na.ssl-images-amazon.com/images/I/81nreGN5qQL._SL1500_.jpg"> </div> <div class="product-bottom"> <div class="product-name">ASUS X507 Core i5 - 8th Gen 15.6"</div> <div class="price"> <span class="rupee-icon">₹</span> 30,000 </div> <a href="#" class="blue-btn">Add to cart</a> </div> </div> </li> <li> <div class="white-box"> <div class="wishlist-icon"> <a href="javascript:void(0);"><img src="https://static.thenounproject.com/png/635650-200.png" /></a> </div> <div class="product-img"> <img src="https://images-na.ssl-images-amazon.com/images/I/81RrcHvDGbL._SY355_.jpg"> </div> <div class="product-bottom"> <div class="product-name">ASUS VivoBook S400CA</div> <div class="price"> <span class="rupee-icon">₹</span> 45,000 <span class="line-through"><span class="rupee-icon">₹</span> 50,000</span> </div> <a href="#" class="blue-btn">Add to cart</a> </div> </div> </li> <li> <div class="white-box"> <div class="wishlist-icon"> <a href="javascript:void(0);"><img src="https://static.thenounproject.com/png/635650-200.png" /></a> </div> <div class="product-img"> <img src="https://cdn.mos.cms.futurecdn.net/kwP2nL8FAVboognXmW6nvP-320-80.jpg"> </div> <div class="product-bottom"> <div class="product-name">Asus laptops</div> <div class="price"> <span class="rupee-icon">₹</span> 50,000 <span class="line-through"><span class="rupee-icon">₹</span> 60,000</span> </div> <a href="#" class="blue-btn">Add to cart</a> </div> </div> </li> </ul> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800&display=swap'); .container { margin:0 auto; max-width:1350px; } .product-list { padding: 20px 10px; font-family: 'Nunito Sans', sans-serif; } .product-list>ul { margin: 0 -10px; padding: 0; list-style: none; display: flex; } .product-list>ul>li { width: 25%; padding: 10px 10px; } .white-box { border-radius: 5px; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4); background-color: #ffffff; padding: 35px 20px; transition: all 0.5s ease-in-out; position: relative; } .wishlist-icon { position: absolute; right: 12px; top: 10px; } .wishlist-icon img { width: 20px; height: 20px; } .product-img { min-height: 135px; } .product-img img { max-width: 100%; max-height: 130px; display: block; margin: 0 auto; } .product-bottom { text-align: center; } .product-name { font-size: 16px; color: #666; text-align: center; margin: 10px 0 10px; font-weight: 600; max-height: 48px; min-height: 48px; overflow: hidden; } .price { margin-top: 0; font-size: 18px; font-weight: 600; color: #000000; } .blue-btn { background: #13cfdf; border-radius: 5px; color: #ffffff; font-weight: 700; border: none; padding: 0 15px; cursor: pointer; height: 30px; line-height: 30px; max-width: 132px; margin: 10px auto 0; display: block; text-align: center; text-decoration: none; } .price .line-through { font-size: 14px; color: #999999; font-weight: 400; vertical-align: 1px; display: inline-block; text-decoration: line-through; margin-left: 4px; }