Tabs
Our tabs are created on Bootstrap tabs basis. You can use them with the following HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<div class="ct-tab-wrapper" data-bg-color="ffffff" data-bg-image="../assets/images/cleaning/pattern.png"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-3"> <ul class="nav nav-tabs"> <li class="active"> <a href="#a" data-toggle="tab"> Woodwork washing (doors, windowsills, cabinets) <div class="ct-u-extender"></div> </a> </li> <li> <a href="#b" data-toggle="tab"> Interior appliance cleaning <div class="ct-u-extender"></div> </a> </li> <li> <a href="#c" data-toggle="tab"> Carpet & upholstery cleaning <div class="ct-u-extender"></div> </a> </li> </ul> </div> <div class="col-xs-12 col-sm-8 col-md-9"> <div class="tab-content"> <div class="tab-pane fade active in" id="a"> <h3 class="tab-pane-title ct-u-hrLeft ct-u-autoAlignment--center"> Zappy is ready to fix all your problems! </h3> <p class="tab-pane-text"> One phone call to Zappy who complete your entire "To Do’s" list. Every task —whether major or minor home repair—is prioritized according to your needs. Unlike an independent "handyman for hire" you'll know what to expect before we arrive and our professional home repair contractors don't waste your time. </p> </div> <div class="tab-pane fade" id="b"> <p class="tab-pane-text"> Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue. </p> </div> <div class="tab-pane fade" id="c"> <p class="tab-pane-text"> Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae. </p> </div> </div> </div> </div> <!-- /row --> </div> |