| Server IP : 172.67.201.108 / Your IP : 216.73.216.68 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/domains/nycyouth/Package-HTML/Canvas 7 Files/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=PT+Serif:ital@0;1&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<!-- Plugins/Components CSS -->
<link rel="stylesheet" href="css/components/bs-datatable.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Data Tables | Canvas</title>
</head>
<body class="stretched" data-menu-breakpoint="1200">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Header
============================================= -->
<header id="header" class="dark transparent-header" data-sticky-class="not-dark" data-responsive-class="not-dark">
<div id="header-wrap">
<div class="container">
<div class="header-row">
<!-- Logo
============================================= -->
<div id="logo" class="me-5">
<a href="index.html">
<img class="logo-default" srcset="images/logo.png, images/[email protected] 2x" src="images/[email protected]" alt="Canvas Logo">
<img class="logo-dark" srcset="images/logo-dark.png, images/[email protected] 2x" src="images/[email protected]" alt="Canvas Logo">
</a>
</div><!-- #logo end -->
<div class="header-misc ms-auto ms-xl-0">
<a href="https://1.envato.market/c/1309643/480739/4415?u=https%3A%2F%2Fthemeforest.net%2Fcart%2Fconfigure_before_adding%2F9228123" target="_blank" class="button button-border border-contrast-900 text-contrast-900 h-text-contrast-100 button-shadow button-shadow-contrast rounded-1 px-3 px-lg-4 me-3 me-xl-0"><i class="fa-solid fa-shopping-cart d-block d-md-none me-1"></i><span class="d-none d-md-block">Buy Canvas</span></a>
</div>
<div class="primary-menu-trigger">
<button class="cnvs-hamburger" type="button" title="Open Mobile Menu">
<span class="cnvs-hamburger-box"><span class="cnvs-hamburger-inner"></span></span>
</button>
</div>
<!-- Primary Navigation
============================================= -->
<nav class="primary-menu flex-xl-fill me-auto">
<ul class="menu-container">
<li class="menu-item">
<a class="menu-link" href="intro.html#niche-demos"><div>Demos</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="niche-demos.html"><div><i class="bi-stars align-baseline top-0"></i>Niche Demos (65+)</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blocks.html"><div><i class="bi-layout-wtf align-baseline top-0"></i>Blocks (220+)</div></a>
</li>
<li class="menu-item-divider"></li>
<li class="menu-item">
<a class="menu-link" href="homepage-demos.html"><div><i class="bi-columns align-baseline top-0"></i>Home-Page Demos (30+)</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="onepage-demos.html"><div><i class="bi-magic align-baseline top-0"></i>One-Page Demos (65+)</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="#"><div>Features</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="#"><div><i class="bi-hypnotize"></i>Sliders</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="slider-revolution.html"><div>Revolution Slider</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="rs-demos.html"><div>Premium Templates</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-revolution.html"><div>Full Screen</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-revolution-fullwidth.html"><div>Full Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-revolution-kenburns.html"><div>Kenburns Effect</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-revolution-html5-videos.html"><div>HTML5 Video</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-canvas.html"><div>Canvas Slider</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="slider-canvas.html"><div>Full Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-canvas-fade.html"><div>Fade Transition</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-canvas-autoplay.html"><div>Autoplay Feature</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-canvas-video-event.html"><div>Custom Video Event</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-canvas-pagination.html"><div>Pagination Navigation</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-canvas-3.html"><div>3 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-canvas-4.html"><div>4 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-canvas-5.html"><div>5 Columns</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-flex.html"><div>Flex Slider</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="slider-flex.html"><div>Default Layout</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-flex-thumbs.html"><div>with Thumbs</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-owl.html"><div>Owl Slider</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="slider-owl-full.html"><div>Full Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-owl.html"><div>Boxed Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="slider-owl-videos.html"><div>Video Slider</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="static-parallax.html"><div>Static Media</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="static-parallax.html"><div>Static - Parallax</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="static-image.html"><div>Static - Image</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="static-thumbs-grid.html"><div>Static - Thumb Gallery</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="static-html5-video.html"><div>Static - HTML5 Video</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="static-embed-video.html"><div>Static - Embedded Video</div></a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="#"><div><i class="bi-menu-button-wide-fill"></i>Headers</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="#"><div>Custom Layouts</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="header-saas.html"><div>SAAS</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-ecommerce-minimal.html"><div>eCommerce Minimal</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-directory.html"><div>Directory</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-floating-semi-transparent.html"><div>Floating Semi-Transparent</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-floating-with-topbar.html"><div>Floating with Top-Bar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-floating-small.html"><div>Floating Small</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-offcanvas-overlay.html"><div>Off-Canvas Overlay</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-full-menu.html"><div>Full Menu</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-full-border.html"><div>Full Border</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-sticky-on-scrollup.html"><div>Sticky on ScrollUp</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="index-shop.html"><div>Language + Currency</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="header-light.html"><div>Light Version</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-dark.html"><div>Dark Version</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-transparent.html"><div>Transparent</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-semi-transparent.html"><div>Semi Transparent</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="header-semi-transparent.html"><div>Light Version</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-semi-transparent-dark.html"><div>Dark Version</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="header-side-left.html"><div>Left Side Header</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="header-side-left.html"><div>Fixed Position</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-side-left-open.html"><div>OnClick Open</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-side-left-open-push.html"><div>Push Content</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="header-side-right.html"><div>Right Side Header</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="header-side-right.html"><div>Fixed Position</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-side-right-open.html"><div>OnClick Open</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="header-side-right-open-push.html"><div>Push Content</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="header-floating.html"><div>Floating Version</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="static-sticky.html"><div>Static Sticky</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="responsive-sticky.html"><div>Responsive Sticky</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="logo-changer.html"><div>Alternate Logos</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="alternate-mobile-menu.html"><div>Alternate Mobile Menu</div></a>
</li>
</ul>
</li>
<li class="menu-item mega-menu mega-menu-small">
<a class="menu-link" href="#"><div><i class="bi-border-style"></i>Menu Styles</div></a>
<div class="mega-menu-content">
<div class="row mx-0">
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item">
<a class="menu-link" href="header-light.html"><div>Default Layout</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-2.html"><div>Alternate Layout</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-3.html"><div>Pill Style</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-4.html"><div>Border Style</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-5.html"><div>Large Icon Menu</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="split-menu.html"><div>Split Layout 1</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="split-menu-2.html"><div>Split Layout 2</div></a>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item">
<a class="menu-link" href="#"><div>Dropdown Styles</div></a>
<ul class="sub-menu-container mega-menu-dropdown p-lg-0">
<li class="menu-item">
<a class="menu-link" href="menu-dropdowns-blur.html"><div>Blur</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-dropdowns-colors.html"><div>Colors</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-dropdowns-dark.html"><div>Dark</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-dropdowns-flat.html"><div>Flat</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-dropdowns-fullwidth.html"><div>Full-Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-dropdowns-other-arrows.html"><div>Custom Arrows</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-dropdowns-rounded.html"><div>Rounded</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-dropdowns-shadow.html"><div>Shadow</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-6.html"><div>Scaling Border</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-subtitle.html"><div>Sub-Title Menu</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-7.html"><div>Extended Menu 1</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-8.html"><div>Extended Menu 2</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-9.html"><div>Extended Menu 3</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="menu-10.html"><div>Overlay Menu</div></a>
</li>
</ul>
</div>
</div>
</li>
<li class="menu-item">
<a class="menu-link" href="mega-menu.html"><div><i class="bi-layout-split"></i>Mega Menu</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="mega-menu.html"><div>Widgetized</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="mega-menu-full.html"><div>Full-Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="mega-menu-tab.html"><div>Tabbed</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="mega-menu-side-tab.html"><div>Side-Tabs (onClick)</div></a>
</li>
</ul>
</li>
<li class="menu-item-divider"></li>
<li class="menu-item">
<a class="menu-link" href="forms.html"><div><i class="bi-postcard"></i>Forms</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact.html"><div><i class="bi-envelope-at"></i>Contact Pages</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="contact.html">Main Layout</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact-2.html">Grid Layout</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact-3.html">Right Sidebar</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact-4.html">Both Sidebars</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact-5.html">Modal Form</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact-6.html">Form Overlay</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact-7.html">Form Overlay Mini</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact-recaptcha-v3.html">reCaptcha</a>
</li>
<li class="menu-item">
<a class="menu-link" href="contact-hcaptcha.html">hCaptcha</a>
</li>
</ul>
</li>
<li class="menu-item mega-menu mega-menu-small">
<a class="menu-link" href="widgets.html"><div><i class="bi-boxes"></i>Widgets</div></a>
<div class="mega-menu-content">
<div class="row mx-0">
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Links</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Flickr Photostream</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Dribbble Shots</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Subscribers</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Posts List</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Twitter Feed</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Tabbed Widgets</div></a>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Carousel</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Social Icons</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Testimonials</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Quick Contact</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Tags Cloud</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Video Embeds</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="widgets.html"><div>Raw HTML</div></a>
</li>
</ul>
</div>
</div>
</li>
<li class="menu-item">
<a class="menu-link" href="#"><div><i class="bi-textarea-t"></i>Page Titles</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="#"><div>Styles</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="page-title-block.html"><div>Block</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-bold.html"><div>Bold</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-fancy.html"><div>Fancy</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-fancy-alt.html"><div>Fancy Alternate</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-boxes.html"><div>Boxes</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-blog.html"><div>Layout for Blogs</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-shop.html"><div>Layout for Shops</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-mini.html"><div>Mini Version</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="#"><div>Backgrounds</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="page-title-dark.html"><div>Dark Style</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-pattern.html"><div>BG Pattern</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-parallax.html"><div>Parallax - Default</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-parallax-header.html"><div>Parallax - Transparent</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-video.html"><div>HTML5 Video</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-gmap.html"><div>Google Maps</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-gmap-mini.html"><div>Google Maps Mini</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-nobg.html"><div>No Background</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="#"><div>Layouts</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="page-title.html"><div>Left Align</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-right.html"><div>Right Align</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-center.html"><div>Center Align</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="page-title-sticky.html"><div>Sticky</div></a>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="side-panel.html"><div><i class="bi-layout-sidebar-inset-reverse"></i>Side Panel</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="side-panel-left-overlay.html"><div>Left Overlay</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="side-panel-left-push.html"><div>Left Push</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="side-panel-right-overlay.html"><div>Right Overlay</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="side-panel.html"><div>Right Push</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="side-panel-light.html"><div>Light Background</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="modal-onload.html"><div><i class="bi-front"></i>Modal OnLoad</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="modal-onload.html"><div>Default Layout</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="modal-onload-iframe.html"><div>Video iFrame</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="modal-onload-subscribe.html"><div>Subscription Form</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="modal-onload-common-height.html"><div>Common Height</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="modal-onload-cookie.html"><div>Cookies Enabled</div></a>
</li>
</ul>
</li>
<li class="menu-item mega-menu mega-menu-small">
<a class="menu-link" href="#footer" data-scrollto="#footer"><div><i class="bi-layer-forward"></i>Footers</div></a>
<div class="mega-menu-content">
<div class="row mx-0">
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item">
<a class="menu-link" href="sticky-footer.html"><div>Sticky</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="#footer" data-scrollto="#footer"><div>Layout 1</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="footer-2.html#footer"><div>Layout 2</div></a>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item">
<a class="menu-link" href="footer-3.html#footer"><div>Layout 3</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="footer-4.html#footer"><div>Layout 4</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="footer-5.html#footer"><div>Layout 5</div></a>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item">
<a class="menu-link" href="footer-6.html#footer"><div>Layout 6</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="footer-7.html#footer"><div>Layout 7</div></a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="menu-item mega-menu">
<a class="menu-link" href="#"><div>Templates</div></a>
<div class="mega-menu-content mega-menu-style-2 border-0 rounded">
<div class="container">
<div class="row">
<ul class="sub-menu-container mega-menu-column col-lg-3 dark bg-cover bg-center bg-overlay-mask rounded-start overflow-hidden" style="background-image: url(images/intro/templates-mega-menu.jpg); --cnvs-bg-overlay-mask-opacity: 0.65;">
<li class="menu-item">
<div class="widget px-3">
<h3 class="mb-2">Templates</h3>
<p class="mb-0">More than 1300+ Sample Design Templates included for getting quickly started with Canvas.</p>
</div>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col border-start-0">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Introductory</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="about.html"><div>About Us</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="about.html"><div>Main Layout</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="about-2.html"><div>Alternate Layout</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="about-me.html"><div>About Me</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="team.html"><div>Team Members</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="gdpr.html"><div>GDPR Compliance</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="gdpr.html"><div>Default</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="gdpr-small.html"><div>Small</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="jobs.html"><div>Careers</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="profile.html"><div>User Profile</div></a>
</li>
</ul>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Utility & Specials</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="services.html"><div><i class="bi-asterisk"></i>Services Pages</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="services.html"><div>Layout 1</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="services-2.html"><div>Layout 2</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="services-3.html"><div>Layout 3</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="#"><div><i class="bi-calendar"></i>Events</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="events-list.html"><div>Events List</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="events-list.html"><div>Right Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="events-list-left-sidebar.html"><div>Left Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="events-list-both-sidebar.html"><div>Both Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="events-list-fullwidth.html"><div>Full Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="events-list-parallax.html"><div>Parallax List</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="event-single.html"><div>Single Event</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="event-single-right-sidebar.html"><div>Right Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="event-single-left-sidebar.html"><div>Left Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="event-single-both-sidebar.html"><div>Both Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="event-single.html"><div>Full Width</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="event-single-full-width-image.html"><div>Single Event - Full</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="event-single-full-width-image.html"><div>Parallax Image</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="event-single-full-width-map.html"><div>Google Map</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="event-single-full-width-slider.html"><div>Slider Gallery</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="event-single-full-width-video.html"><div>HTML5 Video</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="events-calendar.html"><div>Full Width Calendar</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="faqs.html"><div><i class="bi-question-circle"></i>FAQs Pages</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="faqs.html"><div>Layout 1</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="faqs-2.html"><div>Layout 2</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="faqs-3.html"><div>Layout 3</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="faqs-4.html"><div>Layout 4</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="index-rtl.html"><div><i class="bi-translate"></i>RTL Template</div></a>
</li>
</ul>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Layouts & PageNavs</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="full-width.html"><div>Full Width</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="full-width.html"><div>Default Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="full-width-wide.html"><div>Wide Width</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="#"><div>Sidebars</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="right-sidebar.html"><div>Right Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="left-sidebar.html"><div>Left Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="both-sidebar.html"><div>Both Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="both-right-sidebar.html"><div>Both Right Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="both-left-sidebar.html"><div>Both Left Sidebar</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="page-submenu.html"><div>Page Submenu</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="side-navigation.html"><div>Side Navigation</div></a>
</li>
</ul>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Miscellaneous</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="login-register.html"><div>Login/Register</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="login-register.html"><div>Default Layout</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="login-register-2.html"><div>Tabbed Login</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="login-register-3.html"><div>Login Accordion</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="login-1.html"><div>Dark BG Login</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="login-2.html"><div>Image BG Login</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="coming-soon.html"><div>Coming Soon</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="coming-soon.html"><div>Default Layout</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="coming-soon-2.html"><div>Parallax Image</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="coming-soon-3.html"><div>HTML5 Video</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="404.html"><div>404 Pages</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="404.html"><div>Default Layout</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="404-2.html"><div>Parallax Image</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="404-3.html"><div>HTML5 Video</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="#"><div>Extras</div></a>
<ul class="sub-menu-container mega-menu-dropdown">
<li class="menu-item">
<a class="menu-link" href="blank-page.html"><div>Blank Page</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="maintenance.html"><div>Maintenance Page</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="sitemap.html"><div>Sitemap</div></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menu-item mega-menu">
<a class="menu-link" href="#"><div>Elements</div></a>
<div class="mega-menu-content">
<div class="container">
<div class="row align">
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item">
<a class="menu-link" href="animations.html"><div><i class="bi-magic"></i>Animations</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="buttons.html"><div><i class="bi-square"></i>Buttons</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="carousel.html"><div><i class="bi-arrow-left-right"></i>Carousel</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="charts.html"><div><i class="bi-graph-up-arrow"></i>Charts</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="clients.html"><div><i class="bi-grip-horizontal"></i>Clients</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="columns-grids.html"><div><i class="bi-grid-1x2"></i>Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="counters.html"><div><i class="bi-clock-history"></i>Counters</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="read-more.html"><div><i class="bi-three-dots"></i>Read More<span class="visually-hidden"> Shortcode</span></div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="component-datatable.html"><div><i class="bi-table"></i>Data Tables</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="component-datepicker.html"><div><i class="bi-calendar-plus"></i>Date & Time Pickers</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="ticker.html"><div><i class="bi-wind"></i>Ticker</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="cart-quantity.html"><div><i class="bi-plus-slash-minus"></i>Cart Quantity</div></a>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item">
<a class="menu-link" href="dividers.html"><div><i class="bi-hr"></i>Dividers</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="featured-boxes.html"><div><i class="bi-lightbulb"></i>Icon Boxes</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="gallery.html"><div><i class="bi-images"></i>Galleries</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="headings-dropcaps.html"><div><i class="bi-type-h1"></i>Heading Styles</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="icon-lists.html"><div><i class="bi-list-stars"></i>Icon Lists</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="gradients.html"><div><i class="bi-droplet-half"></i>Gradients</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="lightbox.html"><div><i class="bi-pip"></i>Lightbox</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="item-overlays.html"><div><i class="bi-border-outer"></i>Item Overlays</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="form-elements.html"><div><i class="bi-input-cursor-text"></i>Form Elements</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="component-uploads.html"><div><i class="bi-upload"></i>File Uploads</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="circle-stack.html"><div><i class="bi-slash-circle"></i>Circle Stack</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="video-facade.html"><div><i class="bi-play-circle"></i>Video Facade</div></a>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item">
<a class="menu-link" href="lists-cards.html"><div><i class="bi-card-list"></i>Lists & Cards</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="maps.html"><div><i class="bi-geo-fill"></i>Maps</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="media-embeds.html"><div><i class="bi-collection-play"></i>Media Embeds</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="modal-popovers.html"><div><i class="bi-subtract"></i>Modal Boxes</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="notifications.html"><div><i class="bi-bell"></i>Notifications</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="pagination-progress.html"><div><i class="bi-123"></i>Pagination</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="pie-skills.html"><div><i class="bi-pie-chart"></i>Pies & Skills</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shape-dividers.html"><div><i class="bi-circle-square"></i>Shape Dividers</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="component-range-slider.html"><div><i class="bi-sliders"></i>Range Slider</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="component-ratings.html"><div><i class="bi-star-half"></i>Star Ratings</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="cascading-images.html"><div><i class="bi-images"></i>Cascading Images</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="code-highlighter.html"><div><i class="bi-code-square"></i>Code Highlighter</div></a>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item">
<a class="menu-link" href="pricing.html"><div><i class="bi-currency-dollar"></i>Pricing Boxes</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="process-steps.html"><div><i class="bi-bar-chart-steps"></i>Process Steps</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="promo-boxes.html"><div><i class="bi-card-heading"></i>Promo Boxes</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="quotes-blockquotes.html"><div><i class="bi-blockquote-left"></i>Blockquotes</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="image-sliders.html"><div><i class="bi-tropical-storm"></i>Image Sliders</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="sections.html"><div><i class="bi-window-desktop"></i>Sections</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="social-icons.html"><div><i class="bi-instagram"></i>Social Icons</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="hover-animations.html"><div><i class="bi-hand-index-thumb"></i>Hover Animations</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="component-select-picker.html"><div><i class="bi-menu-button"></i>Select Picker</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="component-select-box.html"><div><i class="bi-layout-three-columns"></i>Select Boxes</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="ajax-button.html"><div><i class="bi-filetype-js"></i>AJAX Button</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="conditional.html"><div><i class="bi-slash-square"></i>Conditional Forms</div></a>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item">
<a class="menu-link" href="style-boxes.html"><div><i class="bi-exclamation-circle"></i>Alert Boxes</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="styled-icons.html"><div><i class="bi-flower2"></i>Styled Icons</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="tables.html"><div><i class="bi-table"></i>Tables</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="tabs.html"><div><i class="bi-segmented-nav"></i>Tabs</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="testimonials-twitter.html"><div><i class="bi-chat-left-quote"></i>Testimonials</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="thumbnails-slider.html"><div><i class="bi-image"></i>Thumbnails</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="toggles-accordions.html"><div><i class="bi-caret-down-square"></i>Toggles</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="lazy-loading.html"><div><i class="fa-solid fa-spinner"></i>Lazy Loading</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="component-radios-switches.html"><div><i class="bi-toggle-off"></i>Radios & Switches</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="flip-cards.html"><div><i class="bi-arrow-repeat"></i>Flip Cards</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="color-mode-switcher.html"><div><i class="bi-moon-stars"></i>Mode Switcher</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="custom-cursor.html"><div><i class="bi-cursor"></i>Custom Cursor</div></a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menu-item mega-menu">
<a class="menu-link" href="#"><div>Portfolio</div></a>
<div class="mega-menu-content mega-menu-style-2">
<div class="container">
<div class="row">
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Grids</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="portfolio-1.html"><div>1 Column</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-2.html"><div>2 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-3.html"><div>3 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio.html"><div>4 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-5.html"><div>5 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-6.html"><div>6 Columns</div></a>
</li>
</ul>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Masonry</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="portfolio-mixed-masonry.html"><div>Mixed Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-2-masonry.html"><div>2 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-3-masonry.html"><div>3 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-masonry.html"><div>4 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-5-masonry.html"><div>5 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-6-masonry.html"><div>6 Columns</div></a>
</li>
</ul>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Loading Styles</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="portfolio.html"><div>jQuery Filter</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-jpagination.html"><div>jQuery Pagination</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-infinity-scroll.html"><div>Infinity Scroll</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-ajax.html"><div>AJAX In Page</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-ajax-in-modal.html"><div>AJAX In Modal</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-filter-styles.html"><div>Filter Styles</div></a>
</li>
</ul>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Single Project</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="portfolio-single-extended.html"><div>Extended Item</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-single-fullwidth.html"><div>Parallax Image</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-single-gallery-full.html"><div>Slider Gallery</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-single-video-fullwidth-left-sidebar.html"><div>HTML5 Video</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-single-thumbs-right-sidebar.html"><div>Masonry Thumbs</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-single-video-both-sidebar.html"><div>Embed Video</div></a>
</li>
</ul>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Layouts</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="portfolio-nomargin.html"><div>Default</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-1-alt-right-sidebar.html"><div>Right Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-3-left-sidebar.html"><div>Left Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-2-both-sidebar.html"><div>Both Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-fullwidth-notitle.html"><div>100% Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="portfolio-parallax.html"><div>Parallax</div></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menu-item mega-menu">
<a class="menu-link" href="#"><div>Blog</div></a>
<div class="mega-menu-content mega-menu-style-2">
<div class="container">
<div class="row">
<ul class="sub-menu-container mega-menu-column col-lg-3">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Default</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="blog.html"><div>Right Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-left-sidebar.html"><div>Left Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-both-sidebar.html"><div>Both Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-full-width.html"><div>Full Width</div></a>
</li>
</ul>
</li>
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Timeline</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="blog-timeline-right-sidebar.html"><div>Right Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-timeline-left-sidebar.html"><div>Left Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-timeline.html"><div>Full Width</div></a>
</li>
</ul>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col-lg-3">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Masonry</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="blog-masonry.html"><div>4 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-masonry-3.html"><div>3 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-masonry-2.html"><div>2 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-masonry-full.html"><div>100% Width</div></a>
</li>
</ul>
</li>
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Grid</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="blog-grid.html"><div>4 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-grid-3.html"><div>3 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-grid-2.html"><div>2 Columns</div></a>
</li>
</ul>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col-lg-3">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Small Thumbs</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="blog-small-left-sidebar.html"><div>Left Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-small.html"><div>Right Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-small-both-sidebar.html"><div>Both Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-small-full-width.html"><div>Full Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-small-alt.html"><div>Alternate Layout</div></a>
</li>
</ul>
</li>
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Item Splitting</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="blog-grid.html"><div>Pagination</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-masonry.html"><div>Infinite Scroll</div></a>
</li>
</ul>
</li>
</ul>
<ul class="sub-menu-container mega-menu-column col-lg-3">
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Single</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="blog-single.html"><div>Default Layout</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-single-left-sidebar.html"><div>Left Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-single-full.html"><div>Full Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-single-small.html"><div>Small Image</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-single-split-right-sidebar.html"><div>Split Layout</div></a>
</li>
</ul>
</li>
<li class="menu-item mega-menu-title">
<a class="menu-link" href="#"><div>Comments Module</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="blog-single-left-sidebar.html#comments"><div>Facebook Comments</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="blog-single-small.html#comments"><div>Disqus Comments</div></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menu-item">
<a class="menu-link" href="shop.html"><div>Shop</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="shop.html"><div>4 Columns</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-3.html"><div>3 Columns</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="shop-3.html"><div>Full Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-3-right-sidebar.html"><div>Right Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-3-left-sidebar.html"><div>Left Sidebar</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-2.html"><div>2 Columns</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="shop-2-right-sidebar.html"><div>Right Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-2-left-sidebar.html"><div>Left Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-2-both-sidebar.html"><div>Both Sidebar</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-1.html"><div>1 Columns</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="shop-1.html"><div>Full Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-1-right-sidebar.html"><div>Right Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-1-left-sidebar.html"><div>Left Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-1-both-sidebar.html"><div>Both Sidebar</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="#"><div>Product Layouts</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="shop.html"><div>Default</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-layout-2.html"><div>Layout 2</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-layout-3.html"><div>Layout 3</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-layout-4.html"><div>Layout 4</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-layout-5.html"><div>Layout 5</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-category-parallax.html"><div>Categories - Parallax</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-combination-filter.html"><div>Combination Filter</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-single.html"><div>Single Product</div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="shop-single.html"><div>Full Width</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-single-right-sidebar.html"><div>Right Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-single-left-sidebar.html"><div>Left Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-single-both-sidebar.html"><div>Both Sidebar</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-single-color.html"><div>Color Options</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-single-sticky.html"><div>Sticky Aside</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="shop-single-list.html"><div>Feature List</div></a>
</li>
</ul>
</li>
<li class="menu-item">
<a class="menu-link" href="cart.html"><div>Cart</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="checkout.html"><div>Checkout</div></a>
</li>
</ul>
</li>
<li class="menu-item ms-auto">
<a class="menu-link" href="#"><div>Help <i class="bi-caret-down-fill text-smaller d-none d-xl-inline-block me-0"></i></div></a>
<ul class="sub-menu-container">
<li class="menu-item">
<a class="menu-link" href="http://support.semicolonweb.com/forums/forum/canvas-html/"><div><i class="bi-question-circle"></i>Support</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="https://docs.semicolonweb.com"><div><i class="bi-file-earmark-text"></i>Documentation</div></a>
</li>
<li class="menu-item">
<a class="menu-link" href="https://docs.semicolonweb.com/docs-group/changelog/"><div><i class="bi-stars"></i>What's New</div></a>
</li>
</ul>
</li>
</ul>
</nav><!-- #primary-menu end -->
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->
<!-- Page Title
============================================= -->
<section class="page-title dark page-title-parallax parallax include-header py-6">
<img src="images/intro/bg-2.jpeg" class="parallax-bg">
<div class="container">
<div class="page-title-row pb-5 align-items-lg-end">
<div class="page-title-content">
<h1>DataTables</h1>
<div class="page-title-buttons mt-5">
<button class="button button-border button-light rounded px-5 mb-0" data-scrollto="#content" data-offset="60">Explore <i class="uil uil-arrow-circle-down ms-1"></i></button>
<a href="#" class="button button-border button-light rounded px-5 mb-0" data-scrollto="#explore-more-elements">More Elements <i class="uil uil-cell ms-1"></i></a>
<a href="https://1.envato.market/c/1309643/480739/4415?u=https%3A%2F%2Fthemeforest.net%2Fcart%2Fconfigure_before_adding%2F9228123" target="_blank" class="button button-border button-light rounded px-5 mb-0"><i class="uil uil-shopping-cart me-1"></i> Buy Canvas</a>
</div>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Components</a></li>
<li class="breadcrumb-item active" aria-current="page">DataTables</li>
</ol>
</nav>
</div>
</div>
</section><!-- .page-title end -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container">
<div class="table-responsive">
<table id="datatable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$850,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>$163,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>$95,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$145,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$235,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$324,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$85,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$164,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$109,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$452,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$136,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$645,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>$234,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>$138,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$125,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container mt-6">
<div class="fancy-title title-border title-center mb-5">
<h4 id="explore-more-elements" class="h3">Explore more Elements</h4>
</div>
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 align-items-stretch g-3 text-center">
<div class="col">
<a href="shop.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-bag-plus fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Shop</h5>
</a>
</div>
<div class="col">
<a href="portfolio.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-file-earmark-image fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Portfolio</h5>
</a>
</div>
<div class="col">
<a href="blog.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-file-earmark-richtext fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Blog</h5>
</a>
</div>
<div class="col">
<a href="events-grid.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-calendar-week fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Events</h5>
</a>
</div>
<div class="col">
<a href="rs-demos.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-hypnotize fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Sliders</h5>
</a>
</div>
<div class="col">
<a href="forms.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-ui-checks fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Form Templates</h5>
</a>
</div>
<div class="col">
<a href="contact.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-envelope-at fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Contact Forms</h5>
</a>
</div>
<div class="col">
<a href="modal-onload.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-bounding-box-circles fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Modal onLoad</h5>
</a>
</div>
<div class="col">
<a href="side-panel.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-layout-sidebar-inset-reverse fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Side Panel</h5>
</a>
</div>
<div class="col">
<a href="animations.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-magic fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Animations</h5>
</a>
</div>
<div class="col">
<a href="buttons.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-square fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Buttons</h5>
</a>
</div>
<div class="col">
<a href="carousel.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-arrow-left-right fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Carousel</h5>
</a>
</div>
<div class="col">
<a href="charts.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-graph-up-arrow fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Charts</h5>
</a>
</div>
<div class="col">
<a href="clients.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-grip-horizontal fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Clients</h5>
</a>
</div>
<div class="col">
<a href="columns-grids.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-grid-1x2 fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Columns</h5>
</a>
</div>
<div class="col">
<a href="counters.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-clock-history fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Counters</h5>
</a>
</div>
<div class="col">
<a href="read-more.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-three-dots fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Read More<span class="visually-hidden"> Element</span></h5>
</a>
</div>
<div class="col">
<a href="component-datatable.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-table fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Data Tables</h5>
</a>
</div>
<div class="col">
<a href="component-datepicker.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-calendar-plus fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Date Picker</h5>
</a>
</div>
<div class="col">
<a href="dividers.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-hr fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Dividers</h5>
</a>
</div>
<div class="col">
<a href="featured-boxes.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-lightbulb fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Icon Boxes</h5>
</a>
</div>
<div class="col">
<a href="gallery.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-images fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Gallery</h5>
</a>
</div>
<div class="col">
<a href="headings-dropcaps.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-type-h1 fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Headings</h5>
</a>
</div>
<div class="col">
<a href="icon-lists.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-list-stars fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Icon Lists</h5>
</a>
</div>
<div class="col">
<a href="gradients.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-droplet-half fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Gradients</h5>
</a>
</div>
<div class="col">
<a href="lightbox.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-pip fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Lightbox</h5>
</a>
</div>
<div class="col">
<a href="item-overlays.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-border-outer fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Overlays</h5>
</a>
</div>
<div class="col">
<a href="form-fields.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-input-cursor-text fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Form Fields</h5>
</a>
</div>
<div class="col">
<a href="component-uploads.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-upload fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">File Uploads</h5>
</a>
</div>
<div class="col">
<a href="lists-cards.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-card-list fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Lists & Cards</h5>
</a>
</div>
<div class="col">
<a href="maps.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-geo-fill fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Maps</h5>
</a>
</div>
<div class="col">
<a href="media-embeds.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-collection-play fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Media Embeds</h5>
</a>
</div>
<div class="col">
<a href="modal-popovers.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-subtract fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Modal Boxes</h5>
</a>
</div>
<div class="col">
<a href="notifications.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-bell fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Notifications</h5>
</a>
</div>
<div class="col">
<a href="navigation.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-list fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Navigations</h5>
</a>
</div>
<div class="col">
<a href="pagination-progress.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-123 fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Pagination</h5>
</a>
</div>
<div class="col">
<a href="progress-skills.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-percent fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Progress Bars</h5>
</a>
</div>
<div class="col">
<a href="shape-dividers.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-circle-square fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Shape Dividers</h5>
</a>
</div>
<div class="col">
<a href="component-range-slider.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-sliders fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Range Slider</h5>
</a>
</div>
<div class="col">
<a href="component-ratings.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-star-half fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Star Ratings</h5>
</a>
</div>
<div class="col">
<a href="pricing.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-currency-dollar fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Pricing</h5>
</a>
</div>
<div class="col">
<a href="process-steps.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-bar-chart-steps fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Process Steps</h5>
</a>
</div>
<div class="col">
<a href="promo-boxes.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-card-heading fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Promo Boxes</h5>
</a>
</div>
<div class="col">
<a href="quotes-blockquotes.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-blockquote-left fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Blockquotes</h5>
</a>
</div>
<div class="col">
<a href="responsive.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-display fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Responsive</h5>
</a>
</div>
<div class="col">
<a href="sections.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-window-desktop fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Sections</h5>
</a>
</div>
<div class="col">
<a href="social-icons.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-instagram fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Social Icons</h5>
</a>
</div>
<div class="col">
<a href="hover-animations.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-hand-index-thumb fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Hover Animations</h5>
</a>
</div>
<div class="col">
<a href="component-select-picker.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-menu-button fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Select Picker</h5>
</a>
</div>
<div class="col">
<a href="component-select-box.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-layout-three-columns fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Select Boxes</h5>
</a>
</div>
<div class="col">
<a href="style-boxes.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-exclamation-circle fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Alerts</h5>
</a>
</div>
<div class="col">
<a href="styled-icons.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-flower2 fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Styled Icons</h5>
</a>
</div>
<div class="col">
<a href="tables.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-table fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Tables</h5>
</a>
</div>
<div class="col">
<a href="tabs.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-segmented-nav fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Tabs</h5>
</a>
</div>
<div class="col">
<a href="testimonials-twitter.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-chat-left-quote fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Testimonials</h5>
</a>
</div>
<div class="col">
<a href="thumbnails-slider.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-image fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Thumbnails</h5>
</a>
</div>
<div class="col">
<a href="toggles-accordions.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-caret-down-square fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Toggles</h5>
</a>
</div>
<div class="col">
<a href="lazy-loading.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="fa-solid fa-spinner fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Lazy Loading</h5>
</a>
</div>
<div class="col">
<a href="component-radios-switches.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-toggle-off fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Radios & Switches</h5>
</a>
</div>
<div class="col">
<a href="flip-cards.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-arrow-repeat fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Flip Cards</h5>
</a>
</div>
<div class="col">
<a href="cascading-images.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-images fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Cascading Images</h5>
</a>
</div>
<div class="col">
<a href="image-compare.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-arrow-bar-right fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Before/After</h5>
</a>
</div>
<div class="col">
<a href="video-facade.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-play-circle fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Video Facade</h5>
</a>
</div>
<div class="col">
<a href="gdpr.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-shield-lock fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">GDPR</h5>
</a>
</div>
<div class="col">
<a href="cart-quantity.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-plus-slash-minus fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Cart Quantity</h5>
</a>
</div>
<div class="col">
<a href="circle-stack.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-slash-circle fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Circle Stack</h5>
</a>
</div>
<div class="col">
<a href="image-sliders.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-tropical-storm fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Image Sliders</h5>
</a>
</div>
<div class="col">
<a href="ticker.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-wind fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Ticker</h5>
</a>
</div>
<div class="col">
<a href="ajax-button.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-filetype-js fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">AJAX Button</h5>
</a>
</div>
<div class="col">
<a href="conditional.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-slash-square fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Conditional</h5>
</a>
</div>
<div class="col">
<a href="code-highlighter.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-code-square fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Code Highlighter</h5>
</a>
</div>
<div class="col">
<a href="custom-cursor.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-cursor fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Custom Cursor</h5>
</a>
</div>
<div class="col">
<a href="hover-parallax.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-arrows-move fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Hover Parallax</h5>
</a>
</div>
<div class="col">
<a href="color-mode-switcher.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-moon-stars fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Mode Switcher</h5>
</a>
</div>
<div class="col">
<a href="adaptive-scheme.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-circle-half fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Adaptive Scheme</h5>
</a>
</div>
<div class="col">
<a href="image-hotspot.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-app-indicator fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Image Hotspots</h5>
</a>
</div>
<div class="col">
<a href="portfolio-filter-styles.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<i class="bi-filter-circle fs-2 d-block"></i>
<h5 class="fs-6 fw-medium mt-3 mb-0">Filters</h5>
</a>
</div>
<div class="col">
<a href="preloaders.html" style="background-color: var(--cnvs-contrast-bg-offset);" class="d-block grid-inner text-contrast-900 h-nobg border border-transparent h-border-contrast-900 py-5 px-3 rounded">
<div class="position-relative fs-2">
<div class="css3-spinner position-absolute">
<div class="css3-spinner-bounce1" style="--cnvs-loader-color: var(--cnvs-contrast-900);"></div>
<div class="css3-spinner-bounce2" style="--cnvs-loader-color: var(--cnvs-contrast-900);"></div>
<div class="css3-spinner-bounce3" style="--cnvs-loader-color: var(--cnvs-contrast-900);"></div>
</div>
</div>
<h5 class="fs-6 fw-medium mt-3 mb-0">Preloaders</h5>
</a>
</div>
<!-- Page Sub-Menu -->
<!-- Go to Top -->
<!-- Responsive Heights -->
<!-- Countdowns -->
<!-- Twitter Feed -->
<!-- Instagram Photos -->
<!-- Flickr -->
<!-- Dribbble -->
<!-- Subscription Form -->
<!-- NavTree -->
</div>
</div>
<div class="row align-items-stretch grid-border border-top border-default mx-0 mt-6">
<div class="col-md-4 p-0 text-center">
<div class="grid-inner h-bg-contrast-200">
<a href="http://support.semicolonweb.com/forums/forum/canvas-html/" class="d-block py-5" target="_blank">
<i class="bi-emoji-smile display-6 mt-2 mb-2 mx-auto d-block"></i>
<span class="fs-5 text-contrast-900 h-text-color fw-medium d-block mb-2">Dedicated Support</span>
</a>
</div>
</div>
<div class="col-md-4 p-0 text-center">
<div class="grid-inner h-bg-contrast-200">
<a href="http://docs.semicolonweb.com/" class="d-block py-5" target="_blank">
<i class="bi-book display-6 mt-2 mb-2 mx-auto d-block"></i>
<span class="fs-5 text-contrast-900 h-text-color fw-medium d-block mb-2">Extensive Documentation</span>
</a>
</div>
</div>
<div class="col-md-4 p-0 text-center">
<div class="grid-inner h-bg-contrast-200">
<a href="http://docs.semicolonweb.com/docs/getting-started/walkthrough-videos/" class="d-block py-5" target="_blank">
<i class="bi-film display-6 mt-2 mb-2 mx-auto d-block"></i>
<span class="fs-5 text-contrast-900 h-text-color fw-medium d-block mb-2">Walkthrough Videos</span>
</a>
</div>
</div>
</div>
<div id="section-purchase" class="section m-0 text-center dark footer-stick" style="padding: 150px 0; background: url('images/intro/bg.jpg') no-repeat center center; background-size: cover;">
<div class="container">
<h2 class="display-4 fw-semibold font-secondary lh-base mb-5">Create Beautiful & Powerful Websites<br>Get Canvas for <strong>$16</strong> only!</h2>
<a href="https://1.envato.market/c/1309643/480739/4415?u=https%3A%2F%2Fthemeforest.net%2Fcart%2Fconfigure_before_adding%2F9228123" class="button button-circle button-xlarge button-reveal text-end ls-0 m-0" style="padding-left: 60px;padding-right: 60px;"><span>Purchase License</span><i class="bi-chevron-right"></i></a>
</div>
</div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="dark">
<div class="container">
<!-- Footer Widgets
============================================= -->
<div class="footer-widgets-wrap">
<div class="row col-mb-50">
<div class="col-lg-8">
<div class="row col-mb-50">
<div class="col-md-4">
<div class="widget">
<img src="images/footer-widget-logo.png" alt="Image" class="footer-logo">
<p>We believe in <strong>Simple</strong>, <strong>Creative</strong> & <strong>Flexible</strong> Design Standards.</p>
<div style="background: url('images/world-map.png') no-repeat center center; background-size: 100%;">
<address>
<strong>Headquarters:</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
</address>
<abbr title="Phone Number"><strong>Phone:</strong></abbr> (1) 8547 632521<br>
<abbr title="Fax"><strong>Fax:</strong></abbr> (1) 11 4752 1433<br>
<abbr title="Email Address"><strong>Email:</strong></abbr> [email protected]
</div>
</div>
</div>
<div class="col-md-4">
<div class="widget widget_links">
<h4>Blogroll</h4>
<ul>
<li><a href="https://codex.wordpress.org/">Documentation</a></li>
<li><a href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a></li>
<li><a href="https://wordpress.org/extend/plugins/">Plugins</a></li>
<li><a href="https://wordpress.org/support/">Support Forums</a></li>
<li><a href="https://wordpress.org/extend/themes/">Themes</a></li>
<li><a href="https://wordpress.org/news/">Canvas Blog</a></li>
<li><a href="https://planet.wordpress.org/">Canvas Planet</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<h4>Recent Posts</h4>
<div class="posts-sm row col-mb-30" id="post-list-footer">
<div class="entry col-12">
<div class="grid-inner row">
<div class="col">
<div class="entry-title">
<h4><a href="#">Lorem ipsum dolor sit amet, consectetur</a></h4>
</div>
<div class="entry-meta">
<ul>
<li>10th July 2021</li>
</ul>
</div>
</div>
</div>
</div>
<div class="entry col-12">
<div class="grid-inner row">
<div class="col">
<div class="entry-title">
<h4><a href="#">Elit Assumenda vel amet dolorum quasi</a></h4>
</div>
<div class="entry-meta">
<ul>
<li>10th July 2021</li>
</ul>
</div>
</div>
</div>
</div>
<div class="entry col-12">
<div class="grid-inner row">
<div class="col">
<div class="entry-title">
<h4><a href="#">Debitis nihil placeat, illum est nisi</a></h4>
</div>
<div class="entry-meta">
<ul>
<li>10th July 2021</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row col-mb-50">
<div class="col-md-4 col-lg-12">
<div class="widget">
<div class="row col-mb-30">
<div class="col-lg-6">
<div class="counter counter-small"><span data-from="50" data-to="15065421" data-refresh-interval="80" data-speed="3000" data-comma="true"></span></div>
<h5 class="mb-0">Total Downloads</h5>
</div>
<div class="col-lg-6">
<div class="counter counter-small"><span data-from="100" data-to="18465" data-refresh-interval="50" data-speed="2000" data-comma="true"></span></div>
<h5 class="mb-0">Clients</h5>
</div>
</div>
</div>
</div>
<div class="col-md-5 col-lg-12">
<div class="widget subscribe-widget">
<h5><strong>Subscribe</strong> to Our Newsletter to get Important News, Amazing Offers & Inside Scoops:</h5>
<div class="widget-subscribe-form-result"></div>
<form id="widget-subscribe-form" action="include/subscribe.php" method="post" class="mb-0">
<div class="input-group mx-auto">
<div class="input-group-text"><i class="bi-envelope-plus"></i></div>
<input type="email" id="widget-subscribe-form-email" name="widget-subscribe-form-email" class="form-control required email" placeholder="Enter your Email">
<button class="btn btn-success" type="submit">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="col-md-3 col-lg-12">
<div class="widget">
<div class="row col-mb-30">
<div class="col-6 col-md-12 col-lg-6 d-flex align-items-center">
<a href="#" class="social-icon text-white border-transparent bg-facebook me-2 mb-0 float-none">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="ms-1"><small class="d-block"><strong>Like Us</strong><br>on Facebook</small></a>
</div>
<div class="col-6 col-md-12 col-lg-6 d-flex align-items-center">
<a href="#" class="social-icon text-white border-transparent bg-rss me-2 mb-0 float-none">
<i class="fa-solid fa-rss"></i>
<i class="fa-solid fa-rss"></i>
</a>
<a href="#" class="ms-1"><small class="d-block"><strong>Subscribe</strong><br>to RSS Feeds</small></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- .footer-widgets-wrap end -->
</div>
<!-- Copyrights
============================================= -->
<div id="copyrights">
<div class="container">
<div class="row col-mb-30">
<div class="col-md-6 text-center text-md-start">
Copyrights © 2023 All Rights Reserved by Canvas Inc.<br>
<div class="copyright-links"><a href="#">Terms of Use</a> / <a href="#">Privacy Policy</a></div>
</div>
<div class="col-md-6 text-center text-md-end">
<div class="d-flex justify-content-center justify-content-md-end mb-2">
<a href="#" class="social-icon border-transparent si-small h-bg-facebook">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="#" class="social-icon border-transparent si-small h-bg-twitter">
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-twitter"></i>
</a>
<a href="#" class="social-icon border-transparent si-small h-bg-google">
<i class="fa-brands fa-google"></i>
<i class="fa-brands fa-google"></i>
</a>
<a href="#" class="social-icon border-transparent si-small h-bg-pinterest">
<i class="fa-brands fa-pinterest-p"></i>
<i class="fa-brands fa-pinterest-p"></i>
</a>
<a href="#" class="social-icon border-transparent si-small h-bg-vimeo">
<i class="fa-brands fa-vimeo-v"></i>
<i class="fa-brands fa-vimeo-v"></i>
</a>
<a href="#" class="social-icon border-transparent si-small h-bg-github">
<i class="fa-brands fa-github"></i>
<i class="fa-brands fa-github"></i>
</a>
<a href="#" class="social-icon border-transparent si-small h-bg-yahoo">
<i class="fa-brands fa-yahoo"></i>
<i class="fa-brands fa-yahoo"></i>
</a>
<a href="#" class="social-icon border-transparent si-small me-0 h-bg-linkedin">
<i class="fa-brands fa-linkedin"></i>
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
<i class="bi-envelope"></i> [email protected] <span class="middot">·</span> <i class="fa-solid fa-phone"></i> +1-11-6541-6369 <span class="middot">·</span> <i class="bi-skype"></i> CanvasOnSkype
</div>
</div>
</div>
</div><!-- #copyrights end -->
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/functions.js"></script>
<!-- Bootstrap Data Table Plugin -->
<script src="js/components/bs-datatable.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('#datatable1').dataTable();
});
</script>
</body>
</html>