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/tabs.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 15 Apr 2025 15:46:58 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">
<!-- prism CSS-->
<link href="../assets/vendor/prism/prism.min.css" rel="stylesheet">
<!--flag Icon css-->
<link href="../assets/vendor/flag-icons-master/flag-icon.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">Tabs</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 f-s-16"></i> Ui kits
</span>
</a>
</li>
<li class="active">
<a class="f-s-14 f-w-500" href="#">Tabs</a>
</li>
</ul>
</div>
</div>
<!-- Breadcrumb end -->
<!-- Tabs start -->
<div class="row app-tabs-section">
<!-- Tab 1 -->
<div class="col-lg-6">
<div class="card">
<div class="d-flex justify-content-between code-header card-header">
<h5>Basic Tabs</h5>
<a aria-controls="tab1" aria-expanded="false" data-bs-toggle="collapse"
href="#tab1">
<i class="ti ti-code source" data-source="t1"></i>
</a>
</div>
<div class="card-body">
<ul class="nav nav-tabs app-tabs-primary" id="Basic" role="tablist">
<li class="nav-item" role="presentation">
<button aria-controls="html-tab-pane" aria-selected="true"
class="nav-link active"
data-bs-target="#html-tab-pane" data-bs-toggle="tab" id="html-tab"
role="tab"
type="button">HTML
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="css-tab-pane" aria-selected="false" class="nav-link"
data-bs-target="#css-tab-pane"
data-bs-toggle="tab" id="css-tab" role="tab"
type="button">CSS
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="php-tab-pane" aria-selected="false" class="nav-link"
data-bs-target="#php-tab-pane"
data-bs-toggle="tab" id="php-tab" role="tab"
type="button">PHP
</button>
</li>
</ul>
<div class="tab-content" id="BasicContent">
<div aria-labelledby="html-tab" class="tab-pane fade show active"
id="html-tab-pane"
role="tabpanel" tabindex="0">
<p>Hypertext Markup Language is the standard markup language for documents
designed to be
displayed in a web browser.</p>
<p>It can be assisted by technologies such as Cascading Style Sheets (CSS)
and scripting
languages such as JavaScript.</p>
</div>
<div aria-labelledby="css-tab" class="tab-pane fade" id="css-tab-pane"
role="tabpanel"
tabindex="0">
<p>Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation
of a document written in a markup language like HTML.</p>
<p>CSS is a cornerstone technology of the World Wide Web, alongside HTML and
JavaScript.</p>
</div>
<div aria-labelledby="php-tab" class="tab-pane fade" id="php-tab-pane"
role="tabpanel"
tabindex="0">
<p>PHP is a popular general-purpose scripting language that is especially
suited to web
development.</p>
<p>It was originally created by Rasmus Lerdorf in 1994; the PHP reference
implementation is now
produced by The PHP Group.</p>
</div>
</div>
</div>
<pre class="t1 collapse mt-3" id="tab1">
<code class="language-html">
<div class="card equal-card">
<div class="card-header">
<h5>Basic Tabs</h5>
</div>
<div class="card-body">
<ul class="nav nav-tabs app-tabs-primary" id="Basic" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="html-tab" data-bs-toggle="tab"
data-bs-target="#html-tab-pane" type="button" role="tab" aria-controls="html-tab-pane"
aria-selected="true">HTML</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="css-tab" data-bs-toggle="tab" data-bs-target="#css-tab-pane"
type="button" role="tab" aria-controls="css-tab-pane" aria-selected="false">CSS</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="php-tab" data-bs-toggle="tab" data-bs-target="#php-tab-pane"
type="button" role="tab" aria-controls="php-tab-pane" aria-selected="false">PHP</button>
</li>
</ul>
<div class="tab-content" id="BasicContent">
<div class="tab-pane fade show active" id="html-tab-pane" role="tabpanel"
aria-labelledby="html-tab" tabindex="0">
<p>Hypertext Markup Language is the standard markup language for documents designed to be
displayed in a web browser.</p>
<p>It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting
languages such as JavaScript.</p>
</div>
<div class="tab-pane fade" id="css-tab-pane" role="tabpanel" aria-labelledby="css-tab"
tabindex="0">
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language like HTML.</p>
<p>CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
</div>
<div class="tab-pane fade" id="php-tab-pane" role="tabpanel" aria-labelledby="php-tab"
tabindex="0">
<p>PHP is a popular general-purpose scripting language that is especially suited to web
development.</p>
<p>It was originally created by Rasmus Lerdorf in 1994; the PHP reference implementation is now
produced by The PHP Group.</p>
</div>
</div>
</div>
</div>
</code>
</pre>
</div>
</div>
<!-- Tab 2 -->
<div class="col-lg-6">
<div class="card equal-card">
<div class="d-flex justify-content-between code-header card-header">
<h5>Light Tabs</h5>
<a aria-controls="tab3" aria-expanded="false" data-bs-toggle="collapse"
href="#tab3">
<i class="ti ti-code source" data-source="t3"></i>
</a>
</div>
<div class="card-body">
<ul class="nav nav-tabs tab-light-primary" id="Light" role="tablist">
<li class="nav-item" role="presentation">
<button aria-controls="description-tab-pane" aria-selected="true"
class="nav-link active"
data-bs-target="#description-tab-pane" data-bs-toggle="tab"
id="description-tab"
role="tab" type="button"><i
class="ti ti-lifebuoy pe-1 ps-1"></i>
Description
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="howowrk-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#howowrk-tab-pane" data-bs-toggle="tab"
id="howowrk-tab"
role="tab"
type="button"><i class="ti ti-keyboard-show pe-1 ps-1"></i>
How It Works
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="drawbacks-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#drawbacks-tab-pane" data-bs-toggle="tab"
id="drawbacks-tab"
role="tab" type="button"><i
class="ti ti-file-dislike pe-1 ps-1"></i>Drawbacks
</button>
</li>
</ul>
<div class="tab-content" id="LightContent">
<div aria-labelledby="description-tab" class="tab-pane fade show active"
id="description-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<div aria-labelledby="howowrk-tab" class="tab-pane fade" id="howowrk-tab-pane"
role="tabpanel"
tabindex="0">
<ol>
<li>Show only the last tab.</li>
<li>If <code>:target</code> matches a tab, show it and hide all
following siblings.
</li>
<li>Matches a tab, show it and hide all following siblings.</li>
</ol>
</div>
<div aria-labelledby="drawbacks-tab" class="tab-pane fade"
id="drawbacks-tab-pane"
role="tabpanel"
tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
</div>
</div>
<pre class="t3 collapse mt-3" id="tab3">
<code class="language-html">
<div class="card">
<div class="card-header">
<h5>Outline Tabs</h5>
</div>
<div class="card-body">
<ul class="nav nav-tabs tab-outline-primary" id="Outline" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
aria-selected="true">Connect</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="discover-tab" data-bs-toggle="tab"
data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
aria-selected="false">Discover</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
</li>
</ul>
<div class="tab-content" id="OutlineContent">
<div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
aria-labelledby="connect-tab" tabindex="0">
<h6 class="mb-1">This is the content of tab one.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It
accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy.
Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
<div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
tabindex="0">
<h6 class="mb-1">This is the content of tab two.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It
accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy.
Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
<div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
tabindex="0">
<h6 class="mb-1">This is the content of tab three.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It
accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy.
Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
</div>
</div>
</div>
</code>
</pre>
</div>
</div>
<!-- Tab 3 -->
<div class="col-lg-6">
<div class="card card-equal ">
<div class="d-flex justify-content-between code-header card-header">
<h5>Outline Tabs</h5>
<a aria-controls="tab2" aria-expanded="false" data-bs-toggle="collapse"
href="#tab2">
<i class="ti ti-code source" data-source="t2"></i>
</a>
</div>
<div class="card-body">
<ul class="nav nav-tabs tab-outline-primary" id="Outline" role="tablist">
<li class="nav-item" role="presentation">
<button aria-controls="connect-tab-pane" aria-selected="true"
class="nav-link active"
data-bs-target="#connect-tab-pane" data-bs-toggle="tab"
id="connect-tab"
role="tab"
type="button">Connect
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="discover-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#discover-tab-pane" data-bs-toggle="tab"
id="discover-tab"
role="tab"
type="button">Discover
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="order-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#order-tab-pane"
data-bs-toggle="tab" id="order-tab" role="tab"
type="button">Orders
</button>
</li>
</ul>
<div class="tab-content" id="OutlineContent">
<div aria-labelledby="connect-tab" class="tab-pane fade show active"
id="connect-tab-pane"
role="tabpanel" tabindex="0">
<h6 class="mb-1">This is the content of tab one.</h6>
<p>This field is a rich HTML field with a content editor like others used in
Sitefinity. It
accepts images, video, tables, text, etc. Street art polaroid
microdosing la croix taxidermy.
Jean shorts kinfolk distillery lumbersexual pinterest XOXO
semiotics.</p>
</div>
<div aria-labelledby="discover-tab" class="tab-pane fade" id="discover-tab-pane"
role="tabpanel"
tabindex="0">
<h6 class="mb-1">This is the content of tab two.</h6>
<p>This field is a rich HTML field with a content editor like others used in
Sitefinity. It
accepts images, video, tables, text, etc. Street art polaroid
microdosing la croix taxidermy.
Jean shorts kinfolk distillery lumbersexual pinterest XOXO
semiotics.</p>
</div>
<div aria-labelledby="order-tab" class="tab-pane fade" id="order-tab-pane"
role="tabpanel"
tabindex="0">
<h6 class="mb-1">This is the content of tab three.</h6>
<p>This field is a rich HTML field with a content editor like others used in
Sitefinity. It
accepts images, video, tables, text, etc. Street art polaroid
microdosing la croix taxidermy.
Jean shorts kinfolk distillery lumbersexual pinterest XOXO
semiotics.</p>
</div>
</div>
</div>
<pre class="t2 collapse mt-3" id="tab2">
<code class="language-html">
<div class="card">
<div class="card-header code-header">
<h5>Outline Tabs</h5>
<a data-bs-toggle="collapse" href="#tab2" aria-expanded="false" aria-controls="tab2">
<i class="ti ti-code source" data-source="t2"></i>
</a>
</div>
<div class="card-body">
<ul class="nav nav-tabs tab-outline-primary" id="Outline" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="connect-tab" data-bs-toggle="tab"
data-bs-target="#connect-tab-pane" type="button" role="tab" aria-controls="connect-tab-pane"
aria-selected="true">Connect</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="discover-tab" data-bs-toggle="tab"
data-bs-target="#discover-tab-pane" type="button" role="tab" aria-controls="discover-tab-pane"
aria-selected="false">Discover</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="order-tab" data-bs-toggle="tab" data-bs-target="#order-tab-pane"
type="button" role="tab" aria-controls="order-tab-pane" aria-selected="false">Orders</button>
</li>
</ul>
<div class="tab-content" id="OutlineContent">
<div class="tab-pane fade show active" id="connect-tab-pane" role="tabpanel"
aria-labelledby="connect-tab" tabindex="0">
<h6 class="mb-1">This is the content of tab one.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It
accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy.
Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
<div class="tab-pane fade" id="discover-tab-pane" role="tabpanel" aria-labelledby="discover-tab"
tabindex="0">
<h6 class="mb-1">This is the content of tab two.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It
accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy.
Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
<div class="tab-pane fade" id="order-tab-pane" role="tabpanel" aria-labelledby="order-tab"
tabindex="0">
<h6 class="mb-1">This is the content of tab three.</h6>
<p>This field is a rich HTML field with a content editor like others used in Sitefinity. It
accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy.
Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
</div>
</div>
</div>
</div>
</code>
</pre>
</div>
</div>
<!-- tab 4 -->
<div class="col-lg-6">
<div class="card equal-card">
<div class="d-flex justify-content-between code-header card-header">
<h5>Background Tabs</h5>
<a aria-controls="tab4" aria-expanded="false"
data-bs-toggle="collapse" href="#tab4">
<i class="ti ti-code source" data-source="t4"></i>
</a>
</div>
<div class="card-body">
<ul class="nav nav-tabs tab-primary bg-primary p-1" id="bg" role="tablist">
<li class="nav-item" role="presentation">
<button aria-controls="features-tab-pane" aria-selected="true"
class="nav-link active"
data-bs-target="#features-tab-pane" data-bs-toggle="tab"
id="features-tab"
role="tab"
type="button"><i class="ti ti-disc pe-1 ps-1"></i> features
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="history-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#history-tab-pane" data-bs-toggle="tab"
id="history-tab"
role="tab"
type="button"><i class="ti ti-history pe-1 ps-1"></i>History
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="reviews-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#reviews-tab-pane" data-bs-toggle="tab"
id="reviews-tab"
role="tab"
type="button"><i class="ti ti-star pe-1 ps-1"></i>reviews
</button>
</li>
</ul>
<div class="tab-content" id="bgContent">
<div aria-labelledby="features-tab" class="tab-pane fade show active"
id="features-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<div aria-labelledby="history-tab" class="tab-pane fade" id="history-tab-pane"
role="tabpanel"
tabindex="0">
<ol>
<li>Show only the last tab.</li>
<li>If <code>:target</code> matches a tab, show it and hide all
following siblings.
</li>
<li>Matches a tab, show it and hide all following siblings.</li>
</ol>
</div>
<div aria-labelledby="reviews-tab" class="tab-pane fade" id="reviews-tab-pane"
role="tabpanel"
tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
</div>
</div>
<pre class="t4 collapse mt-3" id="tab4">
<code class="language-html">
<div class="card equal-card">
<div class="card-header">
<h5>Background Tabs</h5>
</div>
<div class="card-body">
<ul class="nav nav-tabs tab-primary bg-primary p-1" id="bg" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="features-tab" data-bs-toggle="tab"
data-bs-target="#features-tab-pane" type="button" role="tab" aria-controls="features-tab-pane"
aria-selected="true"> <i class="ti ti-disc pe-1 ps-1"></i> features</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="history-tab" data-bs-toggle="tab"
data-bs-target="#history-tab-pane" type="button" role="tab" aria-controls="history-tab-pane"
aria-selected="false"><i class="ti ti-history pe-1 ps-1"></i>History</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="reviews-tab" data-bs-toggle="tab"
data-bs-target="#reviews-tab-pane" type="button" role="tab" aria-controls="reviews-tab-pane"
aria-selected="false"><i class="ti ti-star pe-1 ps-1"></i>reviews</button>
</li>
<br>
</ul>
<div class="tab-content" id="bgContent">
<div class="tab-pane fade show active" id="features-tab-pane" role="tabpanel"
aria-labelledby="features-tab" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<br>
<div class="tab-pane fade" id="history-tab-pane" role="tabpanel" aria-labelledby="history-tab"
tabindex="0">
<ol>
<li>Show only the last tab.</li>
<li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li>
<li>Matches a tab, show it and hide all following siblings.</li>
</ol>
</div>
<br>
<div class="tab-pane fade" id="reviews-tab-pane" role="tabpanel" aria-labelledby="reviews-tab"
tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
</div>
</div>
</div>
</code>
</pre>
</div>
</div>
<!-- tab 5 -->
<div class="col-lg-6">
<div class="card">
<div class="d-flex justify-content-between code-header card-header">
<h5>Vertical Tabs Left Side</h5>
<a aria-controls="tab5" aria-expanded="false"
data-bs-toggle="collapse" href="#tab5">
<i class="ti ti-code source" data-source="t5"></i>
</a>
</div>
<div class="card-body vertical-tab">
<ul class="nav nav-tabs app-tabs-secondary " id="v-bg" role="tablist">
<li class="nav-item" role="presentation">
<button aria-controls="v-features-tab-pane" aria-selected="true"
class="nav-link active"
data-bs-target="#v-features-tab-pane" data-bs-toggle="tab"
id="v-features-tab"
role="tab" type="button"><i
class="ti ti-disc pe-1 ps-1"></i>
features
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="v-history-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#v-history-tab-pane" data-bs-toggle="tab"
id="v-history-tab"
role="tab" type="button"><i
class="ti ti-history pe-1 ps-1"></i>History
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="v-reviews-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#v-reviews-tab-pane" data-bs-toggle="tab"
id="v-reviews-tab"
role="tab" type="button"><i
class="ti ti-star pe-1 ps-1"></i>reviews
</button>
</li>
</ul>
<div class="tab-content" id="v-bgContent">
<div aria-labelledby="v-features-tab" class="tab-pane fade show active"
id="v-features-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<div aria-labelledby="v-history-tab" class="tab-pane fade"
id="v-history-tab-pane"
role="tabpanel"
tabindex="0">
<ol>
<li>Show only the last tab.</li>
<li>If <code>:target</code> matches a tab, show it and hide all
following siblings.
</li>
<li>Matches a tab, show it and hide all following siblings.</li>
</ol>
</div>
<div aria-labelledby="v-reviews-tab" class="tab-pane fade"
id="v-reviews-tab-pane"
role="tabpanel"
tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
</div>
</div>
<pre class="t5 collapse mt-3" id="tab5">
<code class="language-html">
<div class="card">
<div class="card-header">
<h5>Vertical Tabs left side</h5>
</div>
<div class="card-body vertical-tab">
<ul class="nav nav-tabs app-tabs-secondary " id="v-bg" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="v-features-tab" data-bs-toggle="tab"
data-bs-target="#v-features-tab-pane" type="button" role="tab"
aria-controls="v-features-tab-pane" aria-selected="true"> <i class="ti ti-disc pe-1 ps-1"></i>
features</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="v-history-tab" data-bs-toggle="tab"
data-bs-target="#v-history-tab-pane" type="button" role="tab"
aria-controls="v-history-tab-pane" aria-selected="false"><i
class="ti ti-history pe-1 ps-1"></i>History</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="v-reviews-tab" data-bs-toggle="tab"
data-bs-target="#v-reviews-tab-pane" type="button" role="tab"
aria-controls="v-reviews-tab-pane" aria-selected="false"><i
class="ti ti-star pe-1 ps-1"></i>reviews</button>
</li>
<br>
</ul>
<div class="tab-content" id="v-bgContent">
<div class="tab-pane fade show active" id="v-features-tab-pane" role="tabpanel"
aria-labelledby="v-features-tab" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<br>
<div class="tab-pane fade" id="v-history-tab-pane" role="tabpanel" aria-labelledby="v-history-tab"
tabindex="0">
<ol>
<li>Show only the last tab.</li>
<li>If <code>:target</code> matches a tab, show it and hide all following siblings.</li>
<li>Matches a tab, show it and hide all following siblings.</li>
</ol>
</div>
<br>
<div class="tab-pane fade" id="v-reviews-tab-pane" role="tabpanel" aria-labelledby="v-reviews-tab"
tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
</div>
</div>
</div>
</code>
</pre>
</div>
</div>
<!-- tab 6 -->
<div class="col-lg-6">
<div class="card equal-card">
<div class="d-flex justify-content-between code-header card-header">
<h5>Vertical Tabs Right Side</h5>
<a aria-controls="tab6" aria-expanded="false"
data-bs-toggle="collapse" href="#tab6">
<i class="ti ti-code source" data-source="t6"></i>
</a>
</div>
<div class="card-body vertical-right-tab">
<ul class="nav nav-tabs app-tabs-secondary me-0 ms-3" id="vl-bg" role="tablist">
<li class="nav-item" role="presentation">
<button aria-controls="vl-features-tab-pane" aria-selected="true"
class="nav-link active"
data-bs-target="#vl-features-tab-pane" data-bs-toggle="tab"
id="vl-features-tab"
role="tab" type="button"><i
class="ti ti-disc pe-1 ps-1"></i>
features
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="vl-history-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#vl-history-tab-pane" data-bs-toggle="tab"
id="vl-history-tab"
role="tab" type="button"><i
class="ti ti-history pe-1 ps-1"></i>History
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="vl-reviews-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#vl-reviews-tab-pane" data-bs-toggle="tab"
id="vl-reviews-tab"
role="tab" type="button"><i
class="ti ti-star pe-1 ps-1"></i>reviews
</button>
</li>
</ul>
<div class="tab-content text-sm-end" id="vl-bgContent">
<div aria-labelledby="vl-features-tab" class="tab-pane fade show active"
id="vl-features-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<div aria-labelledby="vl-history-tab" class="tab-pane fade"
id="vl-history-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<div aria-labelledby="vl-reviews-tab" class="tab-pane fade"
id="vl-reviews-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
</div>
</div>
<pre class="t6 collapse mt-3" id="tab6">
<code class="language-html">
<div class="card equal-card">
<div class="card-header">
<h5>Vertical Tabs right side</h5>
</div>
<div class="card-body vertical-right-tab">
<br>
<ul class="nav nav-tabs app-tabs-secondary me-0 ms-3" id="vl-bg" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="vl-features-tab" data-bs-toggle="tab"
data-bs-target="#vl-features-tab-pane" type="button" role="tab"
aria-controls="vl-features-tab-pane" aria-selected="true"> <i
class="ti ti-disc pe-1 ps-1"></i>
features</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="vl-history-tab" data-bs-toggle="tab"
data-bs-target="#vl-history-tab-pane" type="button" role="tab"
aria-controls="vl-history-tab-pane" aria-selected="false"><i
class="ti ti-history pe-1 ps-1"></i>History</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="vl-reviews-tab" data-bs-toggle="tab"
data-bs-target="#vl-reviews-tab-pane" type="button" role="tab"
aria-controls="vl-reviews-tab-pane" aria-selected="false"><i
class="ti ti-star pe-1 ps-1"></i>reviews</button>
</li>
<br>
</ul>
<div class="tab-content text-sm-end" id="vl-bgContent">
<div class="tab-pane fade show active" id="vl-features-tab-pane" role="tabpanel"
aria-labelledby="vl-features-tab" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<br>
<div class="tab-pane fade" id="vl-history-tab-pane" role="tabpanel"
aria-labelledby="vl-history-tab" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<br>
<div class="tab-pane fade" id="vl-reviews-tab-pane" role="tabpanel"
aria-labelledby="vl-reviews-tab" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
</div>
<br>
</div>
</div>
</code>
</pre>
</div>
</div>
<!-- tab 7 -->
<div class="col-lg-6">
<div class="card ">
<div class="card-header">
<h5>Tabs Bottom Side</h5>
</div>
<div class="card-body bottom-tab">
<ul class="nav nav-tabs app-tabs-secondary" id="b-bg" role="tablist">
<li class="nav-item" role="presentation">
<button aria-controls="b-features-tab-pane" aria-selected="true"
class="nav-link active"
data-bs-target="#b-features-tab-pane" data-bs-toggle="tab"
id="b-features-tab"
role="tab" type="button"><i
class="ti ti-disc pe-1 ps-1"></i>
features
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="b-history-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#b-history-tab-pane" data-bs-toggle="tab"
id="b-history-tab"
role="tab" type="button"><i
class="ti ti-history pe-1 ps-1"></i>History
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="b-reviews-tab-pane" aria-selected="false"
class="nav-link"
data-bs-target="#b-reviews-tab-pane" data-bs-toggle="tab"
id="b-reviews-tab"
role="tab" type="button"><i
class="ti ti-star pe-1 ps-1"></i>reviews
</button>
</li>
</ul>
<div class="tab-content" id="b-bgContent">
<div aria-labelledby="b-features-tab" class="tab-pane fade show active"
id="b-features-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<div aria-labelledby="b-history-tab" class="tab-pane fade"
id="b-history-tab-pane"
role="tabpanel"
tabindex="0">
<ol>
<li>Show only the last tab.</li>
<li>If <code>:target</code> matches a tab, show it and hide all
following siblings.
</li>
<li>Matches a tab, show it and hide all following siblings.</li>
</ol>
</div>
<div aria-labelledby="b-reviews-tab" class="tab-pane fade"
id="b-reviews-tab-pane"
role="tabpanel"
tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
</div>
</div>
</div>
</div>
<!-- tab 8 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5>Justify Light Tabs</h5>
</div>
<div class="card-body">
<ul class="nav nav-tabs tab-light-secondary justify-content-around"
id="justify-Light"
role="tablist">
<li class="nav-item flex-fill" role="presentation">
<button aria-controls="justify-home-tab-pane" aria-selected="true"
class="nav-link active w-100"
data-bs-target="#justify-home-tab-pane" data-bs-toggle="tab"
id="justify-home-tab"
role="tab" type="button"><i
class="ti ti-lifebuoy pe-1 ps-1"></i> Home
</button>
</li>
<li class="nav-item flex-fill" role="presentation">
<button aria-controls="justify-profile-tab-pane" aria-selected="false"
class="nav-link w-100"
data-bs-target="#justify-profile-tab-pane" data-bs-toggle="tab"
id="justify-profile-tab"
role="tab" type="button"><i
class="ti ti-keyboard-show pe-1 ps-1"></i> Profile
</button>
</li>
<li class="nav-item flex-fill" role="presentation">
<button aria-controls="justify-contact-tab-pane" aria-selected="false"
class="nav-link w-100"
data-bs-target="#justify-contact-tab-pane" data-bs-toggle="tab"
id="justify-contact-tab"
role="tab" type="button"><i
class="ti ti-file-dislike pe-1 ps-1"></i>Contact
</button>
</li>
<li class="nav-item flex-fill" role="presentation">
<button aria-controls="justify-about-tab-pane" aria-selected="false"
class="nav-link w-100"
data-bs-target="#justify-about-tab-pane" data-bs-toggle="tab"
id="justify-about-tab"
role="tab" type="button"><i
class="ti ti-ball-basketball pe-1 ps-1"></i>About
</button>
</li>
</ul>
<div class="tab-content" id="justify-LightContent">
<div aria-labelledby="justify-home-tab" class="tab-pane fade show active"
id="justify-home-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<div aria-labelledby="justify-profile-tab" class="tab-pane fade"
id="justify-profile-tab-pane"
role="tabpanel" tabindex="0">
<ol>
<li>Show only the last tab.</li>
<li>If <code>:target</code> matches a tab, show it and hide all
following siblings.
</li>
<li>Matches a tab, show it and hide all following siblings.</li>
</ol>
</div>
<div aria-labelledby="justify-contact-tab" class="tab-pane fade"
id="justify-contact-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<div aria-labelledby="justify-about-tab" class="tab-pane fade"
id="justify-about-tab-pane"
role="tabpanel" tabindex="0">
<ol>
<li>Show only the last tab.</li>
<li>If <code>:target</code> matches a tab, show it and hide all
following siblings.
</li>
<li>Matches a tab, show it and hide all following siblings.</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<!-- tab 9 -->
<div class="col-lg-6">
<div class="card equal-card">
<div class="card-header">
<h5>Image As Nav Link</h5>
</div>
<div class="card-body ">
<ul class="nav nav-tabs tab-light-secondary" id="lang-Light" role="tablist">
<li class="nav-item" role="presentation">
<button aria-controls="lang-home-tab-pane" aria-selected="true"
class="nav-link gap-2 active"
data-bs-target="#lang-home-tab-pane" data-bs-toggle="tab"
id="lang-home-tab"
role="tab" type="button">
<i class="flag-icon flag-icon-usa"></i>
USA
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="lang-profile-tab-pane" aria-selected="false"
class="nav-link gap-2"
data-bs-target="#lang-profile-tab-pane" data-bs-toggle="tab"
id="lang-profile-tab"
role="tab" type="button">
<i class="flag-icon flag-icon-gbr"></i>
GBR
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="lang-contact-tab-pane" aria-selected="false"
class="nav-link gap-2"
data-bs-target="#lang-contact-tab-pane" data-bs-toggle="tab"
id="lang-contact-tab"
role="tab" type="button">
<i class="flag-icon flag-icon-deu"></i>
DEU
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="lang-about-tab-pane" aria-selected="false"
class="nav-link gap-2"
data-bs-target="#lang-about-tab-pane" data-bs-toggle="tab"
id="lang-about-tab"
role="tab" type="button">
<i class="flag-icon flag-icon-lbr"></i>
LBR
</button>
</li>
</ul>
<div class="tab-content" id="lang-LightContent">
<div aria-labelledby="lang-home-tab" class="tab-pane fade show active"
id="lang-home-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<div aria-labelledby="lang-profile-tab" class="tab-pane fade"
id="lang-profile-tab-pane"
role="tabpanel" tabindex="0">
<ol>
<li>Show only the last tab.</li>
<li>If <code>:target</code> matches a tab, show it and hide all
following siblings.
</li>
<li>Matches a tab, show it and hide all following siblings.</li>
</ol>
</div>
<div aria-labelledby="lang-contact-tab" class="tab-pane fade"
id="lang-contact-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<div aria-labelledby="lang-about-tab" class="tab-pane fade"
id="lang-about-tab-pane"
role="tabpanel" tabindex="0">
<ol>
<li>Show only the last tab.</li>
<li>If <code>:target</code> matches a tab, show it and hide all
following siblings.
</li>
<li>Matches a tab, show it and hide all following siblings.</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<!-- tab 10 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5>Some Implements</h5>
</div>
<div class="card-body iplements-tabs">
<ul class="nav nav-tabs tab-light-secondary" id="testi-Light" role="tablist">
<li class="nav-item" role="presentation">
<button aria-controls="testi-home-tab-pane" aria-selected="true"
class="nav-link gap-2 d-flex active"
data-bs-target="#testi-home-tab-pane" data-bs-toggle="tab"
id="testi-home-tab"
role="tab" type="button">
<span class="h-40 w-40 d-flex-center b-r-50 overflow-hidden text-bg-primary">
<img alt="" class="img-fluid" src="../assets/images/avtar/5.png">
</span>
<span>
<span class="text-body d-block text-start f-s-16 f-w-600 text-dark mb-0">Guthry </span>
<span class="text-start m-0">Sales Manager</span>
</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="testi-profile-tab-pane" aria-selected="false"
class="nav-link d-flex gap-2"
data-bs-target="#testi-profile-tab-pane" data-bs-toggle="tab"
id="testi-profile-tab"
role="tab" type="button">
<span class="h-40 w-40 d-flex-center b-r-50 overflow-hidden text-bg-primary">
<img alt="" class="img-fluid" src="../assets/images/avtar/1.png">
</span>
<span>
<span class="text-body d-block text-start mb-0 f-s-16 f-w-600 text-dark">Olive Yew </span>
<span class="text-start m-0">account Manager</span>
</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button aria-controls="testi-contact-tab-pane" aria-selected="false"
class="nav-link d-flex gap-2"
data-bs-target="#testi-contact-tab-pane" data-bs-toggle="tab"
id="testi-contact-tab"
role="tab" type="button">
<span class="h-40 w-40 d-flex-center b-r-50 overflow-hidden text-bg-primary">
<img alt="" class="img-fluid" src="../assets/images/avtar/14.png">
</span>
<span>
<span class="text-body d-block text-start f-s-16 f-w-600 text-dark mb-0">Lily </span>
<span class="text-start m-0">Manager</span>
</span>
</button>
</li>
</ul>
<div class="tab-content" id="testi-LightContent">
<div aria-labelledby="testi-home-tab" class="tab-pane fade show active"
id="testi-home-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
<div aria-labelledby="testi-profile-tab" class="tab-pane fade"
id="testi-profile-tab-pane"
role="tabpanel" tabindex="0">
<ol>
<li>Show only the last tab.</li>
<li>If <code>:target</code> matches a tab, show it and hide all
following siblings.
</li>
<li>Matches a tab, show it and hide all following siblings.</li>
</ol>
</div>
<div aria-labelledby="testi-contact-tab" class="tab-pane fade"
id="testi-contact-tab-pane"
role="tabpanel" tabindex="0">
<p>The idea is to use <code>:target</code> pseudoclass to show tabs, use
anchors with fragment
identifiers to switch between them. The idea is to use pseudoclass to
show tabs, use anchors
with fragment identifiers to switch between them.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tabs end -->
</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>
<!-- Bootstrap js-->
<script src="../assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
<!-- phosphor js -->
<script src="../assets/vendor/phosphor/phosphor.js"></script>
<!--Prism JS-->
<script src="../assets/vendor/prism/prism.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/tabs.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 15 Apr 2025 15:46:58 GMT -->
</html>