<!DOCTYPE html>
<head>

<title>TurboTabs</title>
<meta name="description" content="TurboTabs - Free Responsive Tabs Jquery Plugin. TurboTabs gives you powerfull customizations and is very easy to use. For easier customizations you can use online options constructor with previewer to build TurboTab.">
<meta name="keywords" content="jquery plugins, jquery plugin, free plugin, responsive tabs plugin, tabs with jquery, tabs plugin">
<meta name="author" content="Aleksej Vukomanovic" />
<meta name="contact" content="aleksejvu@gmail.com" />
<meta name="copyright" content="Copyright (c)2015 -
 Aleksej Vukpomanovic. All Rights Reserved." />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<link rel="stylesheet" type="text/css" href="css/turbotabs.css" />
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

<style type="text/css">  
/* Main Style */
body {
  margin: 0;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: #333333;
  background-color: rgba(212,205,238,0.6);
  padding: 80px 0;
}
h1, h2, h3, h4, h5, h6 {
  text-align: center;
  clear: both;
  font-weight: normal;
  line-height: 1;
  vertical-align: baseline;
  font-weight: 300; }

ol, ul {
  list-style: none; 
}
.top{width: 95%; position: absolute; top: 25px;}
.menu{ text-align: right; display: inline-block; width: 70%;}
.menu li {display: inline-block; padding: 2px 15px;}
.examples{position: relative; width: 100%; margin: 30px 10px;}
.examples ul{text-align: center}
.examples ul li{display: inline-block; padding: 5px 10px;}
</style>

</head>

<body>

    <div class="top">
        
        <ul class="menu">
            <li><a href="">Back to article</a></li>
            <li><a href="http://themeflection.com/plugins/jquery/turbotabs/documentation/documentation.html">Documentation</a></li>
            <li><a href="http://themeflection.com">ThemeFlection</a></li>
        </ul>
    </div>

    <h1>TurboTabs</h1>
    <h3>Demo of Tab in Horizontal(Default) Mode</h3>
    
    <hr>

    <div class="examples">
        <h4>Check Some pre-made examples:</h4>
        <ul>
            <li><a href="horizontal_tab.html">Horizontal(Default) Tab</a></li>
            <li><a href="vertical_tab.html">Vertical Tab</a></li>
            <li><a href="accordion.html">Accordion</a></li>
            <li><a href="tab_with_icons.html">Tab With Icons</a></li>
            <li><a href="another_tab.html">Just Another Tab</a></li>
        </ul>
    </div>
    
    <hr>

    <!-- - - - - - -  - - - HORIZONTAL TAB - - - - - -  - - - - - -->
    <div id="myTab">
            <!-- - - - - - Tab navigation - - - - - - -->
            <ul class="tt_tabs">
                <li class="active">Demo Tab 1</li>
                <li>Demo Tab 2</li>
                <li>Demo Tab 3</li>
                <li>Demo Tab 4</li>
            </ul>
            <!-- - - - - Tab Content - - - - - -->
            <div class="tt_container">

                <div class="tt_tab active">
                    <h2>This is the first tab</h2>
                    <p>Lorem ipsum dolor <a href="#">sit amet</a>, consectetur adipisicing elit. Distinctio, fugit nobis qui temporibus culpa inventore consectetur aliquam. Unde, itaque, quos, laboriosam, reprehenderit ipsa deleniti sequi animi eveniet dolorem maiores alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, aperiam, optio, magnam sed aliquam harum sunt ad est velit ipsam ratione quo perferendis! Suscipit necessitatibus reiciendis nobis nam non est. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, quis, iste expedita quo soluta maxime voluptas delectus quod quaerat repudiandae perspiciatis voluptatum tempore natus eum veritatis atque voluptates ea illo?</p>
                </div>

                <div class="tt_tab">
                    <h2>This is the second tab</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, fugit nobis qui temporibus culpa inventore consectetur aliquam. Unde, itaque, quos, laboriosam, reprehenderit ipsa deleniti sequi animi eveniet dolorem maiores alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, pariatur, laborum, sit molestiae eos itaque iste repudiandae eum aperiam ad sapiente dicta reprehenderit. Omnis culpa harum blanditiis voluptates explicabo quis?</p>
                </div>

                 <div class="tt_tab">
                    <h2>Tab number three wee hee</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, fugit nobis qui temporibus culpa inventore consectetur aliquam. Unde, itaque, quos, laboriosam, reprehenderit ipsa deleniti sequi animi eveniet dolorem maiores alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, quod mollitia iusto non sapiente ipsa dicta quis perspiciatis voluptates ducimus. Aliquid, voluptatem non necessitatibus dolor nostrum a earum rerum ex. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, unde, iusto, consectetur, cumque cum illum eligendi necessitatibus molestiae aut odit nostrum laborum accusantium enim! Minima, delectus porro non consequuntur quos.</p>
                </div>

                <div class="tt_tab">
                    <h2>Fourth tab not bad</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, fugit nobis qui temporibus culpa inventore consectetur aliquam. Unde, itaque, quos, laboriosam, reprehenderit ipsa deleniti sequi animi eveniet dolorem maiores alias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, repellendus explicabo recusandae dicta tempore nam perspiciatis atque vero praesentium hic. Laudantium tempore quas consequatur exercitationem eveniet voluptatem reiciendis quidem tenetur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, repudiandae, natus odio minus voluptates culpa sapiente vitae nulla ad? Distinctio, laboriosam assumenda facilis aspernatur consequuntur praesentium inventore id earum hic!</p>
                </div>

            </div><!-- .container -->

    </div><!-- #myTab -->
    <!--END HORIZONTAL TAB-->


<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/turbotabs.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('#myTab').turbotabs({
        animation : 'HorizontalFlip',
        backgroundColor : 'Peru',
        navBackground : 'rgba(222,147,37,0.7)',
        hoverBackground : 'rgba(222,147,37,0.9)',
        activeBackground : 'rgba(222,147,37,1)',
        textColor : '#333'
    }); 
}); 
</script>

</body>