| 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/cgny/public_html/familyfun/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">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Columns & Grids | 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>Columns & Grids</h1>
<span>The Native Custom Template Grid & the Bootstrap Grid</span>
<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>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Shortcodes</a></li>
<li class="breadcrumb-item active" aria-current="page">Columns & Grids</li>
</ol>
</div>
</div>
</section><!-- .page-title end -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container">
<div class="row col-mb-50 mb-0">
<div class="col-12">
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.
</div>
<div class="col-md-6">
<h5>Half Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.
</div>
<div class="col-md-6">
<h5>Half Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.
</div>
<div class="w-100"></div>
<div class="col-md-8">
<h5>2/3 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.
</div>
<div class="col-md-4">
<h5>1/3 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus.
</div>
<div class="w-100"></div>
<div class="col-md-3">
<h5>1/4 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante.
</div>
<div class="col-md-9">
<h5>3/4 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.
</div>
<div class="w-100"></div>
<div class="col-md-5">
<h5>2/5 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
</div>
<div class="col-md-7">
<h5>3/5 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur.
</div>
<div class="w-100"></div>
<div class="col-md-1-5">
<h5>1/5 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula.
</div>
<div class="col-md-1-5">
<h5>1/5 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula.
</div>
<div class="col-md-1-5">
<h5>1/5 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula.
</div>
<div class="col-md-1-5">
<h5>1/5 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula.
</div>
<div class="col-md-1-5">
<h5>1/5 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula.
</div>
<div class="w-100"></div>
<div class="col-md-2">
<h5>1/6 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id.
</div>
<div class="col-md-10">
<h5>5/6 Width</h5>
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper.
</div>
</div>
<div class="divider mt-0"><i class="bi-circle-fill"></i></div>
<h3>Bootstrap Grid</h3>
<div class="row show-grid">
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-1">.col-lg-1</div>
</div>
<div class="row show-grid">
<div class="col-lg-2">.col-lg-2</div>
<div class="col-lg-2">.col-lg-2</div>
<div class="col-lg-2">.col-lg-2</div>
<div class="col-lg-2">.col-lg-2</div>
<div class="col-lg-2">.col-lg-2</div>
<div class="col-lg-2">.col-lg-2</div>
</div>
<div class="row show-grid">
<div class="col-lg-3">.col-lg-3</div>
<div class="col-lg-3">.col-lg-3</div>
<div class="col-lg-3">.col-lg-3</div>
<div class="col-lg-3">.col-lg-3</div>
</div>
<div class="row show-grid">
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
<div class="row show-grid">
<div class="col-lg-5">.col-lg-5</div>
<div class="col-lg-5">.col-lg-5</div>
<div class="col-lg-2">.col-lg-2</div>
</div>
<div class="row show-grid">
<div class="col-lg-6">.col-lg-6</div>
<div class="col-lg-6">.col-lg-6</div>
</div>
<div class="row show-grid">
<div class="col-lg-1">.col-lg-1</div>
<div class="col-lg-11">.col-lg-11</div>
</div>
<div class="row show-grid">
<div class="col-lg-2">.col-lg-2</div>
<div class="col-lg-10">.col-lg-10</div>
</div>
<div class="row show-grid">
<div class="col-lg-3">.col-lg-3</div>
<div class="col-lg-9">.col-lg-9</div>
</div>
<div class="row show-grid">
<div class="col-lg-4">.col-lg-4</div>
<div class="col-lg-8">.col-lg-8</div>
</div>
<div class="row show-grid">
<div class="col-lg-5">.col-lg-5</div>
<div class="col-lg-7">.col-lg-7</div>
</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/functions.js"></script>
</body>
</html>