Files
site/res/templates/blog-detail.html
2025-12-26 22:35:18 +08:00

3887 lines
204 KiB
HTML

<!DOCTYPE html>
<html lang="en" dir="ltr" data-bs-theme="light" data-color-theme="Blue_Theme" data-layout="vertical">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicon icon-->
<link rel="shortcut icon" type="image/png" href="../assets/images/logos/favicon.png" />
<!-- Core Css -->
<link rel="stylesheet" href="../assets/css/styles.css" />
<title>Modernize Bootstrap Admin</title>
</head>
<body class="link-sidebar">
<!-- Preloader -->
<div class="preloader">
<img src="../assets/images/logos/favicon.png" alt="loader" class="lds-ripple img-fluid" />
</div>
<div id="main-wrapper">
<!-- Sidebar Start -->
<aside class="left-sidebar with-vertical">
<div><!-- ---------------------------------- -->
<!-- Start Vertical Layout Sidebar -->
<!-- ---------------------------------- -->
<div class="brand-logo d-flex align-items-center justify-content-between">
<a href="../main/index.html" class="text-nowrap logo-img">
<img src="../assets/images/logos/dark-logo.svg" class="dark-logo" alt="Logo-Dark" />
<img src="../assets/images/logos/light-logo.svg" class="light-logo" alt="Logo-light" />
</a>
<a href="javascript:void(0)" class="sidebartoggler ms-auto text-decoration-none fs-5 d-block d-xl-none">
<i class="ti ti-x"></i>
</a>
</div>
<nav class="sidebar-nav scroll-sidebar" data-simplebar>
<ul id="sidebarnav">
<!-- ---------------------------------- -->
<!-- Home -->
<!-- ---------------------------------- -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Home</span>
</li>
<!-- ---------------------------------- -->
<!-- Dashboard -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link" href="" id="get-url" aria-expanded="false">
<span>
<i class="ti ti-aperture"></i>
</span>
<span class="hide-menu">Modern</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/index2.html" aria-expanded="false">
<span>
<i class="ti ti-shopping-cart"></i>
</span>
<span class="hide-menu">eCommerce</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/index3.html" aria-expanded="false">
<span>
<i class="ti ti-currency-dollar"></i>
</span>
<span class="hide-menu">NFT</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/index4.html" aria-expanded="false">
<span>
<i class="ti ti-cpu"></i>
</span>
<span class="hide-menu">Crypto</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/index5.html" aria-expanded="false">
<span>
<i class="ti ti-activity-heartbeat"></i>
</span>
<span class="hide-menu">General</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/index6.html" aria-expanded="false">
<span>
<i class="ti ti-playlist"></i>
</span>
<span class="hide-menu">Music</span>
</a>
</li>
<!-- ---------------------------------- -->
<!-- Frontend page -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-layout-grid"></i>
</span>
<span class="hide-menu">Frontend page</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/frontend-landingpage.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Homepage</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/frontend-aboutpage.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">About Us</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/frontend-contactpage.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Contact Us</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/frontend-blogpage.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Blog</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/frontend-blogdetailpage.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Blog Details</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Apps -->
<!-- ---------------------------------- -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Apps</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/app-calendar.html" aria-expanded="false">
<span>
<i class="ti ti-calendar"></i>
</span>
<span class="hide-menu">Calendar</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/app-kanban.html" aria-expanded="false">
<span>
<i class="ti ti-layout-kanban"></i>
</span>
<span class="hide-menu">Kanban</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/app-chat.html" aria-expanded="false">
<span>
<i class="ti ti-message-dots"></i>
</span>
<span class="hide-menu">Chat</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/app-email.html" aria-expanded="false">
<span>
<i class="ti ti-mail"></i>
</span>
<span class="hide-menu">Email</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/app-notes.html" aria-expanded="false">
<span>
<i class="ti ti-notes"></i>
</span>
<span class="hide-menu">Notes</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/app-contact.html" aria-expanded="false">
<span>
<i class="ti ti-phone"></i>
</span>
<span class="hide-menu">Contact Table</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/app-contact2.html" aria-expanded="false">
<span>
<i class="ti ti-list-details"></i>
</span>
<span class="hide-menu">Contact List</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/app-invoice.html" aria-expanded="false">
<span>
<i class="ti ti-file-text"></i>
</span>
<span class="hide-menu">Invoice</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/page-user-profile.html" aria-expanded="false">
<span>
<i class="ti ti-user-circle"></i>
</span>
<span class="hide-menu">User Profile</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-chart-donut-3"></i>
</span>
<span class="hide-menu">Blog</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/blog-posts.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Posts</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/blog-detail.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Details</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-basket"></i>
</span>
<span class="hide-menu">Ecommerce</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/eco-shop.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Shop</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/eco-shop-detail.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Details</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/eco-product-list.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">List</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/eco-checkout.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Checkout</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/eco-add-product.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Add Product</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/eco-edit-product.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Edit Product</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- PAGES -->
<!-- ---------------------------------- -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">PAGES</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/page-pricing.html" aria-expanded="false">
<span>
<i class="ti ti-currency-dollar"></i>
</span>
<span class="hide-menu">Pricing</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/page-faq.html" aria-expanded="false">
<span>
<i class="ti ti-help"></i>
</span>
<span class="hide-menu">FAQ</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/page-account-settings.html" aria-expanded="false">
<span>
<i class="ti ti-user-circle"></i>
</span>
<span class="hide-menu">Account Setting</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../landingpage/index.html" aria-expanded="false">
<span>
<i class="ti ti-app-window"></i>
</span>
<span class="hide-menu">Landing Page</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-layout"></i>
</span>
<span class="hide-menu">Widgets</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/widgets-cards.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Cards</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/widgets-banners.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Banner</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/widgets-charts.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Charts</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/widgets-feeds.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Feed Widgets</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/widgets-apps.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Apps Widgets</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/widgets-data.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Data Widgets</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- UI -->
<!-- ---------------------------------- -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">UI</span>
</li>
<!-- ---------------------------------- -->
<!-- UI Elements -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-layout-grid"></i>
</span>
<span class="hide-menu">UI Elements</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/ui-accordian.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Accordian</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-badge.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Badge</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-buttons.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Buttons</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-dropdowns.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Dropdowns</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-modals.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Modals</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-tab.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Tab</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-tooltip-popover.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Tooltip & Popover</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-notification.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Alerts</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-progressbar.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Progressbar</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-pagination.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Pagination</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-typography.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Typography</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-bootstrap-ui.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Bootstrap UI</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-breadcrumb.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Breadcrumb</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-offcanvas.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Offcanvas</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-lists.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Lists</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-grid.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Grid</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-carousel.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Carousel</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-scrollspy.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Scrollspy</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-spinner.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Spinner</span>
</a>
</li>
<li class="sidebar-item mb-3">
<a href="../main/ui-link.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Link</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Cards -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-cards"></i>
</span>
<span class="hide-menu">Cards</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/ui-cards.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Basic Cards</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-card-customs.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Custom Cards</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-card-weather.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Weather Cards</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-card-draggable.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Draggable Cards</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Component -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-components"></i>
</span>
<span class="hide-menu">Component</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/component-sweetalert.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Sweet Alert</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/component-nestable.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Nestable</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/component-noui-slider.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Noui slider</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/component-rating.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Rating</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/component-toastr.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Toastr</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Forms -->
<!-- ---------------------------------- -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Forms</span>
</li>
<!-- ---------------------------------- -->
<!-- Form Elements -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-file-text"></i>
</span>
<span class="hide-menu">Form Elements</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/form-inputs.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Forms Input</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-input-groups.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Input Groups</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-input-grid.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Input Grid</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-checkbox-radio.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Checkbox & Radios</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-bootstrap-switch.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Bootstrap Switch</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-select2.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Select2</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Form Addons -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-qrcode"></i>
</span>
<span class="hide-menu">Form Addons</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/form-dropzone.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Dropzone</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-mask.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Form Mask</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-typeahead.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Form Typehead</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Form Validation -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-alert-circle"></i>
</span>
<span class="hide-menu">Form Validation</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/form-bootstrap-validation.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Bootstrap Validation</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-custom-validation.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Custom Validation</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Form Pickers -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-file-pencil"></i>
</span>
<span class="hide-menu">Form Pickers</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/form-picker-colorpicker.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Colorpicker</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-picker-bootstrap-rangepicker.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Bootstrap Rangepicker</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-picker-bootstrap-datepicker.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Bootstrap Datepicker</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-picker-material-datepicker.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Material Datepicker</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Form Editor -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-dna"></i>
</span>
<span class="hide-menu">Form Editor</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/form-editor-quill.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Quill Editor</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-editor-tinymce.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Tinymce Editor</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Form Input -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link" href="../main/form-basic.html" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-archive"></i>
</span>
<span class="hide-menu">Basic Form</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/form-vertical.html" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-box-align-left"></i>
</span>
<span class="hide-menu">Form Vertical</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/form-horizontal.html" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-box-align-bottom"></i>
</span>
<span class="hide-menu">Form Horizontal</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/form-actions.html" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-file-export"></i>
</span>
<span class="hide-menu">Form Actions</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/form-row-separator.html" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-separator-horizontal"></i>
</span>
<span class="hide-menu">Row Separator</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/form-bordered.html" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-border-outer"></i>
</span>
<span class="hide-menu">Form Bordered</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/form-detail.html" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-file-description"></i>
</span>
<span class="hide-menu">Form Detail</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/form-striped-row.html" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-file-analytics"></i>
</span>
<span class="hide-menu">Striped Rows</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/form-floating-input.html" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-file-dots"></i>
</span>
<span class="hide-menu">Form Floating Input</span>
</a>
</li>
<!-- ---------------------------------- -->
<!-- Form Wizard -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link" href="../main/form-wizard.html" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-files"></i>
</span>
<span class="hide-menu">Form Wizard</span>
</a>
</li>
<!-- ---------------------------------- -->
<!-- Form Repeater -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link" href="../main/form-repeater.html" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-topology-star-3"></i>
</span>
<span class="hide-menu">Form Repeater</span>
</a>
</li>
<!-- ---------------------------------- -->
<!-- Tables -->
<!-- ---------------------------------- -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Tables</span>
</li>
<!-- ---------------------------------- -->
<!-- Bootstrap Table -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-layout-sidebar"></i>
</span>
<span class="hide-menu">Bootstrap Table</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/table-basic.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Basic Table</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/table-dark-basic.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Dark Basic Table</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/table-sizing.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Sizing Table</span>
</a>
</li>
<li class="sidebar-item mb-3">
<a href="../main/table-layout-coloured.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Coloured Table</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Datatable -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-air-conditioning-disabled"></i>
</span>
<span class="hide-menu">Datatables</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/table-datatable-basic.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Basic Initialisation</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/table-datatable-api.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">API</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/table-datatable-advanced.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Advanced Initialisation</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Table Jsgrid -->
<!-- ---------------------------------- -->
<!-- ---------------------------------- -->
<!-- Charts -->
<!-- ---------------------------------- -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Charts</span>
</li>
<!-- ---------------------------------- -->
<!-- Apex Chart -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-chart-pie"></i>
</span>
<span class="hide-menu">Apex Charts</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/chart-apex-line.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Line Chart</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/chart-apex-area.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Area Chart</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/chart-apex-bar.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Bar Chart</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/chart-apex-pie.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Pie Chart</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/chart-apex-radial.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Radial Chart</span>
</a>
</li>
<li class="sidebar-item mb-3">
<a href="../main/chart-apex-radar.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Radar Chart</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Sample Pages -->
<!-- ---------------------------------- -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Sample Pages</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-file"></i>
</span>
<span class="hide-menu">Sample Pages</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/pages-animation.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Animation</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/pages-search-result.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Search Result</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/pages-gallery.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Gallery</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/pages-treeview.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Treeview</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/pages-block-ui.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Block-Ui</span>
</a>
</li>
<li class="sidebar-item mb-3">
<a href="../main/pages-session-timeout.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Session Timeout</span>
</a>
</li>
</ul>
</li>
<!-- ---------------------------------- -->
<!-- Icons -->
<!-- ---------------------------------- -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Icons</span>
</li>
<!-- ---------------------------------- -->
<!-- Tabler Icon -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link sidebar-link" href="../main/icon-tabler.html" aria-expanded="false">
<span class="rounded-3">
<i class="ti ti-archive"></i>
</span>
<span class="hide-menu">Tabler Icon</span>
</a>
</li>
<!-- ---------------------------------- -->
<!-- Solar Icon -->
<!-- ---------------------------------- -->
<li class="sidebar-item">
<a class="sidebar-link sidebar-link" href="../main/icon-solar.html" aria-expanded="false">
<span class="rounded-3">
<i class="ti ti-mood-smile"></i>
</span>
<span class="hide-menu">Solar Icon</span>
</a>
</li>
<!-- ---------------------------------- -->
<!-- AUTH -->
<!-- ---------------------------------- -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">AUTH</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link sidebar-link" href="../main/authentication-error.html" aria-expanded="false">
<span class="rounded-3">
<i class="ti ti-alert-circle"></i>
</span>
<span class="hide-menu">Error</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-login"></i>
</span>
<span class="hide-menu">Login</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/authentication-login.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Side Login</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/authentication-login2.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Boxed Login</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-user-plus"></i>
</span>
<span class="hide-menu">Register</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/authentication-register.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Side Register</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/authentication-register2.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Boxed Register</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-rotate"></i>
</span>
<span class="hide-menu">Forgot Password</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/authentication-forgot-password.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Side Forgot Password</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/authentication-forgot-password2.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Boxed Forgot Password</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-zoom-code"></i>
</span>
<span class="hide-menu">Two Steps</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/authentication-two-steps.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Side Two Steps</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/authentication-two-steps2.html" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Boxed Two Steps</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-item">
<a class="sidebar-link sidebar-link" href="../main/authentication-maintenance.html" aria-expanded="false">
<span class="rounded-3">
<i class="ti ti-settings"></i>
</span>
<span class="hide-menu">Maintenance</span>
</a>
</li>
<!-- ---------------------------------- -->
<!-- DOCUMENTATION -->
<!-- ---------------------------------- -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">DOCUMENTATION</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link sidebar-link" href="../docs/index.html" aria-expanded="false">
<span class="rounded-3">
<i class="ti ti-file-text"></i>
</span>
<span class="hide-menu">Getting Started</span>
</a>
</li>
<!-- ---------------------------------- -->
<!-- OTHER -->
<!-- ---------------------------------- -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">OTHER</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-box-multiple"></i>
</span>
<span class="hide-menu">Menu Level</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="javascript:void(0)" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Level 1</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Level 1.1</span>
</a>
<ul aria-expanded="false" class="collapse two-level">
<li class="sidebar-item">
<a href="javascript:void(0)" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Level 2</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Level 2.1</span>
</a>
<ul aria-expanded="false" class="collapse three-level">
<li class="sidebar-item">
<a href="javascript:void(0)" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Level 3</span>
</a>
</li>
<li class="sidebar-item">
<a href="javascript:void(0)" class="sidebar-link">
<div class="round-16 d-flex align-items-center justify-content-center">
<i class="ti ti-circle"></i>
</div>
<span class="hide-menu">Level 3.1</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-item">
<a class="sidebar-link link-disabled" href="#disabled" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-ban"></i>
</span>
<span class="hide-menu">Disabled</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="#sub" aria-expanded="false">
<i class="ti ti-star"></i>
<div class="hide-menu lh-base">
<span class="hide-menu d-block">SubCaption</span>
<span class="hide-menu d-block fs-2">This is the sutitle</span>
</div>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link justify-content-between" href="#chip" aria-expanded="false">
<div class="d-flex align-items-center gap-3">
<span class="d-flex">
<i class="ti ti-award"></i>
</span>
<span class="hide-menu">Chip</span>
</div>
<div class="hide-menu">
<span class="badge rounded-circle bg-primary d-flex align-items-center justify-content-center rounded-pill fs-2">9</span>
</div>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link justify-content-between" href="#outlined" aria-expanded="false">
<div class="d-flex align-items-center gap-3">
<span class="d-flex">
<i class="ti ti-mood-smile"></i>
</span>
<span class="hide-menu">Outlined</span>
</div>
<span class="hide-menu badge rounded-pill border border-primary text-primary fs-2 py-1 px-2">Outline</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="https://google.com" aria-expanded="false">
<span class="d-flex">
<i class="ti ti-star"></i>
</span>
<span class="hide-menu">External Link</span>
</a>
</li>
</ul>
</nav>
<div class="fixed-profile p-3 mx-4 mb-2 bg-secondary-subtle rounded mt-3">
<div class="hstack gap-3">
<div class="john-img">
<img src="../assets/images/profile/user-1.jpg" class="rounded-circle" width="40" height="40" alt="modernize-img" />
</div>
<div class="john-title">
<h6 class="mb-0 fs-4 fw-semibold">Mathew</h6>
<span class="fs-2">Designer</span>
</div>
<button class="border-0 bg-transparent text-primary ms-auto" tabindex="0" type="button" aria-label="logout" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="logout">
<i class="ti ti-power fs-6"></i>
</button>
</div>
</div>
<!-- ---------------------------------- -->
<!-- Start Vertical Layout Sidebar -->
<!-- ---------------------------------- -->
</div>
</aside>
<!-- Sidebar End -->
<div class="page-wrapper">
<!-- Header Start -->
<header class="topbar">
<div class="with-vertical"><!-- ---------------------------------- -->
<!-- Start Vertical Layout Header -->
<!-- ---------------------------------- -->
<nav class="navbar navbar-expand-lg p-0">
<ul class="navbar-nav">
<li class="nav-item nav-icon-hover-bg rounded-circle ms-n2">
<a class="nav-link sidebartoggler" id="headerCollapse" href="javascript:void(0)">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="nav-item nav-icon-hover-bg rounded-circle d-none d-lg-flex">
<a class="nav-link" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#exampleModal">
<i class="ti ti-search"></i>
</a>
</li>
</ul>
<ul class="navbar-nav quick-links d-none d-lg-flex align-items-center">
<!-- ------------------------------- -->
<!-- start apps Dropdown -->
<!-- ------------------------------- -->
<li class="nav-item nav-icon-hover-bg rounded w-auto dropdown d-none d-lg-block mx-0">
<div class="hover-dd">
<a class="nav-link" href="javascript:void(0)">
Apps<span class="mt-1">
<i class="ti ti-chevron-down fs-3"></i>
</span>
</a>
<div class="dropdown-menu dropdown-menu-nav dropdown-menu-animate-up py-0">
<div class="row">
<div class="col-8">
<div class="ps-7 pt-7">
<div class="border-bottom">
<div class="row">
<div class="col-6">
<div class="position-relative">
<a href="../main/app-chat.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-chat.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">
Chat Application
</h6>
<span class="fs-2 d-block text-body-secondary">New messages arrived</span>
</div>
</a>
<a href="../main/app-invoice.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-invoice.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">Invoice App</h6>
<span class="fs-2 d-block text-body-secondary">Get latest invoice</span>
</div>
</a>
<a href="../main/app-contact2.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-mobile.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">
Contact Application
</h6>
<span class="fs-2 d-block text-body-secondary">2 Unsaved Contacts</span>
</div>
</a>
<a href="../main/app-email.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-message-box.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">Email App</h6>
<span class="fs-2 d-block text-body-secondary">Get new emails</span>
</div>
</a>
</div>
</div>
<div class="col-6">
<div class="position-relative">
<a href="../main/page-user-profile.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-cart.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">
User Profile
</h6>
<span class="fs-2 d-block text-body-secondary">learn more information</span>
</div>
</a>
<a href="../main/app-calendar.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-date.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">
Calendar App
</h6>
<span class="fs-2 d-block text-body-secondary">Get dates</span>
</div>
</a>
<a href="../main/app-contact.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-lifebuoy.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">
Contact List Table
</h6>
<span class="fs-2 d-block text-body-secondary">Add new contact</span>
</div>
</a>
<a href="../main/app-notes.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-application.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">
Notes Application
</h6>
<span class="fs-2 d-block text-body-secondary">To-do and Daily tasks</span>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="row align-items-center py-3">
<div class="col-8">
<a class="fw-semibold d-flex align-items-center lh-1" href="javascript:void(0)">
<i class="ti ti-help fs-6 me-2"></i>Frequently Asked Questions
</a>
</div>
<div class="col-4">
<div class="d-flex justify-content-end pe-4">
<button class="btn btn-primary">Check</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 ms-n4">
<div class="position-relative p-7 border-start h-100">
<h5 class="fs-5 mb-9 fw-semibold">Quick Links</h5>
<ul class="">
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/page-pricing.html">Pricing Page</a>
</li>
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/authentication-login.html">Authentication
Design</a>
</li>
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/authentication-register.html">Register Now</a>
</li>
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/authentication-error.html">404 Error Page</a>
</li>
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/app-notes.html">Notes App</a>
</li>
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/page-user-profile.html">User Application</a>
</li>
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/page-account-settings.html">Account Settings</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- ------------------------------- -->
<!-- end apps Dropdown -->
<!-- ------------------------------- -->
<li class="nav-item dropdown-hover d-none d-lg-block">
<a class="nav-link" href="../main/app-chat.html">Chat</a>
</li>
<li class="nav-item dropdown-hover d-none d-lg-block">
<a class="nav-link" href="../main/app-calendar.html">Calendar</a>
</li>
<li class="nav-item dropdown-hover d-none d-lg-block">
<a class="nav-link" href="../main/app-email.html">Email</a>
</li>
</ul>
<div class="d-block d-lg-none py-4">
<a href="../main/index.html" class="text-nowrap logo-img">
<img src="../assets/images/logos/dark-logo.svg" class="dark-logo" alt="Logo-Dark" />
<img src="../assets/images/logos/light-logo.svg" class="light-logo" alt="Logo-light" />
</a>
</div>
<a class="navbar-toggler nav-icon-hover-bg rounded-circle p-0 mx-0 border-0" href="javascript:void(0)" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="ti ti-dots fs-7"></i>
</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<div class="d-flex align-items-center justify-content-between">
<a href="javascript:void(0)" class="nav-link nav-icon-hover-bg rounded-circle mx-0 ms-n1 d-flex d-lg-none align-items-center justify-content-center" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobilenavbar" aria-controls="offcanvasWithBothOptions">
<i class="ti ti-align-justified fs-7"></i>
</a>
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-center">
<!-- ------------------------------- -->
<!-- start language Dropdown -->
<!-- ------------------------------- -->
<li class="nav-item nav-icon-hover-bg rounded-circle">
<a class="nav-link moon dark-layout" href="javascript:void(0)">
<i class="ti ti-moon moon"></i>
</a>
<a class="nav-link sun light-layout" href="javascript:void(0)">
<i class="ti ti-sun sun"></i>
</a>
</li>
<li class="nav-item nav-icon-hover-bg rounded-circle dropdown">
<a class="nav-link" href="javascript:void(0)" id="drop2" aria-expanded="false">
<img src="../assets/images/svgs/icon-flag-en.svg" alt="modernize-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
<div class="message-body">
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
<div class="position-relative">
<img src="../assets/images/svgs/icon-flag-en.svg" alt="modernize-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
</div>
<p class="mb-0 fs-3">English (UK)</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
<div class="position-relative">
<img src="../assets/images/svgs/icon-flag-cn.svg" alt="modernize-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
</div>
<p class="mb-0 fs-3">中国人 (Chinese)</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
<div class="position-relative">
<img src="../assets/images/svgs/icon-flag-fr.svg" alt="modernize-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
</div>
<p class="mb-0 fs-3">français (French)</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
<div class="position-relative">
<img src="../assets/images/svgs/icon-flag-sa.svg" alt="modernize-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
</div>
<p class="mb-0 fs-3">عربي (Arabic)</p>
</a>
</div>
</div>
</li>
<!-- ------------------------------- -->
<!-- end language Dropdown -->
<!-- ------------------------------- -->
<!-- ------------------------------- -->
<!-- start shopping cart Dropdown -->
<!-- ------------------------------- -->
<li class="nav-item nav-icon-hover-bg rounded-circle">
<a class="nav-link position-relative" href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
<i class="ti ti-basket"></i>
<span class="popup-badge rounded-pill bg-danger text-white fs-2">2</span>
</a>
</li>
<!-- ------------------------------- -->
<!-- end shopping cart Dropdown -->
<!-- ------------------------------- -->
<!-- ------------------------------- -->
<!-- start notification Dropdown -->
<!-- ------------------------------- -->
<li class="nav-item nav-icon-hover-bg rounded-circle dropdown">
<a class="nav-link position-relative" href="javascript:void(0)" id="drop2" aria-expanded="false">
<i class="ti ti-bell-ringing"></i>
<div class="notification bg-primary rounded-circle"></div>
</a>
<div class="dropdown-menu content-dd dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
<div class="d-flex align-items-center justify-content-between py-3 px-7">
<h5 class="mb-0 fs-5 fw-semibold">Notifications</h5>
<span class="badge text-bg-primary rounded-4 px-3 py-1 lh-sm">5 new</span>
</div>
<div class="message-body" data-simplebar>
<a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
<span class="me-3">
<img src="../assets/images/profile/user-2.jpg" alt="user" class="rounded-circle" width="48" height="48" />
</span>
<div class="w-100">
<h6 class="mb-1 fw-semibold lh-base">Roman Joined the Team!</h6>
<span class="fs-2 d-block text-body-secondary">Congratulate him</span>
</div>
</a>
<a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
<span class="me-3">
<img src="../assets/images/profile/user-3.jpg" alt="user" class="rounded-circle" width="48" height="48" />
</span>
<div class="w-100">
<h6 class="mb-1 fw-semibold lh-base">New message</h6>
<span class="fs-2 d-block text-body-secondary">Salma sent you new message</span>
</div>
</a>
<a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
<span class="me-3">
<img src="../assets/images/profile/user-4.jpg" alt="user" class="rounded-circle" width="48" height="48" />
</span>
<div class="w-100">
<h6 class="mb-1 fw-semibold lh-base">Bianca sent payment</h6>
<span class="fs-2 d-block text-body-secondary">Check your earnings</span>
</div>
</a>
<a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
<span class="me-3">
<img src="../assets/images/profile/user-5.jpg" alt="user" class="rounded-circle" width="48" height="48" />
</span>
<div class="w-100">
<h6 class="mb-1 fw-semibold lh-base">Jolly completed tasks</h6>
<span class="fs-2 d-block text-body-secondary">Assign her new tasks</span>
</div>
</a>
<a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
<span class="me-3">
<img src="../assets/images/profile/user-6.jpg" alt="user" class="rounded-circle" width="48" height="48" />
</span>
<div class="w-100">
<h6 class="mb-1 fw-semibold lh-base">John received payment</h6>
<span class="fs-2 d-block text-body-secondary">$230 deducted from account</span>
</div>
</a>
<a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
<span class="me-3">
<img src="../assets/images/profile/user-7.jpg" alt="user" class="rounded-circle" width="48" height="48" />
</span>
<div class="w-100">
<h6 class="mb-1 fw-semibold lh-base">Roman Joined the Team!</h6>
<span class="fs-2 d-block text-body-secondary">Congratulate him</span>
</div>
</a>
</div>
<div class="py-6 px-7 mb-1">
<button class="btn btn-outline-primary w-100">See All Notifications</button>
</div>
</div>
</li>
<!-- ------------------------------- -->
<!-- end notification Dropdown -->
<!-- ------------------------------- -->
<!-- ------------------------------- -->
<!-- start profile Dropdown -->
<!-- ------------------------------- -->
<li class="nav-item dropdown">
<a class="nav-link pe-0" href="javascript:void(0)" id="drop1" aria-expanded="false">
<div class="d-flex align-items-center">
<div class="user-profile-img">
<img src="../assets/images/profile/user-1.jpg" class="rounded-circle" width="35" height="35" alt="modernize-img" />
</div>
</div>
</a>
<div class="dropdown-menu content-dd dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop1">
<div class="profile-dropdown position-relative" data-simplebar>
<div class="py-3 px-7 pb-0">
<h5 class="mb-0 fs-5 fw-semibold">User Profile</h5>
</div>
<div class="d-flex align-items-center py-9 mx-7 border-bottom">
<img src="../assets/images/profile/user-1.jpg" class="rounded-circle" width="80" height="80" alt="modernize-img" />
<div class="ms-3">
<h5 class="mb-1 fs-3">Mathew Anderson</h5>
<span class="mb-1 d-block">Designer</span>
<p class="mb-0 d-flex align-items-center gap-2">
<i class="ti ti-mail fs-4"></i> info@modernize.com
</p>
</div>
</div>
<div class="message-body">
<a href="../main/page-user-profile.html" class="py-8 px-7 mt-8 d-flex align-items-center">
<span class="d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6">
<img src="../assets/images/svgs/icon-account.svg" alt="modernize-img" width="24" height="24" />
</span>
<div class="w-100 ps-3">
<h6 class="mb-1 fs-3 fw-semibold lh-base">My Profile</h6>
<span class="fs-2 d-block text-body-secondary">Account Settings</span>
</div>
</a>
<a href="../main/app-email.html" class="py-8 px-7 d-flex align-items-center">
<span class="d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6">
<img src="../assets/images/svgs/icon-inbox.svg" alt="modernize-img" width="24" height="24" />
</span>
<div class="w-100 ps-3">
<h6 class="mb-1 fs-3 fw-semibold lh-base">My Inbox</h6>
<span class="fs-2 d-block text-body-secondary">Messages & Emails</span>
</div>
</a>
<a href="../main/app-notes.html" class="py-8 px-7 d-flex align-items-center">
<span class="d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6">
<img src="../assets/images/svgs/icon-tasks.svg" alt="modernize-img" width="24" height="24" />
</span>
<div class="w-100 ps-3">
<h6 class="mb-1 fs-3 fw-semibold lh-base">My Task</h6>
<span class="fs-2 d-block text-body-secondary">To-do and Daily Tasks</span>
</div>
</a>
</div>
<div class="d-grid py-4 px-7 pt-8">
<div class="upgrade-plan bg-primary-subtle position-relative overflow-hidden rounded-4 p-4 mb-9">
<div class="row">
<div class="col-6">
<h5 class="fs-4 mb-3 fw-semibold">Unlimited Access</h5>
<button class="btn btn-primary">Upgrade</button>
</div>
<div class="col-6">
<div class="m-n4 unlimited-img">
<img src="../assets/images/backgrounds/unlimited-bg.png" alt="modernize-img" class="w-100" />
</div>
</div>
</div>
</div>
<a href="../main/authentication-login.html" class="btn btn-outline-primary">Log Out</a>
</div>
</div>
</div>
</li>
<!-- ------------------------------- -->
<!-- end profile Dropdown -->
<!-- ------------------------------- -->
</ul>
</div>
</div>
</nav>
<!-- ---------------------------------- -->
<!-- End Vertical Layout Header -->
<!-- ---------------------------------- -->
<!-- ------------------------------- -->
<!-- apps Dropdown in Small screen -->
<!-- ------------------------------- -->
<!-- Mobilenavbar -->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="mobilenavbar" aria-labelledby="offcanvasWithBothOptionsLabel">
<nav class="sidebar-nav scroll-sidebar">
<div class="offcanvas-header justify-content-between">
<img src="../assets/images/logos/favicon.ico" alt="modernize-img" class="img-fluid" />
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body h-n80" data-simplebar="" data-simplebar>
<ul id="sidebarnav">
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span>
<i class="ti ti-apps"></i>
</span>
<span class="hide-menu">Apps</span>
</a>
<ul aria-expanded="false" class="collapse first-level my-3">
<li class="sidebar-item py-2">
<a href="../main/app-chat.html" class="d-flex align-items-center">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-chat.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 bg-hover-primary">Chat Application</h6>
<span class="fs-2 d-block text-muted">New messages arrived</span>
</div>
</a>
</li>
<li class="sidebar-item py-2">
<a href="../main/app-invoice.html" class="d-flex align-items-center">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-invoice.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 bg-hover-primary">Invoice App</h6>
<span class="fs-2 d-block text-muted">Get latest invoice</span>
</div>
</a>
</li>
<li class="sidebar-item py-2">
<a href="../main/app-cotact.html" class="d-flex align-items-center">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-mobile.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 bg-hover-primary">Contact Application</h6>
<span class="fs-2 d-block text-muted">2 Unsaved Contacts</span>
</div>
</a>
</li>
<li class="sidebar-item py-2">
<a href="../main/app-email.html" class="d-flex align-items-center">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-message-box.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 bg-hover-primary">Email App</h6>
<span class="fs-2 d-block text-muted">Get new emails</span>
</div>
</a>
</li>
<li class="sidebar-item py-2">
<a href="../main/page-user-profile.html" class="d-flex align-items-center">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-cart.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 bg-hover-primary">User Profile</h6>
<span class="fs-2 d-block text-muted">learn more information</span>
</div>
</a>
</li>
<li class="sidebar-item py-2">
<a href="../main/app-calendar.html" class="d-flex align-items-center">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-date.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 bg-hover-primary">Calendar App</h6>
<span class="fs-2 d-block text-muted">Get dates</span>
</div>
</a>
</li>
<li class="sidebar-item py-2">
<a href="../main/app-contact2.html" class="d-flex align-items-center">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-lifebuoy.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 bg-hover-primary">Contact List Table</h6>
<span class="fs-2 d-block text-muted">Add new contact</span>
</div>
</a>
</li>
<li class="sidebar-item py-2">
<a href="../main/app-notes.html" class="d-flex align-items-center">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-application.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 bg-hover-primary">Notes Application</h6>
<span class="fs-2 d-block text-muted">To-do and Daily tasks</span>
</div>
</a>
</li>
<ul class="px-8 mt-7 mb-4">
<li class="sidebar-item mb-3">
<h5 class="fs-5 fw-semibold">Quick Links</h5>
</li>
<li class="sidebar-item py-2">
<a class="fw-semibold text-dark" href="../main/page-pricing.html">Pricing Page</a>
</li>
<li class="sidebar-item py-2">
<a class="fw-semibold text-dark" href="../main/authentication-login.html">Authentication
Design</a>
</li>
<li class="sidebar-item py-2">
<a class="fw-semibold text-dark" href="../main/authentication-register.html">Register Now</a>
</li>
<li class="sidebar-item py-2">
<a class="fw-semibold text-dark" href="../main/authentication-error.html">404 Error Page</a>
</li>
<li class="sidebar-item py-2">
<a class="fw-semibold text-dark" href="../main/app-notes.html">Notes App</a>
</li>
<li class="sidebar-item py-2">
<a class="fw-semibold text-dark" href="../main/page-user-profile.html">User Application</a>
</li>
<li class="sidebar-item py-2">
<a class="fw-semibold text-dark" href="../main/page-account-settings.html">Account Settings</a>
</li>
</ul>
</ul>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/app-chat.html" aria-expanded="false">
<span>
<i class="ti ti-message-dots"></i>
</span>
<span class="hide-menu">Chat</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/app-calendar.html" aria-expanded="false">
<span>
<i class="ti ti-calendar"></i>
</span>
<span class="hide-menu">Calendar</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/app-email.html" aria-expanded="false">
<span>
<i class="ti ti-mail"></i>
</span>
<span class="hide-menu">Email</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="app-header with-horizontal">
<nav class="navbar navbar-expand-xl container-fluid p-0">
<ul class="navbar-nav align-items-center">
<li class="nav-item nav-icon-hover-bg rounded-circle d-flex d-xl-none ms-n2">
<a class="nav-link sidebartoggler" id="sidebarCollapse" href="javascript:void(0)">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="nav-item d-none d-xl-block">
<a href="../main/index.html" class="text-nowrap nav-link">
<img src="../assets/images/logos/dark-logo.svg" class="dark-logo" width="180" alt="modernize-img" />
<img src="../assets/images/logos/light-logo.svg" class="light-logo" width="180" alt="modernize-img" />
</a>
</li>
<li class="nav-item nav-icon-hover-bg rounded-circle d-none d-xl-flex">
<a class="nav-link" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#exampleModal">
<i class="ti ti-search"></i>
</a>
</li>
</ul>
<ul class="navbar-nav quick-links d-none d-xl-flex align-items-center">
<!-- ------------------------------- -->
<!-- start apps Dropdown -->
<!-- ------------------------------- -->
<li class="nav-item nav-icon-hover-bg rounded w-auto dropdown d-none d-lg-flex">
<div class="hover-dd">
<a class="nav-link" href="javascript:void(0)">
Apps<span class="mt-1">
<i class="ti ti-chevron-down fs-3"></i>
</span>
</a>
<div class="dropdown-menu dropdown-menu-nav dropdown-menu-animate-up py-0">
<div class="row">
<div class="col-8">
<div class="ps-7 pt-7">
<div class="border-bottom">
<div class="row">
<div class="col-6">
<div class="position-relative">
<a href="../main/app-chat.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-chat.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">
Chat Application
</h6>
<span class="fs-2 d-block text-body-secondary">New messages arrived</span>
</div>
</a>
<a href="../main/app-invoice.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-invoice.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">Invoice App</h6>
<span class="fs-2 d-block text-body-secondary">Get latest invoice</span>
</div>
</a>
<a href="../main/app-contact2.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-mobile.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">
Contact Application
</h6>
<span class="fs-2 d-block text-body-secondary">2 Unsaved Contacts</span>
</div>
</a>
<a href="../main/app-email.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-message-box.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">Email App</h6>
<span class="fs-2 d-block text-body-secondary">Get new emails</span>
</div>
</a>
</div>
</div>
<div class="col-6">
<div class="position-relative">
<a href="../main/page-user-profile.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-cart.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">
User Profile
</h6>
<span class="fs-2 d-block text-body-secondary">learn more information</span>
</div>
</a>
<a href="../main/app-calendar.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-date.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">
Calendar App
</h6>
<span class="fs-2 d-block text-body-secondary">Get dates</span>
</div>
</a>
<a href="../main/app-contact.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-lifebuoy.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">
Contact List Table
</h6>
<span class="fs-2 d-block text-body-secondary">Add new contact</span>
</div>
</a>
<a href="../main/app-notes.html" class="d-flex align-items-center pb-9 position-relative">
<div class="text-bg-light rounded-1 me-3 p-6 d-flex align-items-center justify-content-center">
<img src="../assets/images/svgs/icon-dd-application.svg" alt="modernize-img" class="img-fluid" width="24" height="24" />
</div>
<div>
<h6 class="mb-1 fw-semibold fs-3">
Notes Application
</h6>
<span class="fs-2 d-block text-body-secondary">To-do and Daily tasks</span>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="row align-items-center py-3">
<div class="col-8">
<a class="fw-semibold d-flex align-items-center lh-1" href="javascript:void(0)">
<i class="ti ti-help fs-6 me-2"></i>Frequently Asked Questions
</a>
</div>
<div class="col-4">
<div class="d-flex justify-content-end pe-4">
<button class="btn btn-primary">Check</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 ms-n4">
<div class="position-relative p-7 border-start h-100">
<h5 class="fs-5 mb-9 fw-semibold">Quick Links</h5>
<ul class="">
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/page-pricing.html">Pricing Page</a>
</li>
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/authentication-login.html">Authentication
Design</a>
</li>
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/authentication-register.html">Register Now</a>
</li>
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/authentication-error.html">404 Error Page</a>
</li>
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/app-notes.html">Notes App</a>
</li>
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/page-user-profile.html">User Application</a>
</li>
<li class="mb-3">
<a class="fw-semibold bg-hover-primary" href="../main/page-account-settings.html">Account Settings</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- ------------------------------- -->
<!-- end apps Dropdown -->
<!-- ------------------------------- -->
<li class="nav-item dropdown-hover d-none d-lg-block">
<a class="nav-link" href="../main/app-chat.html">Chat</a>
</li>
<li class="nav-item dropdown-hover d-none d-lg-block">
<a class="nav-link" href="../main/app-calendar.html">Calendar</a>
</li>
<li class="nav-item dropdown-hover d-none d-lg-block">
<a class="nav-link" href="../main/app-email.html">Email</a>
</li>
</ul>
<div class="d-block d-xl-none">
<a href="../main/index.html" class="text-nowrap nav-link">
<img src="../assets/images/logos/dark-logo.svg" width="180" alt="modernize-img" />
</a>
</div>
<a class="navbar-toggler nav-icon-hover-bg rounded-circle p-0 mx-0 border-0" href="javascript:void(0)" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="p-2">
<i class="ti ti-dots fs-7"></i>
</span>
</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<div class="d-flex align-items-center justify-content-between px-0 px-xl-8">
<a href="javascript:void(0)" class="nav-link round-40 p-1 ps-0 d-flex d-xl-none align-items-center justify-content-center" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobilenavbar" aria-controls="offcanvasWithBothOptions">
<i class="ti ti-align-justified fs-7"></i>
</a>
<ul class="navbar-nav flex-row ms-auto align-items-center justify-content-center">
<!-- ------------------------------- -->
<!-- start language Dropdown -->
<!-- ------------------------------- -->
<li class="nav-item nav-icon-hover-bg rounded-circle">
<a class="nav-link moon dark-layout" href="javascript:void(0)">
<i class="ti ti-moon moon"></i>
</a>
<a class="nav-link sun light-layout" href="javascript:void(0)">
<i class="ti ti-sun sun"></i>
</a>
</li>
<li class="nav-item nav-icon-hover-bg rounded-circle dropdown">
<a class="nav-link" href="javascript:void(0)" id="drop2" aria-expanded="false">
<img src="../assets/images/svgs/icon-flag-en.svg" alt="modernize-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
<div class="message-body">
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
<div class="position-relative">
<img src="../assets/images/svgs/icon-flag-en.svg" alt="modernize-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
</div>
<p class="mb-0 fs-3">English (UK)</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
<div class="position-relative">
<img src="../assets/images/svgs/icon-flag-cn.svg" alt="modernize-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
</div>
<p class="mb-0 fs-3">中国人 (Chinese)</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
<div class="position-relative">
<img src="../assets/images/svgs/icon-flag-fr.svg" alt="modernize-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
</div>
<p class="mb-0 fs-3">français (French)</p>
</a>
<a href="javascript:void(0)" class="d-flex align-items-center gap-2 py-3 px-4 dropdown-item">
<div class="position-relative">
<img src="../assets/images/svgs/icon-flag-sa.svg" alt="modernize-img" width="20px" height="20px" class="rounded-circle object-fit-cover round-20" />
</div>
<p class="mb-0 fs-3">عربي (Arabic)</p>
</a>
</div>
</div>
</li>
<!-- ------------------------------- -->
<!-- end language Dropdown -->
<!-- ------------------------------- -->
<!-- ------------------------------- -->
<!-- start shopping cart Dropdown -->
<!-- ------------------------------- -->
<li class="nav-item nav-icon-hover-bg rounded-circle">
<a class="nav-link position-relative" href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
<i class="ti ti-basket"></i>
<span class="popup-badge rounded-pill bg-danger text-white fs-2">2</span>
</a>
</li>
<!-- ------------------------------- -->
<!-- end shopping cart Dropdown -->
<!-- ------------------------------- -->
<!-- ------------------------------- -->
<!-- start notification Dropdown -->
<!-- ------------------------------- -->
<li class="nav-item nav-icon-hover-bg rounded-circle dropdown">
<a class="nav-link position-relative" href="javascript:void(0)" id="drop2" aria-expanded="false">
<i class="ti ti-bell-ringing"></i>
<div class="notification bg-primary rounded-circle"></div>
</a>
<div class="dropdown-menu content-dd dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
<div class="d-flex align-items-center justify-content-between py-3 px-7">
<h5 class="mb-0 fs-5 fw-semibold">Notifications</h5>
<span class="badge text-bg-primary rounded-4 px-3 py-1 lh-sm">5 new</span>
</div>
<div class="message-body" data-simplebar>
<a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
<span class="me-3">
<img src="../assets/images/profile/user-2.jpg" alt="user" class="rounded-circle" width="48" height="48" />
</span>
<div class="w-100">
<h6 class="mb-1 fw-semibold lh-base">Roman Joined the Team!</h6>
<span class="fs-2 d-block text-body-secondary">Congratulate him</span>
</div>
</a>
<a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
<span class="me-3">
<img src="../assets/images/profile/user-3.jpg" alt="user" class="rounded-circle" width="48" height="48" />
</span>
<div class="w-100">
<h6 class="mb-1 fw-semibold lh-base">New message</h6>
<span class="fs-2 d-block text-body-secondary">Salma sent you new message</span>
</div>
</a>
<a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
<span class="me-3">
<img src="../assets/images/profile/user-4.jpg" alt="user" class="rounded-circle" width="48" height="48" />
</span>
<div class="w-100">
<h6 class="mb-1 fw-semibold lh-base">Bianca sent payment</h6>
<span class="fs-2 d-block text-body-secondary">Check your earnings</span>
</div>
</a>
<a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
<span class="me-3">
<img src="../assets/images/profile/user-5.jpg" alt="user" class="rounded-circle" width="48" height="48" />
</span>
<div class="w-100">
<h6 class="mb-1 fw-semibold lh-base">Jolly completed tasks</h6>
<span class="fs-2 d-block text-body-secondary">Assign her new tasks</span>
</div>
</a>
<a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
<span class="me-3">
<img src="../assets/images/profile/user-6.jpg" alt="user" class="rounded-circle" width="48" height="48" />
</span>
<div class="w-100">
<h6 class="mb-1 fw-semibold lh-base">John received payment</h6>
<span class="fs-2 d-block text-body-secondary">$230 deducted from account</span>
</div>
</a>
<a href="javascript:void(0)" class="py-6 px-7 d-flex align-items-center dropdown-item">
<span class="me-3">
<img src="../assets/images/profile/user-7.jpg" alt="user" class="rounded-circle" width="48" height="48" />
</span>
<div class="w-100">
<h6 class="mb-1 fw-semibold lh-base">Roman Joined the Team!</h6>
<span class="fs-2 d-block text-body-secondary">Congratulate him</span>
</div>
</a>
</div>
<div class="py-6 px-7 mb-1">
<button class="btn btn-outline-primary w-100">See All Notifications</button>
</div>
</div>
</li>
<!-- ------------------------------- -->
<!-- end notification Dropdown -->
<!-- ------------------------------- -->
<!-- ------------------------------- -->
<!-- start profile Dropdown -->
<!-- ------------------------------- -->
<li class="nav-item dropdown">
<a class="nav-link pe-0" href="javascript:void(0)" id="drop1" aria-expanded="false">
<div class="d-flex align-items-center">
<div class="user-profile-img">
<img src="../assets/images/profile/user-1.jpg" class="rounded-circle" width="35" height="35" alt="modernize-img" />
</div>
</div>
</a>
<div class="dropdown-menu content-dd dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop1">
<div class="profile-dropdown position-relative" data-simplebar>
<div class="py-3 px-7 pb-0">
<h5 class="mb-0 fs-5 fw-semibold">User Profile</h5>
</div>
<div class="d-flex align-items-center py-9 mx-7 border-bottom">
<img src="../assets/images/profile/user-1.jpg" class="rounded-circle" width="80" height="80" alt="modernize-img" />
<div class="ms-3">
<h5 class="mb-1 fs-3">Mathew Anderson</h5>
<span class="mb-1 d-block">Designer</span>
<p class="mb-0 d-flex align-items-center gap-2">
<i class="ti ti-mail fs-4"></i> info@modernize.com
</p>
</div>
</div>
<div class="message-body">
<a href="../main/page-user-profile.html" class="py-8 px-7 mt-8 d-flex align-items-center">
<span class="d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6">
<img src="../assets/images/svgs/icon-account.svg" alt="modernize-img" width="24" height="24" />
</span>
<div class="w-100 ps-3">
<h6 class="mb-1 fs-3 fw-semibold lh-base">My Profile</h6>
<span class="fs-2 d-block text-body-secondary">Account Settings</span>
</div>
</a>
<a href="../main/app-email.html" class="py-8 px-7 d-flex align-items-center">
<span class="d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6">
<img src="../assets/images/svgs/icon-inbox.svg" alt="modernize-img" width="24" height="24" />
</span>
<div class="w-100 ps-3">
<h6 class="mb-1 fs-3 fw-semibold lh-base">My Inbox</h6>
<span class="fs-2 d-block text-body-secondary">Messages & Emails</span>
</div>
</a>
<a href="../main/app-notes.html" class="py-8 px-7 d-flex align-items-center">
<span class="d-flex align-items-center justify-content-center text-bg-light rounded-1 p-6">
<img src="../assets/images/svgs/icon-tasks.svg" alt="modernize-img" width="24" height="24" />
</span>
<div class="w-100 ps-3">
<h6 class="mb-1 fs-3 fw-semibold lh-base">My Task</h6>
<span class="fs-2 d-block text-body-secondary">To-do and Daily Tasks</span>
</div>
</a>
</div>
<div class="d-grid py-4 px-7 pt-8">
<div class="upgrade-plan bg-primary-subtle position-relative overflow-hidden rounded-4 p-4 mb-9">
<div class="row">
<div class="col-6">
<h5 class="fs-4 mb-3 fw-semibold">Unlimited Access</h5>
<button class="btn btn-primary">Upgrade</button>
</div>
<div class="col-6">
<div class="m-n4 unlimited-img">
<img src="../assets/images/backgrounds/unlimited-bg.png" alt="modernize-img" class="w-100" />
</div>
</div>
</div>
</div>
<a href="../main/authentication-login.html" class="btn btn-outline-primary">Log Out</a>
</div>
</div>
</div>
</li>
<!-- ------------------------------- -->
<!-- end profile Dropdown -->
<!-- ------------------------------- -->
</ul>
</div>
</div>
</nav>
</div>
</header>
<!-- Header End -->
<aside class="left-sidebar with-horizontal">
<!-- Sidebar scroll-->
<div>
<!-- Sidebar navigation-->
<nav id="sidebarnavh" class="sidebar-nav scroll-sidebar container-fluid">
<ul id="sidebarnav">
<!-- ============================= -->
<!-- Home -->
<!-- ============================= -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Home</span>
</li>
<!-- =================== -->
<!-- Dashboard -->
<!-- =================== -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span>
<i class="ti ti-home-2"></i>
</span>
<span class="hide-menu">Dashboard</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/index.html" class="sidebar-link">
<i class="ti ti-aperture"></i>
<span class="hide-menu">Modern</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/index2.html" class="sidebar-link">
<i class="ti ti-shopping-cart"></i>
<span class="hide-menu">eCommerce</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/index3.html" class="sidebar-link">
<i class="ti ti-currency-dollar"></i>
<span class="hide-menu">NFT</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/index4.html" class="sidebar-link">
<i class="ti ti-cpu"></i>
<span class="hide-menu">Crypto</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/index5.html" class="sidebar-link">
<i class="ti ti-activity-heartbeat"></i>
<span class="hide-menu">General</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/index6.html" class="sidebar-link">
<i class="ti ti-playlist"></i>
<span class="hide-menu">Music</span>
</a>
</li>
</ul>
</li>
<!-- ============================= -->
<!-- Apps -->
<!-- ============================= -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Apps</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link two-column has-arrow" href="javascript:void(0)" aria-expanded="false">
<span>
<i class="ti ti-archive"></i>
</span>
<span class="hide-menu">Apps</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/app-calendar.html" class="sidebar-link">
<i class="ti ti-calendar"></i>
<span class="hide-menu">Calendar</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/app-kanban.html" class="sidebar-link">
<i class="ti ti-layout-kanban"></i>
<span class="hide-menu">Kanban</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/app-chat.html" class="sidebar-link">
<i class="ti ti-message-dots"></i>
<span class="hide-menu">Chat</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/app-email.html" aria-expanded="false">
<span>
<i class="ti ti-mail"></i>
</span>
<span class="hide-menu">Email</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/app-contact.html" class="sidebar-link">
<i class="ti ti-phone"></i>
<span class="hide-menu">Contact Table</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/app-contact2.html" class="sidebar-link">
<i class="ti ti-list-details"></i>
<span class="hide-menu">Contact List</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/app-notes.html" class="sidebar-link">
<i class="ti ti-notes"></i>
<span class="hide-menu">Notes</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/app-invoice.html" class="sidebar-link">
<i class="ti ti-file-text"></i>
<span class="hide-menu">Invoice</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/page-user-profile.html" class="sidebar-link">
<i class="ti ti-user-circle"></i>
<span class="hide-menu">User Profile</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/blog-posts.html" class="sidebar-link">
<i class="ti ti-article"></i>
<span class="hide-menu">Posts</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/blog-detail.html" class="sidebar-link">
<i class="ti ti-details"></i>
<span class="hide-menu">Detail</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/eco-shop.html" class="sidebar-link">
<i class="ti ti-shopping-cart"></i>
<span class="hide-menu">Shop</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/eco-shop-detail.html" class="sidebar-link">
<i class="ti ti-basket"></i>
<span class="hide-menu">Shop Detail</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/eco-product-list.html" class="sidebar-link">
<i class="ti ti-list-check"></i>
<span class="hide-menu">List</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/eco-checkout.html" class="sidebar-link">
<i class="ti ti-brand-shopee"></i>
<span class="hide-menu">Checkout</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/eco-add-product.html">
<i class="ti ti-file-plus"></i>
<span class="hide-menu">Add Product</span>
</a>
</li>
<li class="sidebar-item">
<a class="sidebar-link" href="../main/eco-edit-product.html">
<i class="ti ti-file-pencil"></i>
<span class="hide-menu">Edit Product</span>
</a>
</li>
</ul>
</li>
<!-- ============================= -->
<!-- Frontend pages -->
<!-- ============================= -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Frontend pages</span>
</li>
<!-- =================== -->
<!-- pages -->
<!-- =================== -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="rounded-3">
<i class="ti ti-app-window"></i>
</span>
<span class="hide-menu">Frontend pages</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/frontend-landingpage.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Homepage</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/frontend-aboutpage.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">About Us</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/frontend-contactpage.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Contact Us</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/frontend-blogpage.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Blog</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/frontend-blogdetailpage.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Blog Details</span>
</a>
</li>
</ul>
</li>
<!-- ============================= -->
<!-- PAGES -->
<!-- ============================= -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">PAGES</span>
</li>
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span>
<i class="ti ti-notebook"></i>
</span>
<span class="hide-menu">Pages</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/page-faq.html" class="sidebar-link">
<i class="ti ti-help"></i>
<span class="hide-menu">FAQ</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/page-account-settings.html" class="sidebar-link">
<i class="ti ti-user-circle"></i>
<span class="hide-menu">Account Setting</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/page-pricing.html" class="sidebar-link">
<i class="ti ti-currency-dollar"></i>
<span class="hide-menu">Pricing</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/widgets-cards.html" class="sidebar-link">
<i class="ti ti-cards"></i>
<span class="hide-menu">Card</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/widgets-banners.html" class="sidebar-link">
<i class="ti ti-ad"></i>
<span class="hide-menu">Banner</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/widgets-charts.html" class="sidebar-link">
<i class="ti ti-chart-bar"></i>
<span class="hide-menu">Charts</span>
</a>
</li>
<li class="sidebar-item">
<a href="../landingpage/index.html" class="sidebar-link">
<i class="ti ti-app-window"></i>
<span class="hide-menu">Landing Page</span>
</a>
</li>
</ul>
</li>
<!-- ============================= -->
<!-- UI -->
<!-- ============================= -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">UI</span>
</li>
<!-- =================== -->
<!-- UI Elements -->
<!-- =================== -->
<li class="sidebar-item mega-dropdown">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="rounded-3">
<i class="ti ti-layout-grid"></i>
</span>
<span class="hide-menu">UI</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/ui-accordian.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Accordian</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-badge.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Badge</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-buttons.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Buttons</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-dropdowns.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Dropdowns</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-modals.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Modals</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-tab.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Tab</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-tooltip-popover.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Tooltip & Popover</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-notification.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Alerts</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-progressbar.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Progressbar</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-pagination.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Pagination</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-typography.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Typography</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-bootstrap-ui.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Bootstrap UI</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-breadcrumb.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Breadcrumb</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-offcanvas.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Offcanvas</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-lists.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Lists</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-grid.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Grid</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-carousel.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Carousel</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-scrollspy.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Scrollspy</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-spinner.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Spinner</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/ui-link.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Link</span>
</a>
</li>
</ul>
</li>
<!-- ============================= -->
<!-- Forms -->
<!-- ============================= -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Forms</span>
</li>
<!-- =================== -->
<!-- Forms -->
<!-- =================== -->
<li class="sidebar-item">
<a class="sidebar-link two-column has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="rounded-3">
<i class="ti ti-file-text"></i>
</span>
<span class="hide-menu">Forms</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<!-- form elements -->
<li class="sidebar-item">
<a href="../main/form-inputs.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Forms Input</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-input-groups.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Input Groups</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-input-grid.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Input Grid</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-checkbox-radio.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Checkbox & Radios</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-bootstrap-switch.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Bootstrap Switch</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-select2.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Select2</span>
</a>
</li>
<!-- form inputs -->
<li class="sidebar-item">
<a href="../main/form-basic.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Basic Form</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-vertical.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Form Vertical</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-horizontal.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Form Horizontal</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-actions.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Form Actions</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-row-separator.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Row Separator</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-bordered.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Form Bordered</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/form-detail.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Form Detail</span>
</a>
</li>
<!-- form wizard -->
<li class="sidebar-item">
<a href="../main/form-wizard.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Form Wizard</span>
</a>
</li>
<!-- Quill Editor -->
<li class="sidebar-item">
<a href="../main/form-editor-quill.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Quill Editor</span>
</a>
</li>
</ul>
</li>
<!-- ============================= -->
<!-- Tables -->
<!-- ============================= -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Tables</span>
</li>
<!-- =================== -->
<!-- Bootstrap Table -->
<!-- =================== -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="rounded-3">
<i class="ti ti-layout-sidebar"></i>
</span>
<span class="hide-menu">Tables</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/table-basic.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Basic Table</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/table-dark-basic.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Dark Basic Table</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/table-sizing.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Sizing Table</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/table-layout-coloured.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Coloured Table</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/table-datatable-basic.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Basic Initialisation</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/table-datatable-api.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">API</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/table-datatable-advanced.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Advanced Initialisation</span>
</a>
</li>
</ul>
</li>
<!-- ============================= -->
<!-- Charts -->
<!-- ============================= -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Charts</span>
</li>
<!-- =================== -->
<!-- Apex Chart -->
<!-- =================== -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="rounded-3">
<i class="ti ti-chart-pie"></i>
</span>
<span class="hide-menu">Charts</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/chart-apex-line.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Line Chart</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/chart-apex-area.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Area Chart</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/chart-apex-bar.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Bar Chart</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/chart-apex-pie.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Pie Chart</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/chart-apex-radial.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Radial Chart</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/chart-apex-radar.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Radar Chart</span>
</a>
</li>
</ul>
</li>
<!-- ============================= -->
<!-- Icons -->
<!-- ============================= -->
<li class="nav-small-cap">
<i class="ti ti-dots nav-small-cap-icon fs-4"></i>
<span class="hide-menu">Icons</span>
</li>
<!-- =================== -->
<!-- Tabler Icon -->
<!-- =================== -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="rounded-3">
<i class="ti ti-archive"></i>
</span>
<span class="hide-menu">Icon</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../main/icon-tabler.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Tabler Icon</span>
</a>
</li>
<li class="sidebar-item">
<a href="../main/icon-solar.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Solar Icon</span>
</a>
</li>
</ul>
</li>
<!-- multi level -->
<li class="sidebar-item">
<a class="sidebar-link has-arrow" href="javascript:void(0)" aria-expanded="false">
<span class="rounded-3">
<iconify-icon icon="solar:airbuds-case-minimalistic-line-duotone" class="ti"></iconify-icon>
</span>
<span class="hide-menu">Multi DD</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
<li class="sidebar-item">
<a href="../docs/index.html" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Documentation</span>
</a>
</li>
<li class="sidebar-item">
<a href="javascript:void(0)" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Page 1</span>
</a>
</li>
<li class="sidebar-item">
<a href="javascript:void(0)" class="sidebar-link has-arrow">
<i class="ti ti-circle"></i>
<span class="hide-menu">Page 2</span>
</a>
<ul aria-expanded="false" class="collapse second-level">
<li class="sidebar-item">
<a href="javascript:void(0)" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Page 2.1</span>
</a>
</li>
<li class="sidebar-item">
<a href="javascript:void(0)" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Page 2.2</span>
</a>
</li>
<li class="sidebar-item">
<a href="javascript:void(0)" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Page 2.3</span>
</a>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="javascript:void(0)" class="sidebar-link">
<i class="ti ti-circle"></i>
<span class="hide-menu">Page 3</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<div class="body-wrapper">
<div class="container-fluid">
<div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
<div class="card-body px-4 py-3">
<div class="row align-items-center">
<div class="col-9">
<h4 class="fw-semibold mb-8">Blog Detail</h4>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a class="text-muted text-decoration-none" href="../main/index.html">Home</a>
</li>
<li class="breadcrumb-item" aria-current="page">Blog Detail</li>
</ol>
</nav>
</div>
<div class="col-3">
<div class="text-center mb-n5">
<img src="../assets/images/breadcrumb/ChatBc.png" alt="modernize-img" class="img-fluid mb-n4" />
</div>
</div>
</div>
</div>
</div>
<div class="card overflow-hidden">
<div class="position-relative">
<a href="javascript:void(0)">
<img src="../assets/images/blog/blog-img5.jpg" class="card-img-top rounded-0 object-fit-cover" alt="modernize-img" height="440">
</a>
<span class="badge text-bg-light mb-9 me-9 position-absolute bottom-0 end-0">2
min Read</span>
<img src="../assets/images/profile/user-5.jpg" alt="modernize-img" class="img-fluid rounded-circle position-absolute bottom-0 start-0 mb-n9 ms-9" width="40" height="40" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Esther Lindsey">
</div>
<div class="card-body p-4">
<span class="badge text-bg-light mt-3">Lifestyle</span>
<h2 class="fs-9 fw-semibold my-4">Streaming video way before it was cool, go dark tomorrow</h2>
<div class="d-flex align-items-center gap-4">
<div class="d-flex align-items-center gap-2">
<i class="ti ti-eye text-dark fs-5"></i>2252
</div>
<div class="d-flex align-items-center gap-2">
<i class="ti ti-message-2 text-dark fs-5"></i>3
</div>
<div class="d-flex align-items-center fs-2 ms-auto">
<i class="ti ti-point text-dark"></i>Sat, Jan 14
</div>
</div>
</div>
<div class="card-body border-top p-4">
<h2 class="fs-8 fw-semibold mb-3">Title of the paragraph</h2>
<p class="mb-3">
But you cannot figure out what it is or what it can do. MTA web directory is the simplest way in which
one can bid on a link, or a few links if they wish to do so. The link
directory on MTA displays all of the links it currently has, and does so in alphabetical order, which
makes it much easier for someone to find what they are looking for if it is
something specific and they do not want to go through all the other sites and links as well. It allows
you to start your bid at the bottom and slowly work your way to the top
of the list.
</p>
<p class="mb-3">
Gigure out what it is or what it can do. MTA web directory is the simplest way in which one can bid on a
link, or a few links if they wish to do so. The link directory on MTA
displays all of the links it currently has, and does so in alphabetical order, which makes it much
easier for someone to find what they are looking for if it is something
specific and they do not want to go through all the other sites and links as well. It allows you to
start your bid at the bottom and slowly work your way to the top of the
</p>
<p class="text-dark mb-0">
<strong>This is strong text.</strong>
</p>
<p class="mb-0">
<em>This is italic text.</em>
</p>
<div class="border-top mt-7 pt-7">
<h3 class="fw-semibold">Unorder list.</h3>
<ul class="my-3 ps-4 text-dark">
<li class="d-flex align-items-center gap-2">
<span class="p-1 text-bg-dark rounded-circle"></span>
Gigure
out what it is or
</li>
<li class="d-flex align-items-center gap-2">
<span class="p-1 text-bg-dark rounded-circle"></span> The
links
it currently
</li>
<li class="d-flex align-items-center gap-2">
<span class="p-1 text-bg-dark rounded-circle"></span> It
allows
you to start your bid
</li>
<li class="d-flex align-items-center gap-2">
<span class="p-1 text-bg-dark rounded-circle"></span>
Gigure
out what it is or
</li>
<li class="d-flex align-items-center gap-2">
<span class="p-1 text-bg-dark rounded-circle"></span> The
links
it currently
</li>
<li class="d-flex align-items-center gap-2">
<span class="p-1 text-bg-dark rounded-circle"></span> It
allows
you to start your bid
</li>
</ul>
</div>
<div class="border-top mt-7 pt-7">
<h3 class="fw-semibold">Order list.</h3>
<ol class="my-3 text-dark">
<li>Gigure out what it is or</li>
<li>The links it currently</li>
<li>It allows you to start your bid</li>
<li>Gigure out what it is or</li>
<li>The links it currently</li>
<li>It allows you to start your bid</li>
</ol>
</div>
<div class="border-top mt-7 pt-7">
<h3 class="fw-semibold mb-2">Quotes</h3>
<div class="p-3 bg-light rounded border-start border-2 border-primary">
<h6 class="mb-0 fs-4 fw-semibold">
<i class="ti ti-quote fs-7"></i>Life is short, Smile while you still
have teeth!
</h6>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="mb-4 fw-semibold">Post Comments</h4>
<form>
<textarea class="form-control mb-4" rows="5"></textarea>
<button class="btn btn-primary">Post Comment</button>
</form>
<div class="d-flex align-items-center gap-3 mb-4 mt-7 pt-8">
<h4 class="mb-0">Comments</h4>
<span class="badge bg-primary-subtle text-primary fs-4 fw-semibold px-6 py-8 rounded">3</span>
</div>
<div class="position-relative">
<div class="p-4 rounded-4 text-bg-light mb-3">
<div class="d-flex align-items-center gap-3">
<img src="../assets/images/profile/user-2.jpg" alt="modernize-img" class="rounded-circle" width="33" height="33">
<h6 class="mb-0 fs-4">Don Russell</h6>
<span class="p-1 text-bg-muted rounded-circle d-inline-block"></span>
</div>
<p class="my-3">Es do ujurus nejson imju azgudpi toceztep ji cocicoci bosawrop korze ta.
Casetlu udumej umocu wanaro webmos ijafa ud muli amja softoj ma pijum.
</p>
<div class="d-flex align-items-center gap-2">
<a class="d-flex align-items-center justify-content-center text-bg-primary p-2 fs-4 rounded-circle" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Reply">
<i class="ti ti-arrow-back-up"></i>
</a>
</div>
</div>
<div class="p-4 rounded-4 text-bg-light mb-3">
<div class="d-flex align-items-center gap-3">
<img src="../assets/images/profile/user-3.jpg" alt="modernize-img" class="rounded-circle" width="33" height="33">
<h6 class="mb-0 fs-4">Cordelia Potter</h6>
<span class="p-1 text-bg-muted rounded-circle d-inline-block"></span>
</div>
<p class="my-3">Huwso jewzehgu julriw niwgazep lewbob isujirmuz hemto pahop cewa zuhucze rinitba
etdebluj.
Obdevo bo fa siztes laobeir agoemugo rut sapaviw mulati do re dabelul wo tumnik wih mu.
</p>
<div class="d-flex align-items-center gap-2">
<a class="d-flex align-items-center justify-content-center text-bg-primary p-2 fs-4 rounded-circle" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Reply">
<i class="ti ti-arrow-back-up"></i>
</a>
</div>
</div>
<div class="p-4 rounded-4 text-bg-light mb-3 ms-7">
<div class="d-flex align-items-center gap-3">
<img src="../assets/images/profile/user-6.jpg" alt="modernize-img" class="rounded-circle" width="40" height="40">
<h6 class="mb-0 fs-4">Irene Hanson</h6>
<span class="p-1 text-bg-muted rounded-circle d-inline-block"></span>
</div>
<p class="my-3">Uborofgic be rof lom sedge vapozi ohoinu nutremcuc ro ko atmeg anrov git ve vuj ki teb
or.
Lohi hafa faddegon horoz ebema kew idful ducam nev rol iga wikkobsu sucdu gud.
</p>
</div>
<div class="p-4 rounded-4 text-bg-light">
<div class="d-flex align-items-center gap-3">
<img src="../assets/images/profile/user-4.jpg" alt="modernize-img" class="rounded-circle" width="33" height="33">
<h6 class="mb-0 fs-4">Seth Ortiz</h6>
<span class="p-1 text-bg-muted rounded-circle d-inline-block"></span>
</div>
<p class="my-3">Icme rasejmat ciwo ifekemug owoca vicoz ukikitus famiftat nuk eroewu za upe.
Pobrikvup kivofvac tuba ot veh ozoab sa gesi hahoniha hop burbip volo hufotobo di uted vojoamu.
</p>
<div class="d-flex align-items-center gap-2">
<a class="d-flex align-items-center justify-content-center text-bg-primary p-2 fs-4 rounded-circle" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Reply">
<i class="ti ti-arrow-back-up"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function handleColorTheme(e) {
document.documentElement.setAttribute("data-color-theme", e);
}
</script>
<button class="btn btn-primary p-3 rounded-circle d-flex align-items-center justify-content-center customizer-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
<i class="icon ti ti-settings fs-7"></i>
</button>
<div class="offcanvas customizer offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="d-flex align-items-center justify-content-between p-3 border-bottom">
<h4 class="offcanvas-title fw-semibold" id="offcanvasExampleLabel">
Settings
</h4>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body h-n80" data-simplebar>
<h6 class="fw-semibold fs-4 mb-2">Theme</h6>
<div class="d-flex flex-row gap-3 customizer-box" role="group">
<input type="radio" class="btn-check light-layout" name="theme-layout" id="light-layout" autocomplete="off" />
<label class="btn p-9 btn-outline-primary rounded-2" for="light-layout">
<i class="icon ti ti-brightness-up fs-7 me-2"></i>Light
</label>
<input type="radio" class="btn-check dark-layout" name="theme-layout" id="dark-layout" autocomplete="off" />
<label class="btn p-9 btn-outline-primary rounded-2" for="dark-layout">
<i class="icon ti ti-moon fs-7 me-2"></i>Dark
</label>
</div>
<h6 class="mt-5 fw-semibold fs-4 mb-2">Theme Direction</h6>
<div class="d-flex flex-row gap-3 customizer-box" role="group">
<input type="radio" class="btn-check" name="direction-l" id="ltr-layout" autocomplete="off" />
<label class="btn p-9 btn-outline-primary" for="ltr-layout">
<i class="icon ti ti-text-direction-ltr fs-7 me-2"></i>LTR
</label>
<input type="radio" class="btn-check" name="direction-l" id="rtl-layout" autocomplete="off" />
<label class="btn p-9 btn-outline-primary" for="rtl-layout">
<i class="icon ti ti-text-direction-rtl fs-7 me-2"></i>RTL
</label>
</div>
<h6 class="mt-5 fw-semibold fs-4 mb-2">Theme Colors</h6>
<div class="d-flex flex-row flex-wrap gap-3 customizer-box color-pallete" role="group">
<input type="radio" class="btn-check" name="color-theme-layout" id="Blue_Theme" autocomplete="off" />
<label class="btn p-9 btn-outline-primary d-flex align-items-center justify-content-center" onclick="handleColorTheme('Blue_Theme')" for="Blue_Theme" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="BLUE_THEME">
<div class="color-box rounded-circle d-flex align-items-center justify-content-center skin-1">
<i class="ti ti-check text-white d-flex icon fs-5"></i>
</div>
</label>
<input type="radio" class="btn-check" name="color-theme-layout" id="Aqua_Theme" autocomplete="off" />
<label class="btn p-9 btn-outline-primary d-flex align-items-center justify-content-center" onclick="handleColorTheme('Aqua_Theme')" for="Aqua_Theme" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="AQUA_THEME">
<div class="color-box rounded-circle d-flex align-items-center justify-content-center skin-2">
<i class="ti ti-check text-white d-flex icon fs-5"></i>
</div>
</label>
<input type="radio" class="btn-check" name="color-theme-layout" id="Purple_Theme" autocomplete="off" />
<label class="btn p-9 btn-outline-primary d-flex align-items-center justify-content-center" onclick="handleColorTheme('Purple_Theme')" for="Purple_Theme" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="PURPLE_THEME">
<div class="color-box rounded-circle d-flex align-items-center justify-content-center skin-3">
<i class="ti ti-check text-white d-flex icon fs-5"></i>
</div>
</label>
<input type="radio" class="btn-check" name="color-theme-layout" id="green-theme-layout" autocomplete="off" />
<label class="btn p-9 btn-outline-primary d-flex align-items-center justify-content-center" onclick="handleColorTheme('Green_Theme')" for="green-theme-layout" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="GREEN_THEME">
<div class="color-box rounded-circle d-flex align-items-center justify-content-center skin-4">
<i class="ti ti-check text-white d-flex icon fs-5"></i>
</div>
</label>
<input type="radio" class="btn-check" name="color-theme-layout" id="cyan-theme-layout" autocomplete="off" />
<label class="btn p-9 btn-outline-primary d-flex align-items-center justify-content-center" onclick="handleColorTheme('Cyan_Theme')" for="cyan-theme-layout" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="CYAN_THEME">
<div class="color-box rounded-circle d-flex align-items-center justify-content-center skin-5">
<i class="ti ti-check text-white d-flex icon fs-5"></i>
</div>
</label>
<input type="radio" class="btn-check" name="color-theme-layout" id="orange-theme-layout" autocomplete="off" />
<label class="btn p-9 btn-outline-primary d-flex align-items-center justify-content-center" onclick="handleColorTheme('Orange_Theme')" for="orange-theme-layout" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ORANGE_THEME">
<div class="color-box rounded-circle d-flex align-items-center justify-content-center skin-6">
<i class="ti ti-check text-white d-flex icon fs-5"></i>
</div>
</label>
</div>
<h6 class="mt-5 fw-semibold fs-4 mb-2">Layout Type</h6>
<div class="d-flex flex-row gap-3 customizer-box" role="group">
<div>
<input type="radio" class="btn-check" name="page-layout" id="vertical-layout" autocomplete="off" />
<label class="btn p-9 btn-outline-primary" for="vertical-layout">
<i class="icon ti ti-layout-sidebar-right fs-7 me-2"></i>Vertical
</label>
</div>
<div>
<input type="radio" class="btn-check" name="page-layout" id="horizontal-layout" autocomplete="off" />
<label class="btn p-9 btn-outline-primary" for="horizontal-layout">
<i class="icon ti ti-layout-navbar fs-7 me-2"></i>Horizontal
</label>
</div>
</div>
<h6 class="mt-5 fw-semibold fs-4 mb-2">Container Option</h6>
<div class="d-flex flex-row gap-3 customizer-box" role="group">
<input type="radio" class="btn-check" name="layout" id="boxed-layout" autocomplete="off" />
<label class="btn p-9 btn-outline-primary" for="boxed-layout">
<i class="icon ti ti-layout-distribute-vertical fs-7 me-2"></i>Boxed
</label>
<input type="radio" class="btn-check" name="layout" id="full-layout" autocomplete="off" />
<label class="btn p-9 btn-outline-primary" for="full-layout">
<i class="icon ti ti-layout-distribute-horizontal fs-7 me-2"></i>Full
</label>
</div>
<h6 class="fw-semibold fs-4 mb-2 mt-5">Sidebar Type</h6>
<div class="d-flex flex-row gap-3 customizer-box" role="group">
<a href="javascript:void(0)" class="fullsidebar">
<input type="radio" class="btn-check" name="sidebar-type" id="full-sidebar" autocomplete="off" />
<label class="btn p-9 btn-outline-primary" for="full-sidebar">
<i class="icon ti ti-layout-sidebar-right fs-7 me-2"></i>Full
</label>
</a>
<div>
<input type="radio" class="btn-check " name="sidebar-type" id="mini-sidebar" autocomplete="off" />
<label class="btn p-9 btn-outline-primary" for="mini-sidebar">
<i class="icon ti ti-layout-sidebar fs-7 me-2"></i>Collapse
</label>
</div>
</div>
<h6 class="mt-5 fw-semibold fs-4 mb-2">Card With</h6>
<div class="d-flex flex-row gap-3 customizer-box" role="group">
<input type="radio" class="btn-check" name="card-layout" id="card-with-border" autocomplete="off" />
<label class="btn p-9 btn-outline-primary" for="card-with-border">
<i class="icon ti ti-border-outer fs-7 me-2"></i>Border
</label>
<input type="radio" class="btn-check" name="card-layout" id="card-without-border" autocomplete="off" />
<label class="btn p-9 btn-outline-primary" for="card-without-border">
<i class="icon ti ti-border-none fs-7 me-2"></i>Shadow
</label>
</div>
</div>
</div>
</div>
<!-- Search Bar -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content rounded-1">
<div class="modal-header border-bottom">
<input type="search" class="form-control fs-3" placeholder="Search here" id="search" />
<a href="javascript:void(0)" data-bs-dismiss="modal" class="lh-1">
<i class="ti ti-x fs-5 ms-3"></i>
</a>
</div>
<div class="modal-body message-body" data-simplebar="">
<h5 class="mb-0 fs-5 p-1">Quick Page Links</h5>
<ul class="list mb-0 py-2">
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Modern</span>
<span class="text-muted d-block">/dashboards/dashboard1</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Dashboard</span>
<span class="text-muted d-block">/dashboards/dashboard2</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Contacts</span>
<span class="text-muted d-block">/apps/contacts</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Posts</span>
<span class="text-muted d-block">/apps/blog/posts</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Detail</span>
<span class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Shop</span>
<span class="text-muted d-block">/apps/ecommerce/shop</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Modern</span>
<span class="text-muted d-block">/dashboards/dashboard1</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Dashboard</span>
<span class="text-muted d-block">/dashboards/dashboard2</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Contacts</span>
<span class="text-muted d-block">/apps/contacts</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Posts</span>
<span class="text-muted d-block">/apps/blog/posts</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Detail</span>
<span class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
</a>
</li>
<li class="p-1 mb-1 bg-hover-light-black">
<a href="javascript:void(0)">
<span class="d-block">Shop</span>
<span class="text-muted d-block">/apps/ecommerce/shop</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Shopping Cart -->
<div class="offcanvas offcanvas-end shopping-cart" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header justify-content-between py-4">
<h5 class="offcanvas-title fs-5 fw-semibold" id="offcanvasRightLabel">
Shopping Cart
</h5>
<span class="badge bg-primary rounded-4 px-3 py-1 lh-sm">5 new</span>
</div>
<div class="offcanvas-body h-100 px-4 pt-0" data-simplebar>
<ul class="mb-0">
<li class="pb-7">
<div class="d-flex align-items-center">
<img src="../assets/images/products/product-1.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
<div>
<h6 class="mb-1">Supreme toys cooker</h6>
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
<div class="d-flex align-items-center justify-content-between mt-2">
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
<div class="input-group input-group-sm w-50">
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add1">
-
</button>
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add1" value="1" />
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addo2">
+
</button>
</div>
</div>
</div>
</div>
</li>
<li class="pb-7">
<div class="d-flex align-items-center">
<img src="../assets/images/products/product-2.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
<div>
<h6 class="mb-1">Supreme toys cooker</h6>
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
<div class="d-flex align-items-center justify-content-between mt-2">
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
<div class="input-group input-group-sm w-50">
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add2">
-
</button>
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add2" value="1" />
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon34">
+
</button>
</div>
</div>
</div>
</div>
</li>
<li class="pb-7">
<div class="d-flex align-items-center">
<img src="../assets/images/products/product-3.jpg" width="95" height="75" class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
<div>
<h6 class="mb-1">Supreme toys cooker</h6>
<p class="mb-0 text-muted fs-2">Kitchenware Item</p>
<div class="d-flex align-items-center justify-content-between mt-2">
<h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
<div class="input-group input-group-sm w-50">
<button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add3">
-
</button>
<input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder="" aria-label="Example text with button addon" aria-describedby="add3" value="1" />
<button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon3">
+
</button>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="align-bottom">
<div class="d-flex align-items-center pb-7">
<span class="text-dark fs-3">Sub Total</span>
<div class="ms-auto">
<span class="text-dark fw-semibold fs-3">$2530</span>
</div>
</div>
<div class="d-flex align-items-center pb-7">
<span class="text-dark fs-3">Total</span>
<div class="ms-auto">
<span class="text-dark fw-semibold fs-3">$6830</span>
</div>
</div>
<a href="../main/eco-checkout.html" class="btn btn-outline-primary w-100">Go to shopping cart</a>
</div>
</div>
</div>
</div>
<div class="dark-transparent sidebartoggler"></div>
<!-- Import Js Files -->
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../assets/libs/simplebar/dist/simplebar.min.js"></script>
<script src="../assets/js/theme/app.init.js"></script>
<script src="../assets/js/theme/theme.js"></script>
<script src="../assets/js/theme/app.min.js"></script>
<script src="../assets/js/theme/sidebarmenu.js"></script>
<!-- solar icons -->
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
</body>
</html>