"product design"
Bootstrap 4.0.0 Snippet by DiTso

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Website CSS style --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Pacifico&subset=latin-ext,vietnamese" rel="stylesheet"> <!-- Website Font style --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <link rel="stylesheet" href="product.css"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700&subset=latin-ext,vietnamese" rel="stylesheet"> <title>Product Shop Responsive </title> </head> <body> <div class="container"> <h4>NEW COLLECTION</h4> <div class="row"> <!-- BEGIN PRODUCTS --> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/41uq0fc4d/item_2_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/655583bx9/item_1_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/5w7ki5z4t/item_4_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/dawwajl0d/item_3_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/41uq0fc4d/item_2_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/655583bx9/item_1_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/5w7ki5z4t/item_4_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/dawwajl0d/item_3_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/41uq0fc4d/item_2_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/655583bx9/item_1_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/5w7ki5z4t/item_4_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/dawwajl0d/item_3_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/41uq0fc4d/item_2_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/655583bx9/item_1_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/5w7ki5z4t/item_4_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/dawwajl0d/item_3_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/41uq0fc4d/item_2_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/655583bx9/item_1_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/5w7ki5z4t/item_4_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="https://s12.postimg.org/dawwajl0d/item_3_180x200.png" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <a href="http://cookingfoodsworld.blogspot.in/" target="_blank" > <button class="btn btn-info right" > BUY ITEM</button></a> </div> </div> </span> </div> <!-- END PRODUCTS --> </div> </div><!-------container-----> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700&subset=latin-ext,vietnamese'); body{font-family: 'Quicksand', sans-serif;} h4{ font-weight: 600; } p{ font-size: 12px; margin-top: 5px; } .price{ font-size: 30px; margin: 0 auto; color: #333; } .thumbnail{ opacity:0.70; -webkit-transition: all 0.5s; transition: all 0.5s; } .thumbnail:hover{ opacity:1.00; box-shadow: 0px 0px 10px #4bc6ff; } .line{ margin-bottom: 5px; } @media screen and (max-width: 770px) { .right{ float:left; width: 100%; } } span.thumbnail { border: 1px solid #00c4ff !important; border-radius: 0px !important; -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.16); -moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.16); box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.16); padding: 10px; } .container h4{margin-top:70px; margin-bottom:30px;} button { margin-top: 6px; } .right { float: right; border-bottom: 2px solid #0a5971; } .btn-info { color: #fff; background-color: #19b4e2; border-color: #19b4e2; font-size:13px; font-weight:600; }

Related: See More


Questions / Comments: