Server : LiteSpeed System : Linux us-phx-web1202.main-hosting.eu 4.18.0-553.84.1.lve.el8.x86_64 #1 SMP Tue Nov 25 18:33:03 UTC 2025 x86_64 User : u615232177 ( 615232177) PHP Version : 8.1.33 Disable Function : NONE Directory : /home/u615232177/domains/florencewaltersconsulting.com/public_html/admin7362/template/ |
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from phpstack-1384472-5121645.cloudwaysapps.com/template/html/axelit/template/scrollpy.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 15 Apr 2025 15:47:21 GMT -->
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="Multipurpose, super flexible, powerful, clean modern responsive bootstrap 5 admin template"
name="description">
<meta content="admin template, axelit admin template, dashboard template, flat admin template, responsive admin template, web app"
name="keywords">
<meta content="la-themes" name="author">
<link href="../assets/images/logo/favicon.png" rel="icon" type="image/x-icon">
<link href="../assets/images/logo/favicon.png" rel="shortcut icon" type="image/x-icon">
<title>axelit - Premium Admin Template</title>
<!--font-awesome-css-->
<link href="../assets/vendor/fontawesome/css/all.css" rel="stylesheet">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com/" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<!-- iconoir icon css -->
<link href="../assets/vendor/ionio-icon/css/iconoir.css" rel="stylesheet">
<!-- tabler icons-->
<link href="../assets/vendor/tabler-icons/tabler-icons.css" rel="stylesheet" type="text/css">
<!--flag Icon css-->
<link href="../assets/vendor/flag-icons-master/flag-icon.css" rel="stylesheet" type="text/css">
<!-- Bootstrap css-->
<link href="../assets/vendor/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- simplebar css-->
<link href="../assets/vendor/simplebar/simplebar.css" rel="stylesheet" type="text/css">
<!-- App css-->
<link href="../assets/css/style.css" rel="stylesheet" type="text/css">
<!-- Responsive css-->
<link href="../assets/css/responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="app-wrapper">
<div class="loader-wrapper">
<div class="app-loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Menu Navigation starts -->
<nav>
<div class="app-logo">
<a class="logo d-inline-block" href="index.html">
<img alt="#" src="../assets/images/logo/1.png">
</a>
<span class="bg-light-primary toggle-semi-nav">
<i class="ti ti-chevrons-right f-s-20"></i>
</span>
</div>
<div class="app-nav" id="app-simple-bar">
<ul class="main-nav p-0 mt-2">
<li class="menu-title">
<span>Dashboard</span>
</li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#dashboard">
<i class="iconoir-home-alt"></i>
dashboard
<span class="badge text-primary-dark bg-primary-300 badge-notification ms-2">4</span>
</a>
<ul class="collapse" id="dashboard">
<li><a href="index.html">Project</a></li>
<li><a href="ecommerce_dashboard.html">Ecommerce</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#apps">
<i class="iconoir-apple-shortcuts"></i>
Apps
</a>
<ul class="collapse" id="apps">
<li><a href="calendar.html">Calender</a></li>
<li class="another-level">
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#Profile-page">
Profile
</a>
<ul class="collapse" id="Profile-page">
<li><a href="profile.html">Profile</a></li>
<li><a href="setting.html">Setting</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#projects-page">
Projects Page
</a>
<ul class="collapse" id="projects-page">
<li><a href="project_app.html">projects</a></li>
<li><a href="project_details.html">projects Details</a></li>
</ul>
</li>
<li><a href="to_do.html">To-Do</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="api.html">API</a></li>
<li class="another-level">
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#ticket-page">
Ticket
</a>
<ul class="collapse" id="ticket-page">
<li><a href="ticket.html">Ticket</a></li>
<li><a href="ticket_details.html">Ticket Details</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#email-page">
Email Page
</a>
<ul class="collapse" id="email-page">
<li><a href="email.html"> Email</a></li>
<li><a href="read_email.html">Read Email</a></li>
</ul>
</li>
<li class="another-level">
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#e-shop">
E-shop
</a>
<ul class="collapse" id="e-shop">
<li><a href="cart.html">Cart</a></li>
<li><a href="product.html">Product</a></li>
<li><a href="add_product.html">Add Product</a></li>
<li><a href="product_details.html">Product-Details</a></li>
<li><a href="product_list.html">Product list</a></li>
<li><a href="orders.html">Orders</a></li>
<li><a href="orders_details.html">Orders Details</a></li>
<li><a href="orders_list.html">Orders List</a></li>
<li><a href="checkout.html">Check out</a></li>
<li><a href="wishlist.html">Wishlist</a></li>
</ul>
</li>
<li><a href="invoice.html">Invoice</a></li>
<li><a href="chat.html">Chat</a></li>
<li><a href="filemanager.html">File manager</a></li>
<li><a href="bookmark.html">Bookmark</a></li>
<li><a href="kanban_board.html">Kanban board</a></li>
<li><a href="timeline.html">Timeline</a></li>
<li><a href="faq.html">FAQS</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li class="another-level">
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#blog-page">
Blog Page
</a>
<ul class="collapse" id="blog-page">
<li><a href="blog.html">Blog</a></li>
<li><a href="blog_read_more.html">Blog Details</a></li>
<li><a href="add_blog.html">Add Blog</a></li>
</ul>
</li>
</ul>
</li>
<li class="no-sub">
<a class="" href="widget.html">
<i class="iconoir-view-grid"></i> Widgets
</a>
</li>
<li class="menu-title"><span>Component</span></li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#ui-kits">
<i class="iconoir-handbag"></i>
UI kits
</a>
<ul class="collapse" id="ui-kits">
<li><a href="cheatsheet.html">Cheatsheet</a></li>
<li><a href="alert.html">Alert</a></li>
<li><a href="badges.html">Badges</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="cards.html">Cards</a></li>
<li><a href="dropdown.html">Dropdown</a></li>
<li><a href="grid.html">Grid</a></li>
<li><a href="avtar.html">Avtar</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="accordions.html">Accordions</a></li>
<li><a href="progress.html">Progress</a></li>
<li><a href="notifications.html">Notifications</a></li>
<li><a href="list.html">Lists</a></li>
<li><a href="helper_classes.html">Helper Classes</a></li>
<li><a href="background.html">Background</a></li>
<li><a href="divider.html">Divider</a></li>
<li><a href="ribbons.html">Ribbons</a></li>
<li><a href="editor.html">Editor </a></li>
<li><a href="collapse.html">Collapse</a></li>
<li><a href="footer-page.html">Footer</a></li>
<li><a href="shadow.html">Shadow</a></li>
<li><a href="wrapper.html">Wrapper</a></li>
<li><a href="bullet.html">Bullet</a></li>
<li><a href="placeholder.html">Placeholder</a></li>
<li><a href="alignment.html">Alignment Thing</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#advance-ui">
<i class="iconoir-shopping-bag-plus"></i> Advance UI
<span class="badge text-warning-dark bg-warning-400 badge-notification ms-2">
12+
<span class="visually-hidden">unread messages</span>
</span>
</a>
<ul class="collapse" id="advance-ui">
<li><a href="modals.html">Modals</a></li>
<li><a href="offcanvas.html">Offcanvas Toggle</a></li>
<li><a href="sweetalert.html">Sweat Alert</a></li>
<li><a href="scrollbar.html">Scrollbar</a></li>
<li><a href="spinners.html">Spinners</a></li>
<li><a href="animation.html">Animation</a></li>
<li><a href="video_emaded.html">Video Embed</a></li>
<li><a href="tour.html">Tour</a></li>
<li><a href="slick.html">Slider</a></li>
<li><a href="bootstrap_slider.html">Bootstrap Slider</a></li>
<li><a href="scrollpy.html">Scrollpy</a></li>
<li><a href="tooltips_popovers.html">Tooltip & Popovers</a></li>
<li><a href="ratings.html">Rating</a></li>
<li><a href="prismjs.html">Prismjs</a></li>
<li><a href="count_down.html">Count Down</a></li>
<li><a href="count_up.html"> Count up </a></li>
<li><a href="draggable.html">Draggable</a></li>
<li><a href="tree-view.html">Tree View</a></li>
<li><a href="block_ui.html">Block Ui </a></li>
</ul>
</li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#icons">
<i class="iconoir-component"></i> Icons
</a>
<ul class="collapse" id="icons">
<li><a href="fontawesome.html">Fontawesome</a></li>
<li><a href="flag_icons.html">Flag</a></li>
<li><a href="tabler_icons.html">Tabler</a></li>
<li><a href="weather_icon.html">Weather</a></li>
<li><a href="animated_icon.html">Animated</a></li>
<li><a href="iconoir_icon.html">Iconoir</a></li>
<li><a href="phosphor.html">Phosphor</a></li>
</ul>
</li>
<li class="no-sub">
<a class="" href="misc.html">
<i class="iconoir-bookmark-book"></i> Misc
</a>
</li>
<li class="menu-title"><span>Map & Charts </span></li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#maps">
<i class="iconoir-map"></i> Map
</a>
<ul class="collapse" id="maps">
<li><a href="google-map.html">Google Maps</a></li>
<li><a href="leaflet-map.html">Leaflet map</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#chart">
<i class="iconoir-lifebelt"></i> Chart
</a>
<ul class="collapse" id="chart">
<li><a href="chart_js.html">Chart js</a></li>
<li class="another-level">
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#apexcharts-page">
Apexcharts
</a>
<ul class="collapse" id="apexcharts-page">
<li><a href="line.html">Line</a></li>
<li><a href="area.html">Area</a></li>
<li><a href="column.html">Column</a></li>
<li><a href="bar.html">Bar</a></li>
<li><a href="mixed.html">Mixed</a></li>
<li><a href="timeline_range_charts.html">Timeline & Range-Bars</a></li>
<li><a href="candlestick_charts.html">Candlestick</a></li>
<li><a href="boxplot.html">Boxplot</a></li>
<li><a href="bubble.html">Bubble</a></li>
<li><a href="scatter.html">Scatter</a></li>
<li><a href="heatmap.html">Heatmap</a></li>
<li><a href="treemap.html">Treemap</a></li>
<li><a href="pie.html">Pie</a></li>
<li><a href="radialbar.html">Radialbar</a></li>
<li><a href="radar.html">Radar</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-title"><span>Table & forms </span></li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#table">
<i class="iconoir-layout-right"></i> Table
</a>
<ul class="collapse" id="table">
<li><a href="basic_table.html">BasicTable</a></li>
<li><a href="data_table.html">Data Table</a></li>
<li><a href="list_table.html">List Js</a></li>
<li><a href="advance_table.html">Advance Table</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#forms">
<i class="iconoir-archive"></i> Forms elements
</a>
<ul class="collapse" id="forms">
<li><a href="form_validation.html">Form Validation</a></li>
<li><a href="base_inputs.html">Base Input</a></li>
<li><a href="checkbox_radio.html">Checkbox & Radio</a></li>
<li><a href="input_groups.html">Input Groups</a></li>
<li><a href="input_masks.html">Input Masks</a></li>
<li><a href="floating_labels.html">Floating Labels</a></li>
<li><a href="date_picker.html">Datetimepicker</a></li>
<li><a href="touchspin.html">Touchspin</a></li>
<li><a href="select.html">Select2</a></li>
<li><a href="switch.html">Switch</a></li>
<li><a href="range_slider.html">Range Slider</a></li>
<li><a href="typeahead.html">Typeahead</a></li>
<li><a href="textarea.html">Textarea</a></li>
<li><a href="clipboard.html">Clipboard</a></li>
<li><a href="file_upload.html">File Upload</a></li>
<li><a href="dual_listboxes.html">Dual List Boxes</a></li>
<li><a href="default_forms.html">Default Forms</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#ready_to_use">
<i class="iconoir-report-columns"></i>
Ready to use <span
class="badge text-success-dark bg-success-400 badge-notification ms-2">New</span>
</a>
<ul class="collapse" id="ready_to_use">
<li><a href="form_wizards.html">Form wizards</a></li>
<li><a href="form_wizard_1.html">Form wizards 1</a></li>
<li><a href="form_wizard_2.html">Form wizards 2</a></li>
<li><a href="ready_to_use_form.html">Ready To Use Form</a></li>
<li><a href="ready_to_use_table.html">Ready To Use Tables</a></li>
</ul>
</li>
<li class="menu-title"><span>Pages</span></li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#auth_pages">
<i class="ph-duotone ph-notebook"></i> Auth Pages
</a>
<ul class="collapse" id="auth_pages">
<li><a href="sign_in.html">Sign In</a></li>
<li><a href="sign_in_1.html">Sign In with Bg-image</a></li>
<li><a href="sign_up.html">Sign Up</a></li>
<li><a href="sign_up_1.html">Sign Up with Bg-image</a></li>
<li><a href="password_reset.html">Password Reset</a></li>
<li><a href="password_reset_1.html">Password Reset with Bg-image</a></li>
<li><a href="password_create.html">Password Create</a></li>
<li><a href="password_create_1.html">Password Create with Bg-image</a></li>
<li><a href="lock_screen.html">Lock Screen</a></li>
<li><a href="lock_screen_1.html">Lock Screen with Bg-image</a></li>
<li><a href="two_step_verification.html">Two-Step Verification</a></li>
<li><a href="two_step_verification_1.html">Two-Step Verification with Bg-image</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#error_pages">
<i class="iconoir-warning-triangle"></i> Error Pages
</a>
<ul class="collapse" id="error_pages">
<li><a href="error_400.html">Bad Request </a></li>
<li><a href="error_403.html">Forbidden </a></li>
<li><a href="error_404.html">Not Found</a></li>
<li><a href="error_500.html">Internal Server</a></li>
<li><a href="error_503.html">Service Unavailable</a></li>
</ul>
</li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#other_pages">
<i class="iconoir-multiple-pages"></i> Other Pages
</a>
<ul class="collapse" id="other_pages">
<li><a href="blank.html">Blank</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="landing.html">Landing Page</a></li>
<li><a href="coming_soon.html">Coming Soon</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="privacy_policy.html">Privacy Policy</a></li>
<li><a href="terms_condition.html">Terms & Condition</a></li>
</ul>
</li>
<li class="menu-title"><span>Others</span></li>
<li>
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#level">
<i class="iconoir-keyframes-couple"></i> 2 level
</a>
<ul class="collapse" id="level">
<li><a href="#">Blank</a></li>
<li class="another-level">
<a aria-expanded="false" class="" data-bs-toggle="collapse" href="#level2">
Another level
</a>
<ul class="collapse" id="level2">
<li><a href="blank.html">Blank</a></li>
</ul>
</li>
</ul>
</li>
<li class="no-sub">
<a class="" href="https://phpstack-1384472-5121645.cloudwaysapps.com/document/html/axelit/index.html">
<i class="iconoir-page-star"></i> Document
</a>
</li>
<li class="no-sub">
<a class="" href="mailto:teqlathemes@gmail.com">
<i class="iconoir-chat-bubble-question"></i> Support
</a>
</li>
</ul>
</div>
<div class="menu-navs">
<span class="menu-previous"><i class="ti ti-chevron-left"></i></span>
<span class="menu-next"><i class="ti ti-chevron-right"></i></span>
</div>
</nav>
<!-- Menu Navigation ends -->
<div class="app-content">
<div class="">
<!-- Header Section starts -->
<header class="header-main">
<div class="container-fluid">
<div class="row">
<div class="col-6 col-sm-4 d-flex align-items-center header-left p-0">
<span class="header-toggle me-3">
<i class="iconoir-view-grid"></i>
</span>
</div>
<div class="col-6 col-sm-8 d-flex align-items-center justify-content-end header-right p-0">
<ul class="d-flex align-items-center">
<li class="header-cloud">
<a aria-controls="cloudoffcanvasTops" class="head-icon"
data-bs-target="#cloudoffcanvasTops" data-bs-toggle="offcanvas"
href="#" role="button">
<i class="iconoir-dew-point text-primary f-s-26 me-1"></i>
<span class="f-w-600">26 <sup class="f-s-10">°C</sup></span>
</a>
<div aria-labelledby="cloudoffcanvasTops"
class="offcanvas offcanvas-end header-cloud-canvas"
id="cloudoffcanvasTops"
tabindex="-1">
<div class="offcanvas-body p-0">
<div class="cloud-body">
<div class="cloud-content-box">
<div class="cloud-box bg-primary-900">
<p class="mb-3">Mon</p>
<h6 class="mt-4 f-s-13"> +29°C</h6>
<span>
<i class="ph-duotone ph-cloud-fog text-white f-s-25"></i>
</span>
<p class="f-s-13 mt-3"><i class="wi wi-raindrop"></i> 2%</p>
</div>
<div class="cloud-box bg-primary-800">
<p class="mb-3">Tue</p>
<h6 class="mt-4 f-s-13"> +29°C</h6>
<span>
<i class="ph-duotone ph-cloud-sun text-white f-s-25"></i>
</span>
<p class="f-s-13 mt-3"><i class="wi wi-raindrop"></i> 2%</p>
</div>
<div class="cloud-box bg-primary-700">
<p class="mb-3 text-light">Wed</p>
<h6 class="mt-4 f-s-13"> +20°C</h6>
<span>
<i class="ph-duotone ph-sun-dim text-white f-s-25"></i>
</span>
<p class="f-s-13 mt-3"><i class="wi wi-raindrop"></i> 1%</p>
</div>
<div class="cloud-box bg-primary-600">
<p class="mb-3">Thu</p>
<h6 class="mt-4 f-s-13"> +17°C</h6>
<span>
<i class="ph-duotone ph-sun-dim text-white f-s-25"></i>
</span>
<p class="f-s-13 mt-3"><i class="wi wi-raindrop"></i> 1%</p>
</div>
<div class="cloud-box bg-primary-500">
<p class="mb-3">Fri</p>
<h6 class="mt-4 f-s-13"> +18°C</h6>
<span>
<i class="ph-duotone ph-sun-dim text-white f-s-25"></i>
</span>
<p class="f-s-13 mt-3"><i class="wi wi-raindrop"></i> 1%</p>
</div>
<div class="cloud-box bg-primary-400">
<p class="mb-3">Sat</p>
<h6 class="mt-4 f-s-13"> +16°C</h6>
<span>
<i class="ph-duotone ph-sun-dim text-white f-s-25"></i>
</span>
<p class="f-s-13 mt-3"><i class="wi wi-raindrop"></i> 1%</p>
</div>
<div class="cloud-box bg-primary-300">
<p class="mb-3">Sun</p>
<h6 class="mt-4 f-s-13"> +29°C</h6>
<span class="mb-3">
<i class="ph-duotone ph-sun-dim text-white f-s-25"></i>
</span>
<p class="f-s-13 mt-3"><i class="wi wi-raindrop"></i> 1%</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="header-language">
<div class="flex-shrink-0 dropdown" id="lang_selector">
<a aria-expanded="false" class="d-block head-icon ps-0"
data-bs-toggle="dropdown"
href="#">
<div class="lang-flag lang-en ">
<span class="flag rounded-circle overflow-hidden">
<i class=""></i>
</span>
</div>
</a>
<ul class="dropdown-menu language-dropdown header-card border-0">
<li class="lang lang-en selected dropdown-item p-2" data-bs-placement="top"
data-bs-toggle="tooltip" title="US">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-usa flag-icon-squared b-r-10 f-s-22"></i>
<span class="ps-2">English</span>
</span>
</li>
<li class="lang lang-pt dropdown-item p-2" title="FR">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-fra flag-icon-squared b-r-10 f-s-22"></i>
<span class="ps-2">Française </span>
</span>
</li>
<li class="lang lang-es dropdown-item p-2" title="UK">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-gbr flag-icon-squared b-r-10 f-s-22"></i>
<span class="ps-2">English</span>
</span>
</li>
<li class="lang lang-es dropdown-item p-2" title="Ru">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-rus flag-icon-squared b-r-10 f-s-22"></i>
<span class="ps-2">Русская</span>
</span>
</li>
<li class="lang lang-es dropdown-item p-2" title="IT">
<span class="d-flex align-items-center">
<i class="flag-icon flag-icon-ita flag-icon-squared b-r-10 f-s-22"></i>
<span class="ps-2">française</span>
</span>
</li>
</ul>
</div>
</li>
<li class="header-searchbar">
<a aria-controls="offcanvasRight" class="d-block head-icon"
data-bs-target="#offcanvasRight" data-bs-toggle="offcanvas"
href="#" role="button">
<i class="iconoir-search"></i>
</a>
<div aria-labelledby="offcanvasRight"
class="offcanvas offcanvas-end header-searchbar-canvas"
id="offcanvasRight"
tabindex="-1">
<div class="header-searchbar-header">
<div class="d-flex justify-content-between mb-3">
<form action="#" class="app-form app-icon-form w-100">
<div class="position-relative">
<input aria-label="Search" class="form-control search-filter"
placeholder="Search..."
type="search">
<i class="ti ti-search text-dark"></i>
</div>
</form>
<div class="app-dropdown flex-shrink-0">
<a aria-expanded="false"
class="h-35 w-35 d-flex-center b-r-15 overflow-hidden bg-light-secondary search-list-avtar ms-2"
data-bs-auto-close="outside" data-bs-toggle="dropdown"
href="#"
role="button">
<i class="ph-duotone ph-gear f-s-20"></i>
</a>
<ul class="dropdown-menu mb-3">
<li class="dropdown-item mt-2">
<a href="#">
<h6 class="mb-0">Search Settings</h6>
</a>
</li>
<li class="dropdown-item d-flex align-items-center justify-content-between">
<a href="#">
<h6 class="mb-0 text-secondary f-s-14">Safe Search
Filtering</h6>
</a>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input checked
class="form-check-input form-check-primary"
id="searchSwitch"
type="checkbox">
</div>
</div>
</li>
<li class="dropdown-item d-flex align-items-center justify-content-between">
<a href="#">
<h6 class="mb-0 text-secondary f-s-14">Search
Suggestions</h6>
</a>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input class="form-check-input form-check-primary"
id="searchSwitch1"
type="checkbox">
</div>
</div>
</li>
<li class="dropdown-item d-flex align-items-center justify-content-between">
<h6 class="mb-0 text-secondary f-s-14"> Search History</h6>
<i class="ti ti-message-circle me-3 text-success"></i>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item d-flex align-items-center justify-content-between mb-2">
<a href="#">
<h6 class="mb-0 text-dark f-s-14">Custom Search
Preferences</h6>
</a>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input class="form-check-input form-check-primary"
id="searchSwitch2"
type="checkbox">
</div>
</div>
</li>
</ul>
</div>
</div>
<p class="mb-0 text-secondary f-s-15 mt-2">Recently Searched Data:</p>
</div>
<div class="offcanvas-body app-scroll p-0">
<div>
<ul class="search-list">
<li class="search-list-item">
<div
class="h-35 w-35 d-flex-center b-r-15 overflow-hidden bg-light-primary search-list-avtar">
<i class="ph-duotone ph-gear f-s-20"></i>
</div>
<div class="search-list-content">
<a href="api.html" target="_blank"><h6
class="mb-0 text-dark">user management</h6></a>
<p class="f-s-13 mb-0 text-secondary">#RA789</p>
</div>
</li>
<li class="search-list-item">
<div
class="h-35 w-35 d-flex-center b-r-15 overflow-hidden bg-light-warning search-list-avtar">
<i class="ph-duotone ph-projector-screen-chart f-s-20"></i>
</div>
<div class="search-list-content">
<a href="privacy_policy.html" target="_blank"><h6
class="mb-0 text-dark">data visualization</h6></a>
<p class="f-s-13 mb-0 text-secondary">#RY810</p>
</div>
</li>
<li class="search-list-item">
<div
class="h-35 w-35 d-flex-center b-r-15 overflow-hidden bg-light-danger search-list-avtar">
<i class="ph-duotone ph-shield-check f-s-20"></i>
</div>
<div class="search-list-content">
<a href="terms_condition.html" target="_blank"><h6
class="mb-0 text-dark">security protocols</h6></a>
<p class="f-s-13 mb-0 text-secondary">#ATR56</p>
</div>
</li>
<li class="search-list-item">
<div
class="h-35 w-35 d-flex-center b-r-15 overflow-hidden bg-light-info search-list-avtar">
<i class="ph-duotone ph-app-window f-s-20"></i>
</div>
<div class="search-list-content">
<a href="sign_in.html" target="_blank"><h6
class="mb-0 text-dark">authentication methods</h6>
</a>
<p class="f-s-13 mb-0 text-secondary">#YE615</p>
</div>
</li>
<li class="search-list-item">
<div
class="h-35 w-35 d-flex-center b-r-15 overflow-hidden bg-light-dark search-list-avtar">
<i class="ph-duotone ph-table f-s-20"></i>
</div>
<div class="search-list-content">
<a href="data_table.html" target="_blank"><h6
class="mb-0 text-dark">Data Table</h6></a>
<p class="f-s-13 mb-0 text-secondary">#YE615</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="header-apps">
<a aria-controls="appscanvasRights" class="d-block head-icon"
data-bs-target="#appscanvasRights" data-bs-toggle="offcanvas"
href="#" role="button">
<i class="iconoir-key-command"></i>
</a>
<div aria-labelledby="appscanvasRightsLabel"
class="offcanvas offcanvas-end header-apps-canvas"
id="appscanvasRights"
tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="appscanvasRightsLabel">Shortcut</h5>
<div class="app-dropdown flex-shrink-0">
<a aria-expanded="false" class=" p-1" data-bs-auto-close="outside"
data-bs-toggle="dropdown"
href="#"
role="button">
<i class="ph-bold ph-faders-horizontal f-s-20"></i>
</a>
<ul class="dropdown-menu mb-3 p-2">
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Privacy Settings
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Account Settings
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Accessibility
</a>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item border-0">
<a aria-expanded="false" data-bs-toggle="dropdown" href="#"
role="button">
More Settings
</a>
<ul class="dropdown-menu sub-menu">
<li class="dropdown-item">
<a href="setting.html" target="_blank">
Backup and Restore
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
<span>Data Usage</span>
</a>
</li>
<li class="dropdown-item">
<a href="setting.html" target="_blank">
<span>Theme</span>
</a>
</li>
<li class="dropdown-item d-flex align-items-center justify-content-between">
<a href="setting.html" target="_blank">
<p class="mb-0">Notification</p>
</a>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input class="form-check-input form-check-primary"
id="notificationSwitch"
type="checkbox">
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="offcanvas-body app-scroll">
<div class="row row-cols-3">
<div class="d-flex-center text-center mb-3">
<a href="product.html" target="_blank">
<span class="text-light-info h-45 w-45 d-flex-center b-r-15">
<i class="ph-duotone ph-shopping-bag-open f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-info">E-shop</p>
</a>
</div>
<div class="d-flex-center text-center mb-3">
<a href="email.html" target="_blank">
<span class="text-light-primary h-45 w-45 d-flex-center b-r-15 position-relative">
<i class="ph-duotone ph-envelope f-s-30"></i>
<span class="position-absolute top-space-5 start-100 translate-middle p-1 bg-primary-dark rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
</span>
<p class="mb-0 f-w-500 text-primary">Email</p>
</a>
</div>
<div class="d-flex-center text-center mb-3">
<a href="chat.html" target="_blank">
<span class="text-light-danger h-45 w-45 d-flex-center b-r-15 position-relative">
<i class="ph-duotone ph-chat-circle-text f-s-30"></i>
<span class="position-absolute top-space-5 start-100 translate-middle badge rounded-pill bg-success badge-notification">
99+
<span class="visually-hidden">unread messages</span>
</span>
</span>
<p class="mb-0 f-w-500 text-danger">Chat</p>
</a>
</div>
<div class="d-flex-center text-center mb-3">
<a href="project_app.html" target="_blank">
<span class="text-light-warning h-45 w-45 d-flex-center b-r-15">
<i class="ph-duotone ph-projector-screen-chart f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-warning">Project</p>
</a>
</div>
<div class="d-flex-center text-center mb-3">
<a href="invoice.html" target="_blank">
<span class="text-light-secondary h-45 w-45 d-flex-center b-r-15">
<i class="ph-duotone ph-scroll f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-secondary">Invoice</p>
</a>
</div>
<div class="d-flex-center text-center mb-3">
<a href="blog.html" target="_blank">
<span class="text-light-primary h-45 w-45 d-flex-center b-r-15">
<i class="ph-duotone ph-notebook f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-primary">Blog</p>
</a>
</div>
<div class="d-flex-center text-center mb-3">
<a href="profile.html" target="_blank">
<span class="text-light-primary h-45 w-45 d-flex-center b-r-15 position-relative">
<i class="ph-duotone ph-users-three f-s-30"></i>
<span class="position-absolute top-space-5 start-100 translate-middle badge rounded-pill bg-danger badge-notification">
<i class="ti ti-bell-ringing"></i>
</span>
</span>
<p class="mb-0 f-w-500 text-primary">Profile</p>
</a>
</div>
<div class="d-flex-center text-center mb-3">
<a href="gallery.html" target="_blank">
<span class="text-light-success h-45 w-45 d-flex-center b-r-15">
<i class="ph-duotone ph-google-photos-logo f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-success">Gallery</p>
</a>
</div>
<div class="d-flex-center text-center mb-3">
<a href="kanban_board.html" target="_blank">
<span class="text-light-info h-45 w-45 d-flex-center b-r-15">
<i class="ph-duotone ph-selection-foreground text-info f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-secondary">Task </p>
</a>
</div>
<div class="d-flex-center text-center mb-3">
<a href="calendar.html" target="_blank">
<span class="text-light-dark h-45 w-45 d-flex-center b-r-15">
<i class="ph-duotone ph-calendar f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-dark">Calen..</p>
</a>
</div>
<div class="d-flex-center text-center mb-3">
<a href="filemanager.html" target="_blank">
<span class="text-light-danger h-45 w-45 d-flex-center b-r-15">
<i class="ph-duotone ph-folder-open f-s-30"></i>
</span>
<p class="mb-0 f-w-500 text-danger">File Ma..</p>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="header-cart">
<a aria-controls="cartcanvasRight" class="d-block head-icon position-relative"
data-bs-target="#cartcanvasRight"
data-bs-toggle="offcanvas"
href="#" role="button">
<i class="iconoir-shopping-bag"></i>
<span
class="position-absolute translate-middle badge rounded-pill bg-danger badge-notification">4</span>
</a>
<div aria-labelledby="cartcanvasRightLabel"
class="offcanvas offcanvas-end header-cart-canvas"
id="cartcanvasRight"
tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="cartcanvasRightLabel">Cart</h5>
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
type="button"></button>
</div>
<div class="offcanvas-body app-scroll p-0">
<div class="head-container">
<div class="head-box">
<img alt="cart" class="h-50 me-3 b-r-10"
src="../assets/images/ecommerce/19.jpg">
<div class="flex-grow-1">
<a class="text-primary-dark mb-0 f-w-600 f-s-16"
href="product_details.html" target="_blank">
Backpacks <span class="text-warning-dark"> (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)</span>
</a>
<div>
<span class="text-secondary"><span
class="text-dark f-w-500">size</span> : medium</span>
<span class="text-secondary ms-2"><span
class="text-dark f-w-500">Color</span> :Pink</span>
</div>
</div>
<div class="text-end">
<i class="iconoir-xmark close-btn"></i>
<p class="text-success f-w-500 mb-0">$600.50 x 1</p>
</div>
</div>
<div class="head-box">
<img alt="cart" class="h-50 object-fit-cover me-3 b-r-10"
src="../assets/images/ecommerce/13.jpg">
<div class="flex-grow-1">
<a class="text-info-dark mb-0 f-w-600 f-s-16"
href="product_details.html" target="_blank">
Women's Watch<span class="text-warning-dark"> (4<i
class="ti ti-star-filled text-warning f-s-12"></i>)</span>
</a>
<div>
<span class="text-secondary"><span
class="text-dark f-w-500">size</span> : small</span>
<span class="text-secondary ms-2"><span
class="text-dark f-w-500">Color</span> : RoseGold</span>
</div>
</div>
<div class="text-end">
<i class="iconoir-xmark close-btn"></i>
<p class="text-success f-w-500 mb-0">$519.10 x 2</p>
</div>
</div>
<div class="head-box">
<img alt="cart" class="h-50 object-fit-cover me-3 b-r-10"
src="../assets/images/ecommerce/09.jpg">
<div class="flex-grow-1">
<a class="text-danger-dark mb-0 f-w-600 f-s-16"
href="product_details.html" target="_blank">Sandals<span
class="text-warning-dark"> (5<i
class="ti ti-star-filled text-warning f-s-12"></i>)</span>
</a>
<div>
<span class="text-secondary"><span
class="text-dark f-w-500">size</span> : 8</span>
<span class="text-secondary ms-2"><span
class="text-dark f-w-500">Color</span> :White</span>
</div>
</div>
<div class="text-end">
<i class="iconoir-xmark close-btn"></i>
<p class="text-success f-w-500 mb-0">$390 x 2</p>
</div>
</div>
<div class="head-box ">
<img alt="cart" class="h-50 object-fit-cover me-3 b-r-10"
src="../assets/images/ecommerce/23.jpg">
<div class="flex-grow-1">
<a class="text-success-dark mb-0 f-w-600 f-s-16"
href="product_details.html" target="_blank">
Jackets<span class="text-warning-dark"> (3<i
class="ti ti-star-filled text-warning f-s-12"></i>)</span>
</a>
<div>
<span class="text-secondary"><span
class="text-dark f-w-500">size</span> : XL</span>
<span class="text-secondary ms-2"><span
class="text-dark f-w-500">Color</span> :Blue</span>
</div>
</div>
<div class="text-end">
<i class="iconoir-xmark close-btn"></i>
<p class="text-success f-w-500 mb-0">$300.00 x 2</p>
</div>
</div>
<div class="head-box ">
<img alt="cart" class="h-50 object-fit-cover me-3 b-r-10"
src="../assets/images/ecommerce/11.jpg">
<div class="flex-grow-1">
<a class="text-dark-dark mb-0 f-w-600 f-s-16"
href="product_details.html" target="_blank">
Shoes<span class="text-warning-dark"> (2<i
class="ti ti-star-filled text-warning f-s-12"></i>)</span>
</a>
<div>
<span class="text-secondary"><span
class="text-dark f-w-500">size</span> : 9</span>
<span class="text-secondary ms-2"><span
class="text-dark f-w-500">Color</span> :White</span>
</div>
</div>
<div class="text-end">
<i class="iconoir-xmark close-btn"></i>
<p class="text-success f-w-500 mb-0">$450.00 x 1</p>
</div>
</div>
<div class="hidden-massage py-4 px-3">
<img alt="cart" class="img-fluid mb-3"
src="../assets/images/header/cart_empty.gif">
<div>
<h6 class="mb-0">Your Cart is Empty</h6>
<p class="text-secondary mb-0">Add some items :)</p>
<a class="btn btn-light-primary btn-xs mt-2"
href="product_details.html">Shop
Now</a>
</div>
</div>
</div>
</div>
<div class="offcanvas-footer">
<div class="head-box-footer p-3">
<div class="mb-4">
<h6 class="text-muted f-w-600">Total <span class="float-end">$3,468.00</span>
</h6>
</div>
<div class="header-cart-btn">
<a class="btn btn-light-primary" href="cart.html" role="button"
target="_blank">
<i class="ti ti-eye"></i> View Cart</a>
<a class="btn btn-light-success" href="checkout.html"
role="button" target="_blank">
Checkout <i class="ti ti-shopping-cart"></i></a>
</div>
</div>
</div>
</div>
</li>
<li class="header-dark">
<div class="sun-logo head-icon">
<i class="iconoir-sun-light"></i>
</div>
<div class="moon-logo head-icon">
<i class="iconoir-half-moon"></i>
</div>
</li>
<li class="header-notification">
<a aria-controls="notificationcanvasRight"
class="d-block head-icon position-relative"
data-bs-target="#notificationcanvasRight"
data-bs-toggle="offcanvas"
href="#"
role="button">
<i class="iconoir-bell"></i>
<span
class="position-absolute translate-middle p-1 bg-success border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower"></span>
</a>
<div aria-labelledby="notificationcanvasRightLabel"
class="offcanvas offcanvas-end header-notification-canvas"
id="notificationcanvasRight" tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="notificationcanvasRightLabel">
Notification</h5>
<button aria-label="Close" class="btn-close" data-bs-dismiss="offcanvas"
type="button"></button>
</div>
<div class="offcanvas-body notification-offcanvas-body app-scroll p-0">
<div class="head-container notification-head-container">
<div class="notification-message head-box">
<div class="message-images">
<span class="bg-secondary h-35 w-35 d-flex-center b-r-10 position-relative">
<img alt="avtar" class="img-fluid b-r-10"
src="../assets/images/ai_avtar/6.jpg">
<span
class="position-absolute bottom-30 end-0 p-1 bg-secondary border border-light rounded-circle notification-avtar"></span>
</span>
</div>
<div class="message-content-box flex-grow-1 ps-2">
<a class="f-s-15 text-secondary mb-0"
href="read_email.html" target="_blank"><span
class="f-w-500 text-secondary">Gene Hart</span> wants to
edit <span
class="f-w-500 text-secondary">Report.doc</span></a>
<div>
<a class="d-inline-block f-w-500 text-success me-1"
href="#">Approve</a>
<a class="d-inline-block f-w-500 text-danger"
href="#">Deny</a>
</div>
<span class="badge text-light-primary mt-2"> sep 23 </span>
</div>
<div class="align-self-start text-end">
<i class="iconoir-xmark close-btn"></i>
</div>
</div>
<div class="notification-message head-box">
<div class="message-images">
<span class="bg-light-dark h-35 w-35 d-flex-center b-r-10 position-relative">
<i class="ph-duotone ph-truck f-s-18"></i>
</span>
</div>
<div class="message-content-box flex-grow-1 ps-2">
<a class="f-s-15 text-secondary mb-0" href="read_email.html"
target="_blank">Hey
<span
class="f-w-500 text-secondary">Emery McKenzie</span>,
get ready: Your order from <span
class="f-w-500 text-secondary">@Shopper.com</span>
is out for delivery today!</a>
<span class="badge text-light-info mt-2"> sep 23 </span>
</div>
<div class="align-self-start text-end">
<i class="iconoir-xmark close-btn"></i>
</div>
</div>
<div class="notification-message head-box">
<div class="message-images">
<span class="bg-secondary h-35 w-35 d-flex-center b-r-10 position-relative">
<img alt="" class="img-fluid b-r-10"
src="../assets/images/ai_avtar/2.jpg">
<span
class="position-absolute end-0 p-1 bg-secondary border border-light rounded-circle notification-avtar"></span>
</span>
</div>
<div class="message-content-box flex-grow-1 ps-2">
<a class="f-s-15 text-secondary mb-0"
href="read_email.html" target="_blank"><span
class="f-w-500 text-secondary">Simon Young</span> shared
a file called <span
class="f-w-500 text-secondary">Dropdown.pdf</span></a>
<span class="badge text-light-success mt-2"> 30 min</span>
</div>
<div class="align-self-start text-end">
<i class="iconoir-xmark close-btn"></i>
</div>
</div>
<div class="notification-message head-box">
<div class="message-images">
<span class="bg-secondary h-35 w-35 d-flex-center b-r-10 position-relative">
<img alt="" class="img-fluid b-r-10"
src="../assets/images/ai_avtar/5.jpg">
<span
class="position-absolute end-0 p-1 bg-secondary border border-light rounded-circle notification-avtar"></span>
</span>
</div>
<div class="message-content-box flex-grow-1 ps-2">
<a class="f-s-15 text-secondary mb-0"
href="read_email.html" target="_blank"><span
class="f-w-500 text-secondary">Becky G. Hayes</span> has
added a comment to <span
class="f-w-500 text-secondary">Final_Report.pdf</span></a>
<span class="badge text-light-warning mt-2"> 45 min</span>
</div>
<div class="align-self-start text-end">
<i class="iconoir-xmark close-btn"></i>
</div>
</div>
<div class="notification-message head-box">
<div class="message-images">
<span class="bg-secondary h-35 w-35 d-flex-center b-r-10 position-relative">
<img alt="" class="img-fluid b-r-10"
src="../assets/images/ai_avtar/1.jpg">
<span
class="position-absolute end-0 p-1 bg-secondary border border-light rounded-circle notification-avtar"></span>
</span>
</div>
<div class="message-content-box flex-grow-1 ps-2">
<a class="f-s-15 text-secondary mb-0"
href="read_email.html" target="_blank"><span
class="f-w-600 text-secondary">Romaine Nadeau</span>
invited you to join a meeting
</a>
<div>
<a class="d-inline-block f-w-500 text-success me-1"
href="#">Join</a>
<a class="d-inline-block f-w-500 text-danger" href="#">Decline</a>
</div>
<span class="badge text-light-secondary mt-2"> 1 hour ago </span>
</div>
<div class="align-self-start text-end">
<i class="iconoir-xmark close-btn"></i>
</div>
</div>
<div class="hidden-massage py-4 px-3">
<img alt=""
class="w-50 h-50 mb-3 mt-2"
src="../assets/images/icons/bell.png">
<div>
<h6 class="mb-0">Notification Not Found</h6>
<p class="text-secondary">When you have any notifications added
here,will
appear here.
</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="header-profile">
<a aria-controls="profilecanvasRight" class="d-block head-icon"
data-bs-target="#profilecanvasRight" data-bs-toggle="offcanvas"
href="#" role="button">
<img alt="avtar" class="b-r-50 h-35 w-35 bg-dark"
src="../assets/images/avtar/woman.jpg">
</a>
<div aria-labelledby="profilecanvasRight"
class="offcanvas offcanvas-end header-profile-canvas"
id="profilecanvasRight"
tabindex="-1">
<div class="offcanvas-body app-scroll">
<ul class="">
<li class="d-flex gap-3 mb-3">
<div class="d-flex-center">
<span class="h-45 w-45 d-flex-center b-r-10 position-relative">
<img alt="" class="img-fluid b-r-10"
src="../assets/images/avtar/woman.jpg">
</span>
</div>
<div class="text-center mt-2">
<h6 class="mb-0"> Laura Monaldo <img
alt="instagram-check-mark"
class="w-20 h-20"
src="../assets/images/profile-app/01.png"></h6>
<p class="f-s-12 mb-0 text-secondary">lauradesign@gmail.com</p>
</div>
</li>
<li>
<a class="f-w-500" href="profile.html" target="_blank">
<i class="iconoir-user-love pe-1 f-s-20"></i> Profile
Details
</a>
</li>
<li>
<a class="f-w-500" href="setting.html" target="_blank">
<i class="iconoir-settings pe-1 f-s-20"></i> Settings
</a>
</li>
<li class="app-divider-v dotted py-1"></li>
<li>
<div class="app-dropdown dropstart">
<a aria-expanded="false" class="f-w-500"
data-bs-toggle="dropdown"
href="setting.html"
role="button" target="_blank">
<i class="iconoir-eye-closed pe-1 f-s-20"></i> Hide
Settings
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item">Hide Comments</a></li>
<li><a class="dropdown-item">Advanced comment filtering</a>
</li>
<li><a class="dropdown-item">Hide mssage request</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item">Separated link</a></li>
</ul>
</div>
</li>
<li>
<div class="d-flex align-items-center justify-content-between">
<a class="f-w-500" href="#">
<i class="iconoir-bell-notification pe-1 f-s-20"></i>
Notification
</a>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input checked
class="form-check-input form-check-primary"
id="basicSwitch"
type="checkbox">
</div>
</div>
</div>
</li>
<li>
<div class="d-flex align-items-center justify-content-between">
<div>
<a class="f-w-500" href="#">
<i class="ph-duotone ph-detective pe-1 f-s-20"></i>
Incognito
</a>
</div>
<div class="flex-shrink-0">
<div class="form-check form-switch">
<input class="form-check-input form-check-primary"
id="incognitoSwitch"
type="checkbox">
</div>
</div>
</div>
</li>
<li class="app-divider-v dotted py-1"></li>
<li>
<a class="f-w-500" href="faq.html" target="_blank">
<i class="iconoir-help-circle pe-1 f-s-20"></i> Help
</a>
</li>
<li>
<a class="f-w-500" href="pricing.html" target="_blank">
<i class="iconoir-dollar pe-1 f-s-20"></i>
Pricing
</a>
</li>
<li>
<a class="mb-0 text-secondary f-w-500" href="sign_up.html"
target="_blank">
<i class="iconoir-plus pe-1 f-s-20"></i> Add account
</a>
</li>
<li>
<a class="mb-0 btn btn-light-danger btn-sm justify-content-center "
href="sign_in.html"
role="button">
<i class="ph-duotone ph-sign-out pe-1 f-s-20"></i> Log Out
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</header>
<!-- Header Section ends -->
<!-- Body main section starts -->
<main>
<div class="container-fluid">
<!-- Breadcrumb start -->
<div class="row m-1">
<div class="col-12 ">
<h4 class="main-title">Scrollpy</h4>
<ul class="app-line-breadcrumbs mb-3">
<li class="">
<a class="f-s-14 f-w-500" href="#">
<span>
<i class="ph-duotone ph-briefcase-metal f-s-16"></i> Advance UI
</span>
</a>
</li>
<li class="active">
<a class="f-s-14 f-w-500" href="#">Scrollpy</a>
</li>
</ul>
</div>
</div>
<!-- Breadcrumb end -->
<!-- scrollpy strat -->
<!-- Scrollpy in Navbar start -->
<div class="col-12">
<div class="card">
<div class="card-header">
<h5>Scrollpy in Navbar</h5>
</div>
<div class="card-body">
<div class="navbar navbar-expand-lg bg-body-tertiary" id="navbar-example2">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation"
class="navbar-toggler"
data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse"
type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav nav-pills ms-auto">
<li class="nav-item">
<a class="nav-link nav-pill-primary"
href="#scrollspyHeading1">First</a>
</li>
<li class="nav-item">
<a class="nav-link nav-pill-primary" href="#scrollspyHeading2">Second</a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false"
class="nav-link dropdown-toggle nav-pill-primary"
data-bs-toggle="dropdown"
href="#" role="button">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item nav-pill-primary"
href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item nav-pill-primary"
href="#scrollspyHeading4">Fourth</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item nav-pill-primary"
href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="scrollspy-example p-3 rounded-2 h-250 overflow-y-scroll"
data-bs-root-margin="0px 0px -40%"
data-bs-smooth-scroll="true"
data-bs-spy="scroll"
data-bs-target="#navbar-example2" tabindex="0">
<h5 class="f-w-500 mb-2" id="scrollspyHeading1">First paragraph</h5>
<p class="f-s-15 lh-base mg-b-14">Platea platea, sapien rutrum duis adipiscing,
dictumst. Arcu nibh. Ligula tellus senectus, penatibus maecenas laoreet. Purus
odio sociis phasellus habitasse nulla ligula duis interdum, ultrices aliquam.
Convallis odio augue pellentesque inceptos varius fermentum facilisi vel eget
porttitor neque, congue suscipit conubia justo nibh. Semper sollicitudin nibh
volutpat class. Nisl congue.</p>
<h5 class="f-w-500 mb-2" id="scrollspyHeading2">Second paragraph</h5>
<p class="f-s-15 lh-base mg-b-14">Lectus torquent sapien placerat bibendum,
convallis cras ut nunc senectus ultricies venenatis, sapien. Pellentesque
condimentum. Nisl. Nisl primis est rhoncus. Purus massa purus urna, fermentum
nec auctor eu ultricies hac. Auctor curabitur dolor faucibus. Sagittis.
Fringilla eleifend. Eu mi nam montes odio habitasse mus pede hendrerit. Massa
malesuada sit arcu aenean taciti montes etiam facilisi aptent, quisque commodo
cubilia nascetur habitasse primis elit ridiculus lectus mus cum sem nibh
vivamus.</p>
<h5 class="f-w-500 mb-2" id="scrollspyHeading3">Third paragraph</h5>
<p class="f-s-15 lh-base mg-b-14">Ligula platea at eleifend vivamus nibh porta
auctor ornare pellentesque cras et donec varius quam tempus. Mattis.
Sollicitudin diam quisque libero mattis phasellus dui placerat mauris, hymenaeos
aliquet fermentum facilisis turpis rhoncus nascetur fusce, tempus ligula mus
senectus sociosqu proin donec quis nibh augue etiam quis nunc accumsan dui
placerat imperdiet natoque. Erat potenti arcu euismod scelerisque nisi. Netus
eget hendrerit facilisis donec risus. Nam fusce lobortis mi leo diam.</p>
<h5 class="f-w-500 mb-2" id="scrollspyHeading4">Fourth paragraph</h5>
<p class="f-s-15 lh-base mg-b-14">Diam condimentum etiam. In adipiscing dis aliquet
nam ipsum etiam per viverra Quam platea posuere quis nunc et, vitae congue
natoque lobortis laoreet. Sapien potenti augue litora porta mi vitae conubia
natoque justo auctor pretium et convallis habitant potenti sed ridiculus velit
mattis quam sociosqu venenatis fames vitae parturient nisl pretium pulvinar eros
ultricies massa feugiat sapien sagittis luctus ultrices leo conubia auctor.
Lorem sed facilisi donec mollis facilisi. Pulvinar.</p>
<h5 class="f-w-500 mb-2" id="scrollspyHeading5">Fifth paragraph</h5>
<p class="f-s-15 lh-base">Hymenaeos tincidunt donec vivamus suspendisse condimentum
tincidunt vestibulum varius enim, odio gravida pellentesque fames Ac orci
bibendum nullam eu posuere natoque tempus blandit lobortis tortor hymenaeos
faucibus eleifend faucibus ultrices etiam etiam luctus, volutpat nostra nunc Est
sit sodales ad malesuada justo dignissim eget est cum accumsan maecenas tempus
orci ipsum a nisl vel porta. Suspendisse gravida placerat vel cursus facilisi
parturient justo diam pede conubia vulputate vivamus libero iaculis primis
sociosqu mattis non natoque penatibus adipiscing mollis fermentum ac ut feugiat
pulvinar Lobortis nibh amet. Adipiscing nec phasellus primis. Pretium urna
phasellus mi habitant tellus a ac ornare posuere.</p>
</div>
</div>
</div>
</div>
<!-- Scrollpy in Navbar end -->
<!-- Scrollpy with nested nav start -->
<div class="col-12">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-header">
<h5>Scrollpy with nested nav</h5>
</div>
<div class="card-body">
<div class="h-100 flex-column align-items-stretch pe-4 scrollpy-nested-nav"
id="navbar-example3">
<div class="nav nav-pills flex-column">
<a class="nav-link nav-pill-primary" href="#item-1">Item 1</a>
<div class="nav nav-pills flex-column">
<a class="nav-link nav-pill-primary ms-3 my-1" href="#item-1-1">Item
1.1</a>
<a class="nav-link nav-pill-primary ms-3 my-1" href="#item-1-2">Item
1.2</a>
</div>
<a class="nav-link nav-pill-primary" href="#item-2">Item 2</a>
<a class="nav-link nav-pill-primary" href="#item-3">Item 3</a>
<div class="nav nav-pills flex-column">
<a class="nav-link nav-pill-primary ms-3 my-1" href="#item-3-1">Item
3.1</a>
<a class="nav-link nav-pill-primary ms-3 my-1" href="#item-3-2">Item
3.2</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="card">
<div class="card-body">
<div class="scrollspy-example-2 h-350 overflow-y-scroll"
data-bs-smooth-scroll="true"
data-bs-spy="scroll"
data-bs-target="#navbar-example3" tabindex="0">
<div id="item-1">
<h5 class="f-w-500 mb-2">Item 1</h5>
<p class="f-s-15 lh-base mg-b-14">A web designer is a skilled
professional who specializes in creating visually appealing and
functional websites. They possess a strong understanding of design
principles, user experience, and coding languages to develop
websites that are both aesthetically pleasing and user-friendly. A
web designer is responsible for creating the overall look and feel
of a</p>
</div>
<div id="item-1-1">
<h5 class="f-w-500 mb-2">Item 1.1</h5>
<p class="f-s-15 lh-base mg-b-14">The role of a web designer goes beyond
just creating visually appealing websites. They also need to have a
deep understanding of user experience (UX) design principles. This
involves considering how users will interact with the website,
ensuring that it is easy to navigate, and optimizing it for
different devices and screen sizes. A web designer needs to have a
keen eye for detail and be able to create designs</p>
</div>
<div id="item-1-2">
<h5 class="f-w-500 mb-2"> Item 1.2</h5>
<p class="f-s-15 lh-base mg-b-14">It is a long established fact that a
reader will be distracted by the readable
content of a page when looking at its layout. The point of using
Lorem Ipsum is that
it has a more-or-less normal distribution of letters, as opposed to
using 'Content
here, content here', making it look like readable English. Many
desktop publishing
packages and web page editors now use Lorem Ipsum as their default
model text, and a
search for 'lorem ipsum' will uncover many web sites still in their
infancy. Various
versions have evolved over the years, sometimes by accident,
sometimes on purpose
injected humour and the like</p>
</div>
<div id="item-2">
<h5 class="f-w-500 mb-2">Item 2</h5>
<p class="f-s-15 lh-base mg-b-14">In addition to design skills, a web
designer also needs to have a solid understanding of coding
languages such as HTML, CSS, and JavaScript. This allows them to
bring their designs to life and ensure that the website functions as
intended. They need to be able to write clean and efficient code,
optimize the website for search engines, and ensure that it is
compatible with different browsers and devices.</p>
</div>
<div id="item-3">
<h5 class="f-w-500 mb-2">Item 3</h5>
<p class="f-s-15 lh-base mg-b-14"> A web designer is a creative
professional who specializes in designing and creating visually
appealing and user-friendly websites. They have a deep understanding
of various design principles, color schemes, typography, and layout
techniques to create a visually stunning website that aligns with
the client's brand and objectives. A web designer combines their
technical skills with their artistic flair to bring a website</p>
</div>
<div id="item-3-1">
<h5 class="f-w-500 mb-2">Item 3.1</h5>
<p class="f-s-15 lh-base mg-b-14"> The role of a web designer goes
beyond just creating a visually appealing website. They also need to
have a good understanding of user experience (UX) design principles.
This involves considering how users will interact with the website,
ensuring that it is easy to navigate, and that the information is
presented in a logical and intuitive manner. A web designer will
also need to have a good understanding of responsive design,
ensuring that the website looks and functions well on different
devices and screen sizes.</p>
</div>
<div id="item-3-2">
<h5 class="f-w-500 mb-2">Item 3.2</h5>
<p class="f-s-15 lh-base mg-b-14"> In addition to their design skills, a
web designer also needs to have a good understanding of coding
languages such as HTML, CSS, and JavaScript. This allows them to
bring their designs to life by coding the website and implementing
interactive elements. They may also need to work closely with web
developers to ensure that the design is implemented correctly and
that any technical issues are resolved. Overall, a web designer
plays a crucial role in creating visually appealing and
user-friendly websites that effectively communicate the client's
message</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Scrollpy with nested nav end -->
<!-- Scrollpy with list-group start -->
<div class="col-12">
<div class="row">
<div class="col-sm-4">
<div class="card ">
<div class="card-header">
<h5>Scrollpy with list-group</h5>
</div>
<div class="card-body">
<div class="row">
<div class="list-group" id="list-example">
<a class="list-group-item nav-pill-primary list-group-item-action"
href="#list-item-1">Item 1</a>
<a class="list-group-item nav-pill-primary list-group-item-action"
href="#list-item-2">Item 2</a>
<a class="list-group-item nav-pill-primary list-group-item-action"
href="#list-item-3">Item 3</a>
<a class="list-group-item nav-pill-primary list-group-item-action"
href="#list-item-4">Item 4</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="card">
<div class="card-body">
<div class="scrollspy-example h-215 overflow-y-scroll"
data-bs-smooth-scroll="true"
data-bs-spy="scroll"
data-bs-target="#list-example" tabindex="0">
<h5 class="f-w-500 mb-2" id="list-item-1">Item 1</h5>
<p class="f-s-15 lh-base mg-b-14">A digital artisan, skilled in the art of
crafting captivating online experiences, is what one would refer to as a
web designer. This master of the virtual realm possesses an innate
ability to blend aesthetics with functionality, creating visually
stunning websites that leave a lasting impression on the beholder. With
a keen eye for detail and an unwavering commitment to perfection, the
web designer meticulously weaves together colors, typography, and
imagery to construct a virtual masterpiece that not only captivates the
senses but also effortlessly guides the user through a seamless digital
journey.</p>
<h5 class="f-w-500 mb-2" id="list-item-2">Item 2</h5>
<p class="f-s-15 lh-base mg-b-14">Picture a modern-day Leonardo da Vinci,
armed with a palette of pixels and a canvas of code, and you have the
essence of a web designer. This visionary artist possesses an
unparalleled understanding of the digital landscape, effortlessly
transforming abstract concepts into tangible online realities. With an
unwavering dedication to staying ahead of the ever-evolving trends, the
web designer is a true pioneer, constantly pushing the boundaries of
creativity and innovation. Their work is a testament to their ability to
harmonize technology and design, resulting in websites that are not only
visually striking but also functionally flawless.
</p>
<h5 class="f-w-500 mb-2" id="list-item-3">Item 3</h5>
<p class="f-s-15 lh-base mg-b-14"> In the realm of the digital realm, the
web designer reigns supreme as the virtuoso of the online universe.
Armed with an arsenal of technical skills and an insatiable thirst for
creativity, this digital maestro orchestrates a symphony of pixels and
lines of code to create awe-inspiring websites that are as visually
captivating as they are user-friendly. With an acute understanding of
user experience and an unwavering commitment to excellence, the web
designer meticulously crafts every element of a website, ensuring that
it not only reflects the brand's identity but also engages and delights
its visitors. </p>
<h5 class="f-w-500 mb-2" id="list-item-4">Item 4</h5>
<p class="f-s-15 lh-base mg-b-14"> A digital artisan, skilled in the art of
crafting captivating online experiences, is what one would refer to as a
web designer. This master of the virtual realm possesses an innate
ability to blend aesthetics with functionality, creating visually
stunning websites that leave a lasting impression on the beholder. With
a keen eye for detail and an unwavering commitment to perfection, the
web designer meticulously weaves together colors, typography, and
imagery to construct a virtual masterpiece that not only captivates the
senses but also effortlessly guides the user through a seamless digital
journey.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Scrollpy with list-group end -->
<!-- Simple anchors start -->
<div class="col-12">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-header">
<h5>Simple anchors</h5>
</div>
<div class="card-body">
<div class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center"
id="simple-list-example">
<a class="p-1 rounded border" href="#simple-list-item-1">Item 1</a>
<a class="p-1 rounded border" href="#simple-list-item-2">Item 2</a>
<a class="p-1 rounded border" href="#simple-list-item-3">Item 3</a>
<a class="p-1 rounded border" href="#simple-list-item-4">Item 4</a>
<a class="p-1 rounded border" href="#simple-list-item-5">Item 5</a>
</div>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="card">
<div class="card-body">
<div class="scrollspy-example h-245 overflow-y-scroll" data-bs-offset="0"
data-bs-smooth-scroll="true"
data-bs-spy="scroll"
data-bs-target="#simple-list-example" tabindex="0">
<h5 class="f-w-500 mb-2" id="simple-list-item-1">Item 1</h5>
<p class="f-s-15 lh-base mg-b-14">Are you looking for a creative
professional who can bring your website to life? Look no further than a
web designer! With their expertise in both design and technology, web
designers have the skills to create visually stunning and user-friendly
websites that will captivate your audience. They understand the
importance of a well-designed website in today's digital age and can
tailor their designs to match your brand identity and target audience.
</p>
<h5 class="f-w-500 mb-2" id="simple-list-item-2">Item 2</h5>
<p class="f-s-15 lh-base mg-b-14">A web designer is not just someone who
knows how to make a website look good. They are skilled in various
programming languages and have a deep understanding of user experience
and interface design. They can create a website that not only looks
visually appealing but also functions seamlessly across different
devices and browsers. From choosing the right color palette to creating
intuitive navigation, a web designer pays attention to every detail to
ensure your website is both aesthetically pleasing and
user-friendly.</p>
<h5 class="f-w-500 mb-2" id="simple-list-item-3">Item 3</h5>
<p class="f-s-15 lh-base mg-b-14">It is a long established fact that a
reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem
Ipsum is that
it has a more-or-less normal distribution of letters, as opposed to
using 'Content
here, content here', making it look like readable English. Many desktop
publishing
packages and web page editors now use Lorem Ipsum as their default model
text, and a
search for 'lorem ipsum' will uncover many web sites still in their
infancy. Various
versions have evolved over the years, sometimes by accident, sometimes
on purpose
injected humour and the like</p>
<h5 class="f-w-500 mb-2" id="simple-list-item-4">Item 4</h5>
<p class="f-s-15 lh-base mg-b-14"> In addition to their technical skills,
web designers are also great problem solvers. They can analyze your
business goals and translate them into a website that not only meets
your needs but also exceeds your expectations. They are constantly
staying updated with the latest design trends and technologies to ensure
your website is modern and competitive in the online landscape. A web
designer is a valuable asset to any business or individual looking to
establish a strong online presence and make a lasting impression on
their audience.</p>
<h5 class="f-w-500 mb-2" id="simple-list-item-5">Item 5</h5>
<p class="f-s-15 lh-base mg-b-14"> A web designer is a professional who
specializes in creating and designing websites. They possess a unique
skill set that combines creativity, technical knowledge, and an
understanding of user experience. Web designers are responsible for the
visual layout, functionality, and overall aesthetics of a website. They
work closely with clients to understand their needs and objectives, and
then translate those into a visually appealing and user-friendly
website.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Simple anchors end -->
<!-- scrollpy strat -->
</div>
</main>
<!-- Body main section ends -->
<!-- tap on top -->
<div class="go-top">
<span class="progress-value">
<i class="ti ti-chevron-up"></i>
</span>
</div>
<!-- Footer Section starts-->
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-12">
<ul class="footer-text">
<li>
<p class="mb-0">Copyright © 2025 axelit. All rights reserved 💖</p>
</li>
<li><a href="#"> V1.0.0 </a></li>
</ul>
</div>
<div class="col-md-3">
<ul class="footer-text text-end">
<li><a href="mailto:teqlathemes@gmail.com."> Need Help <i class="ti ti-help"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Footer Section ends-->
</div>
</div>
</div>
<!--customizer-->
<div id="customizer"></div>
<!-- latest jquery-->
<script src="../assets/js/jquery-3.6.3.min.js"></script>
<!-- Simple bar js-->
<script src="../assets/vendor/simplebar/simplebar.js"></script>
<!-- phosphor js -->
<script src="../assets/vendor/phosphor/phosphor.js"></script>
<!-- Bootstrap js-->
<script src="../assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
<!-- App js-->
<script src="../assets/js/script.js"></script>
<!-- Customizer js-->
<script src="../assets/js/customizer.js"></script>
</body>
<!-- Mirrored from phpstack-1384472-5121645.cloudwaysapps.com/template/html/axelit/template/scrollpy.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 15 Apr 2025 15:47:21 GMT -->
</html>