"eCommerce Product Detail"
Bootstrap 3.3.0 Snippet by Gauri619

<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"> <title>eCommerce Product Detail</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"> </head> <body> <div class="container"> <div class="card"> <div class="container-fliud"> <div class="wrapper row"> <div class="preview col-md-6"> <div class="preview-pic tab-content"> <div class="tab-pane active" id="pic-1"><img src="http://static.highsnobiety.com/wp-content/uploads/2015/04/adidas-originals-stan-smith-core-black-running-white-00.jpg" /></div> <div class="tab-pane" id="pic-2"><img src="http://www.278255.net/pic/Adidas-Stan-Smith/Adidas-Stan-Smith-Lovers/Black-Stan-Smith-278255-Net.jpg" /></div> <div class="tab-pane" id="pic-3"><img src="http://www.adidastrainersale.uk.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/A/d/Adidas-Stan-Smith-Womens-Royal-Blue-Black-2.jpg" /></div> <div class="tab-pane" id="pic-4"><img src="http://static.highsnobiety.com/wp-content/uploads/2015/12/23120724/adidas-originals-stan-smith-all-black-0.jpg" /></div> <div class="tab-pane" id="pic-5"><img src="http://image.rakuten.co.jp/atmos-tokyo/cabinet/adidas-2/m17181-1.jpg" /></div> </div> <ul class="preview-thumbnail nav nav-tabs"> <li class="active"><a data-target="#pic-1" data-toggle="tab"><img src="http://static.highsnobiety.com/wp-content/uploads/2015/04/adidas-originals-stan-smith-core-black-running-white-00.jpg" /></a></li> <li><a data-target="#pic-2" data-toggle="tab"><img src="http://www.278255.net/pic/Adidas-Stan-Smith/Adidas-Stan-Smith-Lovers/Black-Stan-Smith-278255-Net.jpg" /></a></li> <li><a data-target="#pic-3" data-toggle="tab"><img src="http://www.adidastrainersale.uk.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/A/d/Adidas-Stan-Smith-Womens-Royal-Blue-Black-2.jpg" /></a></li> <li><a data-target="#pic-4" data-toggle="tab"><img src="http://static.highsnobiety.com/wp-content/uploads/2015/12/23120724/adidas-originals-stan-smith-all-black-0.jpg" /></a></li> <li><a data-target="#pic-5" data-toggle="tab"><img src="http://image.rakuten.co.jp/atmos-tokyo/cabinet/adidas-2/m17181-1.jpg" /></a></li> </ul> </div> <div class="details col-md-6"> <h3 class="product-title">Adidas Stan Smith</h3> <div class="rating"> <div class="stars"> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> <span class="fa fa-star checked"></span> </div> <span class="review-no"><font color="maroon">Popularity</font></span> </div> <p class="product-description">Adidas Stan Smith is a tennis shoe made by Adidas. However, today the shoe is not used for tennis, but as sneakers.Stan Smith is an American tennis player, who was active between the end of the 1960s and the beginning of the 1980s.There are several different versions of the adidas stan smith.Normally, they are white with grass-green heel parts and have laces, but there are also other colorings. </span></h4> <p class="vote"><strong>91%</strong> of buyers enjoyed this product! <strong>(87 votes)</strong></p> <h5 class="sizes">sizes: <span class="size" data-toggle="tooltip" title="small">s</span> <span class="size" data-toggle="tooltip" title="medium">m</span> <span class="size" data-toggle="tooltip" title="large">l</span> <span class="size" data-toggle="tooltip" title="xtra large">xl</span> </h5> <h4 class="price">current price: <span><font color="#0174DF">Rs.13,995/-</font></span></h4> <h5 class="colors">colors: <span class="color orange not-available" data-toggle="tooltip" title="Not In store"></span> <span class="color green"></span> <span class="color blue"></span> </h5> <div class="action"> <button class="add-to-cart btn btn-default" type="button">add to cart</button> <button class="like btn btn-default" type="button"><span class="fa fa-heart"></span></button> </div> </div> </div> </div> </div> </div>
/*****************globals*************/ body { font-family: 'open sans'; overflow-x: hidden; } img { max-width: 100%; } .preview { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 996px) { .preview { margin-bottom: 20px; } } .preview-pic { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .preview-thumbnail.nav-tabs { border: none; margin-top: 15px; } .preview-thumbnail.nav-tabs li { width: 18%; margin-right: 2.5%; } .preview-thumbnail.nav-tabs li img { max-width: 100%; display: block; } .preview-thumbnail.nav-tabs li a { padding: 0; margin: 0; } .preview-thumbnail.nav-tabs li:last-of-type { margin-right: 0; } .tab-content { overflow: hidden; } .tab-content img { width: 100%; -webkit-animation-name: opacity; animation-name: opacity; -webkit-animation-duration: .3s; animation-duration: .3s; } .card { margin-top: 50px; background: #eee; padding: 3em; line-height: 1.5em; } @media screen and (min-width: 997px) { .wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } .details { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .colors { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .product-title, .price, .sizes, .colors { text-transform: UPPERCASE; font-weight: bold; } .checked, .price span { color: #ff9f1a; } .product-title, .rating, .product-description, .price, .vote, .sizes { margin-bottom: 15px; } .product-title { margin-top: 0; } .size { margin-right: 10px; } .size:first-of-type { margin-left: 40px; } .color { display: inline-block; vertical-align: middle; margin-right: 10px; height: 2em; width: 2em; border-radius: 2px; } .color:first-of-type { margin-left: 20px; } .add-to-cart, .like { background: #ff9f1a; padding: 1.2em 1.5em; border: none; text-transform: UPPERCASE; font-weight: bold; color: #fff; -webkit-transition: background .3s ease; transition: background .3s ease; } .add-to-cart:hover, .like:hover { background: #b36800; color: #fff; } .not-available { text-align: center; line-height: 2em; } .not-available:before { font-family: fontawesome; content: "\f00d"; color: #fff; } .orange { background: #ff9f1a; } .green { background: #85ad00; } .blue { background: #0076ad; } .tooltip-inner { padding: 1.3em; } @-webkit-keyframes opacity { 0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes opacity { 0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } /*# sourceMappingURL=style.css.map */

Related: See More


Questions / Comments: