656 lines
50 KiB
HTML
656 lines
50 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
|
|
<title>Zoogler - Responsive Bootstrap 4 Admin Dashboard</title>
|
|
<meta content="Admin Dashboard" name="description" />
|
|
<meta content="Mannatthemes" name="author" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/css/icons.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
|
|
|
|
<body class="fixed-left">
|
|
|
|
<!-- Loader -->
|
|
<div id="preloader"><div id="status"><div class="spinner"></div></div></div>
|
|
|
|
<!-- Begin page -->
|
|
<div id="wrapper">
|
|
|
|
<!-- ========== Left Sidebar Start ========== -->
|
|
<div class="left side-menu">
|
|
<button type="button" class="button-menu-mobile button-menu-mobile-topbar open-left waves-effect">
|
|
<i class="ion-close"></i>
|
|
</button>
|
|
|
|
<!-- LOGO -->
|
|
<div class="topbar-left">
|
|
<div class="text-center bg-logo">
|
|
<a href="index.html" class="logo"><i class="mdi mdi-bowling text-success"></i> Zoogler</a>
|
|
<!-- <a href="index.html" class="logo"><img src="assets/images/logo.png" height="24" alt="logo"></a> -->
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-user">
|
|
<img src="assets/images/users/avatar-6.jpg" alt="user" class="rounded-circle img-thumbnail mb-1">
|
|
<h6 class="">Mr. Michael Hill </h6>
|
|
<p class=" online-icon text-dark"><i class="mdi mdi-record text-success"></i>online</p>
|
|
<ul class="list-unstyled list-inline mb-0 mt-2">
|
|
<li class="list-inline-item">
|
|
<a href="#" class="" data-toggle="tooltip" data-placement="top" title="Profile"><i class="dripicons-user text-purple"></i></a>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<a href="#" class="" data-toggle="tooltip" data-placement="top" title="Settings"><i class="dripicons-gear text-dark"></i></a>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<a href="#" class="" data-toggle="tooltip" data-placement="top" title="Log out"><i class="dripicons-power text-danger"></i></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="sidebar-inner slimscrollleft">
|
|
|
|
<div id="sidebar-menu">
|
|
<ul>
|
|
<li class="menu-title">Main</li>
|
|
|
|
<li>
|
|
<a href="index.html" class="waves-effect">
|
|
<i class="dripicons-device-desktop"></i>
|
|
<span> Dashboard <span class="badge badge-pill badge-primary float-right">7</span></span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="calendar.html" class="waves-effect"><i class="dripicons-to-do"></i><span> Calendar </span></a>
|
|
</li>
|
|
|
|
<li class="menu-title">Components</li>
|
|
|
|
<li class="has_sub">
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-jewel"></i> <span> UI Elements </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
|
|
<ul class="list-unstyled">
|
|
<li><a href="ui-alerts.html">Alerts</a></li>
|
|
<li><a href="ui-alertify.html">Alertify</a></li>
|
|
<li><a href="ui-badge.html">Badge</a></li>
|
|
<li><a href="ui-buttons.html">Buttons</a></li>
|
|
<li><a href="ui-carousel.html">Carousel</a></li>
|
|
<li><a href="ui-cards.html">Cards</a></li>
|
|
<li><a href="ui-dropdowns.html">Dropdowns</a></li>
|
|
<li><a href="ui-grid.html">Grid</a></li>
|
|
<li><a href="ui-images.html">Images</a></li>
|
|
<li><a href="ui-lightbox.html">Lightbox</a></li>
|
|
<li><a href="ui-modals.html">Modals</a></li>
|
|
<li><a href="ui-navs.html">Navs</a></li>
|
|
<li><a href="ui-progressbars.html">Progress Bars</a></li>
|
|
<li><a href="ui-pagination.html">Pagination</a></li>
|
|
<li><a href="ui-popover-tooltips.html">Popover & Tooltips</a></li>
|
|
<li><a href="ui-rating.html">Rating</a></li>
|
|
<li><a href="ui-rangeslider.html">Range Slider</a></li>
|
|
<li><a href="ui-sweet-alert.html">Sweet-Alert</a></li>
|
|
<li><a href="ui-typography.html">Typography</a></li>
|
|
<li><a href="ui-tabs-accordions.html">Tabs & Accordions</a></li>
|
|
<li><a href="ui-video.html">Video</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="has_sub">
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-blog"></i><span> Forms </span> <span class="badge badge-pill badge-info float-right">8</span></a>
|
|
<ul class="list-unstyled">
|
|
<li><a href="form-advanced.html">Form Advanced</a></li>
|
|
<li><a href="form-elements.html">Form Elements</a></li>
|
|
<li><a href="form-editors.html">Form Editors</a></li>
|
|
<li><a href="form-uploads.html">Form File Upload</a></li>
|
|
<li><a href="form-mask.html">Form Mask</a></li>
|
|
<li><a href="form-summernote.html">Summernote</a></li>
|
|
<li><a href="form-validation.html">Form Validation</a></li>
|
|
<li><a href="form-xeditable.html">Form Xeditable</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="has_sub">
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-graph-pie"></i><span> Charts </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
|
|
<ul class="list-unstyled">
|
|
<li><a href="charts-chartist.html">Chartist Chart</a></li>
|
|
<li><a href="charts-chartjs.html">Chartjs Chart</a></li>
|
|
<li><a href="charts-c3.html">C3 Chart</a></li>
|
|
<li><a href="charts-flot.html">Flot Chart</a></li>
|
|
<li><a href="charts-other.html">Jquery Knob Chart</a></li>
|
|
<li><a href="charts-morris.html">Morris Chart</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="has_sub">
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-trophy"></i> <span> Icons </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
|
|
<ul class="list-unstyled">
|
|
<li><a href="icons-dripicons.html">Dripicons</a></li>
|
|
<li><a href="icons-fontawesome.html">Font Awesome</a></li>
|
|
<li><a href="icons-ion.html">Ion Icons</a></li>
|
|
<li><a href="icons-material.html">Material Design</a></li>
|
|
<li><a href="icons-themify.html">Themify Icons</a></li>
|
|
<li><a href="icons-typicons.html">Typicons Icons</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="has_sub">
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-card"></i><span> Tables </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
|
|
<ul class="list-unstyled">
|
|
<li><a href="tables-basic.html">Basic Tables</a></li>
|
|
<li><a href="tables-datatable.html">Data Table</a></li>
|
|
<li><a href="tables-editable.html">Editable Table</a></li>
|
|
<li><a href="tables-responsive.html">Responsive Table</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="menu-title">Extra</li>
|
|
|
|
<li class="has_sub">
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-map"></i><span> Maps </span> <span class="badge badge-pill badge-danger float-right">2</span></a>
|
|
<ul class="list-unstyled">
|
|
<li><a href="maps-google.html"> Google Map</a></li>
|
|
<li><a href="maps-vector.html"> Vector Map</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="has_sub">
|
|
<a href="javascript:void(0);" class="waves-effect"><i class="dripicons-copy"></i><span> Pages </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
|
|
<ul class="list-unstyled">
|
|
<li><a href="pages-login.html">Login</a></li>
|
|
<li><a href="pages-register.html">Register</a></li>
|
|
<li><a href="pages-recoverpw.html">Recover Password</a></li>
|
|
<li><a href="pages-lock-screen.html">Lock Screen</a></li>
|
|
<li><a href="pages-blank.html">Blank Page</a></li>
|
|
<li><a href="pages-404.html">Error 404</a></li>
|
|
<li><a href="pages-500.html">Error 500</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div> <!-- end sidebarinner -->
|
|
</div>
|
|
<!-- Left Sidebar End -->
|
|
|
|
<!-- Start right Content here -->
|
|
|
|
<div class="content-page">
|
|
<!-- Start content -->
|
|
<div class="content">
|
|
|
|
<!-- Top Bar Start -->
|
|
<div class="topbar">
|
|
|
|
<nav class="navbar-custom">
|
|
|
|
<ul class="list-inline float-right mb-0">
|
|
<!-- language-->
|
|
<li class="list-inline-item dropdown notification-list hide-phone">
|
|
<a class="nav-link dropdown-toggle arrow-none waves-effect text-white" data-toggle="dropdown" href="#" role="button"
|
|
aria-haspopup="false" aria-expanded="false">
|
|
English <img src="assets/images/flags/us_flag.jpg" class="ml-2" height="16" alt=""/>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right language-switch">
|
|
<a class="dropdown-item" href="#"><img src="assets/images/flags/italy_flag.jpg" alt="" height="16"/><span> Italian </span></a>
|
|
<a class="dropdown-item" href="#"><img src="assets/images/flags/french_flag.jpg" alt="" height="16"/><span> French </span></a>
|
|
<a class="dropdown-item" href="#"><img src="assets/images/flags/spain_flag.jpg" alt="" height="16"/><span> Spanish </span></a>
|
|
<a class="dropdown-item" href="#"><img src="assets/images/flags/russia_flag.jpg" alt="" height="16"/><span> Russian </span></a>
|
|
</div>
|
|
</li>
|
|
<li class="list-inline-item dropdown notification-list">
|
|
<a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button"
|
|
aria-haspopup="false" aria-expanded="false">
|
|
<i class="dripicons-mail noti-icon"></i>
|
|
<span class="badge badge-danger noti-icon-badge">5</span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-menu-lg">
|
|
<!-- item-->
|
|
<div class="dropdown-item noti-title">
|
|
<h5><span class="badge badge-danger float-right">745</span>Messages</h5>
|
|
</div>
|
|
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
|
<div class="notify-icon"><img src="assets/images/users/avatar-2.jpg" alt="user-img" class="img-fluid rounded-circle" /> </div>
|
|
<p class="notify-details"><b>Charles M. Jones</b><small class="text-muted">Dummy text of the printing and typesetting industry.</small></p>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
|
<div class="notify-icon"><img src="assets/images/users/avatar-3.jpg" alt="user-img" class="img-fluid rounded-circle" /> </div>
|
|
<p class="notify-details"><b>Thomas J. Mimms</b><small class="text-muted">You have 87 unread messages</small></p>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
|
<div class="notify-icon"><img src="assets/images/users/avatar-4.jpg" alt="user-img" class="img-fluid rounded-circle" /> </div>
|
|
<p class="notify-details"><b>Luis M. Konrad</b><small class="text-muted">It is a long established fact that a reader will</small></p>
|
|
</a>
|
|
|
|
<!-- All-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item border-top">
|
|
View All
|
|
</a>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="list-inline-item dropdown notification-list">
|
|
<a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button"
|
|
aria-haspopup="false" aria-expanded="false">
|
|
<i class="dripicons-bell noti-icon"></i>
|
|
<span class="badge badge-success noti-icon-badge">2</span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-menu-lg">
|
|
<!-- item-->
|
|
<div class="dropdown-item noti-title">
|
|
<h5><span class="badge badge-danger float-right">87</span>Notification</h5>
|
|
</div>
|
|
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
|
<div class="notify-icon bg-primary"><i class="mdi mdi-cart-outline"></i></div>
|
|
<p class="notify-details"><b>Your order is placed</b><small class="text-muted">Dummy text of the printing and typesetting industry.</small></p>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
|
<div class="notify-icon bg-success"><i class="mdi mdi-message"></i></div>
|
|
<p class="notify-details"><b>New Message received</b><small class="text-muted">You have 87 unread messages</small></p>
|
|
</a>
|
|
|
|
<!-- item-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
|
<div class="notify-icon bg-warning"><i class="mdi mdi-glass-cocktail"></i></div>
|
|
<p class="notify-details"><b>Your item is shipped</b><small class="text-muted">It is a long established fact that a reader will</small></p>
|
|
</a>
|
|
|
|
<!-- All-->
|
|
<a href="javascript:void(0);" class="dropdown-item notify-item border-top">
|
|
View All
|
|
</a>
|
|
|
|
</div>
|
|
</li>
|
|
|
|
<li class="list-inline-item dropdown notification-list">
|
|
<a class="nav-link dropdown-toggle arrow-none waves-effect nav-user" data-toggle="dropdown" href="#" role="button"
|
|
aria-haspopup="false" aria-expanded="false">
|
|
<img src="assets/images/users/avatar-6.jpg" alt="user" class="rounded-circle">
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
|
|
<!-- item-->
|
|
<div class="dropdown-item noti-title">
|
|
<h5>Welcome</h5>
|
|
</div>
|
|
<a class="dropdown-item" href="#"><i class="mdi mdi-account-circle m-r-5 text-muted"></i> Profile</a>
|
|
<a class="dropdown-item" href="#"><i class="mdi mdi-wallet m-r-5 text-muted"></i> My Wallet</a>
|
|
<a class="dropdown-item" href="#"><span class="badge badge-success float-right">5</span><i class="mdi mdi-settings m-r-5 text-muted"></i> Settings</a>
|
|
<a class="dropdown-item" href="#"><i class="mdi mdi-lock-open-outline m-r-5 text-muted"></i> Lock screen</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#"><i class="mdi mdi-logout m-r-5 text-muted"></i> Logout</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="list-inline menu-left mb-0">
|
|
<li class="float-left">
|
|
<button class="button-menu-mobile open-left waves-light waves-effect">
|
|
<i class="mdi mdi-menu"></i>
|
|
</button>
|
|
</li>
|
|
<li class="hide-phone app-search">
|
|
<form role="search" class="">
|
|
<input type="text" placeholder="Search..." class="form-control">
|
|
<a href=""><i class="fa fa-search"></i></a>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="clearfix"></div>
|
|
</nav>
|
|
</div>
|
|
<!-- Top Bar End -->
|
|
|
|
<div class="page-content-wrapper ">
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="page-title-box">
|
|
<div class="btn-group float-right">
|
|
<ol class="breadcrumb hide-phone p-0 m-0">
|
|
<li class="breadcrumb-item"><a href="#">Zoogler</a></li>
|
|
<li class="breadcrumb-item"><a href="#">UI Kit</a></li>
|
|
<li class="breadcrumb-item active">Tabs</li>
|
|
</ol>
|
|
</div>
|
|
<h4 class="page-title">Tabs</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end page title end breadcrumb -->
|
|
<div class="row">
|
|
<div class="col-md-12 col-lg-12 col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
|
|
<h4 class="mt-0 header-title">Default Tabs</h4>
|
|
<p class="text-muted mb-4 font-13">Use the tab JavaScript plugin—include
|
|
it individually or through the compiled <code class="highlighter-rouge">bootstrap.js</code>
|
|
file—to extend our navigational tabs and pills to create tabbable panes
|
|
of local content, even via dropdown menus.</p>
|
|
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div class="tab-pane active p-3" id="home" role="tabpanel">
|
|
<p class="font-14 mb-0">
|
|
Raw denim you probably haven't heard of them jean shorts Austin.
|
|
Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache
|
|
cliche tempor, williamsburg carles vegan helvetica. Reprehenderit
|
|
butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi,
|
|
qui irure terry richardson ex squid. Aliquip placeat salvia cillum
|
|
iphone. Seitan aliquip quis cardigan american apparel, butcher
|
|
voluptate nisi qui.
|
|
</p>
|
|
</div>
|
|
<div class="tab-pane p-3" id="profile" role="tabpanel">
|
|
<p class="font-14 mb-0">
|
|
Food truck fixie locavore, accusamus mcsweeney's marfa nulla
|
|
single-origin coffee squid. Exercitation +1 labore velit, blog
|
|
sartorial PBR leggings next level wes anderson artisan four loko
|
|
farm-to-table craft beer twee. Qui photo booth letterpress,
|
|
commodo enim craft beer mlkshk aliquip jean shorts ullamco ad
|
|
vinyl cillum PBR. Homo nostrud organic, assumenda labore
|
|
aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr,
|
|
vero magna velit sapiente labore stumptown. Vegan fanny pack
|
|
odio cillum wes anderson 8-bit.
|
|
</p>
|
|
</div>
|
|
<div class="tab-pane p-3" id="settings" role="tabpanel">
|
|
<p class="font-14 mb-0">
|
|
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy
|
|
art party before they sold out master cleanse gluten-free squid
|
|
scenester freegan cosby sweater. Fanny pack portland seitan DIY,
|
|
art party locavore wolf cliche high life echo park Austin. Cred
|
|
vinyl keffiyeh DIY salvia PBR, banh mi before they sold out
|
|
farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral,
|
|
mustache readymade thundercats keffiyeh craft beer marfa
|
|
ethical. Wolf salvia freegan, sartorial keffiyeh echo park
|
|
vegan.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-12 col-lg-12 col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
|
|
<h4 class="mt-0 header-title">Justify Tabs</h4>
|
|
<p class="text-muted mb-4 font-13">Use the tab JavaScript plugin—include
|
|
it individually or through the compiled <code class="highlighter-rouge">bootstrap.js</code>
|
|
file—to extend our navigational tabs and pills to create tabbable panes
|
|
of local content, even via dropdown menus.</p>
|
|
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-pills nav-justified" role="tablist">
|
|
<li class="nav-item waves-effect waves-light">
|
|
<a class="nav-link active" data-toggle="tab" href="#home-1" role="tab">Home</a>
|
|
</li>
|
|
<li class="nav-item waves-effect waves-light">
|
|
<a class="nav-link" data-toggle="tab" href="#profile-1" role="tab">Profile</a>
|
|
</li>
|
|
<li class="nav-item waves-effect waves-light">
|
|
<a class="nav-link" data-toggle="tab" href="#settings-1" role="tab">Settings</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="tab-content">
|
|
<div class="tab-pane active p-3" id="home-1" role="tabpanel">
|
|
<p class="font-14 mb-0">
|
|
Raw denim you probably haven't heard of them jean shorts Austin.
|
|
Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache
|
|
cliche tempor, williamsburg carles vegan helvetica. Reprehenderit
|
|
butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi,
|
|
qui irure terry richardson ex squid. Aliquip placeat salvia cillum
|
|
iphone. Seitan aliquip quis cardigan american apparel, butcher
|
|
voluptate nisi qui.
|
|
</p>
|
|
</div>
|
|
<div class="tab-pane p-3" id="profile-1" role="tabpanel">
|
|
<p class="font-14 mb-0">
|
|
Food truck fixie locavore, accusamus mcsweeney's marfa nulla
|
|
single-origin coffee squid. Exercitation +1 labore velit, blog
|
|
sartorial PBR leggings next level wes anderson artisan four loko
|
|
farm-to-table craft beer twee. Qui photo booth letterpress,
|
|
commodo enim craft beer mlkshk aliquip jean shorts ullamco ad
|
|
vinyl cillum PBR. Homo nostrud organic, assumenda labore
|
|
aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr,
|
|
vero magna velit sapiente labore stumptown. Vegan fanny pack
|
|
odio cillum wes anderson 8-bit.
|
|
</p>
|
|
</div>
|
|
<div class="tab-pane p-3" id="settings-1" role="tabpanel">
|
|
<p class="font-14 mb-0">
|
|
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy
|
|
art party before they sold out master cleanse gluten-free squid
|
|
scenester freegan cosby sweater. Fanny pack portland seitan DIY,
|
|
art party locavore wolf cliche high life echo park Austin. Cred
|
|
vinyl keffiyeh DIY salvia PBR, banh mi before they sold out
|
|
farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral,
|
|
mustache readymade thundercats keffiyeh craft beer marfa
|
|
ethical. Wolf salvia freegan, sartorial keffiyeh echo park
|
|
vegan.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Collapse -->
|
|
<div class="row">
|
|
<div class="col-md-12 col-lg-12 col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="mt-0 header-title">Vertical Tabs</h4>
|
|
<p class="text-muted mb-4 font-13">The tabs plugin also works and with vertical pills.</p>
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
<div class="nav flex-column nav-pills text-center" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
|
<a class="nav-link waves-effect waves-light active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
|
|
<a class="nav-link waves-effect waves-light" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
|
|
<a class="nav-link waves-effect waves-light" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-9">
|
|
<div class="tab-content mo-mt-2" id="v-pills-tabContent">
|
|
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
|
|
<p class="font-14 mb-0">
|
|
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy
|
|
art party before they sold out master cleanse gluten-free squid
|
|
scenester freegan cosby sweater. Fanny pack portland seitan DIY,
|
|
art party locavore wolf cliche high life echo park Austin. Cred
|
|
vinyl keffiyeh DIY salvia PBR, banh mi before they sold out
|
|
farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral,
|
|
mustache readymade thundercats keffiyeh craft beer marfa
|
|
ethical. Wolf salvia freegan, sartorial keffiyeh echo park
|
|
vegan.
|
|
</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
|
|
<p class="font-14 mb-0">
|
|
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin
|
|
coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next
|
|
level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
|
|
booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco
|
|
ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magn
|
|
a delectus mollitbooth letterpress, commodo enim craft beer mlkshk aliquip jean
|
|
shorts ullamco.
|
|
</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
|
|
<p class="font-14 mb-0">
|
|
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin
|
|
coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next
|
|
level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
|
|
booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco
|
|
ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magn
|
|
a delectus mollitbooth letterpress, commodo enim craft beer mlkshk aliquip jean
|
|
shorts ullamco.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
|
|
<h4 class="mt-0 header-title">Default Collapse</h4>
|
|
<p class="text-muted mb-4 font-13">
|
|
You can use a link with the <code class="highlighter-rouge">href</code>
|
|
attribute, or a button with the <code class="highlighter-rouge">data-target</code>
|
|
attribute. In both cases, the <code class="highlighter-rouge">data-toggle="collapse"</code>
|
|
is required.
|
|
</p>
|
|
|
|
<p>
|
|
<a class="btn btn-primary mo-mb-2" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
|
Link with href
|
|
</a>
|
|
<button class="btn btn-primary mo-mb-2" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
|
Button with data-target
|
|
</button>
|
|
</p>
|
|
<div class="collapse show" id="collapseExample">
|
|
<div class="card card-body">
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-12 col-lg-12 col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
|
|
<h4 class="mt-0 header-title">Accordion example</h4>
|
|
<p class="text-muted mb-4 font-13">Extend the default collapse behavior to create an accordion.</p>
|
|
|
|
<div class="accordion" id="accordionExample">
|
|
<div class="card mb-0">
|
|
<div class="card-header" id="headingOne">
|
|
<h5 class="my-1">
|
|
<button class="btn btn-link text-dark" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
|
Collapsible Group Item #1
|
|
</button>
|
|
</h5>
|
|
</div>
|
|
|
|
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
|
|
<div class="card-body">
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-0">
|
|
<div class="card-header" id="headingTwo">
|
|
<h5 class="my-1">
|
|
<button class="btn btn-link collapsed text-dark" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
|
Collapsible Group Item #2
|
|
</button>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
|
<div class="card-body">
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-0">
|
|
<div class="card-header" id="headingThree">
|
|
<h5 class="my-1">
|
|
<button class="btn btn-link collapsed text-dark" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
|
Collapsible Group Item #3
|
|
</button>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
|
|
<div class="card-body">
|
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--end row-->
|
|
|
|
</div><!-- container -->
|
|
|
|
</div> <!-- Page content Wrapper -->
|
|
|
|
</div> <!-- content -->
|
|
|
|
<footer class="footer">
|
|
© 2022 Zoogler by Mannatthemes.
|
|
</footer>
|
|
|
|
</div>
|
|
<!-- End Right content here -->
|
|
|
|
</div>
|
|
<!-- END wrapper -->
|
|
|
|
|
|
<!-- jQuery -->
|
|
<script src="assets/js/jquery.min.js"></script>
|
|
<script src="assets/js/popper.min.js"></script>
|
|
<script src="assets/js/bootstrap.min.js"></script>
|
|
<script src="assets/js/modernizr.min.js"></script>
|
|
<script src="assets/js/detect.js"></script>
|
|
<script src="assets/js/fastclick.js"></script>
|
|
<script src="assets/js/jquery.slimscroll.js"></script>
|
|
<script src="assets/js/jquery.blockUI.js"></script>
|
|
<script src="assets/js/waves.js"></script>
|
|
<script src="assets/js/jquery.scrollTo.min.js"></script>
|
|
|
|
<!-- App js -->
|
|
<script src="assets/js/app.js"></script>
|
|
|
|
</body>
|
|
</html> |