Categories

Tuesday, May 21, 2024
#919814419350 therichposts@gmail.com
Bootstrap 5ChartjscssFree Admin Dashboard TemplatesHTML5Javascript

Bootstrap 5 Most Downloaded Free Admin Template

Bootstrap 5 Most Downloaded Free Admin Template

Hello guys how are you? Welcome back on my blog. Today in this blog post, I am going to share Bootstrap 5 Most Downloaded Free Admin Template.

Live Demo
Project folder structure
Project folder structure

1. Guys very first here is the git repo link from where we will download the assets and place inside our project folder:

GitHub Repo

2. Guys now we need to create index.html file and place below code inside it:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Dashboard | Jassa Dashboard Template</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="Bootstrap admin template, Dashboard UI Kit, Dashboard Template, Backend Panel, react dashboard, angular dashboard">
<meta name="author" content="codedthemes">

<link rel="icon" href="assets/images/favicon.svg" type="image/x-icon"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" id="main-font-link">

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

<link rel="stylesheet" href="assets/fonts/feather.css">

<link rel="stylesheet" href="assets/fonts/fontawesome.css">

<link rel="stylesheet" href="assets/fonts/material.css">

<link rel="stylesheet" href="assets/css/style.css" id="main-style-link">
<link rel="stylesheet" href="assets/css/style-preset.css">
</head>


<body>

<div class="loader-bg">
<div class="loader-track">
<div class="loader-fill"></div>
</div>
</div>


<nav class="pc-sidebar">
<div class="navbar-wrapper">
<div class="m-header">
<a href="index.html" class="b-brand text-primary">

<img src="assets/images/logo-dark.svg" alt class="logo logo-lg">
</a>
</div>
<div class="navbar-content">
<ul class="pc-navbar">
<li class="pc-item pc-caption">
<label>Dashboard</label>
<i class="ti ti-dashboard"></i>
</li>
<li class="pc-item">
<a href="index.html" class="pc-link"><span class="pc-micon"><i class="ti ti-dashboard"></i></span><span class="pc-mtext">Default</span></a>
</li>
<li class="pc-item pc-caption">
<label>Pages</label>
<i class="ti ti-news"></i>
</li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link"><span class="pc-micon"><i class="ti ti-key"></i></span><span class="pc-mtext">Authentication</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Authentication 1<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" target="_blank" href="login-v1.html">Login</a></li>
<li class="pc-item"><a class="pc-link" target="_blank" href="register-v1.html">Register</a></li>
</ul>
</li>
</ul>
</li>

<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link"><span class="pc-micon"><i class="ti ti-bug"></i></span><span class="pc-mtext">Maintenance</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" target="_blank" href="error-404.html">Error 404</a></li>
</ul>
</li>
<li class="pc-item pc-caption">
<label>Other</label>
<i class="ti ti-brand-chrome"></i>
</li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link"><span class="pc-micon"><i class="ti ti-menu"></i></span><span class="pc-mtext">Menu
levels</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Level 2.1</a></li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Level 2.2<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Level 3.1</a></li>
<li class="pc-item"><a class="pc-link" href="#!">Level 3.2</a></li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Level 3.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Level 4.1</a></li>
<li class="pc-item"><a class="pc-link" href="#!">Level 4.2</a></li>
</ul>
</li>
</ul>
</li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Level 2.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Level 3.1</a></li>
<li class="pc-item"><a class="pc-link" href="#!">Level 3.2</a></li>
<li class="pc-item pc-hasmenu">
<a href="#!" class="pc-link">Level 3.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
<ul class="pc-submenu">
<li class="pc-item"><a class="pc-link" href="#!">Level 4.1</a></li>
<li class="pc-item"><a class="pc-link" href="#!">Level 4.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="pc-item"><a href="sample-page.html" class="pc-link"><span class="pc-micon"><i class="ti ti-brand-chrome"></i></span><span class="pc-mtext">Sample page</span></a></li>
</ul>
<div class="pc-navbar-card bg-primary rounded">
<h4 class="text-white">More Free Demos</h4>
<a href="https://therichpost.com/category/free-admin-dashboard-templates/" target="_blank" class="btn btn-light text-primary">Free Admins</a>
</div>
<div class="w-100 text-center">
<div class="badge theme-version badge rounded-pill bg-light text-dark f-12"></div>
</div>
</div>
</div>
</nav>
 
<header class="pc-header">
<div class="header-wrapper"> 
<div class="me-auto pc-mob-drp">
<ul class="list-unstyled">
<li class="pc-h-item header-mobile-collapse">
<a href="#" class="pc-head-link head-link-secondary ms-0" id="sidebar-hide">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="pc-h-item pc-sidebar-popup">
<a href="#" class="pc-head-link head-link-secondary ms-0" id="mobile-collapse">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="dropdown pc-h-item d-inline-flex d-md-none">
<a class="pc-head-link head-link-secondary dropdown-toggle arrow-none m-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="ti ti-search"></i>
</a>
<div class="dropdown-menu pc-h-dropdown drp-search">
<form class="px-3">
<div class="form-group mb-0 d-flex align-items-center">
<i data-feather="search"></i>
<input type="search" class="form-control border-0 shadow-none" placeholder="Search here. . .">
</div>
</form>
</div>
</li>
<li class="pc-h-item d-none d-md-inline-flex">
<form class="header-search">
<i data-feather="search" class="icon-search"></i>
<input type="search" class="form-control" placeholder="Search here. . .">
<button class="btn btn-light-secondary btn-search"><i class="ti ti-adjustments-horizontal"></i></button>
</form>
</li>
</ul>
</div>

<div class="ms-auto">
<ul class="list-unstyled">
<li class="dropdown pc-h-item pc-mega-menu">
<a class="pc-head-link head-link-secondary dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="ti ti-access-point"></i>
</a>
<div class="dropdown-menu pc-h-dropdown pc-mega-dmenu">
<div class="row g-0">
<div class="col text-center image-block">
<img src="assets/images/pages/img-megamenu.svg" alt="image" class="img-fluid rounded">
</div>
<div class="col">
<h6 class="mega-title">UI Components</h6>
<ul class="pc-mega-list">
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Alerts</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Accordions</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Avatars</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Badges</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Breadcrumbs</a></li>
</ul>
</div>
<div class="col">
<h6 class="mega-title">UI Components</h6>
<ul class="pc-mega-list">
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Menus</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Modals</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Pagination</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Search Bar</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Tabs</a></li>
</ul>
</div>
<div class="col">
<h6 class="mega-title">Advance Components</h6>
<ul class="pc-mega-list">
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Advanced Stats</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Advanced Cards</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Lightbox</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Notification</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="dropdown pc-h-item">
<a class="pc-head-link head-link-primary dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="ti ti-language"></i>
</a>
<div class="dropdown-menu dropdown-menu-end pc-h-dropdown">
<a href="#!" class="dropdown-item">
<span>English <small>(UK)</small></span>
</a>
<a href="#!" class="dropdown-item">
<span>français <small>(French)</small></span>
</a>
<a href="#!" class="dropdown-item">
<span>Română <small>(Romanian)</small></span>
</a>
<a href="#!" class="dropdown-item">
<span>中国人 <small>(Chinese)</small></span>
</a>
</div>
</li>
<li class="dropdown pc-h-item">
<a class="pc-head-link head-link-secondary dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="ti ti-bell"></i>
</a>
<div class="dropdown-menu dropdown-notification dropdown-menu-end pc-h-dropdown">
<div class="dropdown-header">
<a href="#!" class="link-primary float-end text-decoration-underline">Mark as all read</a>
<h5>All Notification <span class="badge bg-warning rounded-pill ms-1">01</span></h5>
</div>
<div class="dropdown-header px-0 text-wrap header-notification-scroll position-relative" style="max-height: calc(100vh - 215px)">
<div class="list-group list-group-flush w-100">
<div class="list-group-item">
<select class="form-select">
<option value="all">All Notification</option>
<option value="new">New</option>
<option value="unread">Unread</option>
<option value="other">Other</option>
</select>
</div>
<div class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="assets/images/user/avatar-2.jpg" alt="user-image" class="user-avtar">
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">2 min ago</span>
<h5>John Doe</h5>
<p class="text-body fs-6">It is a long established fact that a reader will be distracted </p>
<div class="badge rounded-pill bg-light-danger">Unread</div>
<div class="badge rounded-pill bg-light-warning">New</div>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<div class="user-avtar bg-light-success"><i class="ti ti-building-store"></i></div>
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">3 min ago</span>
<h5>Store Verification Done</h5>
<p class="text-body fs-6">We have successfully received your request.</p>
<div class="badge rounded-pill bg-light-danger">Unread</div>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<div class="user-avtar bg-light-primary"><i class="ti ti-mailbox"></i></div>
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">5 min ago</span>
<h5>Check Your Mail.</h5>
<p class="text-body fs-6">All done! Now check your inbox as you're in for a sweet treat! </p>
<button class="btn btn-sm btn-primary">Mail <i class="ti ti-brand-telegram"></i></button>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="assets/images/user/avatar-1.jpg" alt="user-image" class="user-avtar">
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">8 min ago</span>
<h5>John Doe</h5>
<p class="text-body fs-6">Uploaded two file on &nbsp;<strong>21 Jan 2020</strong></p>
<div class="notification-file d-flex p-3 bg-light-secondary rounded">
<i class="ti ti-arrow-bar-to-down"></i>
<h5 class="m-0">demo.jpg</h5>
</div>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="assets/images/user/avatar-3.jpg" alt="user-image" class="user-avtar">
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">10 min ago</span>
<h5>Joseph William</h5>
<p class="text-body fs-6">It is a long established fact that a reader will be distracted </p>
<div class="badge rounded-pill bg-light-success">Confirmation of Account</div>
</div>
</div>
</div>
</div>
</div>
<div class="dropdown-divider"></div>
<div class="text-center py-2">
<a href="#!" class="link-primary">Mark as all read</a>
</div>
</div>
</li>
<li class="dropdown pc-h-item header-user-profile">
<a class="pc-head-link head-link-primary dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="assets/images/user/avatar-2.jpg" alt="user-image" class="user-avtar">
<span>
<i class="ti ti-settings"></i>
</span>
</a>
<div class="dropdown-menu dropdown-user-profile dropdown-menu-end pc-h-dropdown">
<div class="dropdown-header">
<h4>Good Morning, <span class="small text-muted"> John Doe</span></h4>
<p class="text-muted">Project Admin</p>
<form class="header-search">
<i data-feather="search" class="icon-search"></i>
<input type="search" class="form-control" placeholder="Search profile options">
</form>
<hr>
<div class="profile-notification-scroll position-relative" style="max-height: calc(100vh - 280px)">
<div class="upgradeplan-block bg-light-warning rounded">
<h4>More Free Admins</h4>
<a href="https://therichpost.com/category/free-admin-dashboard-templates/" target="_blank" class="btn btn-warning">Free Admins</a>
</div>
<hr>
<div class="settings-block bg-light-primary rounded">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Start DND Mode</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Allow Notifications</label>
</div>
</div>
<hr>
<a href="../application/account-profile-v1.html" class="dropdown-item">
<i class="ti ti-settings"></i>
<span>Account Settings</span>
</a>
<a href="../application/social-profile.html" class="dropdown-item">
<i class="ti ti-user"></i>
<span>Social Profile</span>
</a>
<a href="login-v1.html" class="dropdown-item">
<i class="ti ti-logout"></i>
<span>Logout</span>
</a>
</div>
</div>
</div>
</li>
</ul>
</div> </div>
</header>


<div class="pc-container">
<div class="pc-content">

<div class="row">

<div class="col-xl-4 col-md-6">
<div class="card bg-secondary-dark dashnum-card text-white overflow-hidden">
<span class="round small"></span>
<span class="round big"></span>
<div class="card-body">
<div class="row">
<div class="col">
<div class="avtar avtar-lg">
<i class="text-white ti ti-credit-card"></i>
</div>
</div>
<div class="col-auto">
<div class="btn-group">
<a href="#" class="avtar bg-secondary dropdown-toggle arrow-none" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ti ti-dots"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item">Import Card</button></li>
<li><button class="dropdown-item">Export</button></li>
</ul>
</div>
</div>
</div>
<span class="text-white d-block f-34 f-w-500 my-2">1350 <i class="ti ti-arrow-up-right-circle opacity-50"></i></span>
<p class="mb-0 opacity-50">Total Pending Orders</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6">
<div class="card bg-primary-dark dashnum-card text-white overflow-hidden">
<span class="round small"></span>
<span class="round big"></span>
<div class="card-body">
<div class="row">
<div class="col">
<div class="avtar avtar-lg">
<i class="text-white ti ti-credit-card"></i>
</div>
</div>
<div class="col-auto">
<ul class="nav nav-pills justify-content-end mb-0" id="chart-tab-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link text-white active" id="chart-tab-home-tab" data-bs-toggle="pill" data-bs-target="#chart-tab-home" role="tab" aria-controls="chart-tab-home" aria-selected="true">Month</button
                        >
</li>
<li class="nav-item" role="presentation">
<button class="nav-link text-white" id="chart-tab-profile-tab" data-bs-toggle="pill" data-bs-target="#chart-tab-profile" role="tab" aria-controls="chart-tab-profile" aria-selected="false">Year</button
                        >
</li>
</ul>
</div>
</div>
<div class="tab-content" id="chart-tab-tabContent">
<div class="tab-pane show active" id="chart-tab-home" role="tabpanel" aria-labelledby="chart-tab-home-tab" tabindex="0">
<div class="row">
<div class="col-6">
<span class="text-white d-block f-34 f-w-500 my-2">$1305 <i class="ti ti-arrow-up-right-circle opacity-50"></i></span>
<p class="mb-0 opacity-50">Total Earning</p>
</div>
<div class="col-6">
<div id="tab-chart-1"></div>
</div>
</div>
</div>
<div class="tab-pane" id="chart-tab-profile" role="tabpanel" aria-labelledby="chart-tab-profile-tab" tabindex="0">
<div class="row">
<div class="col-6">
<span class="text-white d-block f-34 f-w-500 my-2">$29961 <i class="ti ti-arrow-down-right-circle opacity-50"></i></span>
<p class="mb-0 opacity-50">C/W Last Year</p>
</div>
<div class="col-6">
<div id="tab-chart-2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-12">
<div class="card bg-primary-dark dashnum-card dashnum-card-small text-white overflow-hidden">
<span class="round bg-primary small"></span>
<span class="round bg-primary big"></span>
<div class="card-body p-3">
<div class="d-flex align-items-center">
<div class="avtar avtar-lg">
<i class="text-white ti ti-credit-card"></i>
</div>
<div class="ms-2">
<h4 class="text-white mb-1">$203k <i class="ti ti-arrow-up-right-circle opacity-50"></i></h4>
<p class="mb-0 opacity-50 text-sm">Net Profit</p>
</div>
</div>
</div>
</div>
<div class="card dashnum-card dashnum-card-small overflow-hidden">
<span class="round bg-warning small"></span>
<span class="round bg-warning big"></span>
<div class="card-body p-3">
<div class="d-flex align-items-center">
<div class="avtar avtar-lg bg-light-warning">
<i class="text-warning ti ti-credit-card"></i>
</div>
<div class="ms-2">
<h4 class="mb-1">$550K <i class="ti ti-arrow-up-right-circle opacity-50"></i></h4>
<p class="mb-0 opacity-50 text-sm">Total Revenue</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-8 col-md-12">
<div class="card">
<div class="card-body">
<div class="row mb-3 align-items-center">
<div class="col">
<small>Total Growth</small>
<h3>$2,324.00</h3>
</div>
<div class="col-auto">
<select class="form-select p-r-35">
<option>Today</option>
<option selected>This Month</option>
<option>This Year</option>
</select>
</div>
</div>
<div id="growthchart"></div>
</div>
</div>
</div>
<div class="col-xl-4 col-md-12">
<div class="card">
<div class="card-body">
<div class="row mb-3 align-items-center">
<div class="col">
<h4>Popular Stocks</h4>
</div>
<div class="col-auto"> </div>
</div>
<div class="rounded bg-light-secondary overflow-hidden mb-3">
<div class="px-3 pt-3">
<div class="row mb-1 align-items-start">
<div class="col">
<h5 class="text-secondary mb-0">Bajaj Finery</h5>
<small class="text-muted">10% Profit</small>
</div>
<div class="col-auto">
<h4 class="mb-0">$1839.00</h4>
</div>
</div>
</div>
<div id="bajajchart"></div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-0">
<div class="row align-items-start">
<div class="col">
<h5 class="mb-0">Bajaj Finery</h5>
<small class="text-success">10% Profit</small>
</div>
<div class="col-auto">
<h4 class="mb-0">$1839.00<span class="ms-2 align-top avtar avtar-xxs bg-light-success"><i class="ti ti-chevron-up text-success"></i></span
                        ></h4>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-start">
<div class="col">
<h5 class="mb-0">TTML</h5>
<small class="text-danger">10% Profit</small>
</div>
<div class="col-auto">
<h4 class="mb-0">$100.00<span class="ms-2 align-top avtar avtar-xxs bg-light-danger"><i class="ti ti-chevron-down text-danger"></i></span
                        ></h4>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-start">
<div class="col">
<h5 class="mb-0">Reliance</h5>
<small class="text-success">10% Profit</small>
</div>
<div class="col-auto">
<h4 class="mb-0">$200.00<span class="ms-2 align-top avtar avtar-xxs bg-light-success"><i class="ti ti-chevron-up text-success"></i></span
                        ></h4>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-start">
<div class="col">
<h5 class="mb-0">TTML</h5>
<small class="text-danger">10% Profit</small>
</div>
<div class="col-auto">
<h4 class="mb-0">$189.00<span class="ms-2 align-top avtar avtar-xxs bg-light-danger"><i class="ti ti-chevron-down text-danger"></i></span
                        ></h4>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-start">
<div class="col">
<h5 class="mb-0">Stolon</h5>
<small class="text-danger">10% Profit</small>
</div>
<div class="col-auto">
<h4 class="mb-0">$189.00<span class="ms-2 align-top avtar avtar-xxs bg-light-danger"><i class="ti ti-chevron-down text-danger"></i></span
                        ></h4>
</div>
</div>
</li>
</ul>
<div class="text-center">
<a href="#!" class="b-b-primary text-primary">View all <i class="ti ti-chevron-right"></i></a>
</div>
</div>
</div>
</div>

</div>

</div>
</div>

<footer class="pc-footer">
<div class="footer-wrapper container-fluid">
<div class="row">
<div class="col-sm-12 my-1">
<p class="m-0">Jassa &#9829;</p>
</div>
</div>
</div>
</footer> 

<div class="pct-c-btn">
<a href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvas_pc_layout">
<i class="ph-duotone ph-gear-six"></i>
</a>
</div>
<div class="offcanvas border-0 pct-offcanvas offcanvas-end" tabindex="-1" id="offcanvas_pc_layout">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Theme Customization</h5>
<div class="d-inline-flex align-items-center gap-2">
<button type="button" class="btn btn-sm rounded btn-outline-danger" id="layoutreset">Reset</button>
<a type="button" class="avtar avtar-s btn-link-danger btn-pc-default " data-bs-dismiss="offcanvas" aria-label="Close"><i class="ti ti-x f-20"></i></a>
</div>
</div>
<ul class="nav nav-tabs nav-fill pct-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation" data-bs-toggle="tooltip" title="Layout Settings">
<button class="nav-link active" id="pct-1-tab" data-bs-toggle="tab" data-bs-target="#pct-1-tab-pane" type="button" role="tab" aria-controls="pct-1-tab-pane" aria-selected="true"><i class="ti ti-color-swatch"></i></button>
</li>
<li class="nav-item" role="presentation" data-bs-toggle="tooltip" title="Font Settings">
<button class="nav-link" id="pct-2-tab" data-bs-toggle="tab" data-bs-target="#pct-2-tab-pane" type="button" role="tab" aria-controls="pct-2-tab-pane" aria-selected="false"><i class="ti ti-typography"></i></button>
</li>
</ul>
<div class="pct-body customizer-body">
<div class="offcanvas-body p-0">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="pct-1-tab-pane" role="tabpanel" aria-labelledby="pct-1-tab" tabindex="0">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="pc-dark">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Theme Mode</h5>
<p class="text-muted text-sm mb-0">Light / Dark / System</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-layout">
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn active" data-value="true" onclick="layout_change('light');" data-bs-toggle="tooltip" title="Light">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn" data-value="false" onclick="layout_change('dark');" data-bs-toggle="tooltip" title="Dark">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn" data-value="default" onclick="layout_change_default();" data-bs-toggle="tooltip" title="Automatically sets the theme based on user's operating system's color scheme.">
<span class="pc-lay-icon d-flex align-items-center justify-content-center">
<i class="ph-duotone ph-cpu"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<h5 class="mb-1">Accent color</h5>
<p class="text-muted text-sm mb-2">Choose your primary theme color</p>
<div class="theme-color preset-color">
<a href="#!" class="active" data-value="preset-1"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-2"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-3"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-4"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-5"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-6"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-7"><i class="ti ti-check"></i></a>
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Sidebar Caption</h5>
<p class="text-muted text-sm mb-0">Caption Hide / Show</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-nav-caption">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="true" onclick="layout_caption_change('true');" data-bs-toggle="tooltip" title="Caption Show">
<span class="pc-lay-icon"><span></span><span></span><span><span></span><span></span></span><span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="false" onclick="layout_caption_change('false');" data-bs-toggle="tooltip" title="Caption Hide">
<span class="pc-lay-icon"><span></span><span></span><span><span></span><span></span></span><span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="pc-rtl">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Theme Layout</h5>
<p class="text-muted text-sm">LTR/RTL</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-direction">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="false" onclick="layout_rtl_change('false');" data-bs-toggle="tooltip" title="LTR">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="true" onclick="layout_rtl_change('true');" data-bs-toggle="tooltip" title="RTL">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item pc-box-width">
<div class="pc-container-width">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Layout Width</h5>
<p class="text-muted text-sm">Full / Fixed width</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-container">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="false" onclick="change_box_container('false')" data-bs-toggle="tooltip" title="Full Width">
<span class="pc-lay-icon"><span></span><span></span><span></span><span><span></span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="true" onclick="change_box_container('true')" data-bs-toggle="tooltip" title="Fixed Width">
<span class="pc-lay-icon"><span></span><span></span><span></span><span><span></span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="pct-2-tab-pane" role="tabpanel" aria-labelledby="pct-2-tab" tabindex="0">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<h5 class="mb-1">Font Style</h5>
<p class="text-muted text-sm">Choose theme font</p>
<div class="theme-color theme-font-style">
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontRoboto" checked onclick="font_change('Roboto')">
<label class="form-check-label" for="layoutfontRoboto"> Roboto </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontPoppins" onclick="font_change('Poppins')">
<label class="form-check-label" for="layoutfontPoppins"> Poppins </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontInter" onclick="font_change('Inter')">
<label class="form-check-label" for="layoutfontInter"> Inter </label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<script src="assets/js/popper.min.js"></script>
<script src="assets/js/simplebar.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/custom-font.js"></script>
<script src="assets/js/pcoded.js"></script>
<script src="assets/js/feather.min.js"></script>
<script>layout_change('light');</script>
<script>font_change("Roboto");</script>
<script>change_box_container('false');</script>
<script>layout_caption_change('true');</script>
<script>layout_rtl_change('false');</script>
<script>preset_change("preset-1");</script>
<script src="assets/js/apexcharts.min.js"></script>
<script src="assets/js/dashboard-default.js"></script>

</body>

</html>

3. Guys now we need to create error-404.html file and place below code inside it:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Dashboard | Jassa Dashboard Template</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="Bootstrap admin template, Dashboard UI Kit, Dashboard Template, Backend Panel, react dashboard, angular dashboard">
<meta name="author" content="codedthemes">

<link rel="icon" href="assets/images/favicon.svg" type="image/x-icon"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" id="main-font-link">

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

<link rel="stylesheet" href="assets/fonts/feather.css">

<link rel="stylesheet" href="assets/fonts/fontawesome.css">

<link rel="stylesheet" href="assets/fonts/material.css">

<link rel="stylesheet" href="assets/css/style.css" id="main-style-link">
<link rel="stylesheet" href="assets/css/style-preset.css">
</head>

<body>

<div class="loader-bg">
<div class="loader-track">
<div class="loader-fill"></div>
</div>
</div>


<div class="maintenance-block">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card error-card">
<div class="card-body">
<div class="error-image-block">
<img class="image-animated img-fluid" src="assets/images/pages/img-maintenance-bg.svg" alt="image">
<img src="assets/images/pages/img-error-text.svg" class="img-404 error-text" alt="image">
<img src="assets/images/pages/img-error-primary-widget.svg" class="img-404 error-primary" alt="image">
<img src="assets/images/pages/img-error-secondary-widget.svg" class="img-404 puple error-secondary" alt="image">
</div>
<div class="text-center">
<h1 class="mt-4"><b>Something is wrong</b></h1>
<p class="mt-4 text-muted">The page you are looking was moved, removed,<br>
renamed, or might never exist!
</p>
<button type="button" class="btn btn-primary mb-3"><i class="ti ti-home me-2"></i>Home</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>



<div class="pct-c-btn">
<a href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvas_pc_layout">
<i class="ph-duotone ph-gear-six"></i>
</a>
</div>
<div class="offcanvas border-0 pct-offcanvas offcanvas-end" tabindex="-1" id="offcanvas_pc_layout">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Theme Customization</h5>
<div class="d-inline-flex align-items-center gap-2">
<button type="button" class="btn btn-sm rounded btn-outline-danger" id="layoutreset">Reset</button>
<a type="button" class="avtar avtar-s btn-link-danger btn-pc-default " data-bs-dismiss="offcanvas" aria-label="Close"><i class="ti ti-x f-20"></i></a>
</div>
</div>
<ul class="nav nav-tabs nav-fill pct-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation" data-bs-toggle="tooltip" title="Layout Settings">
<button class="nav-link active" id="pct-1-tab" data-bs-toggle="tab" data-bs-target="#pct-1-tab-pane" type="button" role="tab" aria-controls="pct-1-tab-pane" aria-selected="true"><i class="ti ti-color-swatch"></i></button>
</li>
<li class="nav-item" role="presentation" data-bs-toggle="tooltip" title="Font Settings">
<button class="nav-link" id="pct-2-tab" data-bs-toggle="tab" data-bs-target="#pct-2-tab-pane" type="button" role="tab" aria-controls="pct-2-tab-pane" aria-selected="false"><i class="ti ti-typography"></i></button>
</li>
</ul>
<div class="pct-body customizer-body">
<div class="offcanvas-body p-0">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="pct-1-tab-pane" role="tabpanel" aria-labelledby="pct-1-tab" tabindex="0">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="pc-dark">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Theme Mode</h5>
<p class="text-muted text-sm mb-0">Light / Dark / System</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-layout">
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn active" data-value="true" onclick="layout_change('light');" data-bs-toggle="tooltip" title="Light">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn" data-value="false" onclick="layout_change('dark');" data-bs-toggle="tooltip" title="Dark">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn" data-value="default" onclick="layout_change_default();" data-bs-toggle="tooltip" title="Automatically sets the theme based on user's operating system's color scheme.">
<span class="pc-lay-icon d-flex align-items-center justify-content-center">
<i class="ph-duotone ph-cpu"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<h5 class="mb-1">Accent color</h5>
<p class="text-muted text-sm mb-2">Choose your primary theme color</p>
<div class="theme-color preset-color">
<a href="#!" class="active" data-value="preset-1"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-2"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-3"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-4"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-5"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-6"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-7"><i class="ti ti-check"></i></a>
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Sidebar Caption</h5>
<p class="text-muted text-sm mb-0">Caption Hide / Show</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-nav-caption">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="true" onclick="layout_caption_change('true');" data-bs-toggle="tooltip" title="Caption Show">
<span class="pc-lay-icon"><span></span><span></span><span><span></span><span></span></span><span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="false" onclick="layout_caption_change('false');" data-bs-toggle="tooltip" title="Caption Hide">
<span class="pc-lay-icon"><span></span><span></span><span><span></span><span></span></span><span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="pc-rtl">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Theme Layout</h5>
<p class="text-muted text-sm">LTR/RTL</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-direction">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="false" onclick="layout_rtl_change('false');" data-bs-toggle="tooltip" title="LTR">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="true" onclick="layout_rtl_change('true');" data-bs-toggle="tooltip" title="RTL">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item pc-box-width">
<div class="pc-container-width">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Layout Width</h5>
<p class="text-muted text-sm">Full / Fixed width</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-container">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="false" onclick="change_box_container('false')" data-bs-toggle="tooltip" title="Full Width">
<span class="pc-lay-icon"><span></span><span></span><span></span><span><span></span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="true" onclick="change_box_container('true')" data-bs-toggle="tooltip" title="Fixed Width">
<span class="pc-lay-icon"><span></span><span></span><span></span><span><span></span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="pct-2-tab-pane" role="tabpanel" aria-labelledby="pct-2-tab" tabindex="0">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<h5 class="mb-1">Font Style</h5>
<p class="text-muted text-sm">Choose theme font</p>
<div class="theme-color theme-font-style">
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontRoboto" checked onclick="font_change('Roboto')">
<label class="form-check-label" for="layoutfontRoboto"> Roboto </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontPoppins" onclick="font_change('Poppins')">
<label class="form-check-label" for="layoutfontPoppins"> Poppins </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontInter" onclick="font_change('Inter')">
<label class="form-check-label" for="layoutfontInter"> Inter </label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/simplebar.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/custom-font.js"></script>
<script src="assets/js/pcoded.js"></script>
<script src="assets/js/feather.min.js"></script>
<script>layout_change('light');</script>
<script>font_change("Roboto");</script>
<script>change_box_container('false');</script>
<script>layout_caption_change('true');</script>
<script>layout_rtl_change('false');</script>
<script>preset_change("preset-1");</script>
</body>

</html>

4. Guys now we need to create login-v1.html file and place below code inside it:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Dashboard | Jassa Dashboard Template</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="Bootstrap admin template, Dashboard UI Kit, Dashboard Template, Backend Panel, react dashboard, angular dashboard">
<meta name="author" content="codedthemes">

<link rel="icon" href="assets/images/favicon.svg" type="image/x-icon"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" id="main-font-link">

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

<link rel="stylesheet" href="assets/fonts/feather.css">

<link rel="stylesheet" href="assets/fonts/fontawesome.css">

<link rel="stylesheet" href="assets/fonts/material.css">

<link rel="stylesheet" href="assets/css/style.css" id="main-style-link">
<link rel="stylesheet" href="assets/css/style-preset.css">
</head>


<body>

<div class="loader-bg">
<div class="loader-track">
<div class="loader-fill"></div>
</div>
</div>

