Add theme assets;
This commit is contained in:
@@ -0,0 +1,766 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Accordion</h1>
|
||||
<p class="lead">Build vertically collapsing accordions in combination with Bootstrap's Collapse JavaScript plugin. Read the <a href="https://getbootstrap.com/docs/5.1/components/accordion/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Click the accordions below to expand/collapse the accordion content.</p>
|
||||
<div class="example">
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultAccordion">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultAccordion">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<script src="../../../assets/js/demo.js"></script>
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,929 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Alerts</h1>
|
||||
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Read the <a href="https://getbootstrap.com/docs/5.1/components/alerts/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., <code>.alert-success</code>).</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">...</div>
|
||||
<div class="alert alert-success" role="alert">...</div>
|
||||
<div class="alert alert-danger" role="alert">...</div>
|
||||
<div class="alert alert-warning" role="alert">...</div>
|
||||
<div class="alert alert-info" role="alert">...</div>
|
||||
<div class="alert alert-light" role="alert">...</div>
|
||||
<div class="alert alert-dark" role="alert">...</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultAlert">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="fill">Fill alert</h4>
|
||||
<p class="mb-3">Add class <code>.alert-fill-*</code> with <code>.alert</code>.</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-fill-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-secondary" role="alert">
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-success" role="alert">
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-danger" role="alert">
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-warning" role="alert">
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-info" role="alert">
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-light" role="alert">
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-fill-dark" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="fillAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-fill-primary" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#fillAlert">copy</button>
|
||||
|
||||
</figure>
|
||||
<hr>
|
||||
|
||||
<h4 id="icon">With icon</h4>
|
||||
<p class="mb-3">Add an icon inside the div.</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-primary" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="iconAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-primary" role="alert">
|
||||
<i data-feather="alert-circle"></i>
|
||||
A simple primary alert—check it out!
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#iconAlert">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="alert-link">Alert Link</h4>
|
||||
<p class="mb-3">Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-primary" role="alert">
|
||||
A simple primary alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-secondary" role="alert">
|
||||
A simple secondary alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
A simple success alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
A simple danger alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
A simple warning alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
A simple info alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-light" role="alert">
|
||||
A simple light alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
A simple dark alert with <a href="javascript:;" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="linkAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-primary" role="alert">
|
||||
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#linkAlert">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="additional-content">Additional content</h4>
|
||||
<p class="mb-3">Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>
|
||||
<div class="example">
|
||||
<div class="alert alert-success" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<hr>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="additionalContent">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-success" role="alert">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
|
||||
<hr>
|
||||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#additionalContent">copy</button>
|
||||
</figure>
|
||||
<hr>
|
||||
<h4 id="dismissing">Dismissing</h4>
|
||||
<p class="mb-3">Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.</p>
|
||||
<ul>
|
||||
<li>Add a dismiss button and the <code>.alert-dismissible</code> class, which adds extra padding to the right of the alert and positions the <code>.close</code> button.</li>
|
||||
<li>On the dismiss button, add the <code>data-bs-dismiss="alert"</code> attribute, which triggers the JavaScript functionality. Be sure to use the <code><button></code> element with it for proper behavior across all devices.</li>
|
||||
<li>To animate alerts when dismissing them, be sure to add the <code>.fade</code> and <code>.show</code> classes.</li>
|
||||
</ul>
|
||||
<div class="example">
|
||||
<div class="alert alert-primary alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-light alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
<div class="alert alert-dark alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="dismissingAlert">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="btn-close"></button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dismissingAlert">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#fill" class="nav-link">Fill alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#icon" class="nav-link">Icon alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#alert-link" class="nav-link">Alert link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#additional-content" class="nav-link">Additional content</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dismissing" class="nav-link">Dismissing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,868 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Badges</h1>
|
||||
<p class="lead">Documentation and examples for badges, our small count and labeling component. Read the <a href="https://getbootstrap.com/docs/5.1/components/badge/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units.</p>
|
||||
<div class="example">
|
||||
<h1 class="mb-2">Example heading <span class="badge bg-primary">New</span></h1>
|
||||
<h2 class="mb-2">Example heading <span class="badge bg-primary">New</span></h2>
|
||||
<h3 class="mb-2">Example heading <span class="badge bg-primary">New</span></h3>
|
||||
<h4 class="mb-2">Example heading <span class="badge bg-primary mb-1">New</span></h4>
|
||||
<h5 class="mb-2">Example heading <span class="badge bg-primary mb-1">New</span></h5>
|
||||
<h6 class="mb-2">Example heading <span class="badge bg-primary">New</span></h6>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultBadge">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><h1>Example heading <span class="badge bg-primary">New</span></h1>
|
||||
<h2>Example heading <span class="badge bg-primary">New</span></h2>
|
||||
<h3>Example heading <span class="badge bg-primary">New</span></h3>
|
||||
<h4>Example heading <span class="badge bg-primary">New</span></h4>
|
||||
<h5>Example heading <span class="badge bg-primary">New</span></h5>
|
||||
<h6>Example heading <span class="badge bg-primary">New</span></h6></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultBadge">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="buttons">Buttons</h4>
|
||||
<p class="mb-3">Badges can be used as part of links or buttons to provide a counter.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary">
|
||||
Notifications <span class="badge bg-light text-dark">4</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonBadge">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary">
|
||||
Notifications <span class="badge bg-light text-dark">4</span>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonBadge">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="positioned">Positioned</h4>
|
||||
<p class="mb-3">Use utilities to modify a <code>.badge</code> and position it in the corner of a link or button.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Inbox
|
||||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
||||
99+
|
||||
<span class="visually-hidden">unread messages</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="positionedBadge">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary position-relative">
|
||||
Inbox
|
||||
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
||||
99+
|
||||
<span class="visually-hidden">unread messages</span>
|
||||
</span>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#positionedBadge">copy</button>
|
||||
</figure>
|
||||
|
||||
<p class="mb-3">You can also replace the <code>.badge</code> class with a few more utilities without a count for a more generic indicator.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
Profile
|
||||
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
|
||||
<span class="visually-hidden">New alerts</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="positionedNoCountBadge">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary position-relative">
|
||||
Profile
|
||||
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
|
||||
<span class="visually-hidden">New alerts</span>
|
||||
</span>
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#positionedNoCountBadge">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="contextual-variations">Contextual variations</h4>
|
||||
<p class="mb-3">Use background utility classes to quickly change the appearance of a badge.</p>
|
||||
<div class="example">
|
||||
<span class="badge bg-primary">Primary</span>
|
||||
<span class="badge bg-secondary">Secondary</span>
|
||||
<span class="badge bg-success">Success</span>
|
||||
<span class="badge bg-danger">Danger</span>
|
||||
<span class="badge bg-warning">Warning</span>
|
||||
<span class="badge bg-info">Info</span>
|
||||
<span class="badge bg-light text-dark">Light</span>
|
||||
<span class="badge bg-dark">Dark</span>
|
||||
</div>
|
||||
<figure class="highlight" id="contextualVariations">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><span class="badge bg-primary">Primary</span>
|
||||
<span class="badge bg-secondary">Secondary</span>
|
||||
<span class="badge bg-success">Success</span>
|
||||
<span class="badge bg-danger">Danger</span>
|
||||
<span class="badge bg-warning">Warning</span>
|
||||
<span class="badge bg-info">Info</span>
|
||||
<span class="badge bg-light text-dark">Light</span>
|
||||
<span class="badge bg-dark">Dark</span></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#contextualVariations">copy</button>
|
||||
</figure>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="example">
|
||||
<span class="badge border border-primary text-primary">Primary</span>
|
||||
<span class="badge border border-secondary text-secondary">Secondary</span>
|
||||
<span class="badge border border-success text-success">Success</span>
|
||||
<span class="badge border border-danger text-danger">Danger</span>
|
||||
<span class="badge border border-warning text-warning">Warning</span>
|
||||
<span class="badge border border-info text-info">Info</span>
|
||||
<span class="badge border border-light text-light">Light</span>
|
||||
<span class="badge border border-dark text-dark">Dark</span>
|
||||
</div>
|
||||
<figure class="highlight" id="contextualVariationsOutline">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><span class="badge border border-primary text-primary">Primary</span></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#contextualVariationsOutline">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="pill-badges">Pill badges</h4>
|
||||
<p class="mb-3">Use the <code>.rounded-pill</code> utility class to make badges more rounded with a larger <code>border-radius</code>.</p>
|
||||
<div class="example">
|
||||
<span class="badge rounded-pill bg-primary">Primary</span>
|
||||
<span class="badge rounded-pill bg-secondary">Secondary</span>
|
||||
<span class="badge rounded-pill bg-success">Success</span>
|
||||
<span class="badge rounded-pill bg-danger">Danger</span>
|
||||
<span class="badge rounded-pill bg-warning">Warning</span>
|
||||
<span class="badge rounded-pill bg-info">Info</span>
|
||||
<span class="badge rounded-pill bg-light text-dark">Light</span>
|
||||
<span class="badge rounded-pill bg-dark">Dark</span>
|
||||
</div>
|
||||
<figure class="highlight" id="pillBadges">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><span class="badge rounded-pill bg-primary">Primary</span></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#pillBadges">copy</button>
|
||||
</figure>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="example">
|
||||
<span class="badge rounded-pill border border-primary text-primary">Primary</span>
|
||||
<span class="badge rounded-pill border border-secondary text-secondary">Secondary</span>
|
||||
<span class="badge rounded-pill border border-success text-success">Success</span>
|
||||
<span class="badge rounded-pill border border-danger text-danger">Danger</span>
|
||||
<span class="badge rounded-pill border border-warning text-warning">Warning</span>
|
||||
<span class="badge rounded-pill border border-info text-info">Info</span>
|
||||
<span class="badge rounded-pill border border-light text-light">Light</span>
|
||||
<span class="badge rounded-pill border border-dark text-dark">Dark</span>
|
||||
</div>
|
||||
<figure class="highlight" id="pillBadgesOutline">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><span class="badge rounded-pill border border-primary text-primary">Primary</span></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#pillBadgesOutline">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="link-badges">Link badges</h4>
|
||||
<div class="example">
|
||||
<a href="javascript:;" class="badge bg-primary">Primary</a>
|
||||
<a href="javascript:;" class="badge bg-secondary">Secondary</a>
|
||||
<a href="javascript:;" class="badge bg-success">Success</a>
|
||||
<a href="javascript:;" class="badge bg-danger">Danger</a>
|
||||
<a href="javascript:;" class="badge bg-warning">Warning</a>
|
||||
<a href="javascript:;" class="badge bg-info">Info</a>
|
||||
<a href="javascript:;" class="badge bg-light text-dark">Light</a>
|
||||
<a href="javascript:;" class="badge bg-dark">Dark</a>
|
||||
</div>
|
||||
<figure class="highlight" id="linkBadges">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a href="#" class="badge bg-primary">Primary</a></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#linkBadges">copy</button>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#positioned" class="nav-link">Positioned</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#contextual-variations" class="nav-link">Contextual variations</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#pill-badges" class="nav-link">Pill badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#link-badges" class="nav-link">Link badges</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,801 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Breadcrumbs</h1>
|
||||
<p class="lead">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. Read the <a href="https://getbootstrap.com/docs/5.1/components/breadcrumb/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<div class="example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultBreadcrumbs">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultBreadcrumbs">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="line">Line seperator</h4>
|
||||
<div class="example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-line">
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="lineBreadcrumb">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-line">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#lineBreadcrumb">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dot">Dot seperator</h4>
|
||||
<div class="example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-dot">
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="dotBreadcrumb">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-dot">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#dotBreadcrumb">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="arrow">Arrow seperator</h4>
|
||||
<div class="example">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-arrow">
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="javascript:;">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="arrowBreadcrumb">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-arrwo">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#arrowBreadcrumb">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="changing-seperator">Changing the separator</h4>
|
||||
<p class="mb-3">Separators are automatically added in CSS through <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before"><code>::before</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content"><code>content</code></a>. They can be changed by changing <code>$breadcrumb-divider</code>. The <a href="https://sass-lang.com/documentation/Sass/Script/Functions.html#quote-instance_method">quote</a> function is needed to generate the quotes around a string, so if you want <code>></code> as separator, you can use this:</p>
|
||||
<figure class="highlight" id="divider">
|
||||
<pre><code class="language-css"><script type="script/prism-html-markup">$breadcrumb-divider: quote(">");</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#divider">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">It’s also possible to use a base64 embedded SVG icon:</p>
|
||||
<figure class="highlight" id="base64">
|
||||
<pre><code class="language-css"><script type="script/prism-html-markup">$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#base64">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">The separator can be removed by setting <code>$breadcrumb-divider</code> to <code>none</code>:</p>
|
||||
<figure class="highlight" id="seperatorNone">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup">$breadcrumb-divider: none;</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#seperatorNone">copy</button>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#line" class="nav-link">Line seperator</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dot" class="nav-link">Dot seperator</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#arrow" class="nav-link">Arrow seperator</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#changing-seperator" class="nav-link">Changing seperator</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,987 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Button group</h1>
|
||||
<p class="lead">Group a series of buttons together on a single line or stack them in a vertical column. Read the <a href="https://getbootstrap.com/docs/5.1/components/button-group/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="checkbox-radio">Checkbox and radio button groups</h4>
|
||||
<p class="mb-3">Combine button-like checkbox and radio <a href="https://getbootstrap.com/docs/5.1/forms/checks-radios/" target="_blank">toggle buttons</a> into a seamless looking button group.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
|
||||
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="checkboxGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
|
||||
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#checkboxGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="radioGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
|
||||
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#radioGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="toolbar">Button toolbar</h4>
|
||||
<p class="mb-3">Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.</p>
|
||||
<div class="example">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group me-2 mb-1 mb-md-0" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="btn-group me-2 mb-1 mb-md-0" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-primary">5</button>
|
||||
<button type="button" class="btn btn-primary">6</button>
|
||||
<button type="button" class="btn btn-primary">7</button>
|
||||
</div>
|
||||
<div class="btn-group mb-1 mb-md-0" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-primary">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonToolbar">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
...
|
||||
</div>
|
||||
<div class="btn-group me-2" role="group" aria-label="Second group"> ... </div>
|
||||
<div class="btn-group" role="group" aria-label="Third group"> ... </div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonToolbar">copy</button>
|
||||
</figure>
|
||||
<p class="mb-3">Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities though to space things properly.</p>
|
||||
<div class="example">
|
||||
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group me-2 mb-1 mb-md-0" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mb-1 mb-md-0" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
<button type="button" class="btn btn-primary">3</button>
|
||||
<button type="button" class="btn btn-primary">4</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon2">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="mixed">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group me-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
..
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
...
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="btnGroupAddon2">@</div>
|
||||
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#mixed">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizing">Sizing</h4>
|
||||
<p class="mb-3">Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>, including each one when nesting multiple groups.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group btn-group-lg mb-1 mb-md-0" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group mb-1 mb-md-0" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm mb-1 mb-md-0" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonSizing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-primary">Left</button>
|
||||
<button type="button" class="btn btn-primary">Middle</button>
|
||||
<button type="button" class="btn btn-primary">Right</button>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonSizing">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="nesting">Nesting</h4>
|
||||
<p class="mb-3">Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonNesting">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-primary">2</button>
|
||||
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonNesting">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="vertical">Vertical variation</h4>
|
||||
<p class="mb-3">Make a set of buttons appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.</p>
|
||||
<div class="example">
|
||||
<div class="btn-group-vertical me-1" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
<button type="button" class="btn btn-primary">Button</button>
|
||||
</div>
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
<a class="dropdown-item" href="javascript:;">Dropdown link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="verticalVariations">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="btn-group-vertical">
|
||||
...
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#verticalVariations">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#checkbox-radio" class="nav-link">Checkbox and radio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#toolbar" class="nav-link">Button toolbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizing" class="nav-link">Sizing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#nesting" class="nav-link">Nesting</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#vertical" class="nav-link">Vertical variations</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,981 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Carousel</h1>
|
||||
<p class="lead">A slideshow component for cycling through elements—images or slides of text—like a carousel. Read the <a href="https://getbootstrap.com/docs/5.1/components/carousel/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="slides-only">Slides only</h4>
|
||||
<p class="mb-3">Here’s a carousel with slides only. Note the presence of the <code>.d-block</code> and <code>.w-100</code> on carousel images to prevent browser default image alignment.</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="slidesOnly">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#slidesOnly">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-controls">With controls</h4>
|
||||
<p class="mb-3">Adding in the previous and next controls:</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="withControls">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleControls" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withControls">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-indicators">With indicators</h4>
|
||||
<p class="mb-3">You can also add the indicators to the carousel, alongside the controls, too.</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="withIndicators">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleIndicators" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withIndicators">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-captions">With captions</h4>
|
||||
<p class="mb-3">Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.carousel-item</code>. They can be easily hidden on smaller viewports, as shown below, with optional <a href="https://getbootstrap.com/docs/5.1/utilities/display/" target="_blank">display utilities</a>. We hide them initially with <code>.d-none</code> and bring them back on medium-sized devices with <code>.d-md-block</code>.</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleCaptions" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleCaptions" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="withCaptions">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="example">
|
||||
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleCaptions" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleCaptions" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withCaptions">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="crossfade">Crossfade</h4>
|
||||
<p class="mb-3">Add <code>.carousel-fade</code> to your carousel to animate slides with a fade transition instead of a slide.</p>
|
||||
<div class="example">
|
||||
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleFade" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleFade" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="crossfadeCarousel">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="..." class="d-block w-100" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" data-bs-target="#carouselExampleFade" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" data-bs-target="#carouselExampleFade" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#crossfadeCarousel">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#slides-only" class="nav-link">Slides only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-controls" class="nav-link">With controls</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-indicators" class="nav-link">With indicators</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-captions" class="nav-link">With captions</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#crossfade" class="nav-link">Crossfade</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,768 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Collapse</h1>
|
||||
<p class="lead">Toggle the visibility of content across your project with a few classes and javascript. Read the <a href="https://getbootstrap.com/docs/5.1/components/collapse/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic Example</h4>
|
||||
<p class="mb-3">Click the buttons below to show and hide another element via class changes:</p>
|
||||
<div class="example">
|
||||
<p>
|
||||
<a class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-target
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultBreadcrumbs">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><p>
|
||||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-target
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultBreadcrumbs">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="multiple">Multiple targets</h4>
|
||||
<p class="mb-3">A <code><button></code> or <code><a></code> can show and hide multiple elements by referencing them with a selector in its <code>href</code> or <code>data-bs-target</code> attribute. Multiple <code><button></code> or <code><a></code> can show and hide an element if they each reference it with their <code>href</code> or <code>data-bs-target</code> attribute</p>
|
||||
<div class="example">
|
||||
<p>
|
||||
<a class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||
<button class="btn btn-primary mb-1 mb-md-0" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="multipleTargets">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><p>
|
||||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="collapse multi-collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#multipleTargets">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Default collapse</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,931 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">List Group</h1>
|
||||
<p class="lead">List groups are a flexible and powerful component for displaying a series of content. Read the <a href="https://getbootstrap.com/docs/5.1/components/list-group/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
<hr>
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="active-items">Active items</h4>
|
||||
<p class="mb-3">Add <code>.active</code> to a <code>.list-group-item</code> to indicate the current active selection.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item active">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="activeItems">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||||
<li class="list-group-item active">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#activeItems">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="disabled-items">Disabled items</h4>
|
||||
<p class="mb-3">Add <code>.disabled</code> to a <code>.list-group-item</code> to make it <em>appear</em> disabled. Note that some elements with <code>.disabled</code> will also require custom JavaScript to fully disable their click events (e.g., links).</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="disabledItems">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||||
<li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#disabledItems">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="links-buttons">Links and buttons</h4>
|
||||
<p class="mb-3">Use <code><a></code>s or <code><button></code>s to create <em>actionable</em> list group items with hover, disabled, and active states by adding <code>.list-group-item-action</code>.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="list-group">
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="javascript:;" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="linksButtons">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="list-group">
|
||||
<a href="#" class="list-group-item list-group-item-action active">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#linksButtons">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="flush">Flush</h4>
|
||||
<p class="mb-3">Add <code>.list-group-flush</code> to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Flush">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Flush">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="with-badges">With badges</h4>
|
||||
<p class="mb-3">Add badges to any list group item to show unread counts, activity, and more with the help of some <a href="https://getbootstrap.com/docs/5.1/utilities/flex/" target="_blank">utilities</a>.</p>
|
||||
<div class="example">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A list item
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A second list item
|
||||
<span class="badge bg-primary rounded-pill">2</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A third list item
|
||||
<span class="badge bg-primary rounded-pill">1</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="withBadges">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-group">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A list item
|
||||
<span class="badge bg-primary rounded-pill">14</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A second list item
|
||||
<span class="badge bg-primary rounded-pill">2</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
A third list item
|
||||
<span class="badge bg-primary rounded-pill">1</span>
|
||||
</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#withBadges">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="checkboxes-radios">Checkboxes and radios</h4>
|
||||
<p class="mb-3">Place Bootstrap’s checkboxes and radios within list group items and customize as needed.</p>
|
||||
<div class="example">
|
||||
<div class="list-group">
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
First checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Second checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Third checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Fourth checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Fifth checkbox
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="checkboxesRadios">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="list-group">
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
First checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Second checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Third checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Fourth checkbox
|
||||
</label>
|
||||
<label class="list-group-item">
|
||||
<input class="form-check-input me-1" type="checkbox" value="">
|
||||
Fifth checkbox
|
||||
</label>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#checkboxesRadios">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#active-items" class="nav-link">Active items</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#disabled-items" class="nav-link">Disabled items</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#links-buttons" class="nav-link">Linkd and buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#flush" class="nav-link">Flush</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#with-badges" class="nav-link">With badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#checkboxes-radios" class="nav-link">Checkboxes radios</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,894 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Media Object</h1>
|
||||
<p class="lead">Construct highly repetitive components like blog comments, tweets, and the like.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="wd-100 wd-sm-200 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="wd-100 wd-sm-200 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="nesting">Nesting</h4>
|
||||
<p class="mb-3">Can be infinitely nested.</p>
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
|
||||
<div class="d-flex align-items-start mt-3">
|
||||
<a class="me-3" href="#">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="wd-100 wd-sm-150" alt="...">
|
||||
</a>
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Nesting">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
|
||||
<div class="d-flex align-items-start mt-3">
|
||||
<a class="me-3" href="#">
|
||||
<img src="..." class="wd-100 wd-sm-150" alt="...">
|
||||
</a>
|
||||
<div>
|
||||
<h5 class="mb-2">Media heading</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Nesting">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="alignment">Alignment</h4>
|
||||
<p class="mb-3">Can be aligned to the top (default), middle, or end.</p>
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="align-self-start wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Top-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Alignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="align-self-start wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Top-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Alignment">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="align-self-center wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Center-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="centerAlign">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="align-self-center wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
...
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#centerAlign">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="align-self-end wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mb-2">Bottom-aligned media</h5>
|
||||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
|
||||
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="bottomAlign">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<img src="..." class="align-self-end wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
...
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#bottomAlign">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="order">Order</h4>
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-start">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">Media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="wd-100 wd-sm-150 ms-3" alt="...">
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Order">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-start">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">Media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
<img src="..." class="wd-100 wd-sm-150 ms-3" alt="...">
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Order">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="media-list">Media list</h4>
|
||||
<div class="example">
|
||||
<ul class="list-unstyled">
|
||||
<li class="d-flex align-items-start">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex align-items-start my-4">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex align-items-start">
|
||||
<img src="../../../assets/images/others/placeholder.jpg" class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="mediaList">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="list-unstyled">
|
||||
<li class="d-flex align-items-start">
|
||||
<img src="..." class="wd-100 wd-sm-150 me-3" alt="...">
|
||||
<div>
|
||||
<h5 class="mt-0 mb-1">List-based media object</h5>
|
||||
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
|
||||
</div>
|
||||
</li>
|
||||
<li class="d-flex align-items-start my-4">
|
||||
...
|
||||
</li>
|
||||
<li class="d-flex align-items-start">
|
||||
...
|
||||
</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#mediaList">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#nesting" class="nav-link">Nesting</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#alignment" class="nav-link">Alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#order" class="nav-link">Order</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#media-list" class="nav-link">Media list</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,913 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Navs</h1>
|
||||
<p class="lead">Documentation and examples for how to use Bootstrap’s included navigation components. Read the <a href="https://getbootstrap.com/docs/5.1/components/navs/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
|
||||
<div class="example">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="h-alignment">Horizontal alignment</h4>
|
||||
<p class="mb-3">Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.</p>
|
||||
<div class="example">
|
||||
<ul class="nav justify-content-center">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="hAlignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav justify-content-center">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#hAlignment">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<ul class="nav justify-content-end">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="hAlignmentB">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav justify-content-end">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#hAlignmentB">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="v-alignment">Vertical alignment</h4>
|
||||
<p class="mb-3">Stack your navigation by changing the flex item direction with the <code>.flex-column</code> utility. </p>
|
||||
<div class="example">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="vAlignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav justify-content-center">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#vAlignment">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="tabs">Tabs</h4>
|
||||
<p class="mb-3">Takes the basic nav from above and adds the <code>.nav-tabs</code> class to generate a tabbed interface.</p>
|
||||
<div class="example">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="Tabs">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-tabs">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Tabs">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="fill-justify">Fill and justify</h4>
|
||||
<p class="mb-3">Force your <code>.nav</code>’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your <code>.nav-item</code>s, use <code>.nav-fill</code>.</p>
|
||||
<div class="example">
|
||||
<ul class="nav nav-pills nav-fill">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Much longer nav link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="fillJustify">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-fill">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#fillJustify">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="tabs-dropdown">Tabs with dropdowns</h4>
|
||||
<div class="example">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="javascript:;">Active</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="javascript:;" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="javascript:;">Action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Another action</a>
|
||||
<a class="dropdown-item" href="javascript:;">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="javascript:;">Separated link</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:;">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="javascript:;" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="tabsDropdown">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Separated link</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#tabsDropdown">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#h-alignment" class="nav-link">Horizontal alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#v-alignment" class="nav-link">Vertical alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tabs" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#fill-justify" class="nav-link">Fill and justify</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#tabs-dropdown" class="nav-link">Tabs with dropdowns</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,857 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Pagination</h1>
|
||||
<p class="lead">To indicate a series of related content exists across multiple pages. Read the <a href="https://getbootstrap.com/docs/5.1/components/pagination/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Pagination is built with list HTML elements so screen readers can announce the number of available links.</p>
|
||||
<div class="example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0">
|
||||
<li class="page-item"><a class="page-link" href="javascript:;"><i data-feather="chevron-left"></i></a></li>
|
||||
<li class="page-item active"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item disabled"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;"><i data-feather="chevron-right"></i></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav aria-label="Page navigation example">
|
||||
<ul class="pagination">
|
||||
<li class="page-item"><a class="page-link" href="#"><i data-feather="chevron-left"></i></a></li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item disabled"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#"><i data-feather="chevron-right"></i></a></li>
|
||||
</ul>
|
||||
</nav></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="sizing">Sizing</h4>
|
||||
<p class="mb-3">Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional sizes.</p>
|
||||
<div class="example">
|
||||
<ul class="pagination mb-0 pagination-lg">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">
|
||||
1
|
||||
<span class="visually-hidden">(current)</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="Sizing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination pagination-lg">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Sizing">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<ul class="pagination mb-0 pagination-sm">
|
||||
<li class="page-item active" aria-current="page">
|
||||
<span class="page-link">
|
||||
1
|
||||
<span class="visually-hidden">(current)</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="sizingSm">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination pagination-sm">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#sizingSm">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="alignment">Alignment</h4>
|
||||
<p class="mb-3">Change the alignment of pagination components with flexbox utilities.</p>
|
||||
<div class="example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0 justify-content-center">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Alignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination justify-content-center">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Alignment">copy</button>
|
||||
</figure>
|
||||
<div class="example">
|
||||
<ul class="pagination mb-0 justify-content-end">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="highlight" id="alignmentEnd">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination justify-content-end">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#alignmentEnd">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="seperated">Sperated</h4>
|
||||
<p class="mb-3">Add calss <code>.pagination-separated</code>.</p>
|
||||
<div class="example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0 pagination-separated">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Seperated">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination pagination-separated">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Seperated">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="rounded">Rounded</h4>
|
||||
<p class="mb-3">Add calss <code>.pagination-rounded</code>.</p>
|
||||
<div class="example">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination mb-0 pagination-rounded">
|
||||
<li class="page-item disabled">
|
||||
<a class="page-link" href="javascript:;" tabindex="-1" aria-disabled="true">Previous</a>
|
||||
</li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="javascript:;">3</a></li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<figure class="highlight" id="Rounded">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="pagination pagination-rounded">
|
||||
...
|
||||
</ul></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Rounded">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#sizing" class="nav-link">Sizing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#alignment" class="nav-link">Alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#seperated" class="nav-link">Seperated</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#rounded" class="nav-link">Rounded</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,760 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Popovers</h1>
|
||||
<p class="lead">Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. Read the <a href="https://getbootstrap.com/docs/5.1/components/popovers/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="enable">Enable popovers everywhere</h4>
|
||||
<p class="mb-3">One way to initialize all popovers on a page would be to select them by their <code>data-bs-toggle</code> attribute:</p>
|
||||
<figure class="highlight" id="Enable">
|
||||
<pre><code class="language-javascript"><script type="script/prism-javascript-markup">var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl)
|
||||
})</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Enable">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Popovers rely on the 3rd party library <a href="https://popper.js.org/">Popper.js</a> for positioning. You must include <a href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <code>bootstrap.bundle.min.js</code> / <code>bootstrap.bundle.js</code> which contains Popper.js in order for popovers to work!</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="directions">Four directions</h4>
|
||||
<p class="mb-3">Four options are available: top, right, bottom, and left aligned.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus
|
||||
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="Directions">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus
|
||||
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Directions">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="dissmiss">Dismiss on next click</h4>
|
||||
<p class="mb-3">Use the <code>focus</code> trigger to dismiss popovers on the user’s next click of a different element than the toggle element.</p>
|
||||
<div class="example">
|
||||
<a tabindex="0" class="btn btn-primary" role="button" data-bs-toggle="popover" data-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
|
||||
</div>
|
||||
<figure class="highlight" id="Dissmiss">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><a tabindex="0" class="btn btn-primary" role="button" data-bs-toggle="popover" data-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Dissmiss">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#enable" class="nav-link">Enable popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#directions" class="nav-link">Four directions</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#dissmiss" class="nav-link">Dismiss on next click</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,868 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Progress</h1>
|
||||
<p class="lead">Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. Read the <a href="https://getbootstrap.com/docs/5.1/components/progress/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Basic example</h4>
|
||||
<p class="mb-3">Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="labels">Labels</h4>
|
||||
<p class="mb-3">Add labels to your progress bars by placing text within the <code>.progress-bar</code>.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Labels">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Labels">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="height">Height</h4>
|
||||
<p class="mb-3">We only set a <code>height</code> value on the <code>.progress</code>, so if you change that value the inner <code>.progress-bar</code> will automatically resize accordingly.</p>
|
||||
<div class="example">
|
||||
<div class="progress mb-3 ht-5">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3 ht-10">
|
||||
<div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress ht-15">
|
||||
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Height">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress ht-5">
|
||||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3 ht-10">
|
||||
<div class="progress-bar" role="progressbar" style="width: 55%;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress ht-15">
|
||||
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Height">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="backgrounds">Backgrounds</h4>
|
||||
<p class="mb-3">Use background utility classes to change the appearance of individual progress bars.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Backgrounds">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Backgrounds">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="multiple">Multiple bars</h4>
|
||||
<p class="mb-3">Include multiple progress bars in a progress component if you need.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="MultipleBars">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#MultipleBars">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="striped">Striped</h4>
|
||||
<p class="mb-3">Add <code>.progress-bar-striped</code> to any <code>.progress-bar</code> to apply a stripe via CSS gradient over the progress bar’s background color.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Striped">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Striped">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="animated">Animated stripes</h4>
|
||||
<p class="mb-3">The striped gradient can also be animated. Add <code>.progress-bar-animated</code> to <code>.progress-bar</code> to animate the stripes right to left via CSS3 animations.</p>
|
||||
<div class="example">
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Animated">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="progress">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Animated">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Default</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#labels" class="nav-link">Labels</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#height" class="nav-link">Height</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#backgrounds" class="nav-link">Backgrounds</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#multiple" class="nav-link">Multiple</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#striped" class="nav-link">Striped</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#animated" class="nav-link">Animated stripes</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,723 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Scrollbar</h1>
|
||||
<p class="lead">Custom scrollbar on an element. Read the <a href="https://github.com/mdbootstrap/perfect-scrollbar" target="_blank">Official Perfect-scrollbar Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Example</h4>
|
||||
<p class="mb-3">The base scrollbar component must position to relative and have a fix height.</p>
|
||||
<div class="example">
|
||||
<div class="perfect-scrollbar-example p-4 border">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, quam vitae? Saepe, quidem at in non quibusdam sint ipsa suscipit inventore. Dolore quae, quas obcaecati officia autem itaque numquam magni?</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium dolores vel ipsa fugiat maiores culpa accusamus, quisquam veniam quo deleniti velit facere aliquid, ut quis quibusdam reprehenderit quod aliquam perspiciatis?</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae placeat cumque ea, temporibus, ipsam officia nesciunt rem quas quibusdam necessitatibus ad. Quos, nihil consequatur doloribus dicta dolore ab quibusdam assumenda!</p>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, consectetur suscipit sed, soluta aperiam vitae unde voluptatibus deserunt, ipsum voluptatem iure. Enim quibusdam dolorum facilis non tempore labore, doloremque sint.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni placeat distinctio delectus fugiat nobis quia expedita architecto vero quidem id ullam, itaque tempore. Qui, a doloremque. Molestias vel labore cumque.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime qui tempora mollitia eaque doloremque architecto, odit, pariatur rem harum vitae quod. Illo sed odit laboriosam voluptatem officiis magnam sequi maiores!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, fugiat porro dolore libero aspernatur tenetur qui ratione deleniti commodi modi accusamus maiores iure ipsa, tempore necessitatibus rerum eligendi quidem voluptates!</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, quam vitae? Saepe, quidem at in non quibusdam sint ipsa suscipit inventore. Dolore quae, quas obcaecati officia autem itaque numquam magni?</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium dolores vel ipsa fugiat maiores culpa accusamus, quisquam veniam quo deleniti velit facere aliquid, ut quis quibusdam reprehenderit quod aliquam perspiciatis?</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae placeat cumque ea, temporibus, ipsam officia nesciunt rem quas quibusdam necessitatibus ad. Quos, nihil consequatur doloribus dicta dolore ab quibusdam assumenda!</p>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, consectetur suscipit sed, soluta aperiam vitae unde voluptatibus deserunt, ipsum voluptatem iure. Enim quibusdam dolorum facilis non tempore labore, doloremque sint.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni placeat distinctio delectus fugiat nobis quia expedita architecto vero quidem id ullam, itaque tempore. Qui, a doloremque. Molestias vel labore cumque.</p>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime qui tempora mollitia eaque doloremque architecto, odit, pariatur rem harum vitae quod. Illo sed odit laboriosam voluptatem officiis magnam sequi maiores!</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, fugiat porro dolore libero aspernatur tenetur qui ratione deleniti commodi modi accusamus maiores iure ipsa, tempore necessitatibus rerum eligendi quidem voluptates!</p>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="perfect-scrollbar-example">
|
||||
<!-- content goes here -->
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
<figure class="highlight" id="Default2">
|
||||
<pre><code class="language-css"><script type="script/prism-html-markup"><!-- css -->
|
||||
.perfect-scrollbar-example {
|
||||
position: relative;
|
||||
max-height: 250px;
|
||||
}</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default2">copy</button>
|
||||
</figure>
|
||||
<figure class="highlight" id="Default3">
|
||||
<pre><code class="language-javascript"><script type="script/prism-html-markup">// javascript
|
||||
var scrollbarExample = new PerfectScrollbar('.perfect-scrollbar-example');</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default3">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Example</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<script src="../../../assets/js/demo.js"></script>
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,892 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Scrollspy</h1>
|
||||
<p class="lead">Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport. Read the <a href="https://getbootstrap.com/docs/5.1/components/scrollspy/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Example in navbar</h4>
|
||||
<p class="mb-3">Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.</p>
|
||||
<div class="example">
|
||||
<nav id="navbar-example1" class="navbar navbar-light bg-light shadow-none">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fat">@fat</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#mdo">@mdo</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#one">one</a>
|
||||
<a class="dropdown-item" href="#two">two</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item active" href="#three">three</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example1" data-bs-offset="0" class="scrollspy-example">
|
||||
<h4 id="fat">@fat</h4>
|
||||
<p class="mb-4">Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<h4 id="mdo">@mdo</h4>
|
||||
<p class="mb-4">Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
|
||||
<h4 id="one">one</h4>
|
||||
<p class="mb-4">Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
|
||||
<h4 id="two">two</h4>
|
||||
<p class="mb-4">In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
|
||||
<h4 id="three">three</h4>
|
||||
<p class="mb-4">Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav id="navbar-example1" class="navbar navbar-light bg-light shadow-none">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fat">@fat</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#mdo">@mdo</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#one">one</a>
|
||||
<a class="dropdown-item" href="#two">two</a>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#three">three</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0">
|
||||
<h4 id="fat">@fat</h4>
|
||||
<p>...</p>
|
||||
<h4 id="mdo">@mdo</h4>
|
||||
<p>...</p>
|
||||
<h4 id="one">one</h4>
|
||||
<p>...</p>
|
||||
<h4 id="two">two</h4>
|
||||
<p>...</p>
|
||||
<h4 id="three">three</h4>
|
||||
<p>...</p>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="nestedNav">Example with nested nav</h4>
|
||||
<p class="mb-3">Scrollspy also works with nested <code>.nav</code>s. If a nested <code>.nav</code> is <code>.active</code>, its parents will also be <code>.active</code>. Scroll the area next to the navbar and watch the active class change.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-3">
|
||||
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch shadow-none">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link active" href="#item-1">Item 1</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
</nav>
|
||||
<a class="nav-link" href="#item-2">Item 2</a>
|
||||
<a class="nav-link" href="#item-3">Item 3</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-6 col-md-9">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2">
|
||||
<h4 id="item-1">Item 1</h4>
|
||||
<p class="mb-4">Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
|
||||
<h5 id="item-1-1">Item 1-1</h5>
|
||||
<p class="mb-3">Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.</p>
|
||||
<h5 id="item-1-2">Item 1-2</h5>
|
||||
<p class="mb-3">Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.</p>
|
||||
<h4 id="item-2">Item 2</h4>
|
||||
<p class="mb-4">Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
|
||||
<h4 id="item-3">Item 3</h4>
|
||||
<p class="mb-4">Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
|
||||
<h5 id="item-3-1">Item 3-1</h5>
|
||||
<p class="mb-3">Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.</p>
|
||||
<h5 id="item-3-2">Item 3-2</h5>
|
||||
<p class="mb-3">Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.</p>
|
||||
<h5 id="item-3-2">Item 3-2</h5>
|
||||
<p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="NestedNav">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch shadow-none">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link" href="#item-1">Item 1</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
|
||||
</nav>
|
||||
<a class="nav-link" href="#item-2">Item 2</a>
|
||||
<a class="nav-link" href="#item-3">Item 3</a>
|
||||
<nav class="nav nav-pills flex-column">
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
|
||||
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
|
||||
</nav>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0">
|
||||
<h4 id="item-1">Item 1</h4>
|
||||
<p>...</p>
|
||||
<h5 id="item-1-1">Item 1-1</h5>
|
||||
<p>...</p>
|
||||
<h5 id="item-1-2">Item 1-2</h5>
|
||||
<p>...</p>
|
||||
<h4 id="item-2">Item 2</h4>
|
||||
<p>...</p>
|
||||
<h4 id="item-3">Item 3</h4>
|
||||
<p>...</p>
|
||||
<h5 id="item-3-1">Item 3-1</h5>
|
||||
<p>...</p>
|
||||
<h5 id="item-3-2">Item 3-2</h5>
|
||||
<p>...</p>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#NestedNav">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="listGroup">Example with list-group</h4>
|
||||
<p class="mb-3">Scrollspy also works with <code>.list-group</code>s. Scroll the area next to the list group and watch the active class change.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div id="list-example" class="list-group">
|
||||
<a class="list-group-item list-group-item-action active" href="#list-item-1">Item 1</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example">
|
||||
<h4 id="list-item-1">Item 1</h4>
|
||||
<p class="mb-4">Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
|
||||
<h4 id="list-item-2">Item 2</h4>
|
||||
<p class="mb-4">Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
|
||||
<h4 id="list-item-3">Item 3</h4>
|
||||
<p class="mb-4">Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
|
||||
<h4 id="list-item-4">Item 4</h4>
|
||||
<p class="mb-4">Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="ListGroup">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div id="list-example" class="list-group">
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
|
||||
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
|
||||
</div>
|
||||
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example">
|
||||
<h4 id="list-item-1">Item 1</h4>
|
||||
<p>...</p>
|
||||
<h4 id="list-item-2">Item 2</h4>
|
||||
<p>...</p>
|
||||
<h4 id="list-item-3">Item 3</h4>
|
||||
<p>...</p>
|
||||
<h4 id="list-item-4">Item 4</h4>
|
||||
<p>...</p>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#ListGroup">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">With navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#nestedNav" class="nav-link">With nested nav</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#listGroup" class="nav-link">With list-group</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,941 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Spinner</h1>
|
||||
<p class="df-lead">Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript. Read the <a href="https://getbootstrap.com/docs/5.1/components/spinners/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Border Spinner</h4>
|
||||
<p class="mb-3">Use the border spinners for a lightweight loading indicator.</p>
|
||||
<div class="example">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="colors">Colors</h4>
|
||||
<p class="mb-3">The border spinner uses <code>currentColor</code> for its <code>border-color</code>, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.</p>
|
||||
<div class="example">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-secondary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-success" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-warning" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-info" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-light" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-dark" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Colors">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-secondary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-success" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-warning" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-info" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-light" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-border text-dark" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Colors">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="growing">Growing spinner</h4>
|
||||
<p class="mb-3">If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!</p>
|
||||
<div class="example">
|
||||
<div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-secondary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-success" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-warning" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-info" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-light" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow text-dark" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Growing">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="spinner-grow text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Growing">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="alignment">Alignment</h4>
|
||||
<p class="mb-3">Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.</p>
|
||||
<div class="example">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Alignment">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex justify-content-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Alignment">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="d-flex align-items-center">
|
||||
<strong>Loading...</strong>
|
||||
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="alignmentFlex">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="d-flex align-items-center">
|
||||
<strong>Loading...</strong>
|
||||
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#alignmentFlex">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="clearfix">
|
||||
<div class="spinner-border float-end" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="alignmentFlot">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="clearfix">
|
||||
<div class="spinner-border float-end" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#alignmentFlot">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<div class="text-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="alignmentTextCenter">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="text-center">
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#alignmentTextCenter">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="size">Size</h4>
|
||||
<p class="mb-3">Add <code>.spinner-border-sm</code> and <code>.spinner-grow-sm</code> to make a smaller spinner that can quickly be used within other components.</p>
|
||||
<div class="example">
|
||||
<div class="spinner-border spinner-border-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow spinner-grow-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="Size">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="spinner-border spinner-border-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div class="spinner-grow spinner-grow-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Size">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="buttons">Buttons</h4>
|
||||
<p class="mb-3">Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.</p>
|
||||
<div class="example">
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="Buttons">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Buttons">copy</button>
|
||||
</figure>
|
||||
|
||||
<div class="example">
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="buttonsB">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button>
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#buttonsB">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Border spinner</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#colors" class="nav-link">Colors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#growing" class="nav-link">Growing spinner</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#alignment" class="nav-link">Alignment</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#size" class="nav-link">Size</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#buttons" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,909 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Tabs</h1>
|
||||
<p class="lead">Use the Bootstrap tab javascript plugin to extend navigational tabs and pills to create tabbable panes of local content. Read the <a href="https://getbootstrap.com/docs/5.1/components/navs-tabs/#javascript-behavior" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Example</h4>
|
||||
<p class="mb-3">The basic tab component consists of links, that are aligned horizontally.</p>
|
||||
<div class="example">
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="disabled-tab" data-bs-toggle="tab" href="#disabled" role="tab" aria-controls="disabled" aria-selected="false">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border border-top-0 p-3" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
||||
<h6 class="mb-1">Home</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
||||
<h6 class="mb-1">Profile</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
||||
<h6 class="mb-1">Contact</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="disabled" role="tabpanel" aria-labelledby="disabled-tab">
|
||||
<h6 class="mb-1">disabled</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="defaultTab">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="disabled-tab" data-bs-toggle="tab" href="#disabled" role="tab" aria-controls="disabled" aria-selected="false">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content border border-top-0 p-3" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
|
||||
<div class="tab-pane fade" id="disabled" role="tabpanel" aria-labelledby="disabled-tab">...</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#defaultTab">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="vertical">Vertical</h4>
|
||||
<p class="mb-3">The tab component that display vertically.</p>
|
||||
<div class="example">
|
||||
<div class="row">
|
||||
<div class="col-5 col-md-3 pe-0">
|
||||
<div class="nav nav-tabs nav-tabs-vertical" id="v-tab" role="tablist" aria-orientation="vertical">
|
||||
<a class="nav-link active" id="v-home-tab" data-bs-toggle="pill" href="#v-home" role="tab" aria-controls="v-home" aria-selected="true">Home</a>
|
||||
<a class="nav-link" id="v-profile-tab" data-bs-toggle="pill" href="#v-profile" role="tab" aria-controls="v-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-link" id="v-messages-tab" data-bs-toggle="pill" href="#v-messages" role="tab" aria-controls="v-messages" aria-selected="false">Messages</a>
|
||||
<a class="nav-link" id="v-settings-tab" data-bs-toggle="pill" href="#v-settings" role="tab" aria-controls="v-settings" aria-selected="false">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 col-md-9 ps-0">
|
||||
<div class="tab-content tab-content-vertical border p-3" id="v-tabContent">
|
||||
<div class="tab-pane fade show active" id="v-home" role="tabpanel" aria-labelledby="v-home-tab">
|
||||
<h6 class="mb-1">Home</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. <br> Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-profile" role="tabpanel" aria-labelledby="v-profile-tab">
|
||||
<h6 class="mb-1">Profile</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-messages" role="tabpanel" aria-labelledby="v-messages-tab">
|
||||
<h6 class="mb-1">Messages</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum.<br> Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-settings" role="tabpanel" aria-labelledby="v-settings-tab">
|
||||
<h6 class="mb-1">Settings</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat.<br> Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="verticalTab">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><div class="row">
|
||||
<div class="col-5 col-md-3 pe-0">
|
||||
<div class="nav nav-tabs nav-tabs-vertical" id="v-tab" role="tablist" aria-orientation="vertical">
|
||||
<a class="nav-link active" id="v-home-tab" data-bs-toggle="pill" href="#v-home" role="tab" aria-controls="v-home" aria-selected="true">Home</a>
|
||||
<a class="nav-link" id="v-profile-tab" data-bs-toggle="pill" href="#v-profile" role="tab" aria-controls="v-profile" aria-selected="false">Profile</a>
|
||||
<a class="nav-link" id="v-messages-tab" data-bs-toggle="pill" href="#v-messages" role="tab" aria-controls="v-messages" aria-selected="false">Messages</a>
|
||||
<a class="nav-link" id="v-settings-tab" data-bs-toggle="pill" href="#v-settings" role="tab" aria-controls="v-settings" aria-selected="false">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7 col-md-9 ps-0">
|
||||
<div class="tab-content tab-content-vertical border p-3" id="v-tabContent">
|
||||
<div class="tab-pane fade show active" id="v-home" role="tabpanel" aria-labelledby="v-home-tab">
|
||||
<h6 class="mb-1">Home</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
<br>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-profile" role="tabpanel" aria-labelledby="v-profile-tab">
|
||||
<h6 class="mb-1">Profile</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-messages" role="tabpanel" aria-labelledby="v-messages-tab">
|
||||
<h6 class="mb-1">Messages</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="v-settings" role="tabpanel" aria-labelledby="v-settings-tab">
|
||||
<h6 class="mb-1">Settings</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#verticalTab">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="line-variation">Line variation</h4>
|
||||
<p class="mb-3">The tab component that display line indicator for active item.</p>
|
||||
<div class="example">
|
||||
<ul class="nav nav-tabs nav-tabs-line" id="lineTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-line-tab" data-bs-toggle="tab" href="#line-home" role="tab" aria-controls="line-home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-line-tab" data-bs-toggle="tab" href="#line-profile" role="tab" aria-controls="line-profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-line-tab" data-bs-toggle="tab" href="#line-contact" role="tab" aria-controls="line-contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="disabled-line-tab" data-bs-toggle="tab" href="#line-disabled" role="tab" aria-controls="line-disabled" aria-selected="false">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content mt-3" id="lineTabContent">
|
||||
<div class="tab-pane fade show active" id="line-home" role="tabpanel" aria-labelledby="home-line-tab">
|
||||
<h6 class="mb-1">Home</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="line-profile" role="tabpanel" aria-labelledby="profile-line-tab">
|
||||
<h6 class="mb-1">Profile</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="line-contact" role="tabpanel" aria-labelledby="contact-line-tab">
|
||||
<h6 class="mb-1">Contact</h6>
|
||||
<p>Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing
|
||||
exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna
|
||||
consequat voluptate minim amet aliquip ipsum aute laboris nisi.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="line-disabled" role="tabpanel" aria-labelledby="disabled-line-tab">
|
||||
<h6 class="mb-1">disabled</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="highlight" id="lineTabVariation">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><ul class="nav nav-tabs nav-tabs-line" id="lineTab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="home-line-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="profile-line-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="contact-line-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" id="disabled-line-tab" data-bs-toggle="tab" href="#disabled" role="tab" aria-controls="disabled" aria-selected="false">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content mt-3" id="lineTabContent">
|
||||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-line-tab">...</div>
|
||||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-line-tab">...</div>
|
||||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-line-tab">...</div>
|
||||
<div class="tab-pane fade" id="disabled" role="tabpanel" aria-labelledby="disabled-line-tab">...</div>
|
||||
</div></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#lineTabVariation">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Basic example</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#vertical" class="nav-link">Vertical</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#line-variation" class="nav-link">Line variation</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,735 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: NobleUI - HTML Bootstrap 5 Admin Dashboard Template
|
||||
Author: NobleUI
|
||||
Website: https://www.nobleui.com
|
||||
Portfolio: https://themeforest.net/user/nobleui/portfolio
|
||||
Contact: nobleui123@gmail.com
|
||||
Purchase: https://1.envato.market/nobleui_admin
|
||||
License: For each use you must have a valid license purchased only from above link in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Responsive HTML Admin Dashboard Template based on Bootstrap 5">
|
||||
<meta name="author" content="NobleUI">
|
||||
<meta name="keywords" content="nobleui, bootstrap, bootstrap 5, bootstrap5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
|
||||
|
||||
<title>NobleUI - HTML Bootstrap 5 Admin Dashboard Template</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<!-- End fonts -->
|
||||
|
||||
<!-- core:css -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/core/core.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin css for this page -->
|
||||
<link rel="stylesheet" href="../../../assets/vendors/prismjs/themes/prism.css">
|
||||
<!-- End plugin css for this page -->
|
||||
|
||||
<!-- inject:css -->
|
||||
<link rel="stylesheet" href="../../../assets/fonts/feather-font/css/iconfont.css">
|
||||
<link rel="stylesheet" href="../../../assets/vendors/flag-icon-css/css/flag-icon.min.css">
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Layout styles -->
|
||||
<link rel="stylesheet" href="../../../assets/css/demo2/style.css">
|
||||
<!-- End layout styles -->
|
||||
|
||||
<link rel="shortcut icon" href="../../../assets/images/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="main-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_sidebar.html -->
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href="#" class="sidebar-brand">
|
||||
Noble<span>UI</span>
|
||||
</a>
|
||||
<div class="sidebar-toggler not-active">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-body">
|
||||
<ul class="nav">
|
||||
<li class="nav-item nav-category">Main</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../dashboard.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="box"></i>
|
||||
<span class="link-title">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">web apps</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#emails" role="button" aria-expanded="false" aria-controls="emails">
|
||||
<i class="link-icon" data-feather="mail"></i>
|
||||
<span class="link-title">Email</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="emails">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/inbox.html" class="nav-link">Inbox</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/read.html" class="nav-link">Read</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/email/compose.html" class="nav-link">Compose</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/chat.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="message-square"></i>
|
||||
<span class="link-title">Chat</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/apps/calendar.html" class="nav-link">
|
||||
<i class="link-icon" data-feather="calendar"></i>
|
||||
<span class="link-title">Calendar</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Components</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#uiComponents" role="button" aria-expanded="false" aria-controls="uiComponents">
|
||||
<i class="link-icon" data-feather="feather"></i>
|
||||
<span class="link-title">UI Kit</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="uiComponents">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/accordion.html" class="nav-link">Accordion</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/alerts.html" class="nav-link">Alerts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/badges.html" class="nav-link">Badges</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/breadcrumbs.html" class="nav-link">Breadcrumbs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/buttons.html" class="nav-link">Buttons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/button-group.html" class="nav-link">Button group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/cards.html" class="nav-link">Cards</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/carousel.html" class="nav-link">Carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/collapse.html" class="nav-link">Collapse</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/dropdowns.html" class="nav-link">Dropdowns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/list-group.html" class="nav-link">List group</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/media-object.html" class="nav-link">Media object</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/modal.html" class="nav-link">Modal</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navs.html" class="nav-link">Navs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/navbar.html" class="nav-link">Navbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/pagination.html" class="nav-link">Pagination</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/popover.html" class="nav-link">Popovers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/progress.html" class="nav-link">Progress</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollbar.html" class="nav-link">Scrollbar</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/scrollspy.html" class="nav-link">Scrollspy</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/spinners.html" class="nav-link">Spinners</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tabs.html" class="nav-link">Tabs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/ui-components/tooltips.html" class="nav-link">Tooltips</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#advancedUI" role="button" aria-expanded="false" aria-controls="advancedUI">
|
||||
<i class="link-icon" data-feather="anchor"></i>
|
||||
<span class="link-title">Advanced UI</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="advancedUI">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/cropper.html" class="nav-link">Cropper</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/owl-carousel.html" class="nav-link">Owl carousel</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sortablejs.html" class="nav-link">SortableJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/advanced-ui/sweet-alert.html" class="nav-link">Sweet Alert</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#forms" role="button" aria-expanded="false" aria-controls="forms">
|
||||
<i class="link-icon" data-feather="inbox"></i>
|
||||
<span class="link-title">Forms</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="forms">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/basic-elements.html" class="nav-link">Basic Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/advanced-elements.html" class="nav-link">Advanced Elements</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/editors.html" class="nav-link">Editors</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/forms/wizard.html" class="nav-link">Wizard</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#charts" role="button" aria-expanded="false" aria-controls="charts">
|
||||
<i class="link-icon" data-feather="pie-chart"></i>
|
||||
<span class="link-title">Charts</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="charts">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/apex.html" class="nav-link">Apex</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/chartjs.html" class="nav-link">ChartJs</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/flot.html" class="nav-link">Flot</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/morrisjs.html" class="nav-link">Morris</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/peity.html" class="nav-link">Peity</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/charts/sparkline.html" class="nav-link">Sparkline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#tables" role="button" aria-expanded="false" aria-controls="tables">
|
||||
<i class="link-icon" data-feather="layout"></i>
|
||||
<span class="link-title">Table</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="tables">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/basic-table.html" class="nav-link">Basic Tables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/tables/data-table.html" class="nav-link">Data Table</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#icons" role="button" aria-expanded="false" aria-controls="icons">
|
||||
<i class="link-icon" data-feather="smile"></i>
|
||||
<span class="link-title">Icons</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="icons">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/feather-icons.html" class="nav-link">Feather Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/flag-icons.html" class="nav-link">Flag Icons</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/icons/mdi-icons.html" class="nav-link">Mdi Icons</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Pages</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#general-pages" role="button" aria-expanded="false" aria-controls="general-pages">
|
||||
<i class="link-icon" data-feather="book"></i>
|
||||
<span class="link-title">Special pages</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="general-pages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/blank-page.html" class="nav-link">Blank page</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/faq.html" class="nav-link">Faq</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/invoice.html" class="nav-link">Invoice</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/profile.html" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/pricing.html" class="nav-link">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/general/timeline.html" class="nav-link">Timeline</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#authPages" role="button" aria-expanded="false" aria-controls="authPages">
|
||||
<i class="link-icon" data-feather="unlock"></i>
|
||||
<span class="link-title">Authentication</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="authPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/login.html" class="nav-link">Login</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/auth/register.html" class="nav-link">Register</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-bs-toggle="collapse" href="#errorPages" role="button" aria-expanded="false" aria-controls="errorPages">
|
||||
<i class="link-icon" data-feather="cloud-off"></i>
|
||||
<span class="link-title">Error</span>
|
||||
<i class="link-arrow" data-feather="chevron-down"></i>
|
||||
</a>
|
||||
<div class="collapse" id="errorPages">
|
||||
<ul class="nav sub-menu">
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/404.html" class="nav-link">404</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../../pages/error/500.html" class="nav-link">500</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item nav-category">Docs</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.nobleui.com/html/documentation/docs.html" target="_blank" class="nav-link">
|
||||
<i class="link-icon" data-feather="hash"></i>
|
||||
<span class="link-title">Documentation</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="settings-sidebar">
|
||||
<div class="sidebar-body">
|
||||
<a href="#" class="settings-sidebar-toggler">
|
||||
<i data-feather="settings"></i>
|
||||
</a>
|
||||
<div class="theme-wrapper">
|
||||
<h6 class="text-muted mb-2">Light Theme:</h6>
|
||||
<a class="theme-item" href="../../../demo1/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/light.jpg" alt="light theme">
|
||||
</a>
|
||||
<h6 class="text-muted mb-2">Dark Theme:</h6>
|
||||
<a class="theme-item active" href="../../../demo2/dashboard.html">
|
||||
<img src="../../../assets/images/screenshots/dark.jpg" alt="light theme">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-wrapper">
|
||||
|
||||
<!-- partial:../../partials/_navbar.html -->
|
||||
<nav class="navbar">
|
||||
<a href="#" class="sidebar-toggler">
|
||||
<i data-feather="menu"></i>
|
||||
</a>
|
||||
<div class="navbar-content">
|
||||
<form class="search-form">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text">
|
||||
<i data-feather="search"></i>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="navbarForm" placeholder="Search here...">
|
||||
</div>
|
||||
</form>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="flag-icon flag-icon-us mt-1" title="us"></i> <span class="ms-1 me-1 d-none d-md-inline-block">English</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-us" title="us" id="us"></i> <span class="ms-1"> English </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-fr" title="fr" id="fr"></i> <span class="ms-1"> French </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-de" title="de" id="de"></i> <span class="ms-1"> German </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-pt" title="pt" id="pt"></i> <span class="ms-1"> Portuguese </span></a>
|
||||
<a href="javascript:;" class="dropdown-item py-2"><i class="flag-icon flag-icon-es" title="es" id="es"></i> <span class="ms-1"> Spanish </span></a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="appsDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="grid"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="appsDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p class="mb-0 fw-bold">Web Apps</p>
|
||||
<a href="javascript:;" class="text-muted">Edit</a>
|
||||
</div>
|
||||
<div class="row g-0 p-1">
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/chat.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="message-square" class="icon-lg mb-1"></i><p class="tx-12">Chat</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/apps/calendar.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="calendar" class="icon-lg mb-1"></i><p class="tx-12">Calendar</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/email/inbox.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="mail" class="icon-lg mb-1"></i><p class="tx-12">Email</p></a>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<a href="../../pages/general/profile.html" class="dropdown-item d-flex flex-column align-items-center justify-content-center wd-70 ht-70"><i data-feather="instagram" class="icon-lg mb-1"></i><p class="tx-12">Profile</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="mail"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="messageDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>9 New Messages</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Leonardo Payne</p>
|
||||
<p class="tx-12 text-muted">Project status</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Carl Henson</p>
|
||||
<p class="tx-12 text-muted">Client meeting</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Jensen Combs</p>
|
||||
<p class="tx-12 text-muted">Project updates</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">Project deatline</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">2 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="d-flex justify-content-between flex-grow-1">
|
||||
<div class="me-4">
|
||||
<p>Yaretzi Mayo</p>
|
||||
<p class="tx-12 text-muted">New record</p>
|
||||
</div>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i data-feather="bell"></i>
|
||||
<div class="indicator">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="notificationDropdown">
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
|
||||
<p>6 New Notifications</p>
|
||||
<a href="javascript:;" class="text-muted">Clear all</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="gift"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New Order Recieved</p>
|
||||
<p class="tx-12 text-muted">30 min ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="alert-circle"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Server Limit Reached!</p>
|
||||
<p class="tx-12 text-muted">1 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="userr">
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>New customer registered</p>
|
||||
<p class="tx-12 text-muted">2 sec ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="layers"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Apps are ready for update</p>
|
||||
<p class="tx-12 text-muted">5 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="javascript:;" class="dropdown-item d-flex align-items-center py-2">
|
||||
<div class="wd-30 ht-30 d-flex align-items-center justify-content-center bg-primary rounded-circle me-3">
|
||||
<i class="icon-sm text-white" data-feather="download"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1 me-2">
|
||||
<p>Download completed</p>
|
||||
<p class="tx-12 text-muted">6 hrs ago</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="px-3 py-2 d-flex align-items-center justify-content-center border-top">
|
||||
<a href="javascript:;">View all</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="profileDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img class="wd-30 ht-30 rounded-circle" src="https://via.placeholder.com/30x30" alt="profile">
|
||||
</a>
|
||||
<div class="dropdown-menu p-0" aria-labelledby="profileDropdown">
|
||||
<div class="d-flex flex-column align-items-center border-bottom px-5 py-3">
|
||||
<div class="mb-3">
|
||||
<img class="wd-80 ht-80 rounded-circle" src="https://via.placeholder.com/80x80" alt="">
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="tx-16 fw-bolder">Amiah Burton</p>
|
||||
<p class="tx-12 text-muted">amiahburton@gmail.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list-unstyled p-1">
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="../../pages/general/profile.html" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="edit"></i>
|
||||
<span>Edit Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="repeat"></i>
|
||||
<span>Switch User</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-item py-2">
|
||||
<a href="javascript:;" class="text-body ms-0">
|
||||
<i class="me-2 icon-md" data-feather="log-out"></i>
|
||||
<span>Log Out</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- partial -->
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 main-content ps-xl-4 pe-xl-5">
|
||||
<h1 class="page-title">Tooltips</h1>
|
||||
<p class="lead">Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. Read the <a href="https://getbootstrap.com/docs/5.1/components/tooltips/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="enable">Enable tooltips everywhere</h4>
|
||||
<p class="mb-3">One way to initialize all tooltips on a page would be to select them by their <code>data-bs-toggle</code> attribute:</p>
|
||||
<figure class="highlight" id="Enable">
|
||||
<pre><code class="language-javascript"><script type="script/prism-html-markup">var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
})</script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Enable">copy</button>
|
||||
</figure>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4 id="default">Example</h4>
|
||||
<p class="mb-3">Hover over the links below to see tooltips.</p>
|
||||
<div class="example">
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
|
||||
Tooltip on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
|
||||
Tooltip on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
|
||||
Tooltip on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary mb-1 mb-md-0" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
||||
Tooltip with HTML
|
||||
</button>
|
||||
</div>
|
||||
<figure class="highlight" id="Default">
|
||||
<pre><code class="language-markup"><script type="script/prism-html-markup"><button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
|
||||
Tooltip on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
|
||||
Tooltip on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
|
||||
Tooltip on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
||||
Tooltip with HTML
|
||||
</button></script></code></pre>
|
||||
<button type="button" class="btn btn-clipboard" data-clipboard-target="#Default">copy</button>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="col-xl-2 content-nav-wrapper">
|
||||
<ul class="nav content-nav d-flex flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="#enable" class="nav-link">Enable</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#default" class="nav-link">Example</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- partial:../../partials/_footer.html -->
|
||||
<footer class="footer d-flex flex-column flex-md-row align-items-center justify-content-between px-4 py-3 border-top small">
|
||||
<p class="text-muted mb-1 mb-md-0">Copyright © 2022 <a href="https://www.nobleui.com" target="_blank">NobleUI</a>.</p>
|
||||
<p class="text-muted">Handcrafted With <i class="mb-1 text-primary ms-1 icon-sm" data-feather="heart"></i></p>
|
||||
</footer>
|
||||
<!-- partial -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- core:js -->
|
||||
<script src="../../../assets/vendors/core/core.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Plugin js for this page -->
|
||||
<script src="../../../assets/vendors/prismjs/prism.js"></script>
|
||||
<script src="../../../assets/vendors/clipboard/clipboard.min.js"></script>
|
||||
<!-- End plugin js for this page -->
|
||||
|
||||
<!-- inject:js -->
|
||||
<script src="../../../assets/vendors/feather-icons/feather.min.js"></script>
|
||||
<script src="../../../assets/js/template.js"></script>
|
||||
<!-- endinject -->
|
||||
|
||||
<!-- Custom js for this page -->
|
||||
<!-- End custom js for this page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user