Show Output
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Product Details</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="/examples/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/examples/css/custom.css"> <style> /* The custom.css file included above is blank. We have used emended style sheet instead to enable live editing. You should add these style rules in your custom.css file. */ body { padding-top: 60px; } .nav-tabs { margin-top: 40px; } </style> </head> <body> <div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <a href="#" class="brand">Gadget Store</a> <div class="nav-collapse collapse navbar-responsive-collapse"> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Products <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Gadgets</a></li> <li><a href="#">Accessories</a></li> <li class="divider"></li> <li><a href="#">More »</a></li> </ul> </li> </ul> <form action="#" class="navbar-search pull-left"> <input type="text" placeholder="Search …" class="search-query"> </form> <ul class="nav pull-right"> <li><a href="#">Login</a></li> <li class="divider-vertical"></li> <li><a href="sign-up.html">Register</a></li> </ul> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="span5"> <img src="/examples/images/desktop-large.jpg" class="img-polaroid" alt="Lenovo Desktop"> </div> <div class="span7"> <h2>Lenovo Desktop</h2> <h4 class="muted">Thinner, Lighter, Faster. All in One Desktop</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident sunt in culpa.</p> <hr> <h3>Price - <del class="text-error">$699</del> $499</h3> <p class="muted">Inclusive of all taxes. Free home delivery.</p> <br> <p><a href="#" class="btn btn-success btn-large">Buy Online Now</a></p> </div> </div> <div class="row"> <div class="span12"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#tab-1">Specification</a></li> <li><a data-toggle="tab" href="#tab-2">Key Features</a></li> </ul> <div class="tab-content"> <div id="tab-1" class="tab-pane fade in active"> <table class="table table-striped"> <tbody> <tr> <th>Brand</th> <td>Lenovo</td> </tr> <tr> <th>OS</th> <td>Windows 8</td> </tr> <tr> <th>Processor</th> <td>1.5 GHz Dual Core</td> </tr> <tr> <th>Memory</th> <td>2 GB RAM</td> </tr> </tbody> </table> </div> <div id="tab-2" class="tab-pane fade"> <table class="table table-striped"> <tbody> <tr> <td>Windows 8 OS</td> </tr> <tr> <td>Intel Dual Core Processor</td> </tr> <tr> <td>18.5 Inch LED Screen</td> </tr> <tr> <td>Integrated Graphics</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <!-- Footer section --> <div class="container"> <hr> <div class="row"> <div class="span12"> <p class="pull-left">Copyright © 2013 Gadget Store, Inc. All Right Reserved</p> <p class="pull-right"><a href="user-agreement.html">Privacy Policy</a> | <a href="user-agreement.html">Terms of Use</a></p> </div> </div> </div> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="/examples/js/bootstrap.min.js"></script> </body> </html>