<div class="auth-main">
<div class="auth-wrapper v1">
<div class="auth-form">
<div class="card mt-5">
<div class="card-body">
<div class="row">
<div class="d-flex justify-content-between">
<div>
<h2 class="text-secondary"><b>Hi, Welcome Back</b></h2>
<h4>Login in to your account</h4>
</div>
<a href="#">
<img src="assets/images/logo-dark.svg" alt="image" class="img-fluid brand-logo">
</a>
</div>
</div>
<div class="d-grid">
<button type="button" class="btn mt-2 bg-light-primary bg-light text-muted">
<img src="assets/images/authentication/google-icon.svg" alt="image">Sign In With Google
</button>
</div>
<div class="saprator mt-3">
<span>or</span>
</div>
<h5 class="my-4 d-flex justify-content-center">Sign in with Email address</h5>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="Email address / Username">
<label for="floatingInput">Email address / Username</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="floatingInput1" placeholder="Password">
<label for="floatingInput1">Password</label>
</div>
<div class="d-flex mt-1 justify-content-between">
<div class="form-check">
<input class="form-check-input input-primary" type="checkbox" id="customCheckc1" checked>
<label class="form-check-label text-muted" for="customCheckc1">Remember me</label>
</div>
<h5 class="text-secondary">Forgot Password?</h5>
</div>
<div class="d-grid mt-4">
<button type="button" class="btn btn-secondary">Sign In</button>
</div>
<hr>
<h5 class="d-flex justify-content-end">Don't have an account?</h5>
</div>
</div>
</div>
<div class="auth-sidecontent">
<div class="p-3 px-lg-5 text-center">
<div class="animation-content">
<img src="assets/images/authentication/authentication-blue-card.svg" alt="images" class="img-fluid blue-card mt-3">
<img src="assets/images/authentication/authentication-purple-card.svg" alt="images" class="img-fluid purple-card mt-3">
</div>
<div id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h1><b>Components Based Design System</b></h1>
<p class="f-12 mt-4">Powerful and easy to use multipurpose theme</p>
</div>
<div class="carousel-item">
<h1><b>Components Based Design System</b></h1>
<p class="f-12 mt-4">Powerful and easy to use multipurpose theme</p>
</div>
<div class="carousel-item">
<h1><b>Components Based Design System</b></h1>
<p class="f-12 mt-4">Powerful and easy to use multipurpose theme</p>
</div>
</div>
<div class="carousel-indicators position-relative">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pct-c-btn">
<a href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvas_pc_layout">
<i class="ph-duotone ph-gear-six"></i>
</a>
</div>
<div class="offcanvas border-0 pct-offcanvas offcanvas-end" tabindex="-1" id="offcanvas_pc_layout">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Theme Customization</h5>
<div class="d-inline-flex align-items-center gap-2">
<button type="button" class="btn btn-sm rounded btn-outline-danger" id="layoutreset">Reset</button>
<a type="button" class="avtar avtar-s btn-link-danger btn-pc-default " data-bs-dismiss="offcanvas" aria-label="Close"><i class="ti ti-x f-20"></i></a>
</div>
</div>
<ul class="nav nav-tabs nav-fill pct-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation" data-bs-toggle="tooltip" title="Layout Settings">
<button class="nav-link active" id="pct-1-tab" data-bs-toggle="tab" data-bs-target="#pct-1-tab-pane" type="button" role="tab" aria-controls="pct-1-tab-pane" aria-selected="true"><i class="ti ti-color-swatch"></i></button>
</li>
<li class="nav-item" role="presentation" data-bs-toggle="tooltip" title="Font Settings">
<button class="nav-link" id="pct-2-tab" data-bs-toggle="tab" data-bs-target="#pct-2-tab-pane" type="button" role="tab" aria-controls="pct-2-tab-pane" aria-selected="false"><i class="ti ti-typography"></i></button>
</li>
</ul>
<div class="pct-body customizer-body">
<div class="offcanvas-body p-0">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="pct-1-tab-pane" role="tabpanel" aria-labelledby="pct-1-tab" tabindex="0">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="pc-dark">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Theme Mode</h5>
<p class="text-muted text-sm mb-0">Light / Dark / System</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-layout">
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn active" data-value="true" onclick="layout_change('light');" data-bs-toggle="tooltip" title="Light">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn" data-value="false" onclick="layout_change('dark');" data-bs-toggle="tooltip" title="Dark">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn" data-value="default" onclick="layout_change_default();" data-bs-toggle="tooltip" title="Automatically sets the theme based on user's operating system's color scheme.">
<span class="pc-lay-icon d-flex align-items-center justify-content-center">
<i class="ph-duotone ph-cpu"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<h5 class="mb-1">Accent color</h5>
<p class="text-muted text-sm mb-2">Choose your primary theme color</p>
<div class="theme-color preset-color">
<a href="#!" class="active" data-value="preset-1"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-2"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-3"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-4"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-5"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-6"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-7"><i class="ti ti-check"></i></a>
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Sidebar Caption</h5>
<p class="text-muted text-sm mb-0">Caption Hide / Show</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-nav-caption">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="true" onclick="layout_caption_change('true');" data-bs-toggle="tooltip" title="Caption Show">
<span class="pc-lay-icon"><span></span><span></span><span><span></span><span></span></span><span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="false" onclick="layout_caption_change('false');" data-bs-toggle="tooltip" title="Caption Hide">
<span class="pc-lay-icon"><span></span><span></span><span><span></span><span></span></span><span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="pc-rtl">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Theme Layout</h5>
<p class="text-muted text-sm">LTR/RTL</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-direction">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="false" onclick="layout_rtl_change('false');" data-bs-toggle="tooltip" title="LTR">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="true" onclick="layout_rtl_change('true');" data-bs-toggle="tooltip" title="RTL">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item pc-box-width">
<div class="pc-container-width">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Layout Width</h5>
<p class="text-muted text-sm">Full / Fixed width</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-container">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="false" onclick="change_box_container('false')" data-bs-toggle="tooltip" title="Full Width">
<span class="pc-lay-icon"><span></span><span></span><span></span><span><span></span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="true" onclick="change_box_container('true')" data-bs-toggle="tooltip" title="Fixed Width">
<span class="pc-lay-icon"><span></span><span></span><span></span><span><span></span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="pct-2-tab-pane" role="tabpanel" aria-labelledby="pct-2-tab" tabindex="0">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<h5 class="mb-1">Font Style</h5>
<p class="text-muted text-sm">Choose theme font</p>
<div class="theme-color theme-font-style">
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontRoboto" checked onclick="font_change('Roboto')">
<label class="form-check-label" for="layoutfontRoboto"> Roboto </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontPoppins" onclick="font_change('Poppins')">
<label class="form-check-label" for="layoutfontPoppins"> Poppins </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontInter" onclick="font_change('Inter')">
<label class="form-check-label" for="layoutfontInter"> Inter </label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/simplebar.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/custom-font.js"></script>
<script src="assets/js/pcoded.js"></script>
<script src="assets/js/feather.min.js"></script>
<script>layout_change('light');</script>
<script>font_change("Roboto");</script>
<script>change_box_container('false');</script>
<script>layout_caption_change('true');</script>
<script>layout_rtl_change('false');</script>
<script>preset_change("preset-1");</script>
</body>

</html>

5. Guys now we need to create register-v1.html file and place below code inside it:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Dashboard | Jassa Dashboard Template</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="Bootstrap admin template, Dashboard UI Kit, Dashboard Template, Backend Panel, react dashboard, angular dashboard">
<meta name="author" content="codedthemes">

<link rel="icon" href="assets/images/favicon.svg" type="image/x-icon"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" id="main-font-link">

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

<link rel="stylesheet" href="assets/fonts/feather.css">

<link rel="stylesheet" href="assets/fonts/fontawesome.css">

<link rel="stylesheet" href="assets/fonts/material.css">

<link rel="stylesheet" href="assets/css/style.css" id="main-style-link">
<link rel="stylesheet" href="assets/css/style-preset.css">
</head>


<body>

<div class="loader-bg">
<div class="loader-track">
<div class="loader-fill"></div>
</div>
</div>

