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.
Guys here is the 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:
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 <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 ♥</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 <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 ♥</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
Guys here are more admin dashboard template links:
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.
Recent Comments