<!DOCTYPE html>
<!--[if lt IE 10]> <html lang="en" class="iex"> <![endif]-->
<!--[if (gt IE 10)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<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>Tabs | Components | Structura</title>
<meta name="description" content="HTML5/CSS3 template components for Framework Y and business industries, based on Framework Y.">
<link rel="stylesheet" href="../../../HTWF/scripts/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../../../HTWF/style.css">
<link rel="stylesheet" href="../../../HTWF/css/animations.css">
<link rel="stylesheet" href="../../../HTWF/css/components.css">
<link rel="stylesheet" href="../../../skin.css">
<link rel="icon" href="../../../images/favicon.png">
</head>
<body>
<div id="preloader"></div>
<header class="fixed-top scroll-change" data-menu-anima="fade-in">
<div class="navbar navbar-default mega-menu-fullwidth navbar-fixed-top" role="navigation">
<div class="navbar navbar-main">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="../../index.html">
<img class="logo-default" src="../../../images/logo.png" alt="logo" />
<img class="logo-retina" src="../../../images/logo-retina.png" alt="logo" />
</a>
</div>
<div class="collapse navbar-collapse">
<div class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Home <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a href="../../index-square.html">Square</a></li>
<li><a href="../../index-cube.html">Cube</a></li>
<li><a href="../../index-parallelogram.html">Parallelogram</a></li>
<li><a href="../../index-ellipse.html">Ellipse</a></li>
<li><a href="../../index-rectangle.html">Rectangle</a></li>
<li><a href="../../index-circle.html">Circle</a></li>
<li><a href="../../index-triangle.html">Triangle</a></li>
<li><a href="../../index-hexagon.html">Hexagon</a></li>
<li><a href="../../index-pentagon.html">Pentagon</a></li>
<li><a href="../../index-line.html">Line</a></li>
<li><a href="../../index-fullpage.html">Fullpage</a></li>
<li><a href="../../index.html">Intro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Pages <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Niche</a>
<ul class="dropdown-menu">
<li><a href="../../pricing.html">Pricing</a></li>
<li><a href="../../gallery.html">Photo & video</a></li>
<li><a href="../../faq.html">Faq</a></li>
<li><a href="../../history.html">History</a></li>
<li><a href="../../team.html">Team</a></li>
<li><a href="../../coming-soon.html">Coming soon</a></li>
<li><a href="../../404.html">404</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About</a>
<ul class="dropdown-menu">
<li><a href="../../about-us-1.html">About us one</a></li>
<li><a href="../../about-us-2.html">About us two</a></li>
<li><a href="../../about-us-3.html">About us three</a></li>
<li><a href="../../about-us-4.html">About us four</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Contacts</a>
<ul class="dropdown-menu">
<li><a href="../../contacts-1.html">Contacts one</a></li>
<li><a href="../../contacts-2.html">Contacts two</a></li>
<li><a href="../../contacts-3.html">Contacts three</a></li>
<li><a href="../../contacts-4.html">Contacts four</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Portfolio <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a href="../../portfolio-1.html">Portfolio one</a></li>
<li><a href="../../portfolio-2.html">Portfolio two</a></li>
<li><a href="../../portfolio-3.html">Portfolio three</a></li>
<li><a href="../../portfolio-4.html">Portfolio four</a></li>
<li><a href="../../portfolio-5.html">Portfolio five</a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Single item</a>
<ul class="dropdown-menu">
<li><a href="../../portfolio-single-1.html">Single one</a></li>
<li><a href="../../portfolio-single-2.html">Single two</a></li>
<li><a href="../../portfolio-single-3.html">Single three</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Blog <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a href="../../blog-grid.html">Grid</a></li>
<li><a href="../../blog-masonry.html">Masonry</a></li>
<li><a href="../../blog-classic.html">Classic</a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Single post</a>
<ul class="dropdown-menu">
<li><a href="../../blog-single-1.html">Single one</a></li>
<li><a href="../../blog-single-2.html">Single two</a></li>
<li><a href="../../blog-single-3.html">Single three</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown mega-tabs active">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Elements <span class="caret"></span></a>
<div class="mega-menu dropdown-menu multi-level row bg-menu">
<div class="tab-box" data-tab-anima="fade-in">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Components</a></li>
<li><a href="#">Headers</a></li>
<li><a href="#">Titles</a></li>
</ul>
<div class="panel active">
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-posterous"></i> <a href="../../features/components/icons.html">Icons</a></li>
<li><i class="fa-li im-secound"></i> <a href="../../features/components/counters-countdown.html">Counters</a></li>
<li><i class="fa-li im-clock-back"></i> <a href="../../features/components/counters-countdown.html">Countdowns</a></li>
<li><i class="fa-li im-libra"></i> <a href="../../features/components/progress-bars.html">Progress bars</a></li>
<li><i class="fa-li im-arrow-refresh2"></i> <a href="../../features/components/progress-bars.html">Circle progress bars</a></li>
<li><i class="fa-li im-calendar-4"></i> <a href="../../features/components/timeline.html">Timeline</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/containers/section-slider.html">Slider</a></li>
<li><i class="fa-li im-speach-bubbles"></i> <a href="../../features/components/php-contact-form.html">Contact form</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-hand-touch"></i> <a href="../../features/components/buttons.html">Buttons</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/components/image-boxes.html">Image boxes</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/components/image-boxes-advanced.html">Advanced image boxes</a></li>
<li><i class="fa-li im-id-2"></i> <a href="../../features/components/content-box.html">Content boxes</a></li>
<li><i class="fa-li im-facebook"></i> <a href="../../features/components/social-media.html">Social media</a></li>
<li><i class="fa-li im-numbering-list"></i> <a href="../../features/components/lists.html">Lists</a></li>
<li><i class="fa-li im-map2"></i> <a href="../../features/components/maps.html">Google maps</a></li>
<li><i class="fa-li im-bold-text"></i> <a href="../../features/components/typography.html">Typography</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-split-horizontal2window"></i> <a href="../../features/components/tables.html">Advanced table</a></li>
<li><i class="fa-li im-maximize"></i> <a href="../../features/containers/lightbox.html">Lightbox and popups</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/containers/sliders.html">Sliders and carousels</a></li>
<li><i class="fa-li im-scroll-fast"></i> <a href="../../features/containers/scroll-box-collapse.html">Scroll box</a></li>
<li><i class="fa-li im-download-2"></i> <a href="../../features/containers/scroll-box-collapse.html">Collapse box</a></li>
<li><i class="fa-li im-new-tab"></i> <a href="../../features/containers/tabs.html">Tabs</a></li>
<li><i class="fa-li im-new-tab"></i> <a href="../../features/containers/accordions.html">Accordions</a></li>
<li><i class="fa-li im-split-foursquarewindow"></i> <a href="../../features/containers/list-grid.html">Grid</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-split-foursquarewindow"></i> <a href="../../features/containers/list-masonry.html">Masonry</a></li>
<li><i class="fa-li im-panorama"></i> <a href="../../features/containers/section-background-image.html">Background image</a></li>
<li><i class="fa-li im-panorama"></i> <a href="../../features/containers/section-background-image-parallax.html">Background parallax</a></li>
<li><i class="fa-li im-film-strip"></i> <a href="../../features/containers/section-background-video.html">Background video</a></li>
<li><i class="fa-li im-clouds"></i> <a href="../../features/containers/section-animations.html">Bg animations</a></li>
<li><i class="fa-li im-go-bottom"></i> <a href="../../features/footers/parallax.html">Footer parallax</a></li>
<li><i class="fa-li im-go-bottom"></i> <a href="../../features/footers/minimal.html">Footer minimal</a></li>
<li><i class="fa-li im-go-bottom"></i> <a href="../../features/footers/base.html">Footer base</a></li>
</ul>
</div>
</div>
<div class="panel">
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-road"></i> <a href="../../features/menus/classic.html">Menu classic</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/classic-transparent.html">Menu classic transparent</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/big-logo.html">Menu big logo</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/subline.html">Menu subline</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/subtitle.html">Menu subtitle</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-road"></i> <a href="../../features/menus/middle-logo.html">Menu middle logo</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/middle-logo-top.html">Menu middle logo top</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/middle-box.html">Menu middle box</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/icons.html">Menu icons</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/icons-top.html">Menu icons top</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-road-2"></i> <a href="../../features/menus/side.html">Side classic</a></li>
<li><i class="fa-li im-road-2"></i> <a href="../../features/menus/side-lateral.html">Side lateral</a></li>
<li><i class="fa-li im-road-2"></i> <a href="../../features/menus/side-simple.html">Side simple</a></li>
</ul>
</div>
</div>
<div class="panel">
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image.html">Image background</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image-fullscreen.html">Image full-screen</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image-fullscreen-parallax.html">Image full-screen parallax</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image-parallax.html">Image parallax</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image-parallax-ken-burn.html">Image parallax ken-burn</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-mp4.html">Video background MP4</a></li>
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-youtube.html">Video background Youtube</a></li>
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-fullscreen.html">Video full-screen</a></li>
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-fullscreen-parallax.html">Video full-screen parallax</a></li>
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-parallax.html">Video parallax</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-panorama"></i> <a href="../../features/titles/base-1.html">Title base 1</a></li>
<li><i class="fa-li im-panorama"></i> <a href="../../features/titles/base-2.html">Title base 2</a></li>
<li><i class="fa-li im-clouds"></i> <a href="../../features/titles/animation.html">Animation background</a></li>
<li><i class="fa-li im-clouds"></i> <a href="../../features/titles/animation-parallax.html">Animation parallax</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/titles/slider.html">Slider background</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/titles/slider-fullscreen.html">Slider full-screen</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/titles/slider-fullscreen-parallax.html">Slider full-screen parallax</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/titles/slider-parallax.html">Slider parallax</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="header-base">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="title-base text-left">
<h1>Tabs</h1>
<p>This template come with lot of innovative features and an awesome and extensive documentation ready to be used to build your website.</p>
</div>
</div>
<div class="col-md-3">
<ol class="breadcrumb b white">
<li><a href="#">Home</a></li>
<li class="active">Features</li>
</ol>
</div>
</div>
</div>
</div>
<div class="section-empty section-item">
<div class="container content">
<h5 class="text-center">TABS</h5>
<hr class="space m" />
<div class="row">
<div class="col-md-6">
<div class="tab-box" id="tab-classic" data-tab-anima="fade-right">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
</div>
<div class="col-md-6">
<div class="tab-box inverse" data-tab-anima="fade-right">
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#"><i class="im-libra"></i>Home</a></li>
<li><a href="#"><i class="im-film-board"></i>Profile</a></li>
<li><a href="#"><i class="im-clock-back"></i>Messages</a></li>
</ul>
</div>
</div>
</div>
<hr class="space m" />
<div class="row">
<div class="col-md-6">
<div class="tab-box" data-tab-anima="fade-left">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
</div>
<div class="col-md-6">
<div class="tab-box inverse" data-tab-anima="fade-top">
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
</div>
</div>
<hr class="space m" />
<div class="row">
<div class="col-md-6">
<div class="tab-box" data-tab-anima="fade-in">
<ul class="nav nav-tabs nav-center">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
</div>
<div class="col-md-6">
<div class="tab-box inverse" data-tab-anima="fade-right">
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<ul class="nav nav-tabs nav-center">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
</div>
</div>
<hr class="space m" />
<div class="row">
<div class="col-md-6">
<div class="tab-box" data-tab-anima="fade-right">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#t1">Home</a></li>
<li><a href="#t2">Profile</a></li>
<li><a href="#t3">Messages</a></li>
</ul>
<div id="t1" class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div id="t2" class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div id="t3" class="panel ">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
</div>
<div class="col-md-6">
<div class="tab-box" data-tab-anima="show-scale">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
</div>
</div>
<hr class="space m" />
<div class="row">
<div class="col-md-4">
<div class="tab-box" data-tab-anima="fade-right">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#"><i class="im-film-board"></i> Home</a></li>
<li><a href="#"><i class="im-calendar-4"></i> Profile</a></li>
</ul>
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
</div>
<div class="col-md-4">
<div class="tab-box" data-tab-anima="fade-bottom">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Save</a></li>
<li><a href="#">Love</a></li>
<li><a href="#">Energy</a></li>
</ul>
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
</div>
<div class="col-md-4">
<div class="tab-box" data-tab-anima="fade-right">
<ul class="nav nav-tabs nav-center">
<li class="active" data-anima="slide-right-left" data-trigger="hover"><a href="#">Home</a></li>
<li><a href="#" data-anima="slide-right-left" data-trigger="hover">Profile</a></li>
</ul>
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
</div>
</div>
<hr class="space m" />
<div class="row">
<div class="col-md-6">
<div class="tab-box pills" data-tab-anima="fade-right">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
</div>
<div class="col-md-6">
<div class="tab-box pills" data-tab-anima="fade-left">
<ul class="nav nav-pills nav-center">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
</div>
</div>
<hr class="space s" />
<hr />
<hr class="space s" />
<h5 class="text-center">TABS VERTICAL</h5>
<hr class="space m" />
<div class="row">
<div class="col-md-6">
<div class="tab-box left" data-tab-anima="fade-left">
<ul class="nav nav-tabs col-md-4">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<div class="panel-box col-md-8">
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="tab-box right" data-tab-anima="fade-left">
<div class="panel-box col-md-8">
<div class="panel active">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
Lorem ipsum dolor sitamet 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
<ul class="nav nav-tabs col-md-4">
<li class="active"><a href="#"><i class="im-panorama"></i> Home</a></li>
<li><a href="#"><i class="im-secound"></i> Profile</a></li>
<li><a href="#"><i class="im-road-2"></i> Messages</a></li>
</ul>
</div>
</div>
</div>
<hr class="space m" />
<div class="row">
<div class="col-md-6">
<div class="tab-box left" data-tab-anima="fade-right">
<ul class="nav nav-tabs nav-justified-v col-md-4">
<li class="active"><a href="#">Home </a></li>
<li><a href="#">Profile </a></li>
<li><a href="#">Messages </a></li>
</ul>
<div class="panel-box col-md-8">
<div class="panel active">
L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Utenim 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.
</div>
<div class="panel">
L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Utenim 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.
</div>
<div class="panel">
L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua.
Utenim 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.
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="tab-box right" data-tab-anima="fade-in">
<div class="panel-box col-md-8">
<div class="panel active">
L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
<ul class="nav nav-tabs nav-justified-v col-md-4">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
</div>
</div>
<hr class="space m" />
<div class="row">
<div class="col-md-6">
<div class="tab-box left pills" data-tab-anima="fade-right">
<ul class="nav nav-pills col-md-4">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<div class="panel-box col-md-8">
<div class="panel active">
L'orem ipsum dolor sitamet, 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
L'orem ipsum dolor sitamet, 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
L'orem ipsum dolor sitamet, 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="tab-box right pills" data-tab-anima="fade-in">
<div class="panel-box col-md-8">
<div class="panel active">
L'orem ipsum dolor sitamet, 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
L'orem ipsum dolor sitamet, 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
<div class="panel">
L'orem ipsum dolor sitamet, 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 coSed ut perspiciatis unde omnis iste natus error sit voluptatem
</div>
</div>
<ul class="nav nav-pills col-md-4">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="section-empty text-center section-doc">
<div class="container content">
<h4 class="text-normal">Documentation</h4>
<p>This template is built with HTWF and more variants<br /> are available, check the official documentation for more details.</p>
<hr class="space xs" />
<a href="http://html.framework-y.com/containers/others/#tabs" target="_blank" class="btn btn-sm">Go to documentation</a>
</div>
</div>
<footer class="footer-base">
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tag-row icon-row icon-row-square">
<span><a>About</a></span>
<span><a>Services</a></span>
<span><a>Support</a></span>
<span><a>Contacts</a></span>
</div>
</div>
<div class="col-md-6 text-right text-center-sm">
<div class="btn-group social-group btn-group-icons">
<a target="_blank" href="#" data-social="share-facebook" data-toggle="tooltip" data-placement="top" title="Facebook">
<i class="fa fa-facebook text-s"></i>
</a>
<a target="_blank" href="#" data-social="share-twitter" data-toggle="tooltip" data-placement="top" title="Twitter">
<i class="fa fa-twitter text-s"></i>
</a>
<a target="_blank" href="#" data-social="share-google" data-toggle="tooltip" data-placement="top" title="Google+">
<i class="fa fa-google-plus text-s"></i>
</a>
<a target="_blank" href="#" data-social="share-linkedin" data-toggle="tooltip" data-placement="top" title="LinkedIn">
<i class="fa fa-linkedin text-s"></i>
</a>
</div>
</div>
</div>
<div class="row copy-row">
<div class="col-md-12 copy-text">
© 2018 Structura - One page minimal template <span>Handmade by <a href="http://schiocco.com/">schiocco.com</a></span>
</div>
</div>
</div>
</div>
<script src="../../../HTWF/scripts/jquery.min.js"></script>
<script src="../../../HTWF/scripts/script.js"></script>
<link rel="stylesheet" href="../../../HTWF/scripts/iconsmind/line-icons.min.css">
<script src="../../../HTWF/scripts/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../HTWF/scripts/jquery.tab-accordion.js"></script>
<script src="../../../HTWF/scripts/parallax.min.js"></script>
</footer>
</body>
</html>