<div class="auth-main">
<div class="auth-wrapper v1">
<div class="auth-form">
<div class="card mt-5">
<div class="card-body">
<div class="row">
<div class="d-flex justify-content-between">
<div>
<h2 class="text-secondary"><b>Sign up</b></h2>
<h4 class="text-muted"><b>Enter credentials to continue</b></h4>
</div>
<a href="#">
<img src="assets/images/logo-dark.svg" alt="image" class="img-fluid brand-logo">
</a>
</div>
</div>
<button type="button" class="btn mt-2 bg-light-primary bg-light text-muted" style="width: 100%">
<img src="assets/images/authentication/google-icon.svg" alt="image">Sign Up With Google
</button>
<div class="saprator mt-3">
<span>or</span>
</div>
<h5 class="my-4 d-flex justify-content-center">Sign Up with Email address</h5>
<div class="row">
<div class="col-md-6">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput1" placeholder="First Name">
<label for="floatingInput1">First Name</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput2" placeholder="Last Name">
<label for="floatingInput2">Last Name</label>
</div>
</div>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput3" placeholder="Email Address / Username">
<label for="floatingInput3">Email Address / Username</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput4" placeholder="Password">
<label for="floatingInput4">Password</label>
</div>
<div class="form-check mt-3s">
<input class="form-check-input input-primary" type="checkbox" id="customCheckc1" checked>
<label class="form-check-label" for="customCheckc1">
<span class="h5 mb-0">Agree with <span>Terms & Condition.</span></span>
</label>
</div>
<div class="d-grid mt-4">
<button type="button" class="btn btn-secondary p-2">Sign Up</button>
</div>
<hr>
<h5 class="d-flex justify-content-end">Already have an account?</h5>
</div>
</div>
</div>
<div class="auth-sidecontent">
<div class="p-3 px-lg-5 text-center">
<div class="animation-content">
<img src="assets/images/authentication/signup-blue-card.svg" alt="images" class="img-fluid signup-blue-card mt-3">
<img src="assets/images/authentication/signup-white-card.svg" alt="images" class="img-fluid signup-white-card mt-3">
</div>
<div id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h1><b>Powerful and easy to use multipurpose theme.</b></h1>
<p class="f-12 mt-4">Powerful and easy to use multipurpose theme</p>
</div>
<div class="carousel-item">
<h1><b>Power of React with Material UI</b></h1>
<p class="f-12 mt-4">Powerful and easy to use multipurpose theme</p>
</div>
<div class="carousel-item">
<h1><b>Power of React with Material UI</b></h1>
<p class="f-12 mt-4">Powerful and easy to use multipurpose theme</p>
</div>
</div>
<div class="carousel-indicators position-relative">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
</div>
</div>
</div>
</div>
</div>



<div class="pct-c-btn">
<a href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvas_pc_layout">
<i class="ph-duotone ph-gear-six"></i>
</a>
</div>
<div class="offcanvas border-0 pct-offcanvas offcanvas-end" tabindex="-1" id="offcanvas_pc_layout">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Theme Customization</h5>
<div class="d-inline-flex align-items-center gap-2">
<button type="button" class="btn btn-sm rounded btn-outline-danger" id="layoutreset">Reset</button>
<a type="button" class="avtar avtar-s btn-link-danger btn-pc-default " data-bs-dismiss="offcanvas" aria-label="Close"><i class="ti ti-x f-20"></i></a>
</div>
</div>
<ul class="nav nav-tabs nav-fill pct-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation" data-bs-toggle="tooltip" title="Layout Settings">
<button class="nav-link active" id="pct-1-tab" data-bs-toggle="tab" data-bs-target="#pct-1-tab-pane" type="button" role="tab" aria-controls="pct-1-tab-pane" aria-selected="true"><i class="ti ti-color-swatch"></i></button>
</li>
<li class="nav-item" role="presentation" data-bs-toggle="tooltip" title="Font Settings">
<button class="nav-link" id="pct-2-tab" data-bs-toggle="tab" data-bs-target="#pct-2-tab-pane" type="button" role="tab" aria-controls="pct-2-tab-pane" aria-selected="false"><i class="ti ti-typography"></i></button>
</li>
</ul>
<div class="pct-body customizer-body">
<div class="offcanvas-body p-0">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="pct-1-tab-pane" role="tabpanel" aria-labelledby="pct-1-tab" tabindex="0">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="pc-dark">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Theme Mode</h5>
<p class="text-muted text-sm mb-0">Light / Dark / System</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-layout">
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn active" data-value="true" onclick="layout_change('light');" data-bs-toggle="tooltip" title="Light">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn" data-value="false" onclick="layout_change('dark');" data-bs-toggle="tooltip" title="Dark">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn" data-value="default" onclick="layout_change_default();" data-bs-toggle="tooltip" title="Automatically sets the theme based on user's operating system's color scheme.">
<span class="pc-lay-icon d-flex align-items-center justify-content-center">
<i class="ph-duotone ph-cpu"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<h5 class="mb-1">Accent color</h5>
<p class="text-muted text-sm mb-2">Choose your primary theme color</p>
<div class="theme-color preset-color">
<a href="#!" class="active" data-value="preset-1"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-2"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-3"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-4"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-5"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-6"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-7"><i class="ti ti-check"></i></a>
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Sidebar Caption</h5>
<p class="text-muted text-sm mb-0">Caption Hide / Show</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-nav-caption">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="true" onclick="layout_caption_change('true');" data-bs-toggle="tooltip" title="Caption Show">
<span class="pc-lay-icon"><span></span><span></span><span><span></span><span></span></span><span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="false" onclick="layout_caption_change('false');" data-bs-toggle="tooltip" title="Caption Hide">
<span class="pc-lay-icon"><span></span><span></span><span><span></span><span></span></span><span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="pc-rtl">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Theme Layout</h5>
<p class="text-muted text-sm">LTR/RTL</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-direction">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="false" onclick="layout_rtl_change('false');" data-bs-toggle="tooltip" title="LTR">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="true" onclick="layout_rtl_change('true');" data-bs-toggle="tooltip" title="RTL">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item pc-box-width">
<div class="pc-container-width">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Layout Width</h5>
<p class="text-muted text-sm">Full / Fixed width</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-container">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="false" onclick="change_box_container('false')" data-bs-toggle="tooltip" title="Full Width">
<span class="pc-lay-icon"><span></span><span></span><span></span><span><span></span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="true" onclick="change_box_container('true')" data-bs-toggle="tooltip" title="Fixed Width">
<span class="pc-lay-icon"><span></span><span></span><span></span><span><span></span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="pct-2-tab-pane" role="tabpanel" aria-labelledby="pct-2-tab" tabindex="0">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<h5 class="mb-1">Font Style</h5>
<p class="text-muted text-sm">Choose theme font</p>
<div class="theme-color theme-font-style">
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontRoboto" checked onclick="font_change('Roboto')">
<label class="form-check-label" for="layoutfontRoboto"> Roboto </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontPoppins" onclick="font_change('Poppins')">
<label class="form-check-label" for="layoutfontPoppins"> Poppins </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontInter" onclick="font_change('Inter')">
<label class="form-check-label" for="layoutfontInter"> Inter </label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/simplebar.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/custom-font.js"></script>
<script src="assets/js/pcoded.js"></script>
<script src="assets/js/feather.min.js"></script>
<script>layout_change('light');</script>
<script>font_change("Roboto");</script>
<script>change_box_container('false');</script>
<script>layout_caption_change('true');</script>
<script>layout_rtl_change('false');</script>
<script>preset_change("preset-1");</script>
</body>

</html>

6. Guys now we need to create sample-page.html file and place below code inside it:

<!DOCTYPE html>
<html lang="en">

<head>
<title>Dashboard | Jassa Dashboard Template</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="Bootstrap admin template, Dashboard UI Kit, Dashboard Template, Backend Panel, react dashboard, angular dashboard">
<meta name="author" content="codedthemes">

<link rel="icon" href="assets/images/favicon.svg" type="image/x-icon"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" id="main-font-link">

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

<link rel="stylesheet" href="assets/fonts/feather.css">

<link rel="stylesheet" href="assets/fonts/fontawesome.css">

<link rel="stylesheet" href="assets/fonts/material.css">

<link rel="stylesheet" href="assets/css/style.css" id="main-style-link">
<link rel="stylesheet" href="assets/css/style-preset.css">
</head>


<body data-pc-preset="preset-1" data-pc-sidebar-theme="light" data-pc-sidebar-caption="true" data-pc-direction="ltr" data-pc-theme="light">

<div class="loader-bg">
<div class="loader-track">
<div class="loader-fill"></div>
</div>
</div>


