Special Thanks to Phil Cryer for the initial idea and code.
This no longer works on eBay due to conflicting CSS with Bootstrap 3
There are two types of listings on eBay you see the most: Casual sellers using the simple text editor for their description, and power sellers using outdated non-responsive templates that are distracting and dated. Here comes Bootstrap to save the day for either one of those customers.
First off, if you want to see the template (as used), there is a demo page available. Please note that the demo uses .container to better simulate the look within an eBay listing, while the code below uses the .container-wide class, which fits better when within the built-in eBay description container.
Since the current design trend is towards cards, I adjusted the original to fit this type of layout, also dropping labels for buttons for better responsive rendering. There is also the use of .clearfix to fix breakpoints from the cards not clearing properly at the .col-md size. Just like the original creator, this is under the CC0 license (do whatever you want with it), so make your auctions shine!
<meta charset="utf-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content="USB Power Bank, 20000mAh, dual-port including 2.1A charging."> <meta name="author" content="Slowpreneur Inc"> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <style>.btn{margin-bottom:4px !important}</style> <!-- see glyficons http://getbootstrap.com/components/#glyphicons --> <div class="container"> <h3><span class="glyphicon glyphicon-th-list"></span> Overview</h3> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <h4>Contents:</h4> <ul class="list-group"> <li class="list-group-item active"><strong>20000mAh Power Bank</strong> 2.1A & 1A Dual Charging</li> <li class="list-group-item list-group-item-info">Type-A to Micro-B USB Charging Cable, 1 ft length <em>(no wall adapter provided)</em></li> <li class="list-group-item active"><strong>ShuoGe 24W Car Charger</strong> 2.1A & 1A Dual Charging</li> <li class="list-group-item list-group-item-info">Black Drawstring Carry Bag</li> </ul> </div> <div class="col-md-push-3 col-md-3 col-sm-6 col-xs-12"> <h4>Compatible Devices:</h4> <button class="btn btn-default">iPhone 4/5/6/7 (Plus)</button> <button class="btn btn-default">iPad (all, Pro, Mini)</button> <button class="btn btn-default">iPad Air 1/2</button> <button class="btn btn-default">iPod Touch (all)</button> <button class="btn btn-default">Samsung Galaxy S/J (all)</button> <button class="btn btn-default">Galaxy Grand (all)</button> <button class="btn btn-default">Galaxy Note (all)</button> <button class="btn btn-default">Nexus 5/6/5X/6P</button> <button class="btn btn-default">Google Pixel</button> </div> <div class="clearfix col-sm-12 visible-sm"></div> <!-- sm clearfix helper --> <div class="col-md-pull-3 col-md-3 col-sm-6 col-xs-12"> <h4>Condition:</h4> <button class="btn btn-block btn-success">New</button> <button class="btn btn-block btn-success">Quality Tested</button> <button class="btn btn-block btn-success">No Packaging</button> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <h4>Benefits:</h4> <ul> <li>Save <strong class="text-danger">25% off</strong> retail</li> <li>Supports faster charging via 2.1A output</li> <li>Slim 6" x 3" x 0.5" battery size</li> <li>25/50/75/100% charge indicators</li> <li>Aluminum power bank</li> <li>Recharge phone ~5 times</li> <li>Recharge tablet ~3 times</li> <li>Built-In LED flashlight <em class="text-muted">(depress button for 1 second)</em></li> </ul> </div> </div> </div> </div> <h3><span class="glyphicon glyphicon-thumbs-up"></span> Quality Control Testing</h3> All electronic devices are thoroughly tested for the following before sale: <ul> <li>Verify USB ports charge individually</li> <li>Verify USB ports charge simultaneously <em class="text-muted">(see photo above)</em></li> <li>Verify power banks recharge</li> <li>Verify power banks hold/retain recharge</li> <li>Verify voltage above 1A from 2.1A port</li> </ul> Quality control is completed at the Slowpreneur Inc offices in <strong>Erie, Colorado, USA</strong>. <h3><span class="glyphicon glyphicon-folder-close"></span> Packaging</h3> <table class="table table-hover"> <thead> <tr> <th>Height</th> <th>Packaging</th> </tr> </thead> <tbody> <tr> <td>< 1 inch</td> <td>Bubble Mailer</td> </tr> <tr> <td>> 1 inch</td> <td>Cardboard Box</td> </tr> </tbody> </table> <h3><span class="glyphicon glyphicon-envelope"></span> Shipments</h3> <ul> <h4><span class="glyphicon glyphicon-time"></span> Handling</h4> We will ship all orders within <mark>1 business day</mark> of payment. <h4><span class="glyphicon glyphicon-send"></span> Delivery</h4> Shipping <strong>is included</strong> for free with your purchase: <div class="panel panel-default"> <div class="panel-body"> <table class="table table-hover"> <thead> <tr> <th>Weight</th> <th>Shipper</th> <th>Service</th> <th>Delivery Time</th> </tr> </thead> <tbody> <tr> <td><= 13 ounces</td> <td>USPS</td> <td>First Class Package</td> <td>2-3 business days*</td> </tr> <tr> <td>> than 13 ounces</td> <td>USPS</td> <td>Priority Mail</td> <td>1-3 business days*</td> </tr> </tbody> </table> <small>*Delivery times are <em>after handling</em>. Times determined by carrier and are subject to change.</small> </div> </div> </ul> <h3><span class="glyphicon glyphicon-usd"></span> Payment</h3> We accept PayPal. <h3><span class="glyphicon glyphicon-ok-circle"></span> Return Policy</h3> All of our items are backed by eBay's 14-day return policy. <mark>Buyer is responsible for return shipping</mark>. <h3><span class="glyphicon glyphicon-comment"></span> Feedback</h3> We take our reputation seriously. If you are unsatisfied by your order, please contact us and we will work with you to resolve it to your satisfaction. </div> <!-- /container --> |