[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
Backup
/
14082024
/
Data
/
htdocs
/
htdocs
/
siakad
/
mahasiswa
/
[
Home
]
File: ui-tabs-accordions.html
<!DOCTYPE html> <html lang="en"> <!-- Mirrored from coderthemes.com/minton_html/layouts/default/ui-tabs-accordions.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 11 Jul 2022 06:08:10 GMT --> <head> <meta charset="utf-8" /> <title>Tabs & Accordions | Minton - Admin & Dashboard Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" /> <meta content="Coderthemes" name="author" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- App favicon --> <link rel="shortcut icon" href="assets/images/favicon.ico"> <!-- App css --> <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bs-stylesheet" /> <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="app-stylesheet" /> <!-- icons --> <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" /> </head> <body class="loading" data-layout='{"mode": "light", "width": "fluid", "menuPosition": "fixed", "sidebar": { "color": "light", "size": "default", "showuser": false}, "topbar": {"color": "dark"}, "showRightSidebarOnPageLoad": true}'> <!-- Begin page --> <div id="wrapper"> <!-- Topbar Start --> <div class="navbar-custom"> <div class="container-fluid"> <ul class="list-unstyled topnav-menu float-end mb-0"> <li class="d-none d-lg-block"> <form class="app-search"> <div class="app-search-box dropdown"> <div class="input-group"> <input type="search" class="form-control" placeholder="Search..." id="top-search"> <button class="btn" type="submit"> <i class="fe-search"></i> </button> </div> <div class="dropdown-menu dropdown-lg" id="search-dropdown"> <!-- item--> <div class="dropdown-header noti-title"> <h5 class="text-overflow mb-2">Found <span class="text-danger">09</span> results</h5> </div> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-home me-1"></i> <span>Analytics Report</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-aperture me-1"></i> <span>How can I help you?</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-settings me-1"></i> <span>User profile settings</span> </a> <!-- item--> <div class="dropdown-header noti-title"> <h6 class="text-overflow mb-2 text-uppercase">Users</h6> </div> <div class="notification-list"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="d-flex"> <img class="d-flex me-2 rounded-circle" src="assets/images/users/avatar-2.jpg" alt="Generic placeholder image" height="32"> <div> <h5 class="m-0 font-14">Erwin E. Brown</h5> <span class="font-12 mb-0">UI Designer</span> </div> </div> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="d-flex"> <img class="d-flex me-2 rounded-circle" src="assets/images/users/avatar-5.jpg" alt="Generic placeholder image" height="32"> <div> <h5 class="m-0 font-14">Jacob Deo</h5> <span class="font-12 mb-0">Developer</span> </div> </div> </a> </div> </div> </div> </form> </li> <li class="dropdown d-inline-block d-lg-none"> <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <i class="fe-search noti-icon"></i> </a> <div class="dropdown-menu dropdown-lg dropdown-menu-end p-0"> <form class="p-3"> <input type="text" class="form-control" placeholder="Search ..." aria-label="Search"> </form> </div> </li> <li class="dropdown d-none d-lg-inline-block"> <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-toggle="fullscreen" href="#"> <i class="fe-maximize noti-icon"></i> </a> </li> <li class="dropdown d-none d-lg-inline-block topbar-dropdown"> <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <i class="fe-grid noti-icon"></i> </a> <div class="dropdown-menu dropdown-lg dropdown-menu-end p-0"> <div class="p-2"> <div class="row g-0"> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/github.png" alt="Github"> <span>GitHub</span> </a> </div> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/dribbble.png" alt="dribbble"> <span>Dribbble</span> </a> </div> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/slack.png" alt="slack"> <span>Slack</span> </a> </div> </div> <div class="row g-0"> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/g-suite.png" alt="G Suite"> <span>G Suite</span> </a> </div> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/bitbucket.png" alt="bitbucket"> <span>Bitbucket</span> </a> </div> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/dropbox.png" alt="dropbox"> <span>Dropbox</span> </a> </div> </div> </div> </div> </li> <li class="dropdown d-none d-lg-inline-block topbar-dropdown"> <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <img src="assets/images/flags/us.jpg" alt="user-image" height="14"> </a> <div class="dropdown-menu dropdown-menu-end"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <img src="assets/images/flags/germany.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">German</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <img src="assets/images/flags/italy.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Italian</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <img src="assets/images/flags/spain.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Spanish</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <img src="assets/images/flags/russia.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Russian</span> </a> </div> </li> <li class="dropdown notification-list topbar-dropdown"> <a class="nav-link dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <i class="fe-bell noti-icon"></i> <span class="badge bg-danger rounded-circle noti-icon-badge">5</span> </a> <div class="dropdown-menu dropdown-menu-end dropdown-lg"> <!-- item--> <div class="dropdown-item noti-title"> <h5 class="m-0"> <span class="float-end"> <a href="#" class="text-dark"> <small>Clear All</small> </a> </span>Notification </h5> </div> <div class="noti-scroll" data-simplebar> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item active"> <div class="notify-icon bg-soft-primary text-primary"> <i class="mdi mdi-comment-account-outline"></i> </div> <p class="notify-details">Doug Dukes commented on Admin Dashboard <small class="text-muted">1 min ago</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon"> <img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div> <p class="notify-details">Mario Drummond</p> <p class="text-muted mb-0 user-msg"> <small>Hi, How are you? What about our next meeting</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" class="img-fluid rounded-circle" alt="" /> </div> <p class="notify-details">Karen Robinson</p> <p class="text-muted mb-0 user-msg"> <small>Wow ! this admin looks good and awesome design</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon bg-soft-warning text-warning"> <i class="mdi mdi-account-plus"></i> </div> <p class="notify-details">New user registered. <small class="text-muted">5 hours ago</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon bg-info"> <i class="mdi mdi-comment-account-outline"></i> </div> <p class="notify-details">Caleb Flakelar commented on Admin <small class="text-muted">4 days ago</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon bg-secondary"> <i class="mdi mdi-heart"></i> </div> <p class="notify-details">Carlos Crouch liked <b>Admin</b> <small class="text-muted">13 days ago</small> </p> </a> </div> <!-- All--> <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all"> View all <i class="fe-arrow-right"></i> </a> </div> </li> <li class="dropdown notification-list topbar-dropdown"> <a class="nav-link dropdown-toggle nav-user me-0 waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle"> <span class="pro-user-name ms-1"> Nik Patel <i class="mdi mdi-chevron-down"></i> </span> </a> <div class="dropdown-menu dropdown-menu-end profile-dropdown "> <!-- item--> <div class="dropdown-header noti-title"> <h6 class="text-overflow m-0">Welcome !</h6> </div> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-account-circle-line"></i> <span>My Account</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-settings-3-line"></i> <span>Settings</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-wallet-line"></i> <span>My Wallet <span class="badge bg-success float-end">3</span> </span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-lock-line"></i> <span>Lock Screen</span> </a> <div class="dropdown-divider"></div> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-logout-box-line"></i> <span>Logout</span> </a> </div> </li> <li class="dropdown notification-list"> <a href="javascript:void(0);" class="nav-link right-bar-toggle waves-effect waves-light"> <i class="fe-settings noti-icon"></i> </a> </li> </ul> <!-- LOGO --> <div class="logo-box"> <a href="index.html" class="logo logo-dark text-center"> <span class="logo-sm"> <img src="assets/images/logo-sm-dark.png" alt="" height="24"> <!-- <span class="logo-lg-text-light">Minton</span> --> </span> <span class="logo-lg"> <img src="assets/images/logo-dark.png" alt="" height="20"> <!-- <span class="logo-lg-text-light">M</span> --> </span> </a> <a href="index.html" class="logo logo-light text-center"> <span class="logo-sm"> <img src="assets/images/logo-sm.png" alt="" height="24"> </span> <span class="logo-lg"> <img src="assets/images/logo-light.png" alt="" height="20"> </span> </a> </div> <ul class="list-unstyled topnav-menu topnav-menu-left m-0"> <li> <button class="button-menu-mobile waves-effect waves-light"> <i class="fe-menu"></i> </button> </li> <li> <!-- Mobile menu toggle (Horizontal Layout)--> <a class="navbar-toggle nav-link" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content"> <div class="lines"> <span></span> <span></span> <span></span> </div> </a> <!-- End mobile menu toggle--> </li> <li class="dropdown d-none d-xl-block"> <a class="nav-link dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> Create New <i class="mdi mdi-chevron-down"></i> </a> <div class="dropdown-menu"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-briefcase me-1"></i> <span>New Projects</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-user me-1"></i> <span>Create Users</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-bar-chart-line- me-1"></i> <span>Revenue Report</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-settings me-1"></i> <span>Settings</span> </a> <div class="dropdown-divider"></div> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-headphones me-1"></i> <span>Help & Support</span> </a> </div> </li> <li class="dropdown dropdown-mega d-none d-xl-block"> <a class="nav-link dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> Mega Menu <i class="mdi mdi-chevron-down"></i> </a> <div class="dropdown-menu dropdown-megamenu"> <div class="row"> <div class="col-sm-8"> <div class="row"> <div class="col-md-4"> <h5 class="text-dark mt-0">UI Components</h5> <ul class="list-unstyled megamenu-list"> <li> <a href="javascript:void(0);">Widgets</a> </li> <li> <a href="javascript:void(0);">Nestable List</a> </li> <li> <a href="javascript:void(0);">Range Sliders</a> </li> <li> <a href="javascript:void(0);">Masonry Items</a> </li> <li> <a href="javascript:void(0);">Sweet Alerts</a> </li> <li> <a href="javascript:void(0);">Treeview Page</a> </li> <li> <a href="javascript:void(0);">Tour Page</a> </li> </ul> </div> <div class="col-md-4"> <h5 class="text-dark mt-0">Applications</h5> <ul class="list-unstyled megamenu-list"> <li> <a href="javascript:void(0);">eCommerce Pages</a> </li> <li> <a href="javascript:void(0);">CRM Pages</a> </li> <li> <a href="javascript:void(0);">Email</a> </li> <li> <a href="javascript:void(0);">Calendar</a> </li> <li> <a href="javascript:void(0);">Team Contacts</a> </li> <li> <a href="javascript:void(0);">Task Board</a> </li> <li> <a href="javascript:void(0);">Email Templates</a> </li> </ul> </div> <div class="col-md-4"> <h5 class="text-dark mt-0">Extra Pages</h5> <ul class="list-unstyled megamenu-list"> <li> <a href="javascript:void(0);">Left Sidebar with User</a> </li> <li> <a href="javascript:void(0);">Menu Collapsed</a> </li> <li> <a href="javascript:void(0);">Small Left Sidebar</a> </li> <li> <a href="javascript:void(0);">New Header Style</a> </li> <li> <a href="javascript:void(0);">Search Result</a> </li> <li> <a href="javascript:void(0);">Gallery Pages</a> </li> <li> <a href="javascript:void(0);">Maintenance & Coming Soon</a> </li> </ul> </div> </div> </div> <div class="col-sm-4"> <div class="text-center mt-3"> <h3 class="text-dark">Special Discount Sale!</h3> <h4>Save up to 70% off.</h4> <button class="btn btn-primary rounded-pill mt-3">Download Now</button> </div> </div> </div> </div> </li> </ul> <div class="clearfix"></div> </div> </div> <!-- end Topbar --> <!-- ========== Left Sidebar Start ========== --> <div class="left-side-menu"> <!-- LOGO --> <div class="logo-box"> <a href="index.html" class="logo logo-dark text-center"> <span class="logo-sm"> <img src="assets/images/logo-sm-dark.png" alt="" height="24"> <!-- <span class="logo-lg-text-light">Minton</span> --> </span> <span class="logo-lg"> <img src="assets/images/logo-dark.png" alt="" height="20"> <!-- <span class="logo-lg-text-light">M</span> --> </span> </a> <a href="index.html" class="logo logo-light text-center"> <span class="logo-sm"> <img src="assets/images/logo-sm.png" alt="" height="24"> </span> <span class="logo-lg"> <img src="assets/images/logo-light.png" alt="" height="20"> </span> </a> </div> <div class="h-100" data-simplebar> <!-- User box --> <div class="user-box text-center"> <img src="assets/images/users/avatar-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle avatar-md"> <div class="dropdown"> <a href="#" class="text-reset dropdown-toggle h5 mt-2 mb-1 d-block" data-bs-toggle="dropdown">Nik Patel</a> <div class="dropdown-menu user-pro-dropdown"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-user me-1"></i> <span>My Account</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-settings me-1"></i> <span>Settings</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-lock me-1"></i> <span>Lock Screen</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-log-out me-1"></i> <span>Logout</span> </a> </div> </div> <p class="text-reset">Admin Head</p> </div> <!--- Sidemenu --> <div id="sidebar-menu"> <ul id="side-menu"> <li class="menu-title">Navigation</li> <li> <a href="#sidebarDashboards" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarDashboards" class="waves-effect"> <i class="ri-dashboard-line"></i> <span class="badge bg-success rounded-pill float-end">3</span> <span> Dashboards </span> </a> <div class="collapse" id="sidebarDashboards"> <ul class="nav-second-level"> <li> <a href="index.html">Sales</a> </li> <li> <a href="dashboard-crm.html">CRM</a> </li> <li> <a href="dashboard-analytics.html">Analytics</a> </li> </ul> </div> </li> <li> <a href="#sidebarLayouts" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarLayouts"> <i class="ri-layout-line"></i> <span> Layouts </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarLayouts"> <ul class="nav-second-level"> <li> <a href="layouts-horizontal.html">Horizontal</a> </li> <li> <a href="layouts-detached.html">Detached</a> </li> <li> <a href="layouts-two-column.html">Two Column Menu</a> </li> <li> <a href="layouts-preloader.html">Preloader</a> </li> </ul> </div> </li> <li class="menu-title mt-2">Apps</li> <li> <a href="apps-chat.html"> <i class="ri-message-2-line"></i> <span> Chat </span> </a> </li> <li> <a href="#sidebarEcommerce" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarEcommerce"> <i class="ri-shopping-cart-2-line"></i> <span class="badge bg-danger float-end">New</span> <span> Ecommerce </span> </a> <div class="collapse" id="sidebarEcommerce"> <ul class="nav-second-level"> <li> <a href="ecommerce-products.html">Products List</a> </li> <li> <a href="ecommerce-products-grid.html">Products Grid</a> </li> <li> <a href="ecommerce-product-detail.html">Product Detail</a> </li> <li> <a href="ecommerce-product-create.html">Create Product</a> </li> <li> <a href="ecommerce-customers.html">Customers</a> </li> <li> <a href="ecommerce-orders.html">Orders</a> </li> <li> <a href="ecommerce-orders-detail.html">Order Detail</a> </li> <li> <a href="ecommerce-sellers.html">Sellers</a> </li> <li> <a href="ecommerce-cart.html">Shopping Cart</a> </li> <li> <a href="ecommerce-checkout.html">Checkout</a> </li> </ul> </div> </li> <li> <a href="apps-calendar.html"> <i class="ri-calendar-2-line"></i> <span> Calendar </span> </a> </li> <li> <a href="#sidebarEmail" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarEmail"> <i class="ri-mail-line"></i> <span> Email </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarEmail"> <ul class="nav-second-level"> <li> <a href="email-inbox.html">Inbox</a> </li> <li> <a href="email-read.html">Read Email</a> </li> <li> <a href="email-templates.html">Email Templates</a> </li> </ul> </div> </li> <li> <a href="apps-companies.html"> <i class="ri-building-4-line"></i> <span> Companies </span> </a> </li> <li> <a href="#sidebarTasks" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarTasks"> <i class="ri-task-line"></i> <span> Tasks </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarTasks"> <ul class="nav-second-level"> <li> <a href="task-list.html">List</a> </li> <li> <a href="task-details.html">Details</a> </li> <li> <a href="task-kanban-board.html">Kanban Board</a> </li> </ul> </div> </li> <li> <a href="apps-tickets.html"> <i class="ri-customer-service-2-line"></i> <span> Tickets </span> </a> </li> <li> <a href="#sidebarContacts" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarContacts"> <i class="ri-profile-line"></i> <span> Contacts </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarContacts"> <ul class="nav-second-level"> <li> <a href="contacts-list.html">Members List</a> </li> <li> <a href="contacts-profile.html">Profile</a> </li> </ul> </div> </li> <li> <a href="apps-file-manager.html"> <i class="ri-folders-line"></i> <span> File Manager </span> </a> </li> <li class="menu-title mt-2">Custom</li> <li> <a href="#sidebarAuth" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarAuth"> <i class="ri-shield-user-line"></i> <span> Auth Pages </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarAuth"> <ul class="nav-second-level"> <li> <a href="auth-login.html">Log In</a> </li> <li> <a href="auth-login-2.html">Log In 2</a> </li> <li> <a href="auth-register.html">Register</a> </li> <li> <a href="auth-register-2.html">Register 2</a> </li> <li> <a href="auth-signin-signup.html">Signin - Signup</a> </li> <li> <a href="auth-signin-signup-2.html">Signin - Signup 2</a> </li> <li> <a href="auth-recoverpw.html">Recover Password</a> </li> <li> <a href="auth-recoverpw-2.html">Recover Password 2</a> </li> <li> <a href="auth-lock-screen.html">Lock Screen</a> </li> <li> <a href="auth-lock-screen-2.html">Lock Screen 2</a> </li> <li> <a href="auth-logout.html">Logout</a> </li> <li> <a href="auth-logout-2.html">Logout 2</a> </li> <li> <a href="auth-confirm-mail.html">Confirm Mail</a> </li> <li> <a href="auth-confirm-mail-2.html">Confirm Mail 2</a> </li> </ul> </div> </li> <li> <a href="#sidebarExpages" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarExpages"> <i class="ri-pages-line"></i> <span> Extra Pages </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarExpages"> <ul class="nav-second-level"> <li> <a href="pages-starter.html">Starter</a> </li> <li> <a href="pages-timeline.html">Timeline</a> </li> <li> <a href="pages-sitemap.html">Sitemap</a> </li> <li> <a href="pages-invoice.html">Invoice</a> </li> <li> <a href="pages-faqs.html">FAQs</a> </li> <li> <a href="pages-search-results.html">Search Results</a> </li> <li> <a href="pages-pricing.html">Pricing</a> </li> <li> <a href="pages-maintenance.html">Maintenance</a> </li> <li> <a href="pages-coming-soon.html">Coming Soon</a> </li> <li> <a href="pages-gallery.html">Gallery</a> </li> <li> <a href="pages-404.html">Error 404</a> </li> <li> <a href="pages-404-alt.html">Error 404-alt</a> </li> <li> <a href="pages-500.html">Error 500</a> </li> </ul> </div> </li> <li class="menu-title mt-2">Components</li> <li> <a href="#sidebarBaseui" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarBaseui"> <i class="ri-pencil-ruler-2-line"></i> <span> Base UI </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarBaseui"> <ul class="nav-second-level"> <li> <a href="ui-avatars.html">Avatars</a> </li> <li> <a href="ui-buttons.html">Buttons</a> </li> <li> <a href="ui-cards.html">Cards</a> </li> <li> <a href="ui-carousel.html">Carousel</a> </li> <li> <a href="ui-dropdowns.html">Dropdowns</a> </li> <li> <a href="ui-video.html">Embed Video</a> </li> <li> <a href="ui-general.html">General UI</a> </li> <li> <a href="ui-grid.html">Grid</a> </li> <li> <a href="ui-images.html">Images</a> </li> <li> <a href="ui-list-group.html">List Group</a> </li> <li> <a href="ui-modals.html">Modals</a> </li> <li> <a href="ui-notifications.html">Notifications</a> </li> <li> <a href="ui-offcanvas.html">Offcanvas</a> </li> <li> <a href="ui-placeholders.html">Placeholders</a> </li> <li> <a href="ui-portlets.html">Portlets</a> </li> <li> <a href="ui-progress.html">Progress</a> </li> <li> <a href="ui-ribbons.html">Ribbons</a> </li> <li> <a href="ui-spinners.html">Spinners</a> </li> <li> <a href="ui-tabs-accordions.html">Tabs & Accordions</a> </li> <li> <a href="ui-tooltips-popovers.html">Tooltips & Popovers</a> </li> <li> <a href="ui-typography.html">Typography</a> </li> </ul> </div> </li> <li> <a href="#sidebarExtendedui" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarExtendedui"> <i class="ri-stack-line"></i> <span class="badge bg-info float-end">Hot</span> <span> Extended UI </span> </a> <div class="collapse" id="sidebarExtendedui"> <ul class="nav-second-level"> <li> <a href="extended-nestable.html">Nestable List</a> </li> <li> <a href="extended-range-slider.html">Range Slider</a> </li> <li> <a href="extended-sweet-alert.html">Sweet Alert</a> </li> <li> <a href="extended-tour.html">Tour Page</a> </li> <li> <a href="extended-treeview.html">Treeview</a> </li> <li> <a href="extended-scrollspy.html">Scrollspy</a> </li> </ul> </div> </li> <li> <a href="widgets.html"> <i class="ri-honour-line"></i> <span> Widgets </span> </a> </li> <li> <a href="#sidebarIcons" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarIcons"> <i class="ri-markup-line"></i> <span> Icons </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarIcons"> <ul class="nav-second-level"> <li> <a href="icons-feather.html">Feather</a> </li> <li> <a href="icons-remix.html">Remix</a> </li> <li> <a href="icons-boxicons.html">Boxicons</a> </li> <li> <a href="icons-mdi.html">Material Design</a> </li> <li> <a href="icons-font-awesome.html">Font Awesome 5</a> </li> <li> <a href="icons-weather.html">Weather</a> </li> </ul> </div> </li> <li> <a href="#sidebarForms" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarForms"> <i class="ri-eraser-line"></i> <span> Forms </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarForms"> <ul class="nav-second-level"> <li> <a href="forms-elements.html">General Elements</a> </li> <li> <a href="forms-advanced.html">Advanced</a> </li> <li> <a href="forms-validation.html">Validation</a> </li> <li> <a href="forms-pickers.html">Pickers</a> </li> <li> <a href="forms-wizard.html">Wizard</a> </li> <li> <a href="forms-masks.html">Masks</a> </li> <li> <a href="forms-quilljs.html">Quilljs Editor</a> </li> <li> <a href="forms-file-uploads.html">File Uploads</a> </li> <li> <a href="forms-x-editable.html">X Editable</a> </li> </ul> </div> </li> <li> <a href="#sidebarTables" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarTables"> <i class="ri-table-line"></i> <span> Tables </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarTables"> <ul class="nav-second-level"> <li> <a href="tables-basic.html">Basic Tables</a> </li> <li> <a href="tables-datatables.html">Data Tables</a> </li> <li> <a href="tables-editable.html">Editable Tables</a> </li> <li> <a href="tables-responsive.html">Responsive Tables</a> </li> <li> <a href="tables-footables.html">FooTable</a> </li> <li> <a href="tables-tablesaw.html">Tablesaw Tables</a> </li> </ul> </div> </li> <li> <a href="#sidebarCharts" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarCharts"> <i class="ri-bar-chart-line"></i> <span> Charts </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarCharts"> <ul class="nav-second-level"> <li> <a href="charts-flot.html">Flot</a> </li> <li> <a href="charts-apex.html">Apex</a> </li> <li> <a href="charts-morris.html">Morris</a> </li> <li> <a href="charts-chartjs.html">Chartjs</a> </li> <li> <a href="charts-c3.html">C3</a> </li> <li> <a href="charts-peity.html">Peity</a> </li> <li> <a href="charts-chartist.html">Chartist</a> </li> <li> <a href="charts-sparklines.html">Sparklines</a> </li> <li> <a href="charts-knob.html">Jquery Knob</a> </li> </ul> </div> </li> <li> <a href="#sidebarMaps" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMaps"> <i class="ri-map-pin-line"></i> <span> Maps </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMaps"> <ul class="nav-second-level"> <li> <a href="maps-google.html">Google</a> </li> <li> <a href="maps-vector.html">Vector</a> </li> <li> <a href="maps-mapael.html">Mapael</a> </li> </ul> </div> </li> <li> <a href="#sidebarMultilevel" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMultilevel"> <i class="ri-share-line"></i> <span> Multi Level </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMultilevel"> <ul class="nav-second-level"> <li> <a href="#sidebarMultilevel2" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMultilevel2"> Second Level <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMultilevel2"> <ul class="nav-second-level"> <li> <a href="javascript: void(0);">Item 1</a> </li> <li> <a href="javascript: void(0);">Item 2</a> </li> </ul> </div> </li> <li> <a href="#sidebarMultilevel3" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMultilevel3"> Third Level <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMultilevel3"> <ul class="nav-second-level"> <li> <a href="javascript: void(0);">Item 1</a> </li> <li> <a href="#sidebarMultilevel4" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMultilevel4"> Item 2 <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMultilevel4"> <ul class="nav-second-level"> <li> <a href="javascript: void(0);">Item 1</a> </li> <li> <a href="javascript: void(0);">Item 2</a> </li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </li> </ul> </div> <!-- End Sidebar --> <div class="clearfix"></div> </div> <!-- Sidebar -left --> </div> <!-- Left Sidebar End --> <!-- ============================================================== --> <!-- 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"> <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);">Base 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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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-bs-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 class="card"> <div class="card-body"> <h4 class="header-title mb-3">Accordion Example</h4> <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="mdi mdi-help-circle me-1 text-primary"></i> Can I use this template for my client? </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <i class="mdi mdi-help-circle me-1 text-primary"></i> Why use Vakal text here? </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <i class="mdi mdi-help-circle me-1 text-primary"></i> How many variations exist? </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> </div> <!-- end accordion --> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> <div class="col-xl-6"> <div class="card"> <div class="card-body"> <h4 class="header-title mb-3">Accordion Flush Example</h4> <div class="accordion accordion-flush" id="accordionFlushExample"> <div class="accordion-item"> <h2 class="accordion-header" id="flush-headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> Q. Can I use this template for my client? </button> </h2> <div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample"> <div class="accordion-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="accordion-item"> <h2 class="accordion-header" id="flush-headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"> Q. Can this theme work with WordPress? </button> </h2> <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample"> <div class="accordion-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="accordion-item"> <h2 class="accordion-header" id="flush-headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree"> Q. How do I get help with the theme? </button> </h2> <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample"> <div class="accordion-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="accordion-item"> <h2 class="accordion-header" id="flush-headingFour"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour"> Q. Will you regularly give updates of Minton ? </button> </h2> <div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Yes, We will update the Minton regularly. All the future updates would be available without any cost</div> </div> </div> </div> <!-- end accordion --> </div> <!-- end card body --> </div> <!-- end card --> </div> <!-- end col --> <div class="col-lg-6"> <div class="d-flex gap-2 mb-2"> <a class="btn btn-primary waves-effect waves-light" data-bs-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-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target </button> </div> <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 class="col-lg-6"> <p class="mb-2"> <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample"> Toggle width collapse </button> </p> <div style="min-height: 120px;"> <div class="collapse collapse-horizontal" id="collapseWidthExample"> <div class="card card-body mb-0" style="width: 450px;"> This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. </div> </div> </div> </div> <!-- end col--> </div> <!-- end row --> </div> <!-- container --> </div> <!-- content --> <!-- Footer Start --> <footer class="footer"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <script>document.write(new Date().getFullYear())</script> © Minton theme by <a href="#">Coderthemes</a> </div> <div class="col-md-6"> <div class="text-md-end footer-links d-none d-sm-block"> <a href="javascript:void(0);">About Us</a> <a href="javascript:void(0);">Help</a> <a href="javascript:void(0);">Contact Us</a> </div> </div> </div> </div> </footer> <!-- end Footer --> </div> <!-- ============================================================== --> <!-- End Page content --> <!-- ============================================================== --> </div> <!-- END wrapper --> <!-- Right Sidebar --> <div class="right-bar"> <div data-simplebar class="h-100"> <!-- Nav tabs --> <ul class="nav nav-tabs nav-bordered nav-justified" role="tablist"> <li class="nav-item"> <a class="nav-link py-2" data-bs-toggle="tab" href="#chat-tab" role="tab"> <i class="mdi mdi-message-text-outline d-block font-22 my-1"></i> </a> </li> <li class="nav-item"> <a class="nav-link py-2" data-bs-toggle="tab" href="#tasks-tab" role="tab"> <i class="mdi mdi-format-list-checkbox d-block font-22 my-1"></i> </a> </li> <li class="nav-item"> <a class="nav-link py-2 active" data-bs-toggle="tab" href="#settings-tab" role="tab"> <i class="mdi mdi-cog-outline d-block font-22 my-1"></i> </a> </li> </ul> <!-- Tab panes --> <div class="tab-content pt-0"> <div class="tab-pane" id="chat-tab" role="tabpanel"> <form class="search-bar p-3"> <div class="position-relative"> <input type="text" class="form-control" placeholder="Search..."> <span class="mdi mdi-magnify"></span> </div> </form> <h6 class="fw-medium px-3 mt-2 text-uppercase">Group Chats</h6> <div class="p-2"> <a href="javascript: void(0);" class="text-reset notification-item ps-3 mb-2 d-block"> <i class="mdi mdi-checkbox-blank-circle-outline me-1 text-success"></i> <span class="mb-0 mt-1">App Development</span> </a> <a href="javascript: void(0);" class="text-reset notification-item ps-3 mb-2 d-block"> <i class="mdi mdi-checkbox-blank-circle-outline me-1 text-warning"></i> <span class="mb-0 mt-1">Office Work</span> </a> <a href="javascript: void(0);" class="text-reset notification-item ps-3 mb-2 d-block"> <i class="mdi mdi-checkbox-blank-circle-outline me-1 text-danger"></i> <span class="mb-0 mt-1">Personal Group</span> </a> <a href="javascript: void(0);" class="text-reset notification-item ps-3 d-block"> <i class="mdi mdi-checkbox-blank-circle-outline me-1"></i> <span class="mb-0 mt-1">Freelance</span> </a> </div> <h6 class="fw-medium px-3 mt-3 text-uppercase">Favourites <a href="javascript: void(0);" class="font-18 text-danger"><i class="float-end mdi mdi-plus-circle"></i></a></h6> <div class="p-2"> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status"></span> <img src="assets/images/users/avatar-10.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Andrew Mackie</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">It will seem like simplified English.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status"></span> <img src="assets/images/users/avatar-1.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Rory Dalyell</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">To an English person, it will seem like simplified</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status busy"></span> <img src="assets/images/users/avatar-9.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Jaxon Dunhill</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">To achieve this, it would be necessary.</p> </div> </div> </div> </a> </div> <h6 class="fw-medium px-3 mt-3 text-uppercase">Other Chats <a href="javascript: void(0);" class="font-18 text-danger"><i class="float-end mdi mdi-plus-circle"></i></a></h6> <div class="p-2 pb-4"> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status online"></span> <img src="assets/images/users/avatar-2.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Jackson Therry</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">Everyone realizes why a new common language.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status away"></span> <img src="assets/images/users/avatar-4.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Charles Deakin</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">The languages only differ in their grammar.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status online"></span> <img src="assets/images/users/avatar-5.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Ryan Salting</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">If several languages coalesce the grammar of the resulting.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status online"></span> <img src="assets/images/users/avatar-6.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Sean Howse</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">It will seem like simplified English.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status busy"></span> <img src="assets/images/users/avatar-7.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Dean Coward</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">The new common language will be more simple.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status away"></span> <img src="assets/images/users/avatar-8.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Hayley East</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">One could refuse to pay expensive translators.</p> </div> </div> </div> </a> <div class="text-center mt-3"> <a href="javascript:void(0);" class="btn btn-sm btn-white"> <i class="mdi mdi-spin mdi-loading me-2"></i> Load more </a> </div> </div> </div> <div class="tab-pane" id="tasks-tab" role="tabpanel"> <h6 class="fw-medium p-3 m-0 text-uppercase">Working Tasks</h6> <div class="px-2"> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">App Development<span class="float-end">75%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">Database Repair<span class="float-end">37%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-info" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">Backup Create<span class="float-end">52%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-warning" role="progressbar" style="width: 52%" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> </div> <h6 class="fw-medium px-3 mb-0 mt-4 text-uppercase">Upcoming Tasks</h6> <div class="p-2"> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">Sales Reporting<span class="float-end">12%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-danger" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">Redesign Website<span class="float-end">67%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-primary" role="progressbar" style="width: 67%" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">New Admin Design<span class="float-end">84%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-success" role="progressbar" style="width: 84%" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> </div> <div class="d-grid p-3 mt-2"> <a href="javascript: void(0);" class="btn btn-success waves-effect waves-light">Create Task</a> </div> </div> <div class="tab-pane active" id="settings-tab" role="tabpanel"> <h6 class="fw-medium px-3 m-0 py-2 font-13 text-uppercase bg-light"> <span class="d-block py-1">Theme Settings</span> </h6> <div class="p-3"> <div class="alert alert-warning" role="alert"> <strong>Customize </strong> the overall color scheme, sidebar menu, etc. </div> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Color Scheme</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="color-scheme-mode" value="light" id="light-mode-check" checked> <label class="form-check-label" for="light-mode-check">Light Mode</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="color-scheme-mode" value="dark" id="dark-mode-check"> <label class="form-check-label" for="dark-mode-check">Dark Mode</label> </div> <!-- Width --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Width</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="width" value="fluid" id="fluid-check" checked> <label class="form-check-label" for="fluid-check">Fluid</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="width" value="boxed" id="boxed-check"> <label class="form-check-label" for="boxed-check">Boxed</label> </div> <!-- Topbar --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Topbar</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="topbar-color" value="dark" id="darktopbar-check" checked> <label class="form-check-label" for="darktopbar-check">Dark</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="topbar-color" value="light" id="lighttopbar-check"> <label class="form-check-label" for="lighttopbar-check">Light</label> </div> <!-- Menu positions --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Menus Positon <small>(Leftsidebar and Topbar)</small></h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="menus-position" value="fixed" id="fixed-check" checked> <label class="form-check-label" for="fixed-check">Fixed</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="menus-position" value="scrollable" id="scrollable-check"> <label class="form-check-label" for="scrollable-check">Scrollable</label> </div> <!-- Left Sidebar--> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Left Sidebar Color</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-color" value="light" id="light-check" checked> <label class="form-check-label" for="light-check">Light</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-color" value="dark" id="dark-check"> <label class="form-check-label" for="dark-check">Dark</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-color" value="brand" id="brand-check"> <label class="form-check-label" for="brand-check">Brand</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-color" value="gradient" id="gradient-check"> <label class="form-check-label" for="gradient-check">Gradient</label> </div> <!-- size --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Left Sidebar Size</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-size" value="default" id="default-size-check" checked> <label class="form-check-label" for="default-size-check">Default</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-size" value="condensed" id="condensed-check"> <label class="form-check-label" for="condensed-check">Condensed <small>(Extra Small size)</small></label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-size" value="compact" id="compact-check"> <label class="form-check-label" for="compact-check">Compact <small>(Small size)</small></label> </div> <!-- User info --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Sidebar User Info</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-user" value="fixed" id="sidebaruser-check"> <label class="form-check-label" for="sidebaruser-check">Enable</label> </div> <div class="d-grid mt-4"> <button class="btn btn-primary" id="resetBtn">Reset to Default</button> <a href="#" class="btn btn-danger mt-2" ><i class="mdi mdi-basket me-1"></i> Purchase Now</a> </div> </div> </div> </div> </div> <!-- end slimscroll-menu--> </div> <!-- /Right-bar --> <!-- Right bar overlay--> <div class="rightbar-overlay"></div> <!-- Vendor js --> <script src="assets/js/vendor.min.js"></script> <!-- App js --> <script src="assets/js/app.min.js"></script> </body> <!-- Mirrored from coderthemes.com/minton_html/layouts/default/ui-tabs-accordions.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 11 Jul 2022 06:08:10 GMT --> </html>