<nav class="pc-sidebar">
    <div class="navbar-wrapper">
    <div class="m-header">
    <a href="index.html" class="b-brand text-primary">
    
    <img src="assets/images/logo-dark.svg" alt class="logo logo-lg">
    </a>
    </div>
    <div class="navbar-content">
    <ul class="pc-navbar">
    <li class="pc-item pc-caption">
    <label>Dashboard</label>
    <i class="ti ti-dashboard"></i>
    </li>
    <li class="pc-item">
    <a href="index.html" class="pc-link"><span class="pc-micon"><i class="ti ti-dashboard"></i></span><span class="pc-mtext">Default</span></a>
    </li>
    <li class="pc-item pc-caption">
    <label>Pages</label>
    <i class="ti ti-news"></i>
    </li>
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link"><span class="pc-micon"><i class="ti ti-key"></i></span><span class="pc-mtext">Authentication</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link">Authentication 1<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" target="_blank" href="login-v1.html">Login</a></li>
    <li class="pc-item"><a class="pc-link" target="_blank" href="register-v1.html">Register</a></li>
    </ul>
    </li>
    </ul>
    </li>
    
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link"><span class="pc-micon"><i class="ti ti-bug"></i></span><span class="pc-mtext">Maintenance</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" target="_blank" href="error-404.html">Error 404</a></li>
    </ul>
    </li>
    <li class="pc-item pc-caption">
    <label>Other</label>
    <i class="ti ti-brand-chrome"></i>
    </li>
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link"><span class="pc-micon"><i class="ti ti-menu"></i></span><span class="pc-mtext">Menu
    levels</span><span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="#!">Level 2.1</a></li>
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link">Level 2.2<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="#!">Level 3.1</a></li>
    <li class="pc-item"><a class="pc-link" href="#!">Level 3.2</a></li>
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link">Level 3.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="#!">Level 4.1</a></li>
    <li class="pc-item"><a class="pc-link" href="#!">Level 4.2</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link">Level 2.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="#!">Level 3.1</a></li>
    <li class="pc-item"><a class="pc-link" href="#!">Level 3.2</a></li>
    <li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link">Level 3.3<span class="pc-arrow"><i data-feather="chevron-right"></i></span></a>
    <ul class="pc-submenu">
    <li class="pc-item"><a class="pc-link" href="#!">Level 4.1</a></li>
    <li class="pc-item"><a class="pc-link" href="#!">Level 4.2</a></li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    <li class="pc-item"><a href="sample-page.html" class="pc-link"><span class="pc-micon"><i class="ti ti-brand-chrome"></i></span><span class="pc-mtext">Sample page</span></a></li>
    </ul>
    <div class="pc-navbar-card bg-primary rounded">
    <h4 class="text-white">More Free Demos</h4>
    <a href="https://therichpost.com/category/free-admin-dashboard-templates/" target="_blank" class="btn btn-light text-primary">Free Admins</a>
    </div>
    <div class="w-100 text-center">
    <div class="badge theme-version badge rounded-pill bg-light text-dark f-12"></div>
    </div>
    </div>
    </div>
    </nav>
 
<header class="pc-header">
<div class="header-wrapper"> 
<div class="me-auto pc-mob-drp">
<ul class="list-unstyled">
<li class="pc-h-item header-mobile-collapse">
<a href="#" class="pc-head-link head-link-secondary ms-0" id="sidebar-hide">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="pc-h-item pc-sidebar-popup">
<a href="#" class="pc-head-link head-link-secondary ms-0" id="mobile-collapse">
<i class="ti ti-menu-2"></i>
</a>
</li>
<li class="dropdown pc-h-item d-inline-flex d-md-none">
<a class="pc-head-link head-link-secondary dropdown-toggle arrow-none m-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="ti ti-search"></i>
</a>
<div class="dropdown-menu pc-h-dropdown drp-search">
<form class="px-3">
<div class="form-group mb-0 d-flex align-items-center">
<i data-feather="search"></i>
<input type="search" class="form-control border-0 shadow-none" placeholder="Search here. . .">
</div>
</form>
</div>
</li>
<li class="pc-h-item d-none d-md-inline-flex">
<form class="header-search">
<i data-feather="search" class="icon-search"></i>
<input type="search" class="form-control" placeholder="Search here. . .">
<button class="btn btn-light-secondary btn-search"><i class="ti ti-adjustments-horizontal"></i></button>
</form>
</li>
</ul>
</div>

<div class="ms-auto">
<ul class="list-unstyled">
<li class="dropdown pc-h-item pc-mega-menu">
<a class="pc-head-link head-link-secondary dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="ti ti-access-point"></i>
</a>
<div class="dropdown-menu pc-h-dropdown pc-mega-dmenu">
<div class="row g-0">
<div class="col text-center image-block">
<img src="assets/images/pages/img-megamenu.svg" alt="image" class="img-fluid rounded">
</div>
<div class="col">
<h6 class="mega-title">UI Components</h6>
<ul class="pc-mega-list">
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Alerts</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Accordions</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Avatars</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Badges</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Breadcrumbs</a></li>
</ul>
</div>
<div class="col">
<h6 class="mega-title">UI Components</h6>
<ul class="pc-mega-list">
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Menus</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Modals</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Pagination</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Search Bar</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Tabs</a></li>
</ul>
</div>
<div class="col">
<h6 class="mega-title">Advance Components</h6>
<ul class="pc-mega-list">
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Advanced Stats</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Advanced Cards</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Lightbox</a></li>
<li><a href="#!" class="dropdown-item"><i class="fas fa-circle"></i> Notification</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="dropdown pc-h-item">
<a class="pc-head-link head-link-primary dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="ti ti-language"></i>
</a>
<div class="dropdown-menu dropdown-menu-end pc-h-dropdown">
<a href="#!" class="dropdown-item">
<span>English <small>(UK)</small></span>
</a>
<a href="#!" class="dropdown-item">
<span>français <small>(French)</small></span>
</a>
<a href="#!" class="dropdown-item">
<span>Română <small>(Romanian)</small></span>
</a>
<a href="#!" class="dropdown-item">
<span>中国人 <small>(Chinese)</small></span>
</a>
</div>
</li>
<li class="dropdown pc-h-item">
<a class="pc-head-link head-link-secondary dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="ti ti-bell"></i>
</a>
<div class="dropdown-menu dropdown-notification dropdown-menu-end pc-h-dropdown">
<div class="dropdown-header">
<a href="#!" class="link-primary float-end text-decoration-underline">Mark as all read</a>
<h5>All Notification <span class="badge bg-warning rounded-pill ms-1">01</span></h5>
</div>
<div class="dropdown-header px-0 text-wrap header-notification-scroll position-relative" style="max-height: calc(100vh - 215px)">
<div class="list-group list-group-flush w-100">
<div class="list-group-item">
<select class="form-select">
<option value="all">All Notification</option>
<option value="new">New</option>
<option value="unread">Unread</option>
<option value="other">Other</option>
</select>
</div>
<div class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="assets/images/user/avatar-2.jpg" alt="user-image" class="user-avtar">
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">2 min ago</span>
<h5>John Doe</h5>
<p class="text-body fs-6">It is a long established fact that a reader will be distracted </p>
<div class="badge rounded-pill bg-light-danger">Unread</div>
<div class="badge rounded-pill bg-light-warning">New</div>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<div class="user-avtar bg-light-success"><i class="ti ti-building-store"></i></div>
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">3 min ago</span>
<h5>Store Verification Done</h5>
<p class="text-body fs-6">We have successfully received your request.</p>
<div class="badge rounded-pill bg-light-danger">Unread</div>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<div class="user-avtar bg-light-primary"><i class="ti ti-mailbox"></i></div>
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">5 min ago</span>
<h5>Check Your Mail.</h5>
<p class="text-body fs-6">All done! Now check your inbox as you're in for a sweet treat! </p>
<button class="btn btn-sm btn-primary">Mail <i class="ti ti-brand-telegram"></i></button>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="assets/images/user/avatar-1.jpg" alt="user-image" class="user-avtar">
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">8 min ago</span>
<h5>John Doe</h5>
<p class="text-body fs-6">Uploaded two file on &nbsp;<strong>21 Jan 2020</strong></p>
<div class="notification-file d-flex p-3 bg-light-secondary rounded">
<i class="ti ti-arrow-bar-to-down"></i>
<h5 class="m-0">demo.jpg</h5>
</div>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="assets/images/user/avatar-3.jpg" alt="user-image" class="user-avtar">
</div>
<div class="flex-grow-1 ms-1">
<span class="float-end text-muted">10 min ago</span>
<h5>Joseph William</h5>
<p class="text-body fs-6">It is a long established fact that a reader will be distracted </p>
<div class="badge rounded-pill bg-light-success">Confirmation of Account</div>
</div>
</div>
</div>
</div>
</div>
<div class="dropdown-divider"></div>
<div class="text-center py-2">
<a href="#!" class="link-primary">Mark as all read</a>
</div>
</div>
</li>
<li class="dropdown pc-h-item header-user-profile">
<a class="pc-head-link head-link-primary dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="assets/images/user/avatar-2.jpg" alt="user-image" class="user-avtar">
<span>
<i class="ti ti-settings"></i>
</span>
</a>
<div class="dropdown-menu dropdown-user-profile dropdown-menu-end pc-h-dropdown">
<div class="dropdown-header">
<h4>Good Morning, <span class="small text-muted"> John Doe</span></h4>
<p class="text-muted">Project Admin</p>
<form class="header-search">
<i data-feather="search" class="icon-search"></i>
<input type="search" class="form-control" placeholder="Search profile options">
</form>
<hr>
<div class="profile-notification-scroll position-relative" style="max-height: calc(100vh - 280px)">
<div class="upgradeplan-block bg-light-warning rounded">
<h4>Explore full code</h4>
<p class="text-muted">Buy now to get full access of code files</p>
<a href="https://codedthemes.com/item/berry-bootstrap-5-admin-template/" target="_blank" class="btn btn-warning">Buy Now</a>
</div>
<hr>
<div class="settings-block bg-light-primary rounded">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Start DND Mode</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Allow Notifications</label>
</div>
</div>
<hr>
<a href="../application/account-profile-v1.html" class="dropdown-item">
<i class="ti ti-settings"></i>
<span>Account Settings</span>
</a>
<a href="../application/social-profile.html" class="dropdown-item">
<i class="ti ti-user"></i>
<span>Social Profile</span>
</a>
<a href="../pages/login-v1.html" class="dropdown-item">
<i class="ti ti-logout"></i>
<span>Logout</span>
</a>
</div>
</div>
</div>
</li>
</ul>
</div> </div>
</header>


<div class="pc-container">
<div class="pc-content">

<div class="page-header">
<div class="page-block">
<div class="row align-items-center">
<div class="col-md-12">
<div class="page-header-title">
<h5 class="m-b-10">Sample Page</h5>
</div>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="../dashboard/index.html">Home</a></li>
<li class="breadcrumb-item"><a href="javascript: void(0)">Other</a></li>
<li class="breadcrumb-item" aria-current="page">Sample Page</li>
</ul>
</div>
</div>
</div>
</div>


<div class="row">

<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>Hello card</h5>
</div>
<div class="card-body">
</div>
</div>
</div>

</div>

</div>
</div>

<footer class="pc-footer">
<div class="footer-wrapper container-fluid">
<div class="row">
<div class="col-sm-12 my-1">
<p class="m-0">Jassa &#9829;</p>
</div>
</div>
</div>
</footer> 

<div class="pct-c-btn">
<a href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvas_pc_layout">
<i class="ph-duotone ph-gear-six"></i>
</a>
</div>
<div class="offcanvas border-0 pct-offcanvas offcanvas-end" tabindex="-1" id="offcanvas_pc_layout">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Theme Customization</h5>
<div class="d-inline-flex align-items-center gap-2">
<button type="button" class="btn btn-sm rounded btn-outline-danger" id="layoutreset">Reset</button>
<a type="button" class="avtar avtar-s btn-link-danger btn-pc-default " data-bs-dismiss="offcanvas" aria-label="Close"><i class="ti ti-x f-20"></i></a>
</div>
</div>
<ul class="nav nav-tabs nav-fill pct-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation" data-bs-toggle="tooltip" title="Layout Settings">
<button class="nav-link active" id="pct-1-tab" data-bs-toggle="tab" data-bs-target="#pct-1-tab-pane" type="button" role="tab" aria-controls="pct-1-tab-pane" aria-selected="true"><i class="ti ti-color-swatch"></i></button>
</li>
<li class="nav-item" role="presentation" data-bs-toggle="tooltip" title="Font Settings">
<button class="nav-link" id="pct-2-tab" data-bs-toggle="tab" data-bs-target="#pct-2-tab-pane" type="button" role="tab" aria-controls="pct-2-tab-pane" aria-selected="false"><i class="ti ti-typography"></i></button>
</li>
</ul>
<div class="pct-body customizer-body">
<div class="offcanvas-body p-0">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="pct-1-tab-pane" role="tabpanel" aria-labelledby="pct-1-tab" tabindex="0">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="pc-dark">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Theme Mode</h5>
<p class="text-muted text-sm mb-0">Light / Dark / System</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-layout">
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn active" data-value="true" onclick="layout_change('light');" data-bs-toggle="tooltip" title="Light">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn" data-value="false" onclick="layout_change('dark');" data-bs-toggle="tooltip" title="Dark">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-4">
<div class="d-grid">
<button class="preset-btn btn" data-value="default" onclick="layout_change_default();" data-bs-toggle="tooltip" title="Automatically sets the theme based on user's operating system's color scheme.">
<span class="pc-lay-icon d-flex align-items-center justify-content-center">
<i class="ph-duotone ph-cpu"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<h5 class="mb-1">Accent color</h5>
<p class="text-muted text-sm mb-2">Choose your primary theme color</p>
<div class="theme-color preset-color">
<a href="#!" class="active" data-value="preset-1"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-2"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-3"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-4"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-5"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-6"><i class="ti ti-check"></i></a>
<a href="#!" data-value="preset-7"><i class="ti ti-check"></i></a>
</div>
</li>
<li class="list-group-item">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Sidebar Caption</h5>
<p class="text-muted text-sm mb-0">Caption Hide / Show</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-nav-caption">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="true" onclick="layout_caption_change('true');" data-bs-toggle="tooltip" title="Caption Show">
<span class="pc-lay-icon"><span></span><span></span><span><span></span><span></span></span><span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="false" onclick="layout_caption_change('false');" data-bs-toggle="tooltip" title="Caption Hide">
<span class="pc-lay-icon"><span></span><span></span><span><span></span><span></span></span><span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">
<div class="pc-rtl">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Theme Layout</h5>
<p class="text-muted text-sm">LTR/RTL</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-direction">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="false" onclick="layout_rtl_change('false');" data-bs-toggle="tooltip" title="LTR">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="true" onclick="layout_rtl_change('true');" data-bs-toggle="tooltip" title="RTL">
<span class="pc-lay-icon"><span></span><span></span><span></span><span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item pc-box-width">
<div class="pc-container-width">
<div class="d-flex align-items-center">
<div class="flex-grow-1 me-3">
<h5 class="mb-1">Layout Width</h5>
<p class="text-muted text-sm">Full / Fixed width</p>
</div>
<div class="flex-shrink-0">
<div class="row g-2 theme-color theme-container">
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn active" data-value="false" onclick="change_box_container('false')" data-bs-toggle="tooltip" title="Full Width">
<span class="pc-lay-icon"><span></span><span></span><span></span><span><span></span></span></span>
</button>
</div>
</div>
<div class="col-6">
<div class="d-grid">
<button class="preset-btn btn" data-value="true" onclick="change_box_container('true')" data-bs-toggle="tooltip" title="Fixed Width">
<span class="pc-lay-icon"><span></span><span></span><span></span><span><span></span></span></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="pct-2-tab-pane" role="tabpanel" aria-labelledby="pct-2-tab" tabindex="0">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<h5 class="mb-1">Font Style</h5>
<p class="text-muted text-sm">Choose theme font</p>
<div class="theme-color theme-font-style">
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontRoboto" checked onclick="font_change('Roboto')">
<label class="form-check-label" for="layoutfontRoboto"> Roboto </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontPoppins" onclick="font_change('Poppins')">
<label class="form-check-label" for="layoutfontPoppins"> Poppins </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="layout_font" id="layoutfontInter" onclick="font_change('Inter')">
<label class="form-check-label" for="layoutfontInter"> Inter </label>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/simplebar.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/custom-font.js"></script>
<script src="assets/js/pcoded.js"></script>
<script src="assets/js/feather.min.js"></script>
<script>layout_change('light');</script>
<script>font_change("Roboto");</script>
<script>change_box_container('false');</script>
<script>layout_caption_change('true');</script>
<script>layout_rtl_change('false');</script>
<script>preset_change("preset-1");</script>
</body>

</html>

This is it guys and run and enjoy the admin dashboard.

Guys for more Admin and Bootstrap 5 templates please click this link : Free Templates

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.