You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
844 lines
59 KiB
HTML
844 lines
59 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="ca">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Tabs | Notika - Notika Admin Template</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- favicon
|
|
============================================ -->
|
|
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
|
|
<!-- Google Fonts
|
|
============================================ -->
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
|
|
<!-- Bootstrap CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<!-- font awesome CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/font-awesome.min.css">
|
|
<!-- owl.carousel CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/owl.carousel.css">
|
|
<link rel="stylesheet" href="css/owl.theme.css">
|
|
<link rel="stylesheet" href="css/owl.transitions.css">
|
|
<!-- meanmenu CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/meanmenu/meanmenu.min.css">
|
|
<!-- Notika icon CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/notika-custom-icon.css">
|
|
<!-- mCustomScrollbar CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
|
|
<!-- animate CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/animate.css">
|
|
<!-- normalize CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
<!-- wave CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/wave/waves.min.css">
|
|
<link rel="stylesheet" href="css/wave/button.css">
|
|
<!-- main CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<!-- style CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="style.css">
|
|
<!-- responsive CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/responsive.css">
|
|
<!-- modernizr JS
|
|
============================================ -->
|
|
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!--[if lt IE 8]>
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
<![endif]-->
|
|
<!-- Start Header Top Area -->
|
|
<div class="header-top-area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
|
|
<div class="logo-area">
|
|
<a href="#"><img src="img/logo/logo.png" alt="" /></a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
|
|
<div class="header-top-menu">
|
|
<ul class="nav navbar-nav notika-top-nav">
|
|
<li class="nav-item dropdown">
|
|
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-search"></i></span></a>
|
|
<div role="menu" class="dropdown-menu search-dd animated flipInX">
|
|
<div class="search-input">
|
|
<i class="notika-icon notika-left-arrow"></i>
|
|
<input type="text" />
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-mail"></i></span></a>
|
|
<div role="menu" class="dropdown-menu message-dd animated zoomIn">
|
|
<div class="hd-mg-tt">
|
|
<h2>Messages</h2>
|
|
</div>
|
|
<div class="hd-message-info">
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/1.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>David Belle</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/2.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Jonathan Morris</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/4.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Fredric Mitchell</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/1.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>David Belle</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/2.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Glenn Jecobs</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="hd-mg-va">
|
|
<a href="#">View All</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item nc-al"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-alarm"></i></span><div class="spinner4 spinner-4"></div><div class="ntd-ctn"><span>3</span></div></a>
|
|
<div role="menu" class="dropdown-menu message-dd notification-dd animated zoomIn">
|
|
<div class="hd-mg-tt">
|
|
<h2>Notification</h2>
|
|
</div>
|
|
<div class="hd-message-info">
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/1.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>David Belle</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/2.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Jonathan Morris</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/4.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Fredric Mitchell</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/1.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>David Belle</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/2.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Glenn Jecobs</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="hd-mg-va">
|
|
<a href="#">View All</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-menus"></i></span><div class="spinner4 spinner-4"></div><div class="ntd-ctn"><span>2</span></div></a>
|
|
<div role="menu" class="dropdown-menu message-dd task-dd animated zoomIn">
|
|
<div class="hd-mg-tt">
|
|
<h2>Tasks</h2>
|
|
</div>
|
|
<div class="hd-message-info hd-task-info">
|
|
<div class="skill">
|
|
<div class="progress">
|
|
<div class="lead-content">
|
|
<p>HTML5 Validation Report</p>
|
|
</div>
|
|
<div class="progress-bar wow fadeInLeft" data-progress="95%" style="width: 95%;" data-wow-duration="1.5s" data-wow-delay="1.2s"> <span>95%</span>
|
|
</div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="lead-content">
|
|
<p>Google Chrome Extension</p>
|
|
</div>
|
|
<div class="progress-bar wow fadeInLeft" data-progress="85%" style="width: 85%;" data-wow-duration="1.5s" data-wow-delay="1.2s"><span>85%</span> </div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="lead-content">
|
|
<p>Social Internet Projects</p>
|
|
</div>
|
|
<div class="progress-bar wow fadeInLeft" data-progress="93%" style="width: 93%;" data-wow-duration="1.5s" data-wow-delay="1.2s"><span>93%</span> </div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="lead-content">
|
|
<p>Bootstrap Admin Template</p>
|
|
</div>
|
|
<div class="progress-bar wow fadeInLeft" data-progress="93%" style="width: 93%;" data-wow-duration="1.5s" data-wow-delay="1.2s"><span>93%</span> </div>
|
|
</div>
|
|
<div class="progress progress-bt">
|
|
<div class="lead-content">
|
|
<p>Youtube Client App</p>
|
|
</div>
|
|
<div class="progress-bar wow fadeInLeft" data-progress="93%" style="width: 93%;" data-wow-duration="1.5s" data-wow-delay="1.2s"><span>93%</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hd-mg-va">
|
|
<a href="#">View All</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-chat"></i></span></a>
|
|
<div role="menu" class="dropdown-menu message-dd chat-dd animated zoomIn">
|
|
<div class="hd-mg-tt">
|
|
<h2>Chat</h2>
|
|
</div>
|
|
<div class="search-people">
|
|
<i class="notika-icon notika-left-arrow"></i>
|
|
<input type="text" placeholder="Search People" />
|
|
</div>
|
|
<div class="hd-message-info">
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img chat-img">
|
|
<img src="img/post/1.jpg" alt="" />
|
|
<div class="chat-avaible"><i class="notika-icon notika-dot"></i></div>
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>David Belle</h3>
|
|
<p>Available</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img chat-img">
|
|
<img src="img/post/2.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Jonathan Morris</h3>
|
|
<p>Last seen 3 hours ago</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img chat-img">
|
|
<img src="img/post/4.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Fredric Mitchell</h3>
|
|
<p>Last seen 2 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img chat-img">
|
|
<img src="img/post/1.jpg" alt="" />
|
|
<div class="chat-avaible"><i class="notika-icon notika-dot"></i></div>
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>David Belle</h3>
|
|
<p>Available</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img chat-img">
|
|
<img src="img/post/2.jpg" alt="" />
|
|
<div class="chat-avaible"><i class="notika-icon notika-dot"></i></div>
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Glenn Jecobs</h3>
|
|
<p>Available</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="hd-mg-va">
|
|
<a href="#">View All</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Header Top Area -->
|
|
<!-- Mobile Menu start -->
|
|
<div class="mobile-menu-area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<div class="mobile-menu">
|
|
<nav id="dropdown">
|
|
<ul class="mobile-menu-nav">
|
|
<li><a data-toggle="collapse" data-target="#Charts" href="#">Home</a>
|
|
<ul class="collapse dropdown-header-top">
|
|
<li><a href="index.html">Dashboard One</a></li>
|
|
<li><a href="index-2.html">Dashboard Two</a></li>
|
|
<li><a href="index-3.html">Dashboard Three</a></li>
|
|
<li><a href="index-4.html">Dashboard Four</a></li>
|
|
<li><a href="analytics.html">Analytics</a></li>
|
|
<li><a href="widgets.html">Widgets</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#demoevent" href="#">Email</a>
|
|
<ul id="demoevent" class="collapse dropdown-header-top">
|
|
<li><a href="inbox.html">Inbox</a></li>
|
|
<li><a href="view-email.html">View Email</a></li>
|
|
<li><a href="compose-email.html">Compose Email</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#democrou" href="#">Interface</a>
|
|
<ul id="democrou" class="collapse dropdown-header-top">
|
|
<li><a href="animations.html">Animations</a></li>
|
|
<li><a href="google-map.html">Google Map</a></li>
|
|
<li><a href="data-map.html">Data Maps</a></li>
|
|
<li><a href="code-editor.html">Code Editor</a></li>
|
|
<li><a href="image-cropper.html">Images Cropper</a></li>
|
|
<li><a href="wizard.html">Wizard</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#demolibra" href="#">Charts</a>
|
|
<ul id="demolibra" class="collapse dropdown-header-top">
|
|
<li><a href="flot-charts.html">Flot Charts</a></li>
|
|
<li><a href="bar-charts.html">Bar Charts</a></li>
|
|
<li><a href="line-charts.html">Line Charts</a></li>
|
|
<li><a href="area-charts.html">Area Charts</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#demodepart" href="#">Tables</a>
|
|
<ul id="demodepart" class="collapse dropdown-header-top">
|
|
<li><a href="normal-table.html">Normal Table</a></li>
|
|
<li><a href="data-table.html">Data Table</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#demo" href="#">Forms</a>
|
|
<ul id="demo" class="collapse dropdown-header-top">
|
|
<li><a href="form-elements.html">Form Elements</a></li>
|
|
<li><a href="form-components.html">Form Components</a></li>
|
|
<li><a href="form-examples.html">Form Examples</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#Miscellaneousmob" href="#">App views</a>
|
|
<ul id="Miscellaneousmob" class="collapse dropdown-header-top">
|
|
<li><a href="notification.html">Notifications</a>
|
|
</li>
|
|
<li><a href="alert.html">Alerts</a>
|
|
</li>
|
|
<li><a href="modals.html">Modals</a>
|
|
</li>
|
|
<li><a href="buttons.html">Buttons</a>
|
|
</li>
|
|
<li><a href="tabs.html">Tabs</a>
|
|
</li>
|
|
<li><a href="accordion.html">Accordion</a>
|
|
</li>
|
|
<li><a href="dialog.html">Dialogs</a>
|
|
</li>
|
|
<li><a href="popovers.html">Popovers</a>
|
|
</li>
|
|
<li><a href="tooltips.html">Tooltips</a>
|
|
</li>
|
|
<li><a href="dropdown.html">Dropdowns</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#Pagemob" href="#">Pages</a>
|
|
<ul id="Pagemob" class="collapse dropdown-header-top">
|
|
<li><a href="contact.html">Contact</a>
|
|
</li>
|
|
<li><a href="invoice.html">Invoice</a>
|
|
</li>
|
|
<li><a href="typography.html">Typography</a>
|
|
</li>
|
|
<li><a href="color.html">Color</a>
|
|
</li>
|
|
<li><a href="login-register.html">Login Register</a>
|
|
</li>
|
|
<li><a href="404.html">404 Page</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile Menu end -->
|
|
<!-- Main Menu area start-->
|
|
<div class="main-menu-area mg-tb-40">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<ul class="nav nav-tabs notika-menu-wrap menu-it-icon-pro">
|
|
<li><a data-toggle="tab" href="#Home"><i class="notika-icon notika-house"></i> Home</a>
|
|
</li>
|
|
<li><a data-toggle="tab" href="#mailbox"><i class="notika-icon notika-mail"></i> Email</a>
|
|
</li>
|
|
<li><a data-toggle="tab" href="#Interface"><i class="notika-icon notika-edit"></i> Interface</a>
|
|
</li>
|
|
<li><a data-toggle="tab" href="#Charts"><i class="notika-icon notika-bar-chart"></i> Charts</a>
|
|
</li>
|
|
<li><a data-toggle="tab" href="#Tables"><i class="notika-icon notika-windows"></i> Tables</a>
|
|
</li>
|
|
<li><a data-toggle="tab" href="#Forms"><i class="notika-icon notika-form"></i> Forms</a>
|
|
</li>
|
|
<li class="active"><a data-toggle="tab" href="#Appviews"><i class="notika-icon notika-app"></i> App views</a>
|
|
</li>
|
|
<li><a data-toggle="tab" href="#Page"><i class="notika-icon notika-support"></i> Pages</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content custom-menu-content">
|
|
<div id="Home" class="tab-pane in notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="index.html">Dashboard One</a>
|
|
</li>
|
|
<li><a href="index-2.html">Dashboard Two</a>
|
|
</li>
|
|
<li><a href="index-3.html">Dashboard Three</a>
|
|
</li>
|
|
<li><a href="index-4.html">Dashboard Four</a>
|
|
</li>
|
|
<li><a href="analytics.html">Analytics</a>
|
|
</li>
|
|
<li><a href="widgets.html">Widgets</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="mailbox" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="inbox.html">Inbox</a>
|
|
</li>
|
|
<li><a href="view-email.html">View Email</a>
|
|
</li>
|
|
<li><a href="compose-email.html">Compose Email</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Interface" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="animations.html">Animations</a>
|
|
</li>
|
|
<li><a href="google-map.html">Google Map</a>
|
|
</li>
|
|
<li><a href="data-map.html">Data Maps</a>
|
|
</li>
|
|
<li><a href="code-editor.html">Code Editor</a>
|
|
</li>
|
|
<li><a href="image-cropper.html">Images Cropper</a>
|
|
</li>
|
|
<li><a href="wizard.html">Wizard</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Charts" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="flot-charts.html">Flot Charts</a>
|
|
</li>
|
|
<li><a href="bar-charts.html">Bar Charts</a>
|
|
</li>
|
|
<li><a href="line-charts.html">Line Charts</a>
|
|
</li>
|
|
<li><a href="area-charts.html">Area Charts</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Tables" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="normal-table.html">Normal Table</a>
|
|
</li>
|
|
<li><a href="data-table.html">Data Table</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Forms" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="form-elements.html">Form Elements</a>
|
|
</li>
|
|
<li><a href="form-components.html">Form Components</a>
|
|
</li>
|
|
<li><a href="form-examples.html">Form Examples</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Appviews" class="tab-pane active notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="notification.html">Notifications</a>
|
|
</li>
|
|
<li><a href="alert.html">Alerts</a>
|
|
</li>
|
|
<li><a href="modals.html">Modals</a>
|
|
</li>
|
|
<li><a href="buttons.html">Buttons</a>
|
|
</li>
|
|
<li><a href="tabs.html">Tabs</a>
|
|
</li>
|
|
<li><a href="accordion.html">Accordion</a>
|
|
</li>
|
|
<li><a href="dialog.html">Dialogs</a>
|
|
</li>
|
|
<li><a href="popovers.html">Popovers</a>
|
|
</li>
|
|
<li><a href="tooltips.html">Tooltips</a>
|
|
</li>
|
|
<li><a href="dropdown.html">Dropdowns</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Page" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="contact.html">Contact</a>
|
|
</li>
|
|
<li><a href="invoice.html">Invoice</a>
|
|
</li>
|
|
<li><a href="typography.html">Typography</a>
|
|
</li>
|
|
<li><a href="color.html">Color</a>
|
|
</li>
|
|
<li><a href="login-register.html">Login Register</a>
|
|
</li>
|
|
<li><a href="404.html">404 Page</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main Menu area End-->
|
|
<!-- Breadcomb area Start-->
|
|
<div class="breadcomb-area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<div class="breadcomb-list">
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
<div class="breadcomb-wp">
|
|
<div class="breadcomb-icon">
|
|
<i class="notika-icon notika-app"></i>
|
|
</div>
|
|
<div class="breadcomb-ctn">
|
|
<h2>Tabs</h2>
|
|
<p>Welcome to Notika <span class="bread-ntd">Admin Template</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-3">
|
|
<div class="breadcomb-report">
|
|
<button data-toggle="tooltip" data-placement="left" title="Download Report" class="btn"><i class="notika-icon notika-sent"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Breadcomb area End-->
|
|
<!-- Start tabs area-->
|
|
<div class="tabs-info-area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<div class="widget-tabs-int">
|
|
<div class="tab-hd">
|
|
<h2>Tabs</h2>
|
|
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
|
|
</div>
|
|
<div class="widget-tabs-list">
|
|
<ul class="nav nav-tabs">
|
|
<li class="active"><a data-toggle="tab" href="#home">Tab Menu 1</a></li>
|
|
<li><a data-toggle="tab" href="#menu1">Tab Menu 2</a></li>
|
|
<li><a data-toggle="tab" href="#menu2">Tab Menu 3</a></li>
|
|
</ul>
|
|
<div class="tab-content tab-custom-st">
|
|
<div id="home" class="tab-pane fade in active">
|
|
<div class="tab-ctn">
|
|
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet est. Praesent ac the massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla porta dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
|
|
<p class="tab-mg-b-0">In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuadan of pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massa imperdiet quam. Pellentesque commodo eros a enim. Vestibulum ante ipsum primis in faucibus orci the luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Phasellus a est. Pellentesque commodo eros a enim. Cras ultricies mi eu turpis hendrerit of fringilla. Donec mollis hendrerit risus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Praesent egestas neque eu enim. In hac habitasse plat.</p>
|
|
</div>
|
|
</div>
|
|
<div id="menu1" class="tab-pane fade">
|
|
<div class="tab-ctn">
|
|
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet est. Praesent ac the massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla porta dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
|
|
<p class="tab-mg-b-0">In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuadan of pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massa imperdiet quam. Pellentesque commodo eros a enim. Vestibulum ante ipsum primis in faucibus orci the luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Phasellus a est. Pellentesque commodo eros a enim. Cras ultricies mi eu turpis hendrerit of fringilla. Donec mollis hendrerit risus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Praesent egestas neque eu enim. In hac habitasse plat.</p>
|
|
</div>
|
|
</div>
|
|
<div id="menu2" class="tab-pane fade">
|
|
<div class="tab-ctn">
|
|
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet est. Praesent ac the massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla porta dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
|
|
<p class="tab-mg-b-0">In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuadan of pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massa imperdiet quam. Pellentesque commodo eros a enim. Vestibulum ante ipsum primis in faucibus orci the luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Phasellus a est. Pellentesque commodo eros a enim. Cras ultricies mi eu turpis hendrerit of fringilla. Donec mollis hendrerit risus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Praesent egestas neque eu enim. In hac habitasse plat.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<div class="widget-tabs-int tab-ctm-wp mg-t-30">
|
|
<div class="tab-hd">
|
|
<h2>Tabs Right Aligned</h2>
|
|
<p>Simply include the class <code>.tab-nav-right</code> to align the tab header to right side.</p>
|
|
</div>
|
|
<div class="widget-tabs-list">
|
|
<ul class="nav nav-tabs tab-nav-right">
|
|
<li class="active"><a data-toggle="tab" href="#home2">Tab Menu 1</a></li>
|
|
<li><a data-toggle="tab" href="#menu12">Tab Menu 2</a></li>
|
|
<li><a data-toggle="tab" href="#menu22">Tab Menu 3</a></li>
|
|
</ul>
|
|
<div class="tab-content tab-custom-st tab-ctn-right">
|
|
<div id="home2" class="tab-pane fade in active">
|
|
<div class="tab-ctn">
|
|
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet est. Praesent ac the massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla porta dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
|
|
<p class="tab-mg-b-0">In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuadan of pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massa imperdiet quam. Pellentesque commodo eros a enim. Vestibulum ante ipsum primis in faucibus orci the luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Phasellus a est. Pellentesque commodo eros a enim. Cras ultricies mi eu turpis hendrerit of fringilla. Donec mollis hendrerit risus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Praesent egestas neque eu enim. In hac habitasse plat.</p>
|
|
</div>
|
|
</div>
|
|
<div id="menu12" class="tab-pane fade">
|
|
<div class="tab-ctn">
|
|
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet est. Praesent ac the massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla porta dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
|
|
<p class="tab-mg-b-0">In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuadan of pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massa imperdiet quam. Pellentesque commodo eros a enim. Vestibulum ante ipsum primis in faucibus orci the luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Phasellus a est. Pellentesque commodo eros a enim. Cras ultricies mi eu turpis hendrerit of fringilla. Donec mollis hendrerit risus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Praesent egestas neque eu enim. In hac habitasse plat.</p>
|
|
</div>
|
|
</div>
|
|
<div id="menu22" class="tab-pane fade">
|
|
<div class="tab-ctn">
|
|
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet est. Praesent ac the massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla porta dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
|
|
<p class="tab-mg-b-0">In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuadan of pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massa imperdiet quam. Pellentesque commodo eros a enim. Vestibulum ante ipsum primis in faucibus orci the luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Phasellus a est. Pellentesque commodo eros a enim. Cras ultricies mi eu turpis hendrerit of fringilla. Donec mollis hendrerit risus. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Praesent egestas neque eu enim. In hac habitasse plat.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<div class="widget-tabs-int mg-t-30">
|
|
<div class="tab-hd">
|
|
<h2>Tabs With animations</h2>
|
|
<p>You may add optional animation classes to animate the tab panes when switching. Please refer the Animations page to get all the available classes <a target="_blank" href="https://daneden.github.io/animate.css/">Click Here</a>.</p>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="widget-tabs-list tab-pt-mg">
|
|
<ul class="nav nav-tabs tab-nav-center">
|
|
<li class="active"><a data-toggle="tab" href="#home3">Tab Menu 1</a></li>
|
|
<li><a data-toggle="tab" href="#menu13">Tab Menu 2</a></li>
|
|
<li><a data-toggle="tab" href="#menu23">Tab Menu 3</a></li>
|
|
</ul>
|
|
<div class="tab-content tab-custom-st">
|
|
<div id="home3" class="tab-pane in active animated zoomInLeft">
|
|
<div class="tab-ctn">
|
|
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum of purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet este. Praesent ac massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla theportan dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quy, crydesfeugiat a, tellus.</p>
|
|
<p class="tab-mg-b-0">In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuada pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massantesan imperdiet quam. Pellentesque commodo eros a enim.</p>
|
|
</div>
|
|
</div>
|
|
<div id="menu13" class="tab-pane animated zoomInLeft">
|
|
<div class="tab-ctn">
|
|
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum of purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet este. Praesent ac massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla theportan dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quy, crydesfeugiat a, tellus.</p>
|
|
<p class="tab-mg-b-0">In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuada pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massantesan imperdiet quam. Pellentesque commodo eros a enim.</p>
|
|
</div>
|
|
</div>
|
|
<div id="menu23" class="tab-pane animated zoomInLeft">
|
|
<div class="tab-ctn">
|
|
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum of purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet este. Praesent ac massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla theportan dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quy, crydesfeugiat a, tellus.</p>
|
|
<p class="tab-mg-b-0">In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuada pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massantesan imperdiet quam. Pellentesque commodo eros a enim.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="widget-tabs-list tab-pt-mg sm-res-mg-t-30 tb-res-mg-t-30">
|
|
<ul class="nav nav-tabs tab-nav-center">
|
|
<li class="active"><a data-toggle="tab" href="#home4">Tab Menu 1</a></li>
|
|
<li><a data-toggle="tab" href="#menu14">Tab Menu 2</a></li>
|
|
<li><a data-toggle="tab" href="#menu24">Tab Menu 3</a></li>
|
|
</ul>
|
|
<div class="tab-content tab-custom-st">
|
|
<div id="home4" class="tab-pane in active animated zoomInRight">
|
|
<div class="tab-ctn">
|
|
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum of purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet este. Praesent ac massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla theportan dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quy, crydesfeugiat a, tellus.</p>
|
|
<p class="tab-mg-b-0">In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuada pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massantesan imperdiet quam. Pellentesque commodo eros a enim.</p>
|
|
</div>
|
|
</div>
|
|
<div id="menu14" class="tab-pane animated zoomInRight">
|
|
<div class="tab-ctn">
|
|
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum of purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet este. Praesent ac massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla theportan dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quy, crydesfeugiat a, tellus.</p>
|
|
<p class="tab-mg-b-0">In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuada pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massantesan imperdiet quam. Pellentesque commodo eros a enim.</p>
|
|
</div>
|
|
</div>
|
|
<div id="menu24" class="tab-pane animated zoomInRight">
|
|
<div class="tab-ctn">
|
|
<p>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Vestibulum of purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nulla sit amet este. Praesent ac massa at ligula laoreet iaculis. Vivamus aliquet elit ac nisl. Nulla theportan dolor. Cras dapibus. Aliquam lorem ante, dapibus in, viverra quy, crydesfeugiat a, tellus.</p>
|
|
<p class="tab-mg-b-0">In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam eget dui. In ac felis quis tortor malesuada pretium. Phasellus consectetuer vestibulum elit. Duis lobortis massantesan imperdiet quam. Pellentesque commodo eros a enim.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End tabs area-->
|
|
<!-- Start Footer area-->
|
|
<div class="footer-copyright-area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<div class="footer-copy-right">
|
|
<p>Copyright © 2018
|
|
. All rights reserved. Template by <a href="https://colorlib.com">Colorlib</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Footer area-->
|
|
<!-- jquery
|
|
============================================ -->
|
|
<script src="js/vendor/jquery-1.12.4.min.js"></script>
|
|
<!-- bootstrap JS
|
|
============================================ -->
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<!-- wow JS
|
|
============================================ -->
|
|
<script src="js/wow.min.js"></script>
|
|
<!-- price-slider JS
|
|
============================================ -->
|
|
<script src="js/jquery-price-slider.js"></script>
|
|
<!-- owl.carousel JS
|
|
============================================ -->
|
|
<script src="js/owl.carousel.min.js"></script>
|
|
<!-- scrollUp JS
|
|
============================================ -->
|
|
<script src="js/jquery.scrollUp.min.js"></script>
|
|
<!-- meanmenu JS
|
|
============================================ -->
|
|
<script src="js/meanmenu/jquery.meanmenu.js"></script>
|
|
<!-- counterup JS
|
|
============================================ -->
|
|
<script src="js/counterup/jquery.counterup.min.js"></script>
|
|
<script src="js/counterup/waypoints.min.js"></script>
|
|
<script src="js/counterup/counterup-active.js"></script>
|
|
<!-- sparkline JS
|
|
============================================ -->
|
|
<script src="js/sparkline/jquery.sparkline.min.js"></script>
|
|
<script src="js/sparkline/sparkline-active.js"></script>
|
|
<!-- knob JS
|
|
============================================ -->
|
|
<script src="js/knob/jquery.knob.js"></script>
|
|
<script src="js/knob/jquery.appear.js"></script>
|
|
<script src="js/knob/knob-active.js"></script>
|
|
<!-- mCustomScrollbar JS
|
|
============================================ -->
|
|
<script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
|
|
<!-- flot JS
|
|
============================================ -->
|
|
<script src="js/flot/flot-widget-anatic-active.js"></script>
|
|
<script src="js/flot/chart-tooltips.js"></script>
|
|
<script src="js/flot/flot-active.js"></script>
|
|
<!-- wave JS
|
|
============================================ -->
|
|
<script src="js/wave/waves.min.js"></script>
|
|
<script src="js/wave/wave-active.js"></script>
|
|
<!-- plugins JS
|
|
============================================ -->
|
|
<script src="js/plugins.js"></script>
|
|
<!-- main JS
|
|
============================================ -->
|
|
<script src="js/main.js"></script>
|
|
<!-- tawk chat JS
|
|
============================================ -->
|
|
<script src="js/tawk-chat.js"></script>
|
|
</body>
|
|
|
|
</html> |