"4.1"
Bootstrap 3.3.0 Snippet by exigentinc

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="product"> <!-- BEGIN product-detail --> <div class="product-detail"> <!-- BEGIN product-image --> <div class="product-image"> <!-- BEGIN product-thumbnail --> <div class="product-thumbnail"> <ul class="product-thumbnail-list"> <li class="active"><a href="#" data-click="show-main-image" data-url="../assets/img/product/product-iphone-6s-plus-2.jpg"><img src="../assets/img/product/product-iphone-6s-plus-2.jpg" alt=""></a></li> <li><a href="#" data-click="show-main-image" data-url="../assets/img/product/product-iphone-6s-plus-3.jpg"><img src="../assets/img/product/product-iphone-6s-plus-3.jpg" alt=""></a></li> <li><a href="#" data-click="show-main-image" data-url="../assets/img/product/product-iphone-6s-plus-4.jpg"><img src="../assets/img/product/product-iphone-6s-plus-4.jpg" alt=""></a></li> <li><a href="#" data-click="show-main-image" data-url="../assets/img/product/product-iphone-6s-plus-5.jpg"><img src="../assets/img/product/product-iphone-6s-plus-5.jpg" alt=""></a></li> <li><a href="#" data-click="show-main-image" data-url="../assets/img/product/product-iphone-6s-plus-6.jpg"><img src="../assets/img/product/product-iphone-6s-plus-6.jpg" alt=""></a></li> <li><a href="#" data-click="show-main-image" data-url="../assets/img/product/product-iphone-6s-plus-7.jpg"><img src="../assets/img/product/product-iphone-6s-plus-7.jpg" alt=""></a></li> </ul> </div> <!-- END product-thumbnail --> <!-- BEGIN product-main-image --> <div class="product-main-image" data-id="main-image"> <img src="../assets/img/product/product-iphone-6s-plus.png" alt=""> </div> <!-- END product-main-image --> </div> <!-- END product-image --> <!-- BEGIN product-info --> <div class="product-info"> <!-- BEGIN product-info-header --> <div class="product-info-header"> <h1 class="product-title"><span class="label label-success">41% OFF</span> Apple iPhone 6S Plus (16GB) Silver - #89270182 </h1> <ul class="product-category"> <li><a href="#">iPhone</a></li> <li>/</li> <li><a href="#">mobile phone</a></li> <li>/</li> <li><a href="#">electronics</a></li> <li>/</li> <li><a href="#">lifestyle</a></li> </ul> </div> <!-- END product-info-header --> <!-- BEGIN product-warranty --> <div class="product-warranty"> <div class="pull-right">Availability: In stock</div> <div><b>1 Year</b> Local Manufacturer Warranty</div> </div> <!-- END product-warranty --> <!-- BEGIN product-info-list --> <ul class="product-info-list"> <li><i class="fa fa-circle"></i> 5.5" Retina HD Display with 3D Touch</li> <li><i class="fa fa-circle"></i> Fingerprint-resistant oleophobic coating</li> <li><i class="fa fa-circle"></i> A9 chip with 64-bit</li> <li><i class="fa fa-circle"></i> Ultrafast 4G LTE Advanced wireless</li> <li><i class="fa fa-circle"></i> New 12-megapixel iSight camera</li> <li><i class="fa fa-circle"></i> 4k video recording</li> <li><i class="fa fa-circle"></i> iOS 9 with Touch ID and Apple Pay</li> </ul> <!-- END product-info-list --> <!-- BEGIN product-social --> <div class="product-social"> <ul> <li><a href="javascript:;" class="facebook" data-toggle="tooltip" data-trigger="hover" data-title="Facebook" data-placement="top" data-original-title="" title=""><i class="fa fa-facebook"></i></a></li> <li><a href="javascript:;" class="twitter" data-toggle="tooltip" data-trigger="hover" data-title="Twitter" data-placement="top" data-original-title="" title=""><i class="fa fa-twitter"></i></a></li> <li><a href="javascript:;" class="google-plus" data-toggle="tooltip" data-trigger="hover" data-title="Google Plus" data-placement="top" data-original-title="" title=""><i class="fa fa-google-plus"></i></a></li> <li><a href="javascript:;" class="whatsapp" data-toggle="tooltip" data-trigger="hover" data-title="Whatsapp" data-placement="top" data-original-title="" title=""><i class="fa fa-whatsapp"></i></a></li> <li><a href="javascript:;" class="tumblr" data-toggle="tooltip" data-trigger="hover" data-title="Tumblr" data-placement="top" data-original-title="" title=""><i class="fa fa-tumblr"></i></a></li> </ul> </div> <!-- END product-social --> <!-- BEGIN product-purchase-container --> <div class="product-purchase-container"> <div class="product-discount"> <span class="discount">$869.00</span> </div> <div class="product-price"> <div class="price">$749.00</div> </div> <button class="btn btn-inverse btn-lg" type="submit">ADD TO CART</button> </div> <!-- END product-purchase-container --> </div> <!-- END product-info --> </div> <!-- END product-detail --> <!-- BEGIN product-tab --> <div class="product-tab"> <!-- BEGIN #product-tab --> <ul id="product-tab" class="nav nav-tabs"> <li class="active"><a href="#product-desc" data-toggle="tab">Product Description</a></li> <li class=""><a href="#product-info" data-toggle="tab">Additional Information</a></li> <li class=""><a href="#product-reviews" data-toggle="tab">Rating & Reviews (5)</a></li> </ul> <!-- END #product-tab --> <!-- BEGIN #product-tab-content --> <div id="product-tab-content" class="tab-content"> <!-- BEGIN #product-desc --> <div class="tab-pane fade active in" id="product-desc"> <!-- BEGIN product-desc --> <div class="product-desc"> <div class="image"> <img src="../assets/img/product/product-main.jpg" alt=""> </div> <div class="desc"> <h4>iPhone 6s</h4> <p> The moment you use iPhone 6s, you know you�ve never felt anything like it. With a single press, 3D Touch lets you do more than ever before. Live Photos bring your memories to life in a powerfully vivid way. And that�s just the beginning. Take a deeper look at iPhone 6s, and you�ll find innovation on every level. </p> </div> </div> <!-- END product-desc --> <!-- BEGIN product-desc --> <div class="product-desc right"> <div class="image"> <img src="../assets/img/product/product-3dtouch.jpg" alt=""> </div> <div class="desc"> <h4>3D Touch</h4> <p> The original iPhone introduced the world to Multi-Touch, forever changing the way people experience technology. With 3D Touch, you can do things that were never possible before. It senses how deeply you press the display, letting you do all kinds of essential things more quickly and simply. And it gives you real-time feedback in the form of subtle taps from the all-new Taptic Engine. </p> </div> </div> <!-- END product-desc --> <!-- BEGIN product-desc --> <div class="product-desc"> <div class="image"> <img src="../assets/img/product/product-cameras.jpg" alt=""> </div> <div class="desc"> <h4>Cameras</h4> <p> The 12-megapixel iSight camera captures sharp, detailed photos. It takes brilliant 4K video, up to four times the resolution of 1080p HD video. iPhone 6s also takes selfies worthy of a self-portrait with the new 5-megapixel FaceTime HD camera. And it introduces Live Photos, a new way to relive your favorite memories. It captures the moments just before and after your picture and sets it in motion with just the press of a finger. </p> </div> </div> <!-- END product-desc --> <!-- BEGIN product-desc --> <div class="product-desc right"> <div class="image"> <img src="../assets/img/product/product-technology.jpg" alt=""> </div> <div class="desc"> <h4>Technology</h4> <p> iPhone 6s is powered by the custom-designed 64-bit A9 chip. It delivers performance once found only in desktop computers. You�ll experience up to 70 percent faster CPU performance, and up to 90 percent faster GPU performance for all your favorite graphics-intensive games and apps. </p> </div> </div> <!-- END product-desc --> <!-- BEGIN product-desc --> <div class="product-desc"> <div class="image"> <img src="../assets/img/product/product-design.jpg" alt=""> </div> <div class="desc"> <h4>Design</h4> <p> Innovation isn�t always obvious to the eye, but look a little closer at iPhone 6s and you�ll find it�s been fundamentally improved. The enclosure is made from a new alloy of 7000 Series aluminum � the same grade used in the aerospace industry. The cover glass is the strongest, most durable glass used in any smartphone. And a new rose gold finish joins space gray, silver, and gold. </p> </div> </div> <!-- END product-desc --> </div> <!-- END #product-desc --> <!-- BEGIN #product-info --> <div class="tab-pane fade" id="product-info"> <!-- BEGIN table-responsive --> <div class="table-responsive"> <!-- BEGIN table-product --> <table class="table table-product table-striped"> <thead> <tr> <th></th> <th>iPhone 6s</th> <th>iPhone 6s Plus</th> </tr> </thead> <tbody> <tr> <td class="field">Capacity</td> <td> 16GB<br> 64GB<br> 128GB </td> <td> 16GB<br> 64GB<br> 128GB </td> </tr> <tr> <td class="field">Weight and Dimensions</td> <td> 5.44 inches (138.3 mm) x 2.64 inches (67.1 mm) x 0.28 inch (7.1 mm)<br> Weight: 5.04 ounces (143 grams) </td> <td> 6.23 inches (158.2 mm) x 3.07 inches (77.9 mm) x 0.29 inch (7.3 mm)<br> Weight: 6.77 ounces (192 grams) </td> </tr> <tr> <td class="field">Display</td> <td> Retina HD display with 3D Touch<br> 4.7-inch (diagonal) LED-backlit widescreen<br> 1334-by-750-pixel resolution at 326 ppi<br> 1400:1 contrast ratio (typical)<br> <br> <b>Both models:</b><br> 500 cd/m2 max brightness (typical)<br> Full sRGB standard<br> Dual-domain pixels for wide viewing angles<br> Fingerprint-resistant oleophobic coating on front<br> Support for display of multiple languages and characters simultaneously<br> Display Zoom<br> Reachability </td> <td> Retina HD display with 3D Touch<br> 5.5-inch (diagonal) LED-backlit widescreen<br> 1920-by-1080-pixel resolution at 401 ppi<br> 1300:1 contrast ratio (typical) </td> </tr> <tr> <td class="field">Chip</td> <td colspan="2"> A9 chip with 64-bit architecture Embedded M9 motion coprocessor </td> </tr> <tr> <td class="field">iSight Camera</td> <td colspan="2"> New 12-megapixel iSight camera with 1.22� pixels<br> Live Photos<br> Autofocus with Focus Pixels<br> Optical image stabilization (iPhone 6s Plus only)<br> True Tone flash<br> Panorama (up to 63 megapixels)<br> Auto HDR for photos<br> Exposure control<br> Burst mode<br> Timer mode<br> �/2.2 aperture<br> Five-element lens<br> Hybrid IR filter<br> Backside illumination sensor<br> Sapphire crystal lens cover<br> Auto image stabilization<br> Improved local tone mapping<br> Improved noise reduction<br> Face detection<br> Photo geotagging </td> </tr> <tr> <td class="field">Video Recording</td> <td colspan="2"> 4K video recording (3840 by 2160) at 30 fps<br> 1080p HD video recording at 30 fps or 60 fps<br> 720p HD video recording at 30 fps<br> Optical image stabilization for video (iPhone 6s Plus only)<br> True Tone flash<br> Slo-mo video support for 1080p at 120 fps and 720p at 240 fps<br> Time-lapse video with stabilization<br> Cinematic video stabilization (1080p and 720p)<br> Continuous autofocus video<br> Improved noise reduction<br> Take 8MP still photos while recording 4K video<br> Playback zoom<br> 3x zoom<br> Face detection<br> Video geotagging </td> </tr> </tbody> </table> <!-- END table-product --> </div> <!-- END table-responsive --> </div> <!-- END #product-info --> <!-- BEGIN #product-reviews --> <div class="tab-pane fade" id="product-reviews"> <!-- BEGIN row --> <div class="row row-space-30"> <!-- BEGIN col-7 --> <div class="col-md-7"> <!-- BEGIN review --> <div class="review"> <div class="review-info"> <div class="review-icon"><img src="../assets/img/user/user-1.jpg" alt=""></div> <div class="review-rate"> <ul class="review-star"> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> <li class=""><i class="fa fa-star-o"></i></li> </ul> (4/5) </div> <div class="review-name">Terry</div> <div class="review-date">24/05/2016 7:40am</div> </div> <div class="review-title"> What does �SIM-free� mean? </div> <div class="review-message"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in imperdiet augue. Integer non aliquam eros. Cras vehicula nec sapien pretium sagittis. Pellentesque feugiat lectus non malesuada aliquam. Etiam id tortor pretium, dictum leo at, malesuada tortor. </div> </div> <!-- END review --> <!-- BEGIN review --> <div class="review"> <div class="review-info"> <div class="review-icon"><img src="../assets/img/user/user-2.jpg" alt=""></div> <div class="review-rate"> <ul class="review-star"> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> <li class=""><i class="fa fa-star-o"></i></li> <li class=""><i class="fa fa-star-o"></i></li> </ul> (3/5) </div> <div class="review-name">George</div> <div class="review-date">24/05/2016 8:40am</div> </div> <div class="review-title"> When I buy iPhone from apple.com, is it tied to a carrier or does it come �unlocked�? </div> <div class="review-message"> In mauris leo, maximus at pellentesque vel, pharetra vel risus. Aenean in semper velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi volutpat mattis neque, at molestie tellus ultricies quis. Ut lobortis odio nec nunc ullamcorper, vitae faucibus augue semper. Sed luctus lobortis nulla ac volutpat. Mauris blandit scelerisque sem. </div> </div> <!-- END review --> <!-- BEGIN review --> <div class="review"> <div class="review-info"> <div class="review-icon"><img src="../assets/img/user/user-3.jpg" alt=""></div> <div class="review-rate"> <ul class="review-star"> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> </ul> (5/5) </div> <div class="review-name">Steve</div> <div class="review-date">23/05/2016 8:40am</div> </div> <div class="review-title"> Where is the iPhone Upgrade Program available? </div> <div class="review-message"> Duis ut nunc sem. Integer efficitur, justo sit amet feugiat hendrerit, arcu nisl elementum dui, in ultricies erat quam at mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nec ultrices tellus. Mauris elementum venenatis volutpat. </div> </div> <!-- END review --> <!-- BEGIN review --> <div class="review"> <div class="review-info"> <div class="review-icon"><img src="../assets/img/user/user-4.jpg" alt=""></div> <div class="review-rate"> <ul class="review-star"> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> <li class=""><i class="fa fa-star-o"></i></li> <li class=""><i class="fa fa-star-o"></i></li> <li class=""><i class="fa fa-star-o"></i></li> </ul> (2/5) </div> <div class="review-name">Alfred</div> <div class="review-date">23/05/2016 10.02am</div> </div> <div class="review-title"> Can I keep my current service plan if I choose the iPhone Upgrade Program? </div> <div class="review-message"> Donec vel fermentum quam. Vivamus scelerisque enim eget tristique auctor. Vivamus tempus, turpis iaculis tempus egestas, leo augue hendrerit tellus, et efficitur neque massa at neque. Aenean efficitur eleifend orci at ornare. </div> </div> <!-- END review --> <!-- BEGIN review --> <div class="review"> <div class="review-info"> <div class="review-icon"><img src="../assets/img/user/user-5.jpg" alt=""></div> <div class="review-rate"> <ul class="review-star"> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> <li class="active"><i class="fa fa-star"></i></li> </ul> (5/5) </div> <div class="review-name">Edward</div> <div class="review-date">22/05/2016 9.30pm</div> </div> <div class="review-title"> I have an existing carrier contract or installment plan. Can I purchase with the iPhone Upgrade Program </div> <div class="review-message"> Aliquam consequat ut turpis non interdum. Integer blandit erat nec sapien sollicitudin, a fermentum dui venenatis. Nullam consequat at enim et aliquet. Cras mattis turpis quis eros volutpat tristique vel a ligula. Proin aliquet leo mi, et euismod metus placerat sit amet. </div> </div> <!-- END review --> </div> <!-- END col-7 --> <!-- BEGIN col-5 --> <div class="col-md-5"> <!-- BEGIN review-form --> <div class="review-form"> <form action="product_detail.html" name="review_form" method="POST"> <h2>Write a review</h2> <div class="form-group"> <label for="name">Name <span class="text-danger">*</span></label> <input type="text" class="form-control" id="name"> </div> <div class="form-group"> <label for="email">Title <span class="text-danger">*</span></label> <input type="text" class="form-control" id="email"> </div> <div class="form-group"> <label for="review">Review <span class="text-danger">*</span></label> <textarea class="form-control" rows="8" id="review"></textarea> </div> <div class="form-group"> <label for="email">Rating <span class="text-danger">*</span></label> <div class="rating rating-selection" data-rating="true" data-target="rating"> <i class="fa fa-star-o" data-value="2"></i> <i class="fa fa-star-o" data-value="4"></i> <i class="fa fa-star-o" data-value="6"></i> <i class="fa fa-star-o" data-value="8"></i> <i class="fa fa-star-o" data-value="10"></i> <span class="rating-comment"> <span class="rating-comment-tooltip">Click to rate</span> </span> </div> <select name="rating" class="hide"> <option value="2">2</option> <option value="4">4</option> <option value="6">6</option> <option value="8">8</option> <option value="10">10</option> </select> </div> <button type="submit" class="btn btn-inverse btn-lg">Submit Review</button> </form> </div> <!-- END review-form --> </div> <!-- END col-5 --> </div> <!-- END row --> </div> <!-- END #product-reviews --> </div> <!-- END #product-tab-content --> </div> <!-- END product-tab --> </div>
/*! CSS Used from: https://seantheme.com/color-admin-v4.1/frontend/assets/plugins/bootstrap3/css/bootstrap.min.css */ a{background-color:transparent;} a:active,a:hover{outline:0;} b{font-weight:700;} h1{margin:.67em 0;font-size:2em;} img{border:0;} button,input,select,textarea{margin:0;font:inherit;color:inherit;} button{overflow:visible;} button,select{text-transform:none;} button{-webkit-appearance:button;cursor:pointer;} button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;} input{line-height:normal;} textarea{overflow:auto;} table{border-spacing:0;border-collapse:collapse;} td,th{padding:0;} @media print{ *,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important;} a,a:visited{text-decoration:underline;} a[href]:after{content:" (" attr(href) ")";} a[href^="javascript:"]:after,a[href^="#"]:after{content:"";} thead{display:table-header-group;} img,tr{page-break-inside:avoid;} img{max-width:100%!important;} h2,p{orphans:3;widows:3;} h2{page-break-after:avoid;} .label{border:1px solid #000;} .table{border-collapse:collapse!important;} .table td,.table th{background-color:#fff!important;} } *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} :after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;} a{color:#337ab7;text-decoration:none;} a:focus,a:hover{color:#23527c;text-decoration:underline;} a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} img{vertical-align:middle;} h1,h2,h4{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;} h1,h2{margin-top:20px;margin-bottom:10px;} h4{margin-top:10px;margin-bottom:10px;} h1{font-size:36px;} h2{font-size:30px;} h4{font-size:18px;} p{margin:0 0 10px;} .text-danger{color:#a94442;} ul{margin-top:0;margin-bottom:10px;} .row{margin-right:-15px;margin-left:-15px;} .col-md-5,.col-md-7{position:relative;min-height:1px;padding-right:15px;padding-left:15px;} @media (min-width:992px){ .col-md-5,.col-md-7{float:left;} .col-md-7{width:58.33333333%;} .col-md-5{width:41.66666667%;} } table{background-color:transparent;} th{text-align:left;} .table{width:100%;max-width:100%;margin-bottom:20px;} .table>tbody>tr>td,.table>thead>tr>th{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd;} .table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd;} .table>thead:first-child>tr:first-child>th{border-top:0;} .table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9;} .table-responsive{min-height:.01%;overflow-x:auto;} @media screen and (max-width:767px){ .table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd;} .table-responsive>.table{margin-bottom:0;} .table-responsive>.table>tbody>tr>td,.table-responsive>.table>thead>tr>th{white-space:nowrap;} } label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700;} .form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;} .form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);} .form-control::-moz-placeholder{color:#999;opacity:1;} .form-control:-ms-input-placeholder{color:#999;} .form-control::-webkit-input-placeholder{color:#999;} .form-control::-ms-expand{background-color:transparent;border:0;} textarea.form-control{height:auto;} .form-group{margin-bottom:15px;} .btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px;} .btn:active:focus,.btn:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} .btn:focus,.btn:hover{color:#333;text-decoration:none;} .btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125);} .btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px;} .fade{opacity:0;-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear;} .fade.in{opacity:1;} .nav{padding-left:0;margin-bottom:0;list-style:none;} .nav>li{position:relative;display:block;} .nav>li>a{position:relative;display:block;padding:10px 15px;} .nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#eee;} .nav-tabs{border-bottom:1px solid #ddd;} .nav-tabs>li{float:left;margin-bottom:-1px;} .nav-tabs>li>a{margin-right:2px;line-height:1.42857143;border:1px solid transparent;border-radius:4px 4px 0 0;} .nav-tabs>li>a:hover{border-color:#eee #eee #ddd;} .nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{color:#555;cursor:default;background-color:#fff;border:1px solid #ddd;border-bottom-color:transparent;} .tab-content>.tab-pane{display:none;} .tab-content>.active{display:block;} .label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;} .label:empty{display:none;} .label-success{background-color:#5cb85c;} .nav:after,.nav:before,.row:after,.row:before{display:table;content:" ";} .nav:after,.row:after{clear:both;} .pull-right{float:right!important;} .hide{display:none!important;} /*! CSS Used from: https://seantheme.com/color-admin-v4.1/frontend/assets/plugins/font-awesome/css/font-awesome.min.css */ .fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .pull-right{float:right;} .fa-star:before{content:"\f005";} .fa-star-o:before{content:"\f006";} .fa-twitter:before{content:"\f099";} .fa-facebook:before{content:"\f09a";} .fa-google-plus:before{content:"\f0d5";} .fa-circle:before{content:"\f111";} .fa-tumblr:before{content:"\f173";} .fa-whatsapp:before{content:"\f232";} /*! CSS Used from: https://seantheme.com/color-admin-v4.1/frontend/assets/css/e-commerce/style.min.css */ .product-image img,.product-thumbnail-list>li a img{max-width:100%;} a{color:#00acac;-webkit-transition:all .2s cubic-bezier(.6,.045,.4,1);-moz-transition:all .2s cubic-bezier(.6,.045,.4,1);transition:all .2s cubic-bezier(.6,.045,.4,1);} a:active,a:focus,a:hover{color:#008a8a;} h1,h2,h4{font-weight:600;} .form-control{-webkit-box-shadow:none;} .product{background:#fff;border:1px solid #c5ced4;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} .product:after,.product:before{content:'';display:table;clear:both;} .product-detail{display:table;width:100%;} .product-image,.product-info{display:table-cell;vertical-align:top;} .product-main-image{margin-left:100px;padding:20px;height:525px;width:450px;text-align:center;} .product-thumbnail{width:100px;float:left;padding:20px;max-height:525px;overflow:scroll;} .product-main-image img{max-height:100%;} .product-thumbnail-list{list-style-type:none;margin:0;padding:0;} .product-thumbnail-list>li a{display:block;text-decoration:none;border:1px solid #c5ced4;background:#fff;height:60px;line-height:50px;padding:4px;text-align:center;} .product-thumbnail-list>li+li{margin-top:10px;} .product-thumbnail-list>li.active a{border-color:#212121;} .product-info-header,.product-info-list,.product-social,.product-tab .nav.nav-tabs,.product-warranty{border-bottom:1px solid #D8E0E4;} .product-thumbnail-list>li a img{max-height:100%;position:relative;} .product-image{width:530px;} .product-info{padding:20px 30px;margin-bottom:20px;font-size:13px;} .product-info-header{padding-bottom:15px;margin-bottom:15px;} .product-title{margin:0;font-size:20px;font-weight:600;line-height:24px;} .product-title .label{padding:5px 6px;font-size:12px;display:block;max-width:70px;margin-bottom:7px;} .product-desc .image img,.review .review-icon img{max-width:100%;} .product-info-list{color:#636363;list-style-type:none;margin:0 0 15px;padding:0 0 15px;line-height:20px;} .product-info-list>li{position:relative;padding-left:20px;} .product-info-list>li+li{margin-top:3px;} .product-info-list>li .fa{position:absolute;left:0;top:50%;margin-top:-10px;line-height:20px;width:15px;text-align:center;} .product-info-list>li .fa.fa-circle{font-size:5px;} .product-category{list-style-type:none;margin:0;padding:0;font-weight:500;} .product-category>li{display:inline;} .product-price:after,.product-price:before,.product-social:after,.product-social:before{content:'';display:table;clear:both;} .product-category>li+li{margin-left:5px;} .product-category>li a{color:#707478;} .product-price{margin:0 0 15px;} .product-price .price{font-size:32px;font-weight:600;} .product-warranty{padding-bottom:15px;margin-bottom:15px;} .product-discount .discount{font-size:16px;font-weight:600;text-decoration:line-through;color:#707478;} .product-social{margin:0 0 15px;padding:0 0 15px;} .product-social ul{list-style-type:none;margin:0;padding:0;} .product-social ul>li{float:left;} .product-social ul>li+li{margin-left:10px;} .product-social ul>li>a{width:30px;height:30px;line-height:30px;background:#ddd;color:#fff;display:inline-block;text-align:center;font-size:16px;border-radius:3px;} .product-social ul>li>a.facebook{background:#3b5998;} .product-social ul>li>a.twitter{background:#00aced;} .product-social ul>li>a.google-plus{background:#d34836;} .product-social ul>li>a.whatsapp{background:#6CC964;} .product-social ul>li>a.tumblr{background:#36465d;} .product-tab{margin-top:40px;} .product-tab .nav.nav-tabs{background:#fff;text-align:center;font-size:16px;} .product-tab .nav.nav-tabs>li{float:none;display:inline-block;} .product-desc:after,.product-desc:before,.review-info:after,.review-info:before,.review:after,.review:before{display:table;clear:both;content:'';} .product-tab .nav.nav-tabs>li+li{margin-left:5px;} .product-tab .nav.nav-tabs>li>a{position:relative;color:#A3A8AD;border:1px solid transparent;} .product-tab .nav.nav-tabs>li>a:focus,.product-tab .nav.nav-tabs>li>a:hover{border-bottom:1px solid #666;background:0 0;} .product-tab .nav-tabs>li.active>a,.product-tab .nav-tabs>li.active>a:focus,.product-tab .nav-tabs>li.active>a:hover{border-color:transparent;border-bottom:1px solid #212121;color:#212121;} .product-tab .tab-content{padding:40px;} .product-desc{padding:20px;} .product-desc .image{float:left;width:50%;padding-right:40px;} .product-desc .desc{float:left;width:50%;padding-left:40px;} .product-desc .desc h4{margin:0 0 15px;font-size:36px;font-weight:600;} .product-desc .desc p{font-size:16px;font-weight:400;color:#929292;line-height:26px;} .product-desc+.product-desc{margin-top:20px;padding-top:40px;border-top:1px solid #D8E0E4;} .product-desc.right .image{float:right;padding-left:20px;padding-right:0;} .product-desc.right .desc{float:left;text-align:right;padding-right:20px;padding-left:0;} .table.table-product .field{width:30%;font-size:18px;font-weight:300;} .table.table-product td,.table.table-product th{padding:20px 25px 20px 0;} .table.table-product.table-striped td,.table.table-product.table-striped th{padding:20px 25px;} .table.table-product th{font-size:18px;font-weight:600;border:none;} .review+.review{margin-top:25px;padding-top:25px;border-top:1px solid #D8E0E4;} .review-form{display:block;} .review .review-icon{height:36px;width:36px;background:#f4f5f6;color:#999;text-align:center;overflow:hidden;float:left;margin-right:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} .review .review-info{margin-bottom:10px;} .review .review-info .review-rate{float:right;text-align:center;font-weight:600;font-size:12px;} .review .review-rate .review-star{list-style-type:none;margin:0;padding:0;font-size:14px;} .review .review-rate .review-star>li{float:left;} .review .review-rate .review-star>li+li{margin-left:3px;} .review .review-rate .review-star>li.active{color:#f59c1a;} .review .review-name{font-weight:600;font-size:14px;} .review .review-date{font-size:12px;color:#999;} .review .review-title{margin:0;font-weight:600;font-size:14px;} .review-form{background:#f4f5f6;padding:30px;} .review-form h2{font-size:24px;border-bottom:1px solid #D8E0E4;margin:0 0 20px;padding-bottom:10px;} .btn.btn-inverse{color:#fff;background:#2d353c;border-color:#2d353c;} .btn-inverse:active,.btn-inverse:focus,.btn-inverse:hover{background:#242a30;border-color:#242a30;} .btn{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} .btn:active:focus,.btn:focus{outline:0;} .label{font-size:75%;font-weight:600;} .btn:active{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.1);box-shadow:inset 0 3px 5px rgba(0,0,0,.1);} label{font-weight:600;} .form-control{border:1px solid #ccd0d4;box-shadow:none;} .form-control:focus{border-color:#9fa2a5;-webkit-box-shadow:none;box-shadow:none;} .label.label-success{background:#00acac;} .row{margin:0 -10px;} .row>[class*=col-]{padding:0 10px;} .row.row-space-30{margin:0 -15px;} .row.row-space-30>[class*=col-]{padding:0 15px;} .pull-right{float:right!important;} .text-danger{color:#ff5b57!important;} .fade{opacity:0;-webkit-transition:opacity .3s linear;transition:opacity .3s linear;} /*! CSS Used from: https://seantheme.com/color-admin-v4.1/frontend/assets/css/e-commerce/style-responsive.min.css */ @media (min-width: 1920px){ .form-control{font-size:16px;height:44px;} .btn{font-size:16px;padding:10px 15px;} .product-thumbnail{width:120px;padding:25px;max-height:600px;} .product-main-image{max-height:600px;margin-left:120px;height:600px;padding:25px;width:500px;} .product-thumbnail-list > li a{height:80px;padding:10px;line-height:58px;} .product-title{font-size:26px;line-height:40px;} .product-title .label{max-width:80px;padding:6px;font-size:14px;margin-bottom:5px;} .product-info{padding:25px;font-size:16px;} .product-info-list{line-height:28px;} .product-social ul > li > a{width:46px;height:46px;line-height:46px;font-size:24px;} .product-price .price{font-size:46px;} .product-discount .discount{font-size:24px;} .btn-lg{font-size:24px;padding:14px 25px;} .product-tab .nav.nav-tabs{font-size:20px;} .product-tab .nav.nav-tabs > li > a{padding:15px 25px;} .product-desc .desc p{font-size:18px;line-height:30px;} h4{font-size:28px;} } @media (max-width: 991px){ .product-thumbnail{width:80px;padding:10px;} .product-image{width:380px;} .product-main-image{margin-left:80px;width:300px;} } @media (max-width: 768px){ .product-image:before,.product-image:after{content:'';display:table;clear:both;} .product-image{position:relative;border-bottom:1px solid #D8E0E4;} .product-image,.product-info{display:block;width:auto;} .product-thumbnail{position:absolute;left:0;top:0;bottom:0;overflow:scroll;border-right:1px solid #D8E0E4;} .product-main-image{width:auto;} .product-info{padding:20px;} .product-tab{margin:0;} .product-tab .nav.nav-tabs{border-top:1px solid #D8E0E4;font-size:14px;white-space:nowrap;overflow:scroll;} .product-tab .tab-content{padding:20px;} .product-desc{padding:0;} .product-desc .image,.product-desc.right .image,.product-desc .desc,.product-desc.right .desc{padding:0;float:none;width:auto;text-align:center;} .product-desc .image{margin-bottom:15px;} .product-desc .desc p{font-size:14px;line-height:20px;} .product-desc .desc h4{margin:0 0 10px;font-size:28px;} .table.table-product{font-size:12px;} .table.table-product.table-striped th,.table.table-product.table-striped td{padding:10px 15px;} .table.table-product th,.table.table-product .field{width:auto;font-size:16px;} .review-form{margin:20px -20px -20px;padding:20px;border-top:1px solid #c5ced4;font-size:12px;} .review-form h2{font-size:18px;margin-bottom:15px;} .product-purchase-container{position:fixed;left:0;bottom:0;right:0;padding:20px;background:#fff;z-index:1020;border-top:1px solid rgba(0,0,0,0.25);} .product-purchase-container .product-discount,.product-purchase-container .product-price{position:absolute;left:20px;top:15px;} .product-purchase-container .product-discount + .product-price{top:30px;} .product-purchase-container .btn{float:right;} } @media (max-width: 767px){ .product-detail{display:block;} } @media (max-width: 480px){ .product-main-image{height:300px;width:auto;} } /*! CSS Used from: https://seantheme.com/color-admin-v4.1/frontend/assets/css/e-commerce/theme/orange.css */ a{color:#f59c1a;} a:hover,a:focus{color:#c47d15;} /*! CSS Used fontfaces */ @font-face{font-family:'FontAwesome';src:url('https://seantheme.com/color-admin-v4.1/frontend/assets/plugins/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('https://seantheme.com/color-admin-v4.1/frontend/assets/plugins/font-awesome/fonts/fontawesome-webfont.eot#iefix&v=4.7.0') format('embedded-opentype'),url('https://seantheme.com/color-admin-v4.1/frontend/assets/plugins/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('https://seantheme.com/color-admin-v4.1/frontend/assets/plugins/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('https://seantheme.com/color-admin-v4.1/frontend/assets/plugins/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('https://seantheme.com/color-admin-v4.1/frontend/assets/plugins/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}

Related: See More


Questions / Comments: