"Product Page For Online Shop"
Bootstrap 3.0.1 Snippet by xrozix

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/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 charset="utf-8"> <title>ILLERA</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="collections.html">Collections</a></li> <span>|</span> <li><a href="shop.html">Shop</a></li> <span>|</span> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div class="container-fluid"> <div class="content-wrapper"> <div class="item-container"> <div class="container"> <div class="col-md-12"> <div class="product col-md-3 service-image-left"> <center> <img id="item-display" src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img> </center> </div> <div class="container service1-items col-sm-2 col-md-2 pull-left"> <center> <a id="item-1" class="service1-item"> <img src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img> </a> <a id="item-2" class="service1-item"> <img src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img> </a> <a id="item-3" class="service1-item"> <img src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img> </a> </center> </div> </div> <div class="col-md-7"> <div class="product-title">TITLE HERE</div> <div class="product-desc"product desc here</div> <div class="product-rating"><i class="fa fa-star gold"></i> <i class="fa fa-star gold"></i> <i class="fa fa-star gold"></i> <i class="fa fa-star gold"></i> <i class="fa fa-star-o"></i> </div> <hr> <div class="product-price">$ 1234.00</div> <div class="product-stock">In Stock</div> <hr> <div class="btn-group cart"> <button type="button" class="btn btn-success"> Add to cart </button> </div> <div class="btn-group wishlist"> <button type="button" class="btn btn-danger"> Add to wishlist </button> </div> </div> </div> </div> <div class="tab-pane fade" id="service-two"> <section class="container"> </section> </div> <div class="tab-pane fade" id="service-three"> </div> </div> <hr> </div> </div> </div> </div> <footer class="mainfooter"> <a href="#"><img src="image/facebook.png" id="facebook"></a> <a href="#"><img src="image/instagram.png" id="instagram"></a> <a href="#"><img src="image/twitter.png" id="instagram"></a> <p> Illera™ 2016</p> </footer> </body> </html>
/********************************************* PRODUCTS *********************************************/ .product{ border: 1px solid #dddddd; height: 321px; } .product>img{ max-width: 230px; } .product-title{ font-size: 20px; } .product-desc{ font-size: 14px; } .product-price{ font-size: 22px; } .product-stock{ color: #74DF00; font-size: 20px; margin-top: 10px; } .product-info{ margin-top: 50px; } /********************************************* VIEW *********************************************/ .content-wrapper { max-width: 1140px; background: #fff; margin: 0 auto; margin-top: 25px; margin-bottom: 10px; border: 0px; border-radius: 0px; } .container-fluid{ max-width: 1140px; margin: 0 auto; } .view-wrapper { float: right; max-width: 70%; margin-top: 25px; } .container { padding-left: 0px; padding-right: 0px; max-width: 100%; } /********************************************* ITEM *********************************************/ .service1-items { padding: 0px 0 0px 0; float: left; position: relative; overflow: hidden; max-width: 100%; height: 321px; width: 130px; } .service1-item { height: 107px; width: 120px; display: block; float: left; position: relative; padding-right: 20px; border-right: 1px solid #DDD; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; } .service1-item > img { max-height: 110px; max-width: 110px; opacity: 0.6; transition: all .2s ease-in; -o-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; } .service1-item > img:hover { cursor: pointer; opacity: 1; } .service-image-left { padding-right: 50px; } .service-image-right { padding-left: 50px; } .service-image-left > center > img,.service-image-right > center > img{ max-height: 155px; } /*=====Homepage=====*/ .homepageimage img{ display:block; margin:40px auto 40px auto; width:45%; } /*=========Navigation========*/ header{ width:50%; font-family:helvetica; color:#000; text-align:center; margin-right:auto; margin-left:auto; padding-top:35px; } ul { list-style-type:none; padding:0; margin:0; padding-bottom:0px; } li { display:inline; padding-right:10px; padding-left:10px; } li a{ text-decoration:none; font-size:15px; } span{ color:#000000; font-size:20px; } a:link{ color:#000; } a:visited{ color:#000; } /*=====Footer=====*/ .mainfooter p{ text-align:center; font-size:15px; font-family: Helvetica, Arial, san-serif; background:black; color:white; padding-top:10px; padding-bottom:10px; } .mainfooter img{ width:3%; padding-bottom:0px; } #facebook{ float:clear; margin-left:45%; } #instagram{ float:clear; } #twitter{ float:clear; margin-right:46.5%; }

Related: See More

Paper Kit 2 Angular
Instagram Style User Online
Bootstrap 4 and CCS3 Product Cards with Transition
Elegant Login Page

Questions / Comments: