Scribd
Upload
32 views44 pages

SEPUH

This document is an HTML template for a dashboard application called Vuexy, which is a Bootstrap Admin Template. It includes various sections such as dashboards, layouts, front pages, and apps & pages, along with links to different functionalities like analytics, CRM, eCommerce, and more. The template is designed to be responsive and customizable, featuring a vertical menu and various UI components.

Uploaded by

sarahsaraswati295
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
32 views44 pages

SEPUH

This document is an HTML template for a dashboard application called Vuexy, which is a Bootstrap Admin Template. It includes various sections such as dashboards, layouts, front pages, and apps & pages, along with links to different functionalities like analytics, CRM, eCommerce, and more. The template is designed to be responsive and customizable, featuring a vertical menu and various UI components.

Uploaded by

sarahsaraswati295
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<html
lang="en"
class="light-style layout-navbar-fixed layout-menu-fixed layout-compact"
dir="ltr"
data-theme="theme-default"
data-assets-path="../../assets/"
data-template="vertical-menu-template">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-
scale=1.0, maximum-scale=1.0" />

<title>Academy - Dashboard - App | Vuexy - Bootstrap Admin Template</title>

<meta name="description" content="" />

<!-- Favicon -->


<link rel="icon" type="image/x-icon"
href="../../assets/img/favicon/favicon.ico" />

<!-- Fonts -->


<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?
family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;
1,700&ampdisplay=swap"
rel="stylesheet" />

<!-- Icons -->


<link rel="stylesheet" href="../../assets/vendor/fonts/fontawesome.css" />
<link rel="stylesheet" href="../../assets/vendor/fonts/tabler-icons.css" />
<link rel="stylesheet" href="../../assets/vendor/fonts/flag-icons.css" />

<!-- Core CSS -->


<link rel="stylesheet" href="../../assets/vendor/css/rtl/core.css"
class="template-customizer-core-css" />
<link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css"
class="template-customizer-theme-css" />
<link rel="stylesheet" href="../../assets/css/demo.css" />

<!-- Vendors CSS -->


<link rel="stylesheet" href="../../assets/vendor/libs/node-waves/node-
waves.css" />
<link rel="stylesheet"
href="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
<link rel="stylesheet"
href="../../assets/vendor/libs/typeahead-js/typeahead.css" />
<link rel="stylesheet"
href="../../assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
<link rel="stylesheet" href="../../assets/vendor/libs/datatables-responsive-
bs5/responsive.bootstrap5.css" />
<link rel="stylesheet"
href="../../assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css" />
<link rel="stylesheet" href="../../assets/vendor/libs/apex-charts/apex-
charts.css" />

<!-- Page CSS -->

<!-- Helpers -->


<script src="../../assets/vendor/js/helpers.js"></script>
<!--! Template customizer & Theme config files MUST be included after core
stylesheets and helpers.js in the <head> section -->
<!--? Template customizer: To hide customizer set displayCustomizer value false
in config.js. -->
<script src="../../assets/vendor/js/template-customizer.js"></script>
<!--? Config: Mandatory theme config file contain global vars & default theme
options, Set your preferred theme option in this file. -->
<script src="../../assets/js/config.js"></script>
</head>

<body>
<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">
<div class="layout-container">
<!-- Menu -->

<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-


theme">
<div class="app-brand demo">
<a href="index.html" class="app-brand-link">
<span class="app-brand-logo demo">
<svg width="32" height="22" viewBox="0 0 32 22" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207
1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951
7.17289L9.23799 0H0.00172773Z"
fill="#7367F0" />
<path
opacity="0.06"
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824
16.4364Z"
fill="#161616" />
<path
opacity="0.06"
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751
15.9175Z"
fill="#161616" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262
9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
fill="#7367F0" />
</svg>
</span>
<span class="app-brand-text demo menu-text fw-bold">Vuexy</span>
</a>

<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-


large ms-auto">
<i class="ti menu-toggle-icon d-none d-xl-block ti-sm align-
middle"></i>
<i class="ti ti-x d-block d-xl-none ti-sm align-middle"></i>
</a>
</div>

<div class="menu-inner-shadow"></div>

<ul class="menu-inner py-1">


<!-- Dashboards -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-smart-home"></i>
<div data-i18n="Dashboards">Dashboards</div>
<div class="badge bg-primary rounded-pill ms-auto">3</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="index.html" class="menu-link">
<div data-i18n="Analytics">Analytics</div>
</a>
</li>
<li class="menu-item">
<a href="dashboards-crm.html" class="menu-link">
<div data-i18n="CRM">CRM</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-dashboard.html" class="menu-link">
<div data-i18n="eCommerce">eCommerce</div>
</a>
</li>
<li class="menu-item">
<a href="app-logistics-dashboard.html" class="menu-link">
<div data-i18n="Logistics">Logistics</div>
</a>
</li>
<li class="menu-item active">
<a href="app-academy-dashboard.html" class="menu-link">
<div data-i18n="Academy">Academy</div>
</a>
</li>
</ul>
</li>

<!-- Layouts -->


<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-layout-sidebar"></i>
<div data-i18n="Layouts">Layouts</div>
</a>

<ul class="menu-sub">
<li class="menu-item">
<a href="layouts-collapsed-menu.html" class="menu-link">
<div data-i18n="Collapsed menu">Collapsed menu</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-content-navbar.html" class="menu-link">
<div data-i18n="Content navbar">Content navbar</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-content-navbar-with-sidebar.html" class="menu-
link">
<div data-i18n="Content nav + Sidebar">Content nav +
Sidebar</div>
</a>
</li>
<li class="menu-item">
<a href="../horizontal-menu-template" class="menu-link"
target="_blank">
<div data-i18n="Horizontal">Horizontal</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-without-menu.html" class="menu-link">
<div data-i18n="Without menu">Without menu</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-without-navbar.html" class="menu-link">
<div data-i18n="Without navbar">Without navbar</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-fluid.html" class="menu-link">
<div data-i18n="Fluid">Fluid</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-container.html" class="menu-link">
<div data-i18n="Container">Container</div>
</a>
</li>
<li class="menu-item">
<a href="layouts-blank.html" class="menu-link">
<div data-i18n="Blank">Blank</div>
</a>
</li>
</ul>
</li>

<!-- Front Pages -->


<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-files"></i>
<div data-i18n="Front Pages">Front Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="../front-pages/landing-page.html" class="menu-link"
target="_blank">
<div data-i18n="Landing">Landing</div>
</a>
</li>
<li class="menu-item">
<a href="../front-pages/pricing-page.html" class="menu-link"
target="_blank">
<div data-i18n="Pricing">Pricing</div>
</a>
</li>
<li class="menu-item">
<a href="../front-pages/payment-page.html" class="menu-link"
target="_blank">
<div data-i18n="Payment">Payment</div>
</a>
</li>
<li class="menu-item">
<a href="../front-pages/checkout-page.html" class="menu-link"
target="_blank">
<div data-i18n="Checkout">Checkout</div>
</a>
</li>
<li class="menu-item">
<a href="../front-pages/help-center-landing.html" class="menu-
link" target="_blank">
<div data-i18n="Help Center">Help Center</div>
</a>
</li>
</ul>
</li>

<!-- Apps & Pages -->


<li class="menu-header small text-uppercase">
<span class="menu-header-text">Apps &amp; Pages</span>
</li>
<li class="menu-item">
<a href="app-email.html" class="menu-link">
<i class="menu-icon tf-icons ti ti-mail"></i>
<div data-i18n="Email">Email</div>
</a>
</li>
<li class="menu-item">
<a href="app-chat.html" class="menu-link">
<i class="menu-icon tf-icons ti ti-messages"></i>
<div data-i18n="Chat">Chat</div>
</a>
</li>
<li class="menu-item">
<a href="app-calendar.html" class="menu-link">
<i class="menu-icon tf-icons ti ti-calendar"></i>
<div data-i18n="Calendar">Calendar</div>
</a>
</li>
<li class="menu-item">
<a href="app-kanban.html" class="menu-link">
<i class="menu-icon tf-icons ti ti-layout-kanban"></i>
<div data-i18n="Kanban">Kanban</div>
</a>
</li>
<!-- e-commerce-app menu start -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-shopping-cart"></i>
<div data-i18n="eCommerce">eCommerce</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-dashboard.html" class="menu-link">
<div data-i18n="Dashboard">Dashboard</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Products">Products</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-product-list.html" class="menu-link">
<div data-i18n="Product list">Product list</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-product-add.html" class="menu-link">
<div data-i18n="Add Product">Add Product</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-category-list.html" class="menu-link">
<div data-i18n="Category list">Category List</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Order">Order</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-order-list.html" class="menu-link">
<div data-i18n="Order list">Order list</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-order-details.html" class="menu-link">
<div data-i18n="Order Details">Order Details</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Customer">Customer</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-customer-all.html" class="menu-link">
<div data-i18n="All Customers">All Customers</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Customer Details">Customer Details</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-customer-details-overview.html"
class="menu-link">
<div data-i18n="Overview">Overview</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-customer-details-security.html"
class="menu-link">
<div data-i18n="Security">Security</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-customer-details-billing.html"
class="menu-link">
<div data-i18n="Address & Billing">Address &
Billing</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-customer-details-
notifications.html" class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="app-ecommerce-manage-reviews.html" class="menu-link">
<div data-i18n="Manage reviews">Manage reviews</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-referral.html" class="menu-link">
<div data-i18n="Referrals">Referrals</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Settings">Settings</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-ecommerce-settings-detail.html" class="menu-
link">
<div data-i18n="Store details">Store details</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-payments.html" class="menu-
link">
<div data-i18n="Payments">Payments</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-checkout.html" class="menu-
link">
<div data-i18n="Checkout">Checkout</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-shipping.html" class="menu-
link">
<div data-i18n="Shipping & delivery">Shipping &
delivery</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-locations.html" class="menu-
link">
<div data-i18n="Locations">Locations</div>
</a>
</li>
<li class="menu-item">
<a href="app-ecommerce-settings-notifications.html"
class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<!-- e-commerce-app menu end -->
<!-- Academy menu start -->
<li class="menu-item active open">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-book"></i>
<div data-i18n="Academy">Academy</div>
</a>
<ul class="menu-sub">
<li class="menu-item active">
<a href="app-academy-dashboard.html" class="menu-link">
<div data-i18n="Dashboard">Dashboard</div>
</a>
</li>
<li class="menu-item">
<a href="app-academy-course.html" class="menu-link">
<div data-i18n="My Course">My Course</div>
</a>
</li>
<li class="menu-item">
<a href="app-academy-course-details.html" class="menu-link">
<div data-i18n="Course Details">Course Details</div>
</a>
</li>
</ul>
</li>
<!-- Academy menu end -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-truck"></i>
<div data-i18n="Logistics">Logistics</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-logistics-dashboard.html" class="menu-link">
<div data-i18n="Dashboard">Dashboard</div>
</a>
</li>
<li class="menu-item">
<a href="app-logistics-fleet.html" class="menu-link">
<div data-i18n="Fleet">Fleet</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-file-dollar"></i>
<div data-i18n="Invoice">Invoice</div>
<div class="badge bg-danger rounded-pill ms-auto">4</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-invoice-list.html" class="menu-link">
<div data-i18n="List">List</div>
</a>
</li>
<li class="menu-item">
<a href="app-invoice-preview.html" class="menu-link">
<div data-i18n="Preview">Preview</div>
</a>
</li>
<li class="menu-item">
<a href="app-invoice-edit.html" class="menu-link">
<div data-i18n="Edit">Edit</div>
</a>
</li>
<li class="menu-item">
<a href="app-invoice-add.html" class="menu-link">
<div data-i18n="Add">Add</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-users"></i>
<div data-i18n="Users">Users</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-user-list.html" class="menu-link">
<div data-i18n="List">List</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="View">View</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-user-view-account.html" class="menu-link">
<div data-i18n="Account">Account</div>
</a>
</li>
<li class="menu-item">
<a href="app-user-view-security.html" class="menu-link">
<div data-i18n="Security">Security</div>
</a>
</li>
<li class="menu-item">
<a href="app-user-view-billing.html" class="menu-link">
<div data-i18n="Billing & Plans">Billing & Plans</div>
</a>
</li>
<li class="menu-item">
<a href="app-user-view-notifications.html" class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
<li class="menu-item">
<a href="app-user-view-connections.html" class="menu-link">
<div data-i18n="Connections">Connections</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-settings"></i>
<div data-i18n="Roles & Permissions">Roles & Permissions</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="app-access-roles.html" class="menu-link">
<div data-i18n="Roles">Roles</div>
</a>
</li>
<li class="menu-item">
<a href="app-access-permission.html" class="menu-link">
<div data-i18n="Permission">Permission</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-file"></i>
<div data-i18n="Pages">Pages</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="User Profile">User Profile</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-profile-user.html" class="menu-link">
<div data-i18n="Profile">Profile</div>
</a>
</li>
<li class="menu-item">
<a href="pages-profile-teams.html" class="menu-link">
<div data-i18n="Teams">Teams</div>
</a>
</li>
<li class="menu-item">
<a href="pages-profile-projects.html" class="menu-link">
<div data-i18n="Projects">Projects</div>
</a>
</li>
<li class="menu-item">
<a href="pages-profile-connections.html" class="menu-link">
<div data-i18n="Connections">Connections</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Account Settings">Account Settings</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-account-settings-account.html" class="menu-
link">
<div data-i18n="Account">Account</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-security.html" class="menu-
link">
<div data-i18n="Security">Security</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-billing.html" class="menu-
link">
<div data-i18n="Billing & Plans">Billing & Plans</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-notifications.html"
class="menu-link">
<div data-i18n="Notifications">Notifications</div>
</a>
</li>
<li class="menu-item">
<a href="pages-account-settings-connections.html"
class="menu-link">
<div data-i18n="Connections">Connections</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="pages-faq.html" class="menu-link">
<div data-i18n="FAQ">FAQ</div>
</a>
</li>
<li class="menu-item">
<a href="pages-pricing.html" class="menu-link">
<div data-i18n="Pricing">Pricing</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Misc">Misc</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="pages-misc-error.html" class="menu-link"
target="_blank">
<div data-i18n="Error">Error</div>
</a>
</li>
<li class="menu-item">
<a href="pages-misc-under-maintenance.html" class="menu-link"
target="_blank">
<div data-i18n="Under Maintenance">Under Maintenance</div>
</a>
</li>
<li class="menu-item">
<a href="pages-misc-comingsoon.html" class="menu-link"
target="_blank">
<div data-i18n="Coming Soon">Coming Soon</div>
</a>
</li>
<li class="menu-item">
<a href="pages-misc-not-authorized.html" class="menu-link"
target="_blank">
<div data-i18n="Not Authorized">Not Authorized</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-lock"></i>
<div data-i18n="Authentications">Authentications</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Login">Login</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-login-basic.html" class="menu-link"
target="_blank">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-login-cover.html" class="menu-link"
target="_blank">
<div data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Register">Register</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-register-basic.html" class="menu-link"
target="_blank">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-register-cover.html" class="menu-link"
target="_blank">
<div data-i18n="Cover">Cover</div>
</a>
</li>
<li class="menu-item">
<a href="auth-register-multisteps.html" class="menu-link"
target="_blank">
<div data-i18n="Multi-steps">Multi-steps</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Verify Email">Verify Email</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-verify-email-basic.html" class="menu-link"
target="_blank">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-verify-email-cover.html" class="menu-link"
target="_blank">
<div data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Reset Password">Reset Password</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-reset-password-basic.html" class="menu-link"
target="_blank">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-reset-password-cover.html" class="menu-link"
target="_blank">
<div data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Forgot Password">Forgot Password</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-forgot-password-basic.html" class="menu-link"
target="_blank">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-forgot-password-cover.html" class="menu-link"
target="_blank">
<div data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Two Steps">Two Steps</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="auth-two-steps-basic.html" class="menu-link"
target="_blank">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="auth-two-steps-cover.html" class="menu-link"
target="_blank">
<div data-i18n="Cover">Cover</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-forms"></i>
<div data-i18n="Wizard Examples">Wizard Examples</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="wizard-ex-checkout.html" class="menu-link">
<div data-i18n="Checkout">Checkout</div>
</a>
</li>
<li class="menu-item">
<a href="wizard-ex-property-listing.html" class="menu-link">
<div data-i18n="Property Listing">Property Listing</div>
</a>
</li>
<li class="menu-item">
<a href="wizard-ex-create-deal.html" class="menu-link">
<div data-i18n="Create Deal">Create Deal</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="modal-examples.html" class="menu-link">
<i class="menu-icon tf-icons ti ti-square"></i>
<div data-i18n="Modal Examples">Modal Examples</div>
</a>
</li>

<!-- Components -->


<li class="menu-header small text-uppercase">
<span class="menu-header-text">Components</span>
</li>
<!-- Cards -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-id"></i>
<div data-i18n="Cards">Cards</div>
<div class="badge bg-primary rounded-pill ms-auto">6</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="cards-basic.html" class="menu-link">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="cards-advance.html" class="menu-link">
<div data-i18n="Advance">Advance</div>
</a>
</li>
<li class="menu-item">
<a href="cards-statistics.html" class="menu-link">
<div data-i18n="Statistics">Statistics</div>
</a>
</li>
<li class="menu-item">
<a href="cards-analytics.html" class="menu-link">
<div data-i18n="Analytics">Analytics</div>
</a>
</li>
<li class="menu-item">
<a href="cards-actions.html" class="menu-link">
<div data-i18n="Actions">Actions</div>
</a>
</li>
</ul>
</li>
<!-- User interface -->
<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-color-swatch"></i>
<div data-i18n="User interface">User interface</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="ui-accordion.html" class="menu-link">
<div data-i18n="Accordion">Accordion</div>
</a>
</li>
<li class="menu-item">
<a href="ui-alerts.html" class="menu-link">
<div data-i18n="Alerts">Alerts</div>
</a>
</li>
<li class="menu-item">
<a href="ui-badges.html" class="menu-link">
<div data-i18n="Badges">Badges</div>
</a>
</li>
<li class="menu-item">
<a href="ui-buttons.html" class="menu-link">
<div data-i18n="Buttons">Buttons</div>
</a>
</li>
<li class="menu-item">
<a href="ui-carousel.html" class="menu-link">
<div data-i18n="Carousel">Carousel</div>
</a>
</li>
<li class="menu-item">
<a href="ui-collapse.html" class="menu-link">
<div data-i18n="Collapse">Collapse</div>
</a>
</li>
<li class="menu-item">
<a href="ui-dropdowns.html" class="menu-link">
<div data-i18n="Dropdowns">Dropdowns</div>
</a>
</li>
<li class="menu-item">
<a href="ui-footer.html" class="menu-link">
<div data-i18n="Footer">Footer</div>
</a>
</li>
<li class="menu-item">
<a href="ui-list-groups.html" class="menu-link">
<div data-i18n="List Groups">List groups</div>
</a>
</li>
<li class="menu-item">
<a href="ui-modals.html" class="menu-link">
<div data-i18n="Modals">Modals</div>
</a>
</li>
<li class="menu-item">
<a href="ui-navbar.html" class="menu-link">
<div data-i18n="Navbar">Navbar</div>
</a>
</li>
<li class="menu-item">
<a href="ui-offcanvas.html" class="menu-link">
<div data-i18n="Offcanvas">Offcanvas</div>
</a>
</li>
<li class="menu-item">
<a href="ui-pagination-breadcrumbs.html" class="menu-link">
<div data-i18n="Pagination & Breadcrumbs">Pagination &amp;
Breadcrumbs</div>
</a>
</li>
<li class="menu-item">
<a href="ui-progress.html" class="menu-link">
<div data-i18n="Progress">Progress</div>
</a>
</li>
<li class="menu-item">
<a href="ui-spinners.html" class="menu-link">
<div data-i18n="Spinners">Spinners</div>
</a>
</li>
<li class="menu-item">
<a href="ui-tabs-pills.html" class="menu-link">
<div data-i18n="Tabs & Pills">Tabs &amp; Pills</div>
</a>
</li>
<li class="menu-item">
<a href="ui-toasts.html" class="menu-link">
<div data-i18n="Toasts">Toasts</div>
</a>
</li>
<li class="menu-item">
<a href="ui-tooltips-popovers.html" class="menu-link">
<div data-i18n="Tooltips & Popovers">Tooltips &amp;
popovers</div>
</a>
</li>
<li class="menu-item">
<a href="ui-typography.html" class="menu-link">
<div data-i18n="Typography">Typography</div>
</a>
</li>
</ul>
</li>

<!-- Extended components -->


<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-components"></i>
<div data-i18n="Extended UI">Extended UI</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="extended-ui-avatar.html" class="menu-link">
<div data-i18n="Avatar">Avatar</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-blockui.html" class="menu-link">
<div data-i18n="BlockUI">BlockUI</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-drag-and-drop.html" class="menu-link">
<div data-i18n="Drag & Drop">Drag &amp; Drop</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-media-player.html" class="menu-link">
<div data-i18n="Media Player">Media Player</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-perfect-scrollbar.html" class="menu-link">
<div data-i18n="Perfect Scrollbar">Perfect scrollbar</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-star-ratings.html" class="menu-link">
<div data-i18n="Star Ratings">Star Ratings</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-sweetalert2.html" class="menu-link">
<div data-i18n="SweetAlert2">SweetAlert2</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-text-divider.html" class="menu-link">
<div data-i18n="Text Divider">Text Divider</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<div data-i18n="Timeline">Timeline</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="extended-ui-timeline-basic.html" class="menu-link">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-timeline-fullscreen.html" class="menu-
link">
<div data-i18n="Fullscreen">Fullscreen</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="extended-ui-tour.html" class="menu-link">
<div data-i18n="Tour">Tour</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-treeview.html" class="menu-link">
<div data-i18n="Treeview">Treeview</div>
</a>
</li>
<li class="menu-item">
<a href="extended-ui-misc.html" class="menu-link">
<div data-i18n="Miscellaneous">Miscellaneous</div>
</a>
</li>
</ul>
</li>

<!-- Icons -->


<li class="menu-item">
<a href="javascript:void(0)" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-brand-tabler"></i>
<div data-i18n="Icons">Icons</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="icons-tabler.html" class="menu-link">
<div data-i18n="Tabler">Tabler</div>
</a>
</li>
<li class="menu-item">
<a href="icons-font-awesome.html" class="menu-link">
<div data-i18n="Fontawesome">Fontawesome</div>
</a>
</li>
</ul>
</li>

<!-- Forms & Tables -->


<li class="menu-header small text-uppercase">
<span class="menu-header-text">Forms &amp; Tables</span>
</li>
<!-- Forms -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-toggle-left"></i>
<div data-i18n="Form Elements">Form Elements</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="forms-basic-inputs.html" class="menu-link">
<div data-i18n="Basic Inputs">Basic Inputs</div>
</a>
</li>
<li class="menu-item">
<a href="forms-input-groups.html" class="menu-link">
<div data-i18n="Input groups">Input groups</div>
</a>
</li>
<li class="menu-item">
<a href="forms-custom-options.html" class="menu-link">
<div data-i18n="Custom Options">Custom Options</div>
</a>
</li>
<li class="menu-item">
<a href="forms-editors.html" class="menu-link">
<div data-i18n="Editors">Editors</div>
</a>
</li>
<li class="menu-item">
<a href="forms-file-upload.html" class="menu-link">
<div data-i18n="File Upload">File Upload</div>
</a>
</li>
<li class="menu-item">
<a href="forms-pickers.html" class="menu-link">
<div data-i18n="Pickers">Pickers</div>
</a>
</li>
<li class="menu-item">
<a href="forms-selects.html" class="menu-link">
<div data-i18n="Select & Tags">Select &amp; Tags</div>
</a>
</li>
<li class="menu-item">
<a href="forms-sliders.html" class="menu-link">
<div data-i18n="Sliders">Sliders</div>
</a>
</li>
<li class="menu-item">
<a href="forms-switches.html" class="menu-link">
<div data-i18n="Switches">Switches</div>
</a>
</li>
<li class="menu-item">
<a href="forms-extras.html" class="menu-link">
<div data-i18n="Extras">Extras</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-layout-navbar"></i>
<div data-i18n="Form Layouts">Form Layouts</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="form-layouts-vertical.html" class="menu-link">
<div data-i18n="Vertical Form">Vertical Form</div>
</a>
</li>
<li class="menu-item">
<a href="form-layouts-horizontal.html" class="menu-link">
<div data-i18n="Horizontal Form">Horizontal Form</div>
</a>
</li>
<li class="menu-item">
<a href="form-layouts-sticky.html" class="menu-link">
<div data-i18n="Sticky Actions">Sticky Actions</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-text-wrap-disabled"></i>
<div data-i18n="Form Wizard">Form Wizard</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="form-wizard-numbered.html" class="menu-link">
<div data-i18n="Numbered">Numbered</div>
</a>
</li>
<li class="menu-item">
<a href="form-wizard-icons.html" class="menu-link">
<div data-i18n="Icons">Icons</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="form-validation.html" class="menu-link">
<i class="menu-icon tf-icons ti ti-checkbox"></i>
<div data-i18n="Form Validation">Form Validation</div>
</a>
</li>
<!-- Tables -->
<li class="menu-item">
<a href="tables-basic.html" class="menu-link">
<i class="menu-icon tf-icons ti ti-table"></i>
<div data-i18n="Tables">Tables</div>
</a>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-layout-grid"></i>
<div data-i18n="Datatables">Datatables</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="tables-datatables-basic.html" class="menu-link">
<div data-i18n="Basic">Basic</div>
</a>
</li>
<li class="menu-item">
<a href="tables-datatables-advanced.html" class="menu-link">
<div data-i18n="Advanced">Advanced</div>
</a>
</li>
<li class="menu-item">
<a href="tables-datatables-extensions.html" class="menu-link">
<div data-i18n="Extensions">Extensions</div>
</a>
</li>
</ul>
</li>

<!-- Charts & Maps -->


<li class="menu-header small text-uppercase">
<span class="menu-header-text">Charts &amp; Maps</span>
</li>
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="menu-icon tf-icons ti ti-chart-pie"></i>
<div data-i18n="Charts">Charts</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="charts-apex.html" class="menu-link">
<div data-i18n="Apex Charts">Apex Charts</div>
</a>
</li>
<li class="menu-item">
<a href="charts-chartjs.html" class="menu-link">
<div data-i18n="ChartJS">ChartJS</div>
</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="maps-leaflet.html" class="menu-link">
<i class="menu-icon tf-icons ti ti-map"></i>
<div data-i18n="Leaflet Maps">Leaflet Maps</div>
</a>
</li>

<!-- Misc -->


<li class="menu-header small text-uppercase">
<span class="menu-header-text">Misc</span>
</li>
<li class="menu-item">
<a href="https://pixinvent.ticksy.com/" target="_blank" class="menu-
link">
<i class="menu-icon tf-icons ti ti-lifebuoy"></i>
<div data-i18n="Support">Support</div>
</a>
</li>
<li class="menu-item">
<a

href="https://demos.pixinvent.com/vuexy-html-admin-template/documentation/"
target="_blank"
class="menu-link">
<i class="menu-icon tf-icons ti ti-file-description"></i>
<div data-i18n="Documentation">Documentation</div>
</a>
</li>
</ul>
</aside>
<!-- / Menu -->
<!-- Layout container -->
<div class="layout-page">
<!-- Navbar -->

<nav
class="layout-navbar container-xxl navbar navbar-expand-xl navbar-
detached align-items-center bg-navbar-theme"
id="layout-navbar">
<div class="layout-menu-toggle navbar-nav align-items-xl-center me-3
me-xl-0 d-xl-none">
<a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
<i class="ti ti-menu-2 ti-sm"></i>
</a>
</div>

<div class="navbar-nav-right d-flex align-items-center" id="navbar-


collapse">
<!-- Search -->
<div class="navbar-nav align-items-center">
<div class="nav-item navbar-search-wrapper mb-0">
<a class="nav-item nav-link search-toggler d-flex align-items-
center px-0" href="javascript:void(0);">
<i class="ti ti-search ti-md me-2"></i>
<span class="d-none d-md-inline-block text-muted">Search
(Ctrl+/)</span>
</a>
</div>
</div>
<!-- /Search -->

<ul class="navbar-nav flex-row align-items-center ms-auto">


<!-- Language -->
<li class="nav-item dropdown-language dropdown me-2 me-xl-0">
<a class="nav-link dropdown-toggle hide-arrow"
href="javascript:void(0);" data-bs-toggle="dropdown">
<i class="ti ti-language rounded-circle ti-md"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);" data-
language="en">
<span class="align-middle">English</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-
language="fr">
<span class="align-middle">French</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-
language="de">
<span class="align-middle">German</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-
language="pt">
<span class="align-middle">Portuguese</span>
</a>
</li>
</ul>
</li>
<!--/ Language -->

<!-- Style Switcher -->


<li class="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
<a class="nav-link dropdown-toggle hide-arrow"
href="javascript:void(0);" data-bs-toggle="dropdown">
<i class="ti ti-md"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-styles">
<li>
<a class="dropdown-item" href="javascript:void(0);" data-
theme="light">
<span class="align-middle"><i class="ti ti-sun
me-2"></i>Light</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-
theme="dark">
<span class="align-middle"><i class="ti ti-moon
me-2"></i>Dark</span>
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);" data-
theme="system">
<span class="align-middle"><i class="ti ti-device-desktop
me-2"></i>System</span>
</a>
</li>
</ul>
</li>
<!-- / Style Switcher-->

<!-- Quick links -->


<li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-
2 me-xl-0">
<a
class="nav-link dropdown-toggle hide-arrow"
href="javascript:void(0);"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
aria-expanded="false">
<i class="ti ti-layout-grid-add ti-md"></i>
</a>
<div class="dropdown-menu dropdown-menu-end py-0">
<div class="dropdown-menu-header border-bottom">
<div class="dropdown-header d-flex align-items-center py-3">
<h5 class="text-body mb-0 me-auto">Shortcuts</h5>
<a
href="javascript:void(0)"
class="dropdown-shortcuts-add text-body"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Add shortcuts"
><i class="ti ti-sm ti-apps"></i
></a>
</div>
</div>
<div class="dropdown-shortcuts-list scrollable-container">
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-
2">
<i class="ti ti-calendar fs-4"></i>
</span>
<a href="app-calendar.html" class="stretched-
link">Calendar</a>
<small class="text-muted mb-0">Appointments</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-
2">
<i class="ti ti-file-invoice fs-4"></i>
</span>
<a href="app-invoice-list.html" class="stretched-
link">Invoice App</a>
<small class="text-muted mb-0">Manage Accounts</small>
</div>
</div>
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-
2">
<i class="ti ti-users fs-4"></i>
</span>
<a href="app-user-list.html" class="stretched-link">User
App</a>
<small class="text-muted mb-0">Manage Users</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-
2">
<i class="ti ti-lock fs-4"></i>
</span>
<a href="app-access-roles.html" class="stretched-
link">Role Management</a>
<small class="text-muted mb-0">Permission</small>
</div>
</div>
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-
2">
<i class="ti ti-chart-bar fs-4"></i>
</span>
<a href="index.html" class="stretched-link">Dashboard</a>
<small class="text-muted mb-0">User Profile</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-
2">
<i class="ti ti-settings fs-4"></i>
</span>
<a href="pages-account-settings-account.html"
class="stretched-link">Setting</a>
<small class="text-muted mb-0">Account Settings</small>
</div>
</div>
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-
2">
<i class="ti ti-help fs-4"></i>
</span>
<a href="pages-faq.html" class="stretched-link">FAQs</a>
<small class="text-muted mb-0">FAQs & Articles</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-
2">
<i class="ti ti-square fs-4"></i>
</span>
<a href="modal-examples.html" class="stretched-
link">Modals</a>
<small class="text-muted mb-0">Useful Popups</small>
</div>
</div>
</div>
</div>
</li>
<!-- Quick links -->

<!-- Notification -->


<li class="nav-item dropdown-notifications navbar-dropdown dropdown
me-3 me-xl-1">
<a
class="nav-link dropdown-toggle hide-arrow"
href="javascript:void(0);"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
aria-expanded="false">
<i class="ti ti-bell ti-md"></i>
<span class="badge bg-danger rounded-pill badge-
notifications">5</span>
</a>
<ul class="dropdown-menu dropdown-menu-end py-0">
<li class="dropdown-menu-header border-bottom">
<div class="dropdown-header d-flex align-items-center py-3">
<h5 class="text-body mb-0 me-auto">Notification</h5>
<a
href="javascript:void(0)"
class="dropdown-notifications-all text-body"
data-bs-toggle="tooltip"
data-bs-placement="top"
title="Mark all as read"
><i class="ti ti-mail-opened fs-4"></i
></a>
</div>
</li>
<li class="dropdown-notifications-list scrollable-container">
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-action dropdown-
notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="../../assets/img/avatars/1.png" alt
class="h-auto rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1">Congratulation Lettie 🎉</h6>
<p class="mb-0">Won the monthly best seller gold
badge</p>
<small class="text-muted">1h ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-
actions">
<a href="javascript:void(0)" class="dropdown-
notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-
notifications-archive"
><span class="ti ti-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-
notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-
label-danger">CF</span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1">Charles Franklin</h6>
<p class="mb-0">Accepted your connection</p>
<small class="text-muted">12hr ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-
actions">
<a href="javascript:void(0)" class="dropdown-
notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-
notifications-archive"
><span class="ti ti-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-
notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="../../assets/img/avatars/2.png" alt
class="h-auto rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1">New Message ✉️</h6>
<p class="mb-0">You have new message from Natalie</p>
<small class="text-muted">1h ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-
actions">
<a href="javascript:void(0)" class="dropdown-
notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-
notifications-archive"
><span class="ti ti-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-
notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-
label-success"
><i class="ti ti-shopping-cart"></i
></span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1">Whoo! You have new order 🛒</h6>
<p class="mb-0">ACME Inc. made new order $1,154</p>
<small class="text-muted">1 day ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-
actions">
<a href="javascript:void(0)" class="dropdown-
notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-
notifications-archive"
><span class="ti ti-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-
notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="../../assets/img/avatars/9.png" alt
class="h-auto rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1">Application has been approved 🚀</h6>
<p class="mb-0">Your ABC project application has been
approved.</p>
<small class="text-muted">2 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-
actions">
<a href="javascript:void(0)" class="dropdown-
notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-
notifications-archive"
><span class="ti ti-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-
notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-
label-success"
><i class="ti ti-chart-pie"></i
></span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1">Monthly report is generated</h6>
<p class="mb-0">July monthly financial report is
generated</p>
<small class="text-muted">3 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-
actions">
<a href="javascript:void(0)" class="dropdown-
notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-
notifications-archive"
><span class="ti ti-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-
notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="../../assets/img/avatars/5.png" alt
class="h-auto rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1">Send connection request</h6>
<p class="mb-0">Peter sent you connection request</p>
<small class="text-muted">4 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-
actions">
<a href="javascript:void(0)" class="dropdown-
notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-
notifications-archive"
><span class="ti ti-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-
notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="../../assets/img/avatars/6.png" alt
class="h-auto rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1">New message from Jane</h6>
<p class="mb-0">Your have new message from Jane</p>
<small class="text-muted">5 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-
actions">
<a href="javascript:void(0)" class="dropdown-
notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-
notifications-archive"
><span class="ti ti-x"></span
></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-
notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-
label-warning"
><i class="ti ti-alert-triangle"></i
></span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1">CPU is running high</h6>
<p class="mb-0">CPU Utilization Percent is currently
at 88.63%,</p>
<small class="text-muted">5 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-
actions">
<a href="javascript:void(0)" class="dropdown-
notifications-read"
><span class="badge badge-dot"></span
></a>
<a href="javascript:void(0)" class="dropdown-
notifications-archive"
><span class="ti ti-x"></span
></a>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown-menu-footer border-top">
<a
href="javascript:void(0);"
class="dropdown-item d-flex justify-content-center text-
primary p-2 h-px-40 mb-1 align-items-center">
View all notifications
</a>
</li>
</ul>
</li>
<!--/ Notification -->

<!-- User -->


<li class="nav-item navbar-dropdown dropdown-user dropdown">
<a class="nav-link dropdown-toggle hide-arrow"
href="javascript:void(0);" data-bs-toggle="dropdown">
<div class="avatar avatar-online">
<img src="../../assets/img/avatars/1.png" alt class="h-auto
rounded-circle" />
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="pages-account-settings-
account.html">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar avatar-online">
<img src="../../assets/img/avatars/1.png" alt
class="h-auto rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<span class="fw-medium d-block">John Doe</span>
<small class="text-muted">Admin</small>
</div>
</div>
</a>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li>
<a class="dropdown-item" href="pages-profile-user.html">
<i class="ti ti-user-check me-2 ti-sm"></i>
<span class="align-middle">My Profile</span>
</a>
</li>
<li>
<a class="dropdown-item" href="pages-account-settings-
account.html">
<i class="ti ti-settings me-2 ti-sm"></i>
<span class="align-middle">Settings</span>
</a>
</li>
<li>
<a class="dropdown-item" href="pages-account-settings-
billing.html">
<span class="d-flex align-items-center align-middle">
<i class="flex-shrink-0 ti ti-credit-card me-2
ti-sm"></i>
<span class="flex-grow-1 align-middle">Billing</span>
<span class="flex-shrink-0 badge badge-center rounded-
pill bg-label-danger w-px-20 h-px-20"
>2</span
>
</span>
</a>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li>
<a class="dropdown-item" href="pages-faq.html">
<i class="ti ti-help me-2 ti-sm"></i>
<span class="align-middle">FAQ</span>
</a>
</li>
<li>
<a class="dropdown-item" href="pages-pricing.html">
<i class="ti ti-currency-dollar me-2 ti-sm"></i>
<span class="align-middle">Pricing</span>
</a>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li>
<a class="dropdown-item" href="auth-login-cover.html"
target="_blank">
<i class="ti ti-logout me-2 ti-sm"></i>
<span class="align-middle">Log Out</span>
</a>
</li>
</ul>
</li>
<!--/ User -->
</ul>
</div>
<!-- Search Small Screens -->
<div class="navbar-search-wrapper search-input-wrapper d-none">
<input
type="text"
class="form-control search-input container-xxl border-0"
placeholder="Search..."
aria-label="Search..." />
<i class="ti ti-x ti-sm search-toggler cursor-pointer"></i>
</div>
</nav>

<!-- / Navbar -->

<!-- Content wrapper -->


<div class="content-wrapper">
<!-- Content -->

<div class="container-xxl flex-grow-1 container-p-y">


<!-- Hour chart -->
<div class="card bg-transparent shadow-none my-4 border-0">
<div class="card-body row p-0 pb-3">
<div class="col-12 col-md-8 card-separator">
<h3>Welcome back, Felecia 👋🏻</h3>
<div class="col-12 col-lg-7">
<p>Your progress this week is Awesome. let's keep it up and
get a lot of points reward !</p>
</div>
<div class="d-flex justify-content-between flex-wrap gap-3 me-
5">
<div class="d-flex align-items-center gap-3 me-4 me-sm-0">
<span class="bg-label-primary p-2 rounded">
<i class="ti ti-device-laptop ti-xl"></i>
</span>
<div class="content-right">
<p class="mb-0">Hours Spent</p>
<h4 class="text-primary mb-0">34h</h4>
</div>
</div>
<div class="d-flex align-items-center gap-3">
<span class="bg-label-info p-2 rounded">
<i class="ti ti-bulb ti-xl"></i>
</span>
<div class="content-right">
<p class="mb-0">Test Results</p>
<h4 class="text-info mb-0">82%</h4>
</div>
</div>
<div class="d-flex align-items-center gap-3">
<span class="bg-label-warning p-2 rounded">
<i class="ti ti-discount-check ti-xl"></i>
</span>
<div class="content-right">
<p class="mb-0">Course Completed</p>
<h4 class="text-warning mb-0">14</h4>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 ps-md-3 ps-lg-4 pt-3 pt-md-0">
<div class="d-flex justify-content-between align-items-center">
<div>
<div>
<h5 class="mb-2">Time Spendings</h5>
<p class="mb-5">Weekly report</p>
</div>
<div class="time-spending-chart">
<h3 class="mb-2">231<span class="text-muted">h</span>
14<span class="text-muted">m</span></h3>
<span class="badge bg-label-success">+18.4%</span>
</div>
</div>
<div id="leadsReportChart"></div>
</div>
</div>
</div>
</div>
<!-- Hour chart End -->

<!-- Topic and Instructors -->


<div class="row mb-4 g-4">
<div class="col-12 col-xl-8">
<div class="card h-100">
<div class="card-header d-flex align-items-center justify-
content-between">
<h5 class="card-title m-0 me-2">Topic you are interested
in</h5>
<div class="dropdown">
<button
class="btn p-0"
type="button"
id="topic"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="ti ti-dots-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-
labelledby="topic">
<a class="dropdown-item"
href="javascript:void(0);">Highest Views</a>
<a class="dropdown-item" href="javascript:void(0);">See
All</a>
</div>
</div>
</div>
<div class="card-body row g-3">
<div class="col-md-6">
<div id="horizontalBarChart"></div>
</div>
<div class="col-md-6 d-flex justify-content-around align-
items-center">
<div>
<div class="d-flex align-items-baseline">
<span class="text-primary me-2"><i class="ti ti-circle-
filled fs-6"></i></span>
<div>
<p class="mb-2">UI Design</p>
<h5>35%</h5>
</div>
</div>
<div class="d-flex align-items-baseline my-3">
<span class="text-success me-2"><i class="ti ti-circle-
filled fs-6"></i></span>
<div>
<p class="mb-2">Music</p>
<h5>14%</h5>
</div>
</div>
<div class="d-flex align-items-baseline">
<span class="text-danger me-2"><i class="ti ti-circle-
filled fs-6"></i></span>
<div>
<p class="mb-2">React</p>
<h5>10%</h5>
</div>
</div>
</div>

<div>
<div class="d-flex align-items-baseline">
<span class="text-info me-2"><i class="ti ti-circle-
filled fs-6"></i></span>
<div>
<p class="mb-2">UX Design</p>
<h5>20%</h5>
</div>
</div>
<div class="d-flex align-items-baseline my-3">
<span class="text-secondary me-2"><i class="ti ti-
circle-filled fs-6"></i></span>
<div>
<p class="mb-2">Animation</p>
<h5>12%</h5>
</div>
</div>
<div class="d-flex align-items-baseline">
<span class="text-warning me-2"><i class="ti ti-circle-
filled fs-6"></i></span>
<div>
<p class="mb-2">SEO</p>
<h5>9%</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="col-12 col-xl-4 col-md-6">


<div class="card h-100">
<div class="card-header d-flex align-items-center justify-
content-between">
<div class="card-title mb-0">
<h5 class="m-0 me-2">Popular Instructors</h5>
</div>
<div class="dropdown">
<button
class="btn p-0"
type="button"
id="popularInstructors"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="ti ti-dots-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-
labelledby="popularInstructors">
<a class="dropdown-item"
href="javascript:void(0);">Select All</a>
<a class="dropdown-item"
href="javascript:void(0);">Refresh</a>
<a class="dropdown-item"
href="javascript:void(0);">Share</a>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-borderless border-top">
<thead class="border-bottom">
<tr>
<th>Instructors</th>
<th class="text-end">courses</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pt-2">
<div class="d-flex justify-content-start align-items-
center mt-lg-4">
<div class="avatar me-3 avatar-sm">
<img src="../../assets/img/avatars/1.png"
alt="Avatar" class="rounded-circle" />
</div>
<div class="d-flex flex-column">
<h6 class="mb-0">Maven Analytics</h6>
<small class="text-truncate text-muted">Business
Intelligence</small>
</div>
</div>
</td>
<td class="text-end pt-2">
<div class="user-progress mt-lg-4">
<p class="mb-0 fw-medium">33</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex justify-content-start align-items-
center">
<div class="avatar me-3 avatar-sm">
<img src="../../assets/img/avatars/2.png"
alt="Avatar" class="rounded-circle" />
</div>
<div class="d-flex flex-column">
<h6 class="mb-0">Zsazsa McCleverty</h6>
<small class="text-truncate text-muted">Digital
Marketing</small>
</div>
</div>
</td>
<td class="text-end">
<div class="user-progress">
<p class="mb-0 fw-medium">52</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex justify-content-start align-items-
center">
<div class="avatar me-3 avatar-sm">
<img src="../../assets/img/avatars/3.png"
alt="Avatar" class="rounded-circle" />
</div>
<div class="d-flex flex-column">
<h6 class="mb-0">Nathan Wagner</h6>
<small class="text-truncate text-muted">UI/UX
Design</small>
</div>
</div>
</td>
<td class="text-end">
<div class="user-progress">
<p class="mb-0 fw-medium">12</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex justify-content-start align-items-
center">
<div class="avatar me-3 avatar-sm">
<img src="../../assets/img/avatars/4.png"
alt="Avatar" class="rounded-circle" />
</div>
<div class="d-flex flex-column">
<h6 class="mb-0">Emma Bowen</h6>
<small class="text-truncate text-muted">React
Native</small>
</div>
</div>
</td>
<td class="text-end">
<div class="user-progress">
<p class="mb-0 fw-medium">8</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<div class="col-12 col-xl-4 col-md-6">


<div class="card h-100">
<div class="card-header d-flex align-items-center justify-
content-between">
<h5 class="card-title m-0 me-2">Top Courses</h5>
<div class="dropdown">
<button
class="btn p-0"
type="button"
id="topCourses"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="ti ti-dots-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-end" aria-
labelledby="topCourses">
<a class="dropdown-item"
href="javascript:void(0);">Refresh</a>
<a class="dropdown-item"
href="javascript:void(0);">Download</a>
<a class="dropdown-item" href="javascript:void(0);">View
All</a>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-unstyled mb-0">
<li class="d-flex mb-4 pb-1 align-items-center">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"
><i class="ti ti-video ti-md"></i
></span>
</div>
<div class="row w-100 align-items-center">
<div class="col-sm-8 col-lg-12 col-xxl-8 mb-1 mb-sm-0
mb-lg-1 mb-xxl-0">
<p class="mb-0 fw-medium">Videography Basic Design
Course</p>
</div>
<div
class="col-sm-4 col-lg-12 col-xxl-4 d-flex justify-
content-sm-end justify-content-md-start justify-content-xxl-end">
<div class="badge bg-label-secondary">1.2k
Views</div>
</div>
</div>
</li>
<li class="d-flex mb-4 pb-1 align-items-center">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-info"><i
class="ti ti-code ti-md"></i></span>
</div>
<div class="row w-100 align-items-center">
<div class="col-sm-8 col-lg-12 col-xxl-8 mb-1 mb-sm-0
mb-lg-1 mb-xxl-0">
<p class="mb-0 fw-medium">Basic Front-end Development
Course</p>
</div>
<div
class="col-sm-4 col-lg-12 col-xxl-4 d-flex justify-
content-sm-end justify-content-md-start justify-content-xxl-end">
<div class="badge bg-label-secondary">834 Views</div>
</div>
</div>
</li>
<li class="d-flex mb-4 pb-1 align-items-center">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-success"
><i class="ti ti-camera ti-md"></i
></span>
</div>
<div class="row w-100 align-items-center">
<div class="col-sm-8 col-lg-12 col-xxl-8 mb-1 mb-sm-0
mb-lg-1 mb-xxl-0">
<p class="mb-0 fw-medium">Basic Fundamentals of
Photography</p>
</div>
<div
class="col-sm-4 col-lg-12 col-xxl-4 d-flex justify-
content-sm-end justify-content-md-start justify-content-xxl-end">
<div class="badge bg-label-secondary">3.7k
Views</div>
</div>
</div>
</li>
<li class="d-flex mb-4 pb-1 align-items-center">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-warning"
><i class="ti ti-brand-dribbble ti-md"></i
></span>
</div>
<div class="row w-100 align-items-center">
<div class="col-sm-8 col-lg-12 col-xxl-8 mb-1 mb-sm-0
mb-lg-1 mb-xxl-0">
<p class="mb-0 fw-medium">Advance Dribble Base Visual
Design</p>
</div>
<div
class="col-sm-4 col-lg-12 col-xxl-4 d-flex justify-
content-sm-end justify-content-md-start justify-content-xxl-end">
<div class="badge bg-label-secondary">2.5k
Views</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-danger"
><i class="ti ti-microphone-2 ti-md"></i
></span>
</div>
<div class="row w-100 align-items-center">
<div class="col-sm-8 col-lg-12 col-xxl-8 mb-1 mb-sm-0
mb-lg-1 mb-xxl-0">
<p class="mb-0 fw-medium">Your First Singing
Lesson</p>
</div>
<div
class="col-sm-4 col-lg-12 col-xxl-4 d-flex justify-
content-sm-end justify-content-md-start justify-content-xxl-end">
<div class="badge bg-label-secondary">948 Views</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>

<div class="col-12 col-xl-4 col-md-6">


<div class="card h-100">
<div class="card-body">
<div class="bg-label-primary rounded-3 text-center mb-3 pt-
4">
<img
class="img-fluid"
src="../../assets/img/illustrations/girl-with-laptop.png"
alt="Card girl image"
width="140" />
</div>
<h4 class="mb-2 pb-1">Upcoming Webinar</h4>
<p class="small">
Next Generation Frontend Architecture Using Layout Engine
And React Native Web.
</p>
<div class="row mb-3 g-3">
<div class="col-6">
<div class="d-flex">
<div class="avatar flex-shrink-0 me-2">
<span class="avatar-initial rounded bg-label-primary"
><i class="ti ti-calendar-event ti-md"></i
></span>
</div>
<div>
<h6 class="mb-0 text-nowrap">17 Nov 23</h6>
<small>Date</small>
</div>
</div>
</div>
<div class="col-6">
<div class="d-flex">
<div class="avatar flex-shrink-0 me-2">
<span class="avatar-initial rounded bg-label-primary"
><i class="ti ti-clock ti-md"></i
></span>
</div>
<div>
<h6 class="mb-0 text-nowrap">32 minutes</h6>
<small>Duration</small>
</div>
</div>
</div>
</div>
<a href="javascript:void(0);" class="btn btn-primary w-
100">Join the event</a>
</div>
</div>
</div>

<div class="col-12 col-xl-4 col-md-6">


<div class="card h-100">
<div class="card-header d-flex align-items-center justify-
content-between">
<h5 class="card-title m-0 me-2">Assignment Progress</h5>
</div>
<div class="card-body">
<ul class="p-0 m-0">
<li class="d-flex mb-3 pb-1">
<div
class="chart-progress me-3"
data-color="primary"
data-series="72"
data-progress_variant="true"></div>
<div class="row w-100 align-items-center">
<div class="col-9">
<div class="me-2">
<h6 class="mb-2">User experience Design</h6>
<small>120 Tasks</small>
</div>
</div>
<div class="col-3 text-end">
<button type="button" class="btn btn-sm btn-icon btn-
label-secondary">
<i class="ti ti-chevron-right scaleX-n1-rtl"></i>
</button>
</div>
</div>
</li>
<li class="d-flex mb-3 pb-1">
<div
class="chart-progress me-3"
data-color="success"
data-series="48"
data-progress_variant="true"></div>
<div class="row w-100 align-items-center">
<div class="col-9">
<div class="me-2">
<h6 class="mb-2">Basic fundamentals</h6>
<small>32 Tasks</small>
</div>
</div>
<div class="col-3 text-end">
<button type="button" class="btn btn-sm btn-icon btn-
label-secondary">
<i class="ti ti-chevron-right scaleX-n1-rtl"></i>
</button>
</div>
</div>
</li>
<li class="d-flex mb-3 pb-1">
<div
class="chart-progress me-3"
data-color="danger"
data-series="15"
data-progress_variant="true"></div>
<div class="row w-100 align-items-center">
<div class="col-9">
<div class="me-2">
<h6 class="mb-2">React native components</h6>
<small>182 Tasks</small>
</div>
</div>
<div class="col-3 text-end">
<button type="button" class="btn btn-sm btn-icon btn-
label-secondary">
<i class="ti ti-chevron-right scaleX-n1-rtl"></i>
</button>
</div>
</div>
</li>
<li class="d-flex">
<div
class="chart-progress me-3"
data-color="info"
data-series="24"
data-progress_variant="true"></div>
<div class="row w-100 align-items-center">
<div class="col-9">
<div class="me-2">
<h6 class="mb-2">Basic of music theory</h6>
<small>56 Tasks</small>
</div>
</div>
<div class="col-3 text-end">
<button type="button" class="btn btn-sm btn-icon btn-
label-secondary">
<i class="ti ti-chevron-right scaleX-n1-rtl"></i>
</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Topic and Instructors End-->

<!-- Course datatable -->


<div class="card mb-4">
<div class="table-responsive mb-3">
<table class="table datatables-academy-course">
<thead class="border-top">
<tr>
<th></th>
<th></th>
<th>Course Name</th>
<th>Time</th>
<th class="w-25">Progress</th>
<th class="w-25">Status</th>
</tr>
</thead>
</table>
</div>
</div>

<!-- Course datatable End -->


</div>
<!-- / Content -->

<!-- Footer -->


<footer class="content-footer footer bg-footer-theme">
<div class="container-xxl">
<div
class="footer-container d-flex align-items-center justify-
content-between py-2 flex-md-row flex-column">
<div>
©
<script>
document.write(new Date().getFullYear());
</script>
, made with ❤️ by <a href="https://pixinvent.com"
target="_blank" class="fw-medium">Pixinvent</a>
</div>
<div class="d-none d-lg-inline-block">
<a href="https://themeforest.net/licenses/standard"
class="footer-link me-4" target="_blank"
>License</a
>
<a href="https://1.envato.market/pixinvent_portfolio"
target="_blank" class="footer-link me-4"
>More Themes</a
>

<a

href="https://demos.pixinvent.com/vuexy-html-admin-template/documentation/"
target="_blank"
class="footer-link me-4"
>Documentation</a
>

<a href="https://pixinvent.ticksy.com/" target="_blank"


class="footer-link d-none d-sm-inline-block"
>Support</a
>
</div>
</div>
</div>
</footer>
<!-- / Footer -->

<div class="content-backdrop fade"></div>


</div>
<!-- Content wrapper -->
</div>
<!-- / Layout page -->
</div>

<!-- Overlay -->


<div class="layout-overlay layout-menu-toggle"></div>
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!-- / Layout wrapper -->

<!-- Core JS -->


<!-- build:js assets/vendor/js/core.js -->

<script src="../../assets/vendor/libs/jquery/jquery.js"></script>
<script src="../../assets/vendor/libs/popper/popper.js"></script>
<script src="../../assets/vendor/js/bootstrap.js"></script>
<script src="../../assets/vendor/libs/node-waves/node-waves.js"></script>
<script src="../../assets/vendor/libs/perfect-scrollbar/perfect-
scrollbar.js"></script>
<script src="../../assets/vendor/libs/hammer/hammer.js"></script>
<script src="../../assets/vendor/libs/i18n/i18n.js"></script>
<script src="../../assets/vendor/libs/typeahead-js/typeahead.js"></script>
<script src="../../assets/vendor/js/menu.js"></script>

<!-- endbuild -->

<!-- Vendors JS -->


<script src="../../assets/vendor/libs/moment/moment.js"></script>
<script src="../../assets/vendor/libs/datatables-bs5/datatables-
bootstrap5.js"></script>
<script src="../../assets/vendor/libs/apex-charts/apexcharts.js"></script>

<!-- Main JS -->


<script src="../../assets/js/main.js"></script>

<!-- Page JS -->


<script src="../../assets/js/app-academy-dashboard.js"></script>
</body>
</html>

You might also like