600 lines
55 KiB
HTML
Executable File
600 lines
55 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
@@include("partials/title-meta.html", {"title": "Tabs & Accordions"})
|
|
|
|
@@include('./partials/head-css.html')
|
|
|
|
</head>
|
|
|
|
<body class="loading" data-layout-mode="detached" data-layout='{"mode": "light", "width": "fluid", "menuPosition": "fixed", "sidebar": { "color": "light", "size": "default", "showuser": true}, "topbar": {"color": "dark"}, "showRightSidebarOnPageLoad": true}'>
|
|
|
|
<!-- Begin page -->
|
|
<div id="wrapper">
|
|
|
|
@@include('./partials/topbar.html')
|
|
|
|
@@include('./partials/left-sidebar.html')
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start Page Content here -->
|
|
<!-- ============================================================== -->
|
|
|
|
<div class="content-page">
|
|
<div class="content">
|
|
|
|
<!-- Start Content-->
|
|
<div class="container-fluid">
|
|
|
|
<!-- start page title -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-title-box page-title-box-alt">
|
|
<h4 class="page-title">Tabs & Accordions</h4>
|
|
<div class="page-title-right">
|
|
<ol class="breadcrumb m-0">
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">Minton</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">UI</a></li>
|
|
<li class="breadcrumb-item active">Tabs & Accordions</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end page title -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-4">Default Tabs</h4>
|
|
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item">
|
|
<a href="#home" data-toggle="tab" aria-expanded="false" class="nav-link">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-home-variant"></i></span>
|
|
<span class="d-none d-sm-inline-block">Home</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#profile" data-toggle="tab" aria-expanded="true" class="nav-link active">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-account"></i></span>
|
|
<span class="d-none d-sm-inline-block">Profile</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#messages" data-toggle="tab" aria-expanded="false" class="nav-link">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-email-variant"></i></span>
|
|
<span class="d-none d-sm-inline-block">Messages</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#settings" data-toggle="tab" aria-expanded="false" class="nav-link">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-cog"></i></span>
|
|
<span class="d-none d-sm-inline-block">Settings</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane" id="home">
|
|
<p>Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
<p class="mb-0">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
</div>
|
|
<div class="tab-pane show active" id="profile">
|
|
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
<p class="mb-0">Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
</div>
|
|
<div class="tab-pane" id="messages">
|
|
<p>Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
<p class="mb-0">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="settings">
|
|
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col -->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-4">Tabs Justified</h4>
|
|
|
|
<ul class="nav nav-pills navtab-bg nav-justified">
|
|
<li class="nav-item">
|
|
<a href="#home1" data-toggle="tab" aria-expanded="false" class="nav-link">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-home-variant"></i></span>
|
|
<span class="d-none d-sm-inline-block">Home</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#profile1" data-toggle="tab" aria-expanded="true" class="nav-link active">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-account"></i></span>
|
|
<span class="d-none d-sm-inline-block">Profile</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#messages1" data-toggle="tab" aria-expanded="false" class="nav-link">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-email-variant"></i></span>
|
|
<span class="d-none d-sm-inline-block">Messages</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#settings1" data-toggle="tab" aria-expanded="false" class="nav-link">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-cog"></i></span>
|
|
<span class="d-none d-sm-inline-block">Settings</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane" id="home1">
|
|
<p>Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
<p class="mb-0">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
</div>
|
|
<div class="tab-pane show active" id="profile1">
|
|
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
<p class="mb-0">Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
</div>
|
|
<div class="tab-pane" id="messages1">
|
|
<p>Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
<p class="mb-0">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
</div>
|
|
<div class="tab-pane" id="settings1">
|
|
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col -->
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-4">Tabs Vertical Left</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
<div class="nav flex-column nav-pills nav-pills-tab" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
|
<a class="nav-link active show mb-1" 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 mb-1" 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 mb-1" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages"
|
|
aria-selected="false">
|
|
Messages</a>
|
|
<a class="nav-link mb-1" 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> <!-- end col-->
|
|
<div class="col-sm-9">
|
|
<div class="tab-content pt-0">
|
|
<div class="tab-pane fade active show" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
|
|
<p>Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt
|
|
do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit
|
|
excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit
|
|
mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
|
|
<p>Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna
|
|
pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit
|
|
id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem
|
|
enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur
|
|
qui.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
|
|
<p>Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris
|
|
ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et
|
|
proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea
|
|
veniam consectetur.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
|
|
<p>Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident
|
|
in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui
|
|
mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit
|
|
adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.</p>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end col-->
|
|
</div> <!-- end row-->
|
|
|
|
</div>
|
|
</div> <!-- end card-box-->
|
|
</div> <!-- end col -->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-4">Tabs Vertical Right</h4>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-9">
|
|
<div class="tab-content pt-0" id="v-pills-tabContent">
|
|
<div class="tab-pane fade active show" id="v-pills-home2" role="tabpanel" aria-labelledby="v-pills-home-tab2">
|
|
<p>Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt
|
|
do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit
|
|
excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit
|
|
mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="v-pills-profile2" role="tabpanel" aria-labelledby="v-pills-profile-tab2">
|
|
<p>Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna
|
|
pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit
|
|
id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem
|
|
enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur
|
|
qui.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="v-pills-messages2" role="tabpanel" aria-labelledby="v-pills-messages-tab2">
|
|
<p>Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris
|
|
ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et
|
|
proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea
|
|
veniam consectetur.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="v-pills-settings2" role="tabpanel" aria-labelledby="v-pills-settings-tab2">
|
|
<p>Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident
|
|
in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui
|
|
mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit
|
|
adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.</p>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end col -->
|
|
<div class="col-sm-3">
|
|
<div class="nav flex-column nav-pills nav-pills-tab" id="v-pills-tab2" role="tablist" aria-orientation="vertical">
|
|
<a class="nav-link active show mb-1" id="v-pills-home-tab2" data-toggle="pill" href="#v-pills-home2" role="tab" aria-controls="v-pills-home2"
|
|
aria-selected="true">
|
|
Home</a>
|
|
<a class="nav-link mb-1" id="v-pills-profile-tab2" data-toggle="pill" href="#v-pills-profile2" role="tab" aria-controls="v-pills-profile2"
|
|
aria-selected="false">
|
|
Profile</a>
|
|
<a class="nav-link mb-1" id="v-pills-messages-tab2" data-toggle="pill" href="#v-pills-messages2" role="tab" aria-controls="v-pills-messages2"
|
|
aria-selected="false">
|
|
Messages</a>
|
|
<a class="nav-link mb-1" id="v-pills-settings-tab2" data-toggle="pill" href="#v-pills-settings2" role="tab" aria-controls="v-pills-settings2"
|
|
aria-selected="false">
|
|
Settings</a>
|
|
</div>
|
|
</div> <!-- end col -->
|
|
</div> <!-- end row-->
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col -->
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-4">Tabs Bordered</h4>
|
|
|
|
<ul class="nav nav-tabs nav-bordered">
|
|
<li class="nav-item">
|
|
<a href="#home-b1" data-toggle="tab" aria-expanded="false" class="nav-link">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-home-variant"></i></span>
|
|
<span class="d-none d-sm-inline-block">Home</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#profile-b1" data-toggle="tab" aria-expanded="true" class="nav-link active">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-account"></i></span>
|
|
<span class="d-none d-sm-inline-block">Profile</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#messages-b1" data-toggle="tab" aria-expanded="false" class="nav-link">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-email-variant"></i></span>
|
|
<span class="d-none d-sm-inline-block">Messages</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#settings-b1" data-toggle="tab" aria-expanded="false" class="nav-link">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-cog"></i></span>
|
|
<span class="d-none d-sm-inline-block">Settings</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane" id="home-b1">
|
|
<p>Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
<p class="mb-0">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
</div>
|
|
<div class="tab-pane show active" id="profile-b1">
|
|
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
<p class="mb-0">Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
</div>
|
|
<div class="tab-pane" id="messages-b1">
|
|
<p>Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
<p class="mb-0">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
</div>
|
|
<div class="tab-pane" id="settings-b1">
|
|
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col -->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-4">Tabs Bordered Justified</h4>
|
|
|
|
<ul class="nav nav-tabs nav-bordered nav-justified">
|
|
<li class="nav-item">
|
|
<a href="#home-b2" data-toggle="tab" aria-expanded="false" class="nav-link">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-home-variant"></i></span>
|
|
<span class="d-none d-sm-inline-block">Home</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#profile-b2" data-toggle="tab" aria-expanded="true" class="nav-link active">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-account"></i></span>
|
|
<span class="d-none d-sm-inline-block">Profile</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#messages-b2" data-toggle="tab" aria-expanded="false" class="nav-link">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-email-variant"></i></span>
|
|
<span class="d-none d-sm-inline-block">Messages</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#settings-b2" data-toggle="tab" aria-expanded="false" class="nav-link">
|
|
<span class="d-inline-block d-sm-none"><i class="mdi mdi-cog"></i></span>
|
|
<span class="d-none d-sm-inline-block">Settings</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane" id="home-b2">
|
|
<p>Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
<p class="mb-0">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
</div>
|
|
<div class="tab-pane active" id="profile-b2">
|
|
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
<p class="mb-0">Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
</div>
|
|
<div class="tab-pane" id="messages-b2">
|
|
<p>Vakal text here dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
<p class="mb-0">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
</div>
|
|
<div class="tab-pane" id="settings-b2">
|
|
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
|
|
<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col -->
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div id="accordion" class="mb-3">
|
|
<div class="card mb-1">
|
|
<div class="card-header" id="headingOne">
|
|
<h5 class="m-0">
|
|
<a class="text-dark" data-toggle="collapse" href="#collapseOne" aria-expanded="true">
|
|
<i class="mdi mdi-help-circle mr-1 text-primary"></i>
|
|
What is Vakal text here?
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
|
|
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
|
|
<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-1">
|
|
<div class="card-header" id="headingTwo">
|
|
<h5 class="m-0">
|
|
<a class="text-dark" data-toggle="collapse" href="#collapseTwo" aria-expanded="false">
|
|
<i class="mdi mdi-help-circle mr-1 text-primary"></i>
|
|
Why use Vakal text here?
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
|
|
<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-1">
|
|
<div class="card-header" id="headingThree">
|
|
<h5 class="m-0">
|
|
<a class="text-dark" data-toggle="collapse" href="#collapseThree" aria-expanded="false">
|
|
<i class="mdi mdi-help-circle mr-1 text-primary"></i>
|
|
How many variations exist?
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
|
|
<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-1">
|
|
<div class="card-header" id="headingFour">
|
|
<h5 class="m-0">
|
|
<a class="text-dark" data-toggle="collapse" href="#collapseFour" aria-expanded="false">
|
|
<i class="mdi mdi-help-circle mr-1 text-primary"></i>
|
|
What is Vakal text here?
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseFour" class="collapse" aria-labelledby="collapseFour" data-parent="#accordion">
|
|
<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> <!-- end #accordions-->
|
|
</div> <!-- end col -->
|
|
|
|
<div class="col-xl-6">
|
|
<div class="accordion custom-accordion" id="custom-accordion-one">
|
|
<div class="card mb-0">
|
|
<div class="card-header" id="headingNine">
|
|
<h5 class="m-0 position-relative">
|
|
<a class="custom-accordion-title text-reset d-block"
|
|
data-toggle="collapse" href="#collapseNine"
|
|
aria-expanded="true" aria-controls="collapseNine">
|
|
Q. Can I use this template for my client? <i
|
|
class="mdi mdi-chevron-down accordion-arrow"></i>
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
|
|
<div id="collapseNine" class="collapse show"
|
|
aria-labelledby="headingFour"
|
|
data-parent="#custom-accordion-one">
|
|
<div class="card-body">
|
|
Yup, the marketplace license allows you to use this theme
|
|
in any end products.
|
|
For more information on licenses, please refere <a
|
|
href="#" target="_blank">here</a>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-0">
|
|
<div class="card-header" id="headingFive">
|
|
<h5 class="m-0 position-relative">
|
|
<a class="custom-accordion-title text-reset collapsed d-block"
|
|
data-toggle="collapse" href="#collapseFive"
|
|
aria-expanded="false" aria-controls="collapseFive">
|
|
Q. Can this theme work with WordPress? <i
|
|
class="mdi mdi-chevron-down accordion-arrow"></i>
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseFive" class="collapse"
|
|
aria-labelledby="headingFive"
|
|
data-parent="#custom-accordion-one">
|
|
<div class="card-body">
|
|
No. This is a HTML template. It won't directly with
|
|
WordPress, though you can convert this into WordPress
|
|
compatible theme
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-0">
|
|
<div class="card-header" id="headingSix">
|
|
<h5 class="m-0 position-relative">
|
|
<a class="custom-accordion-title text-reset collapsed d-block"
|
|
data-toggle="collapse" href="#collapseSix"
|
|
aria-expanded="false" aria-controls="collapseSix">
|
|
Q. How do I get help with the theme? <i
|
|
class="mdi mdi-chevron-down accordion-arrow"></i>
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseSix" class="collapse" aria-labelledby="headingSix"
|
|
data-parent="#custom-accordion-one">
|
|
<div class="card-body">
|
|
Use our dedicated support email (support@coderthemes.com) to
|
|
send your issues or feedback. We are here to help anytime
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-0">
|
|
<div class="card-header" id="headingSeven">
|
|
<h5 class="m-0 position-relative">
|
|
<a class="custom-accordion-title text-reset collapsed d-block"
|
|
data-toggle="collapse" href="#collapseSeven"
|
|
aria-expanded="false" aria-controls="collapseSeven">
|
|
Q. Will you regularly give updates of Minton ? <i
|
|
class="mdi mdi-chevron-down accordion-arrow"></i>
|
|
</a>
|
|
</h5>
|
|
</div>
|
|
<div id="collapseSeven" class="collapse"
|
|
aria-labelledby="headingSeven"
|
|
data-parent="#custom-accordion-one">
|
|
<div class="card-body">
|
|
Yes, We will update the Minton regularly. All the
|
|
future updates would be available without any cost
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-6">
|
|
<p>
|
|
<a class="btn btn-primary waves-effect waves-light" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
|
Link with href
|
|
</a>
|
|
<button class="btn btn-primary waves-effect waves-light" 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">
|
|
<div class="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> <!-- end col-->
|
|
</div> <!-- end row -->
|
|
|
|
</div> <!-- container -->
|
|
|
|
</div> <!-- content -->
|
|
|
|
@@include('./partials/footer.html')
|
|
|
|
</div>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- End Page content -->
|
|
<!-- ============================================================== -->
|
|
|
|
|
|
</div>
|
|
<!-- END wrapper -->
|
|
|
|
@@include('./partials/right-sidebar.html')
|
|
|
|
<!-- Vendor js -->
|
|
<script src="../assets/js/vendor.min.js"></script>
|
|
|
|
<!-- App js -->
|
|
<script src="../assets/js/app.min.js"></script>
|
|
|
|
</body>
|
|
</html> |