| Server IP : 172.67.201.108 / Your IP : 216.73.217.143 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=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<!-- Plugins/Components CSS -->
<link rel="stylesheet" href="css/swiper.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Canvas | The Multi-Purpose HTML5 Template</title>
<style>
:root {
--cnvs-themecolor: #3e8de3;
--cnvs-themecolor-rgb: 62, 141, 227;
}
.demos-text-rotator {
font-size: 7vw;
}
@media (min-width: 992px) {
.demos-text-rotator {
font-size: 5vw;
}
}
@media (min-width: 1200px) {
.demos-text-rotator {
font-size: 3.5vw;
}
}
@media (max-width: 767.98px) {
.slider-element .heading-block h1 small { font-size: 15px; }
}
.testimonials-rating {
color: #FFD700;
font-size: 18px;
line-height: 1;
}
#niche-demos .portfolio-item .portfolio-image .flexslider a { width: inherit; }
.more-link {
border-bottom-width: 1px;
font-style: normal;
font-family: proxima-nova, sans-serif;
}
.p-generator-video::before {
content: "";
position: absolute;
display: block;
top: 50%;
left: 50%;
width: 110%;
height: 110%;
background-size: 12px 12px;
background-position: center;
transform: translate(-50%,-50%);
background-image: radial-gradient(#5c2ede 14%,transparent 14%);
-webkit-mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%);
mask-image: radial-gradient(rgba(0,0,0,1),rgba(0,0,0,0) 75%);
z-index: -1;
}
#section-blocks {
background-image: linear-gradient(to bottom, #FFF 36%, #000 36%);
}
.section-blocks-imgs img:nth-child(1) {
width: 100%;
max-width: 840px;
height: auto;
margin-left: 0;
}
.section-blocks-imgs img:nth-child(2) {
display: none;
position: absolute;
width: 480px;
right: 0;
bottom: -10px;
border: 4px solid #FFF;
}
@media (min-width: 1200px) {
#section-blocks {
background-image: linear-gradient(to bottom, #FFF 50%, #000 50%);
}
.section-blocks-imgs img:nth-child(1) {
margin-left: 5%;
}
.section-blocks-imgs img:nth-child(2) {
right: 5%;
}
}
@media (min-width: 992px) {
.section-blocks-imgs img:nth-child(2) {
display: block;
}
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-7%, 0, 0);
transform: translate3d(-7%, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-4%, 0, 0);
transform: translate3d(-4%, 0, 0);
}
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 4%, 0);
transform: translate3d(0, 4%, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 4%, 0);
transform: translate3d(0, 4%, 0);
}
}
@media (min-width: 992px) {
.intro-lead {
font-size: 1.3125rem !important;
}
}
.swiper-slide img.lazy.lazy-loaded {
width: 100% !important;
height: auto !important;
}
.display-on-lazy > *:not(.lazy) {
opacity: 0 !important;
transition: opacity .3s ease;
}
.display-on-lazy .lazy.lazy-loaded ~ * {
opacity: 1 !important;
}
.hero-description {
padding-top: 1rem;
padding-bottom: 1rem;
}
.is-expanded-menu .hero-description {
padding-top: 4rem;
padding-bottom: 4rem;
}
#page-menu {
height: 0;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
#page-menu #page-menu-wrap {
opacity: 0;
pointer-events: none;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
-webkit-transform: translate3d(0,-44px,0);
-o-transform: translate3d(0,-44px,0);
transform: translate3d(0,-44px,0);
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
#page-menu.sticky-page-menu { overflow: visible; }
#page-menu.sticky-page-menu #page-menu-wrap {
opacity: 1;
pointer-events: auto;
-webkit-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
</style>
</head>
<body class="stretched is-expanded-menu" data-menu-breakpoint="1200">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Top Bar
============================================= -->
<!-- <div id="top-bar" class="dark bg-color py-2">
<div class="container">
<div class="d-flex align-items-center justify-content-center flex-column flex-md-row fw-medium text-center">
<span><strong class="text-uppercase flash animated infinite slow d-inline-block me-2">Flash Sale</strong> Get Canvas now for <del>$16</del> <strong>$10</strong> only!</span> <a href="https://1.envato.market/c/1309643/480739/4415?u=https%3A%2F%2Fthemeforest.net%2Fcart%2Fconfigure_before_adding%2F9228123" target="_blank" class="btn btn-sm bg-light h-bg-dark text-dark h-text-light ms-md-3 mt-2 mt-md-0 fw-semibold">Buy Now</a>
</div>
</div>
</div> -->
<!-- Header
============================================= -->
<header id="header" class="transparent-header dark" 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-lg-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">
<!-- Top Search
============================================= -->
<div id="top-search" class="header-misc-icon">
<a href="#" id="top-search-trigger"><i class="uil uil-search"></i><i class="bi-x-lg"></i></a>
</div><!-- #top-search end -->
<!-- Top Cart
============================================= -->
<div id="top-cart" class="header-misc-icon">
<a href="#" id="top-cart-trigger"><i class="uil uil-shopping-bag"></i><span class="top-cart-number">5</span></a>
<div class="top-cart-content">
<div class="top-cart-title">
<h4 class="mb-0">Shopping Cart</h4>
</div>
<div class="top-cart-items">
<div class="top-cart-item">
<div class="top-cart-item-image">
<a href="#"><img src="images/shop/small/1.jpg" alt="Blue Round-Neck Tshirt"></a>
</div>
<div class="top-cart-item-desc">
<div class="top-cart-item-desc-title">
<a href="#">Blue Round-Neck Tshirt with a Button</a>
<span class="top-cart-item-price d-block">$19.99</span>
</div>
<div class="top-cart-item-quantity">x 2</div>
</div>
</div>
<div class="top-cart-item">
<div class="top-cart-item-image">
<a href="#"><img src="images/shop/small/6.jpg" alt="Light Blue Denim Dress"></a>
</div>
<div class="top-cart-item-desc">
<div class="top-cart-item-desc-title">
<a href="#">Light Blue Denim Dress</a>
<span class="top-cart-item-price d-block">$24.99</span>
</div>
<div class="top-cart-item-quantity">x 3</div>
</div>
</div>
</div>
<div class="top-cart-action">
<span class="top-checkout-price">$114.95</span>
<a href="#" class="button button-3d button-small m-0">View Cart</a>
</div>
</div>
</div><!-- #top-cart end -->
</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 mobile-menu-off-canvas 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 not-dark">
<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 not-dark">
<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 not-dark">
<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 overflow-hidden" data-class="down-xl:rounded up-xl:rounded-start" 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 1350+ 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 not-dark">
<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 not-dark">
<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 not-dark">
<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 not-dark">
<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 -->
<form class="top-search-form" action="search.html" method="get">
<input type="text" name="q" class="form-control" value="" placeholder="Type & Hit Enter.." autocomplete="off">
</form>
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->
<!-- Slider
============================================= -->
<section id="slider" class="slider-element min-vh-75 h-auto include-header">
<div class="py-6 dark position-relative" style="background: url('images/intro/bg-2.jpeg') no-repeat center center; background-size: cover;">
<div class="container hero-description">
<div class="row align-items-center justify-content-center col-mb-80 mb-0">
<div class="col-12 text-center pb-0">
<style>.has-plugin-textrotator .textrotator-placeholder{display:none}</style>
<h1 class="fw-semibold lh-sm display-4 mt-5 mb-3" style="letter-spacing:-1px;">Create <span class="nocolor underliner viewport-detect" data-delay="1000">Powerful</span> Websites</h1>
</div>
<div class="col-lg-8 text-center pb-3">
<p class="lead fs-4 mb-5">The Best Selling Multi-Purpose & Most Powerful Bootstrap 5.x Template with <span class="counter counter-inherit color fw-semibold"><span data-from="99" data-to="1350" data-refresh-interval="50" data-speed="1000"></span>+</span> Niche, Multi-Page & One-Page Layouts & <span class="counter counter-inherit color fw-semibold"><span data-from="99" data-to="2000" data-refresh-interval="50" data-speed="1000"></span>+</span> UI Features.</p>
<div class="row justify-content-center gutter-20 mx-auto" style="max-width: 600px;">
<div class="col-sm-6 col-xl-5">
<a href="#section-alldemos" data-scrollto="#section-alldemos" class="button button-large shadow-sm rounded m-0 w-100" style="padding: 0.75rem 2rem;"><i class="uil uil-images" style="position: relative; top: 1px; margin-right: 5px;"></i> View Demos</a>
</div>
<div class="col-sm-6 col-xl-5 mb-5">
<a href="#section-features" data-scrollto="#section-features" class="button button-large button-border border-contrast-900 border-width-2 button-contrast-900 text-contrast-900 h-text-light rounded m-0 w-100" style="padding: 0.75rem 2rem;"><i class="bi-asterisk me-2"></i> Core Features</a>
</div>
</div>
</div>
<div class="col-12 text-center">
<span class="d-inline-block mb-3 me-3 small"><i class="fa-check fa-solid me-1 position-relative text-success" style="top:1px"></i> Ready to Use</span>
<span class="d-inline-block mb-3 me-3 small"><i class="fa-check fa-solid me-1 position-relative text-success" style="top:1px"></i> #1 Template of all Time</span>
<span class="d-inline-block mb-3 me-3 small"><i class="fa-star fa-solid me-1 position-relative text-warning"></i> 2800+ 5-Star Reviews</span>
<span class="d-inline-block mb-3 me-3 small"><i class="fa-check fa-solid me-1 position-relative text-success" style="top:1px"></i> 8+ Years of Development</span>
<span class="d-inline-block mb-3 small"><i class="fa-check fa-solid me-1 position-relative text-success" style="top:1px"></i> Lifetime Free Updates</span>
</div>
</div>
</div>
<div class="shape-divider" data-shape="wave" data-position="bottom" data-height="75"></div>
</div>
<div class="position-relative w-100 mt-6">
<style>
.swiper-wrapper {
-webkit-transition-timing-function:linear!important;
transition-timing-function:linear!important;
position: relative;
}
</style>
<div class="overflow-hidden slider-element swiper_wrapper intro-swiper-marquee customjs h-auto">
<div class="slider-inner viewport-detect">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide mt-5">
<div class="row g-4">
<div class="col-12">
<div class="grid-inner">
<a href="index-classic.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/classic.jpg" alt="Classic Demo" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-drone.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/drone.jpg" alt="Drone Demo" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-academic.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/academic.jpg" alt="Academic Demo" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-4 mb-5">
<div class="col-12">
<div class="grid-inner">
<a href="demo-skincare.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/skincare.jpg" alt="Skincare Demo" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-shop-2.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/shop-2.jpg" alt="Shop 2 Demo" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-interior-design.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/interior-design.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide mt-5">
<div class="row g-4">
<div class="col-12">
<div class="grid-inner">
<a href="demo-real-estate.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/real-estate.jpg" alt="Real Estate Demo" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-speaker.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/speaker.jpg" alt="Speaker Demo" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="index-classic.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/classic.jpg" alt="Classic Demo" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-4 mb-5">
<div class="col-12">
<div class="grid-inner">
<a href="demo-jewellery-boutique.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/jewellery.jpg" alt="Jewellery Boutique Demo" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-integro.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/integro.jpg" alt="Integro Demo" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-landing-2.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/landing-2.jpg" alt="Landing 2 Demo" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide mt-5">
<div class="row g-4">
<div class="col-12">
<div class="grid-inner">
<a href="demo-saas.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/saas.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-portfolio.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/portfolio.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-podcasts.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/podcasts.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-4 mb-5">
<div class="col-12">
<div class="grid-inner">
<a href="demo-insurance.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/insurance.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-nft-marketplace.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/nft.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-seo.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/seo.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide mt-5">
<div class="row g-4">
<div class="col-12">
<div class="grid-inner">
<a href="demo-construction.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/construction.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-travel.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/travel.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-medical.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/medical.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-4 mb-5">
<div class="col-12">
<div class="grid-inner">
<a href="demo-landing.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/landing.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-law-firm.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/law-firm.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-kindergarten.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/kindergarten.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide mt-5">
<div class="row g-4">
<div class="col-12">
<div class="grid-inner">
<a href="demo-furniture.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/furniture.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-coworking.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/coworking.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-finance.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/finance.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-4 mb-5">
<div class="col-12">
<div class="grid-inner">
<a href="demo-therapy.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/therapy.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-covid-care.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/covid-care.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-forum.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/forum.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide mt-5">
<div class="row g-4">
<div class="col-12">
<div class="grid-inner">
<a href="demo-blog.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/blog.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-yoga.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/yoga.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-freelancer.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/freelancer.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-4 mb-5">
<div class="col-12">
<div class="grid-inner">
<a href="demo-hosting.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/hosting.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-app-landing.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/app-landing.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-shop.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/shop.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide mt-5">
<div class="row g-4">
<div class="col-12">
<div class="grid-inner">
<a href="demo-news.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/news.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-cleaner.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/cleaner.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-beauty-kit.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/beauty-kit.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-4 mb-5">
<div class="col-12">
<div class="grid-inner">
<a href="demo-store.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/store.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-hostel.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/hostel.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-crowdfunding.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/crowdfunding.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide mt-5">
<div class="row g-4">
<div class="col-12">
<div class="grid-inner">
<a href="demo-burger.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/burger.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-beauty.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/beauty.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-recipes.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/recipes.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-4 mb-5">
<div class="col-12">
<div class="grid-inner">
<a href="demo-movers.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/movers.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-conference.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/conference.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-nonprofit.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/nonprofit.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide mt-5">
<div class="row g-4">
<div class="col-12">
<div class="grid-inner">
<a href="demo-articles.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/article.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-course.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/course.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-bike.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/bike.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-4 mb-5">
<div class="col-12">
<div class="grid-inner">
<a href="demo-photographer.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/photographer.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-headphones.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/headphones.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-gym.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/gym.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide mt-5">
<div class="row g-4">
<div class="col-12">
<div class="grid-inner">
<a href="demo-modern-blog.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/modern-blog.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-music.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/music.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-business.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/business.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-4 mb-5">
<div class="col-12">
<div class="grid-inner">
<a href="demo-car.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/car.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-restaurant.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/restaurant.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-barber.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/barber.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide mt-5">
<div class="row g-4">
<div class="col-12">
<div class="grid-inner">
<a href="demo-ecommerce.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/ecommerce.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-pet.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/pet.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-resume.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/resume.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="row g-4 mb-5">
<div class="col-12">
<div class="grid-inner">
<a href="demo-xmas.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/xmas.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-writer.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/writer.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-cafe.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/cafe.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide mt-5">
<div class="row g-4">
<div class="col-12">
<div class="grid-inner">
<a href="demo-spa.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/spa.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-media-agency.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/media-agency.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
<div class="col-12">
<div class="grid-inner">
<a href="demo-agency.html" target="_blank">
<img width="221" height="159" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 221 159'%3E%3C/svg%3E" data-src="images/intro/niche/new/agency.jpg" alt="Live Preview" class="rounded-5 lazy">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="position-absolute start-50 top-50 translate-middle z-2">
<div class="px-3 bg-white rounded-6 border border-width-2 border-dark button-shadow button-shadow-dark button-shadow-nohover">
<span class="text-rotater font-primary text-black fw-medium demos-text-rotator" data-separator="|" data-rotate="fadeIn" data-speed="50" data-backdelay="1500" data-typed="true" data-shuffle="true" data-loop="true" data-cursor="false">
<span class="t-rotate">Corporate|Portfolio|Business|Real Estate|Medical|Construction|Store|COVID|Freelancer|Burger|Yoga|Hostel|Beauty|Crowdfunding|CoWorking|Recipes|SEO|App Landing|One-Page|Travel|e-Commerce|Articles|Course|Packers & Movers|Cleaner|Beauty Kit|Conference|Non-Profit|Hosting|Gym|Photography|Blog|Magazine|Resume|Restaurant|Cafe|Spa|Wedding|Ajax|Media Agency|Shop|Events|Rental|News|Music|Car Listing|Barber|Pets|Forums|Community|Finance|Therapy|Furniture|NFT|Marketplace|Skincare|Jewellery|Boutique|SAAS|Podcast|Insurance|Speaker|Drone|Academic</span>
</span>
</div>
</div>
</div>
</section>
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap pb-0">
<!-- Page Sub Menu
============================================= -->
<div id="page-menu">
<div id="page-menu-wrap">
<div class="container">
<div class="page-menu-row">
<div class="page-menu-title">Explore <span>CANVAS</span></div>
<nav class="page-menu-nav one-page-menu" data-offset="100">
<ul class="page-menu-container">
<li class="page-menu-item"><a href="#" data-href="#niche-demos-grid" data-offset="220"><div>Niche Demos</div></a></li>
<li class="page-menu-item"><a href="#" data-href="#section-blocks"><div>Blocks</div></a></li>
<li class="page-menu-item"><a href="#" data-href="#section-homepage"><div>Multi-Page</div></a></li>
<li class="page-menu-item"><a href="#" data-href="#section-onepage"><div>One-Page</div></a></li>
<li class="page-menu-item"><a href="#" data-href="#section-forms" data-offset="220"><div>Forms</div></a></li>
<li class="page-menu-item"><a href="#" data-href="#section-shortcodes"><div>Shortcodes</div></a></li>
<li class="page-menu-item"><a href="#" data-href="#section-purchase" data-offset="0"><div>Purchase</div></a></li>
</ul>
</nav>
<div id="page-menu-trigger"><i class="bi-list"></i></div>
</div>
</div>
</div>
</div><!-- #page-menu end -->
<div class="row justify-content-center g-3 mb-6">
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Custom Menu Breakpoints</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Unlimited Headers</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Unlimited Footers</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Fully Responsive</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Retina Ready</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Unlimited Headers</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Events Templates</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Blog Templates</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Portfolio Templates</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Events Templates</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Landing Pages</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Utility Templates</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Maintenance Templates</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Under Construction</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Coming Soon</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Cart Templates</div>
</div>
</div>
<div class="col-auto">
<div class="grid-inner">
<div class="border border-default px-4 py-2 fs-5 rounded-pill d-inline-block">Checkout</div>
</div>
</div>
</div>
<div class="text-center small">
<span class="d-inline-block rounded-pill border border-default px-4 py-2"><i class="bi-exclamation-circle me-2 position-relative" style="top:1px"></i> All the 1350+ Designs & Templates displayed here are included in the Purchased Package</span>
</div>
<div class="container pt-6 pb-5">
<div class="row text-center justify-content-center col-mb-50 mx-lg-auto" style="max-width: 1100px;">
<div class="col-6 col-md-4 col-lg-1-5">
<div class="counter text-contrast-1000 fs-1" style="line-height: 1.1;"><span data-from="999" data-to="70000" data-refresh-interval="50" data-speed="1000"></span><small class="color ms-1">+</small></div>
<h3><span class="subtitle ls-0 h5 fw-medium text-contrast-1000 op-05">Happy Users</span></h3>
</div>
<div class="col-6 col-md-4 col-lg-1-5">
<div class="counter text-contrast-1000 fs-1" style="line-height: 1.1;"><span data-from="0" data-to="170" data-refresh-interval="100" data-speed="1000"></span><small class="color ms-1">+</small></div>
<h3><span class="subtitle ls-0 h5 fw-medium text-contrast-1000 op-05">Pro Demos</span></h3>
</div>
<div class="col-6 col-md-4 col-lg-1-5">
<div class="counter text-contrast-1000 fs-1" style="line-height: 1.1;"><span data-from="10" data-to="1350" data-refresh-interval="10" data-speed="1000"></span><small class="color ms-1">+</small></div>
<h3><span class="subtitle ls-0 h5 fw-medium text-contrast-1000 op-05">Templates</span></h3>
</div>
<div class="col-6 col-md-4 col-lg-1-5">
<div class="counter text-contrast-1000 fs-1" style="line-height: 1.1;"><span data-from="3" data-to="200" data-refresh-interval="40" data-speed="900"></span><small class="color ms-1">+</small></div>
<h3><span class="subtitle ls-0 h5 fw-medium text-contrast-1000 op-05">Site Blocks</span></h3>
</div>
<div class="col-6 col-md-4 col-lg-1-5">
<div class="counter text-contrast-1000 fs-1" style="line-height: 1.1;"><span data-from="2" data-to="2000" data-refresh-interval="40" data-speed="1200"></span><small class="color ms-1">+</small></div>
<h3><span class="subtitle ls-0 h5 fw-medium text-contrast-1000 op-05">UI Features</span></h3>
</div>
</div>
<div class="d-flex flex-wrap mt-5 justify-content-center align-items-center">
<img class="square mb-4 me-4" style="--cnvs-square-size:20px;" src="images/intro/icons/bootstrap-5.svg" alt="Bootstrap 5.3" data-bs-toggle="tooltip" title="Bootstrap 5.3" data-original-title="Bootstrap 5.3">
<img class="square mb-4 me-4" style="--cnvs-square-size:20px;" src="images/intro/icons/node-js.svg" alt="NodeJS" data-bs-toggle="tooltip" title="NodeJS" data-original-title="NodeJS">
<img class="square mb-4 me-4" style="--cnvs-square-size:20px;" src="images/intro/icons/gulp-js.svg" alt="Gulp.js" data-bs-toggle="tooltip" title="Gulp.js" data-original-title="Gulp.js">
<img class="square mb-4 me-4" style="--cnvs-square-size:20px;" src="images/intro/icons/sass.svg" alt="SASS" data-bs-toggle="tooltip" title="SASS" data-original-title="SASS">
<img class="square mb-4 me-4" style="--cnvs-square-size:20px;" src="images/intro/icons/ajax.svg" alt="AJAX" data-bs-toggle="tooltip" title="AJAX" data-original-title="AJAX">
<img class="square mb-4 me-4" style="--cnvs-square-size:20px;" src="images/intro/icons/css.svg" alt="CSS3" data-bs-toggle="tooltip" title="CSS3" data-original-title="CSS3">
<img class="square mb-4 me-4" style="--cnvs-square-size:20px;" src="images/intro/icons/html-5.svg" alt="HTML5" data-bs-toggle="tooltip" title="HTML5" data-original-title="HTML5">
<img class="square mb-4 me-4" style="--cnvs-square-size:20px;" src="images/intro/icons/js.svg" alt="VanillaJS" data-bs-toggle="tooltip" title="VanillaJS" data-original-title="VanillaJS">
<img class="square mb-4 me-4" style="--cnvs-square-size:20px;" src="images/intro/icons/dark.svg" alt="Dark Mode" data-bs-toggle="tooltip" title="Dark Mode" data-original-title="Dark Mode">
<img class="square mb-4" style="--cnvs-square-size:20px;" src="images/intro/icons/rtl.svg" alt="Full RTL Support" data-bs-toggle="tooltip" title="Full RTL Support" data-original-title="Full RTL Support">
</div>
<div class="text-center small mt-3 mb-5">
<span class="text-muted">Check Older Versions:</span>
<a class="text-decoration-underline ms-3" target="_blank" href="https://themes.semicolonweb.com/html/canvas/v6/intro.html">Canvas 6.x</a>
<a class="text-decoration-underline ms-3" target="_blank" href="https://themes.semicolonweb.com/html/canvas/v5/intro.html">Canvas 5.x</a>
<a class="ms-3 text-decoration-underline" href="https://www.youtube.com/watch?v=P3Huse9K6Xs" data-lightbox="iframe">Watch Promo Video</a>
</div>
</div>
<div id="section-alldemos" class="section my-0 py-0 bg-transparent">
<h2 class="text-center py-4 bg-contrast-100 fs-1 fw-bold border-top border-bottom border-contrast-200" data-class="dark:bg-contrast-200 dark:border-contrast-300">
<span class="d-block my-2 nocolor">What <span class="color">You</span> Get?</span>
</h2>
<div class="container pt-5 pb-6">
<div class="row align-items-stretch justify-content-between g-5">
<div class="col-lg-7 col-xl-6">
<div class="row g-5 mb-4">
<div class="col-sm-6">
<img class="shadow rounded d-block mb-4 lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 207'%3E%3C/svg%3E" data-src="images/intro/new/niche.jpg" alt="Prebuilt Websites">
<div class="px-3">
<h3 class="mb-2 fw-semibold fs-5">Prebuilt Websites</h3>
<p class="mb-3 text-contrast-600">65+ Structured Premium Demos for Every Category.</p>
<a href="#" data-scrollto="#section-niche" class="more-link px-0">Browse Prebuilt Websites</a>
</div>
</div>
<div class="col-sm-6">
<img class="shadow rounded d-block mb-4 lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 207'%3E%3C/svg%3E" data-src="images/intro/new/multipages.jpg" alt="Homepage Demos">
<div class="px-3">
<h3 class="mb-2 fw-semibold fs-5">Homepage Layouts</h3>
<p class="mb-3 text-contrast-600">Classic Demos with a Lot of Homepages Options.</p>
<a href="homepage-demos.html" target="_blank" class="more-link px-0">Browse Homepages</a>
</div>
</div>
<div class="col-sm-6">
<img class="shadow rounded d-block mb-4 lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 207'%3E%3C/svg%3E" data-src="images/intro/new/onepages.jpg" alt="One-Pages Demos">
<div class="px-3">
<h3 class="mb-2 fw-semibold fs-5">One-Page Demos</h3>
<p class="mb-3 text-contrast-600">65+ One-Page Demos for a Quick & Effective Landing Page.</p>
<a href="onepage-demos.html" target="_blank" class="more-link px-0">Browse One-Pages</a>
</div>
</div>
<div class="col-sm-6">
<img class="shadow rounded d-block mb-4 lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 288 207'%3E%3C/svg%3E" data-src="images/intro/new/rev-slider.jpg" alt="Revolution Slider Hero Templates">
<div class="px-3">
<h3 class="mb-2 fw-semibold fs-5">Hero Templates</h3>
<p class="mb-3 text-contrast-600">140+ Premium Templates to Kickstart your Hero/Slider Section.</p>
<a href="#section-hero" data-scrollto="#section-hero" class="more-link px-0">Browse All Heros</a>
</div>
</div>
</div>
</div>
<div class="d-block d-lg-none d-xl-block col-lg-1 text-center align-self-center">
<i class="bi-plus-circle-dotted display-6"></i>
</div>
<div class="col-lg-5">
<div class="grid-inner d-flex flex-column justify-content-center border border-default rounded-4 p-5 h-100">
<h3 class="fs-3">Also, Included in the Package;</h3>
<ul class="iconlist iconlist-lg" style="--cnvs-iconlist-offset:1px;">
<li><i class="bi-check-circle-fill"></i> <span>220+ Site Blocks</span></li>
<li><i class="bi-check-circle-fill"></i> <span>Prebuilt Websites Inner Pages</span></li>
<li><i class="bi-check-circle-fill"></i> <span>80+ Shortcodes & Components</span></li>
<li><i class="bi-check-circle-fill"></i> <span>170+ Portfolio Grid & Single Layouts</span></li>
<li><i class="bi-check-circle-fill"></i> <span>50+ Blog Grid & Single Layouts</span></li>
<li><i class="bi-check-circle-fill"></i> <span>25+ Shop Grid & Single Layouts</span></li>
<li><i class="bi-check-circle-fill"></i> <span>15+ Events List, Grid & Single Layouts</span></li>
<li><i class="bi-check-circle-fill"></i> <span>30+ Contact Form Templates</span></li>
<li><i class="bi-check-circle-fill"></i> <span>25+ Niche Form Templates</span></li>
<li><i class="bi-check-circle-fill"></i> <span>50+ Chart Templates</span></li>
<li><i class="bi-check-circle-fill"></i> <span>20+ Standalone Slider Templates</span></li>
<li><i class="bi-check-circle-fill"></i> <span>Dark Mode + RTL Layout Styles</span></li>
<li><i class="bi-check-circle-fill"></i> <span>Complete JS Plugins/Components & Functions</span></li>
<li><i class="bi-check-circle-fill"></i> <span>Source SCSS Files + CSS Variables enabled</span></li>
</ul>
<h4 class="fs-4 mb-0"><span>&</span> much much more...</h4>
</div>
</div>
</div>
</div>
</div>
<div class="py-5 text-center bg-contrast-100 border-top border-bottom border-contrast-200" data-class="dark:bg-contrast-200 dark:border-contrast-300">
<div class="container">
<h2 class="mb-0"><strong class="color">One Time Price.</strong> <em class="fw-bold">Lifetime Free</em> for New Demos, Features, Fixes & Updates.</h2>
</div>
</div>
<div id="section-niche" class="section page-section bg-transparent mb-0 mt-4">
<div class="container">
<div class="heading-block text-center border-bottom-0 text-center">
<h2 class="text-transform-none" style="font-size: 2.25rem; line-height: 1.2; letter-spacing: -1px;"><span>Prebuilt</span> Website Demos</h2>
</div>
<div class="row">
<div class="col-lg-2 d-none d-lg-block">
<div class="widget widget-filter-links">
<h4 class="fs-5">Filter</h4>
<ul class="custom-filter" data-container="#niche-demos-grid" data-active-class="active-filter">
<li class="widget-filter-reset active-filter"><a href="#" data-filter="*" class="h-op-07"><i class="bi-x-circle mt-1"></i> Clear</a></li>
<li><a href="#" data-filter=".nd-business">Business <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-ecommerce">eCommerce <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-portfolio">Portfolio <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-saas">SAAS <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-landing">Landing <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-onepage">One-Page <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-media">Media <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-listings">Listings <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-creative">Creative <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-clean">Clean <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-resume">Resume <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-health">Health & Beauty <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-magazine">Magazine <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-food">Food <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-forums">Forums <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-travel">Travel <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-events">Events <span class="d-inline-block"></span></a></li>
<li><a href="#" data-filter=".nd-extras">Extras <span class="d-inline-block"></span></a></li>
</ul>
</div>
</div>
<div class="col-lg">
<div id="niche-demos-grid" class="row g-4 text-center grid-container overflow-visible" data-layout="fitRows">
<!-- Classic -->
<div class="col-lg-4 col-sm-6 nd-business">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="index-classic.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/classic.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="index-classic.html" target="_blank">Classic</a></h3>
<span>Corporate</span>
</div>
</div>
</div>
<!-- academic -->
<div class="col-lg-4 col-sm-6 nd-resume nd-extras">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-academic.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/academic.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-academic.html" target="_blank" class="d-flex align-items-center justify-content-center">Academic<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>Education, Resume</span>
</div>
</div>
</div>
<!-- drone -->
<div class="col-lg-4 col-sm-6 nd-ecommerce nd-clean">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-drone.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/drone.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-drone.html" target="_blank" class="d-flex align-items-center justify-content-center">Drone<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>eCommerce, Product</span>
</div>
</div>
</div>
<!-- skincare -->
<div class="col-lg-4 col-sm-6 nd-ecommerce nd-health nd-clean">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-skincare.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/skincare.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-skincare.html" target="_blank" class="d-flex align-items-center justify-content-center">Skincare<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>eCommerce, Beauty</span>
</div>
</div>
</div>
<!-- shop-2 -->
<div class="col-lg-4 col-sm-6 nd-ecommerce">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-shop-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/shop-2.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-shop-2.html" target="_blank" class="d-flex align-items-center justify-content-center">Shop 2<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>eCommerce, Creative</span>
</div>
</div>
</div>
<!-- jewellery -->
<div class="col-lg-4 col-sm-6 nd-portfolio nd-creative nd-landing">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-jewellery-boutique.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/jewellery.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-jewellery-boutique.html" target="_blank" class="d-flex align-items-center justify-content-center">Jewellery Boutique<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>Portfolio, Clean</span>
</div>
</div>
</div>
<!-- integro -->
<div class="col-lg-4 col-sm-6 nd-business nd-saas">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-integro.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/integro.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-integro.html" target="_blank" class="d-flex align-items-center justify-content-center">Integro<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>Business, SAAS</span>
</div>
</div>
</div>
<!-- landing-2 -->
<div class="col-lg-4 col-sm-6 nd-landing">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-landing-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/landing-2.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-landing-2.html" target="_blank" class="d-flex align-items-center justify-content-center">Landing 2<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>Landing, SAAS</span>
</div>
</div>
</div>
<!-- speaker -->
<div class="col-lg-4 col-sm-6 nd-ecommerce nd-business nd-clean">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-speaker.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/speaker.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-speaker.html" target="_blank" class="d-flex align-items-center justify-content-center">Speaker<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>Clean, eCommerce</span>
</div>
</div>
</div>
<!-- saas -->
<div class="col-lg-4 col-sm-6 nd-saas nd-clean">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-saas.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/saas.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-saas.html" target="_blank" class="d-flex align-items-center justify-content-center">SAAS<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>Clean, Business</span>
</div>
</div>
</div>
<!-- portfolio -->
<div class="col-lg-4 col-sm-6 nd-portfolio nd-creative">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-portfolio.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/portfolio.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-portfolio.html" target="_blank" class="d-flex align-items-center justify-content-center">Portfolio<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>Creative, Media</span>
</div>
</div>
</div>
<!-- podcasts -->
<div class="col-lg-4 col-sm-6 nd-extras">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-podcasts.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/podcasts.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-podcasts.html" target="_blank" class="d-flex align-items-center justify-content-center">Podcasts<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>Media, Extras</span>
</div>
</div>
</div>
<!-- insurance -->
<div class="col-lg-4 col-sm-6 nd-business">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-insurance.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/insurance.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-insurance.html" target="_blank" class="d-flex align-items-center justify-content-center">Insurance<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>Business, Landing</span>
</div>
</div>
</div>
<!-- nft-marketplace -->
<div class="col-lg-4 col-sm-6 nd-extras nd-creative">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-nft-marketplace.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/nft.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pt-4 pb-0">
<h3><a href="demo-nft-marketplace.html" target="_blank" class="d-flex align-items-center justify-content-center">NFT Marketplace<span class="badge bg-color text-white fw-normal px-2 py-1 ms-2" style="font-size: 14px;">New</span></a></h3>
<span>eCommerce, Extras</span>
</div>
</div>
</div>
<!-- Real Estate -->
<div class="col-lg-4 col-sm-6 nd-business nd-listings">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<div class="fslider flex-thumb-grid grid-3" data-arrows="false" data-thumbs="true" data-pause="3500">
<div class="flexslider">
<div class="slider-wrap">
<div class="slide" data-thumb="images/intro/niche/new/real-estate1-thumb.jpg" data-thumb-alt="Real Estate 1 Thumb">
<a href="demo-real-estate.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3C/svg%3E" data-src="images/intro/niche/new/real-estate1.jpg" alt="Real Estate Niche Demo" width="336" height="182">
</a>
</div>
<div class="slide" data-thumb="images/intro/niche/new/real-estate2-thumb.jpg" data-thumb-alt="Real Estate 2 Thumb">
<a href="demo-real-estate-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3C/svg%3E" data-src="images/intro/niche/new/real-estate2.jpg" alt="Real Estate Niche Demo" width="336" height="182">
</a>
</div>
<div class="slide" data-thumb="images/intro/niche/new/real-estate3-thumb.jpg" data-thumb-alt="Real Estate 3 Thumb">
<a href="demo-real-estate-3.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3C/svg%3E" data-src="images/intro/niche/new/real-estate3.jpg" alt="Real Estate Niche Demo" width="336" height="182">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-real-estate.html">Real Estate</a></h3>
<span>Business, Listings</span>
</div>
</div>
</div>
<!-- SEO -->
<div class="col-lg-4 col-sm-6 nd-business nd-media">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-seo.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/seo.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-seo.html" target="_blank">SEO</a></h3>
<span>Media, Creative, Business</span>
</div>
</div>
</div>
<!-- Construction -->
<div class="col-lg-4 col-sm-6 nd-business nd-listings">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-construction.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/construction.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-construction.html" target="_blank">Construction</a></h3>
<span>Business, Listings</span>
</div>
</div>
</div>
<!-- Travel -->
<div class="col-lg-4 col-sm-6 nd-listings nd-magazine nd-travel">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-travel.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/travel.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-travel.html" target="_blank">Travel</a></h3>
<span>Listings, Travel, Magazine</span>
</div>
</div>
</div>
<!-- Medical -->
<div class="col-lg-4 col-sm-6 nd-health">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-medical.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/medical.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-medical.html" target="_blank">Medical</a></h3>
<span>Health, Clean</span>
</div>
</div>
</div>
<!-- Landing -->
<div class="col-lg-4 col-sm-6 nd-landing nd-clean">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-landing.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/landing.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-landing.html" target="_blank">Landing</a></h3>
<span>Clean, SAAS</span>
</div>
</div>
</div>
<!-- Law Firm -->
<div class="col-lg-4 col-sm-6 nd-business">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded-3">
<a href="demo-law-firm.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/law-firm.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-law-firm.html" target="_blank">Law Firm</a></h3>
<span>Business, Extras</span>
</div>
</div>
</div>
<!-- Kindergarten -->
<div class="col-lg-4 col-sm-6 nd-landing nd-creative">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded-3">
<a href="demo-kindergarten.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/kindergarten.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-kindergarten.html" target="_blank">Kindergarten</a></h3>
<span>Landing, Creative</span>
</div>
</div>
</div>
<!-- Furniture -->
<div class="col-lg-4 col-sm-6 nd-ecommerce">
<div class="portfolio-item p-2">
<div class="portfolio-image rounded-3">
<a href="demo-furniture.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/furniture.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-furniture.html" target="_blank">Furniture</a></h3>
<span>eCommerce</span>
</div>
</div>
</div>
<!-- CoWorking -->
<div class="col-lg-4 col-sm-6 nd-business nd-travel nd-events">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-coworking.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/coworking.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-coworking.html" target="_blank">CoWorking</a></h3>
<span>Business, Travel, Events</span>
</div>
</div>
</div>
<!-- Finance -->
<div class="col-lg-4 col-sm-6 nd-business nd-clean">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded-3">
<a href="demo-finance.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/finance.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-finance.html" target="_blank">Finance</a></h3>
<span>Business, Clean</span>
</div>
</div>
</div>
<!-- Therapy -->
<div class="col-lg-4 col-sm-6 nd-landing nd-creative nd-health">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded-3">
<a href="demo-therapy.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/therapy.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-therapy.html" target="_blank">Therapy</a></h3>
<span>Landing, Creative, Health</span>
</div>
</div>
</div>
<!-- Covid Care -->
<div class="col-lg-4 col-sm-6 nd-landing nd-clean nd-health nd-travel">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded-3">
<a href="demo-covid-care.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/covid-care.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-covid-care.html" target="_blank">Covid Care</a></h3>
<span>Health, Travel</span>
</div>
</div>
</div>
<!-- Forums/Community -->
<div class="col-lg-4 col-sm-6 nd-listings nd-forums nd-events">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded-3">
<a href="demo-forum.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/forum.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-forum.html" target="_blank">Forums/Community</a></h3>
<span>Listings, Community</span>
</div>
</div>
</div>
<!-- Blog -->
<div class="col-lg-4 col-sm-6 nd-media nd-magazine">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded-3">
<a href="demo-blog.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/blog.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-blog.html" target="_blank">Blog</a></h3>
<span>Media, Magazine</span>
</div>
</div>
</div>
<!-- Yoga -->
<div class="col-lg-4 col-sm-6 nd-portfolio nd-creative nd-health nd-travel nd-events">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-yoga.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/yoga.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-yoga.html" target="_blank">Yoga</a></h3>
<span>Portfolio, Health</span>
</div>
</div>
</div>
<!-- Freelancer -->
<div class="col-lg-4 col-sm-6 nd-portfolio nd-landing nd-clean nd-resume nd-travel">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-freelancer.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/freelancer.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-freelancer.html" target="_blank">Freelancer</a></h3>
<span>Resume, Landing</span>
</div>
</div>
</div>
<!-- Hosting -->
<div class="col-lg-4 col-sm-6 nd-business">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-hosting.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/hosting.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-hosting.html" target="_blank">Hosting</a></h3>
<span>Business</span>
</div>
</div>
</div>
<!-- App Landing -->
<div class="col-lg-4 col-sm-6 nd-landing nd-onepage nd-clean">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-app-landing.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/app-landing.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-app-landing.html" target="_blank">App Landing</a></h3>
<span>Landing, One-Page</span>
</div>
</div>
</div>
<!-- Shop -->
<div class="col-lg-4 col-sm-6 nd-ecommerce">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-shop.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/shop.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-shop.html" target="_blank">Shop</a></h3>
<span>eCommerce</span>
</div>
</div>
</div>
<!-- News -->
<div class="col-lg-4 col-sm-6 nd-magazine">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-news.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/news.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-news.html" target="_blank">News/Magazine</a></h3>
<span>Blog, Magazine</span>
</div>
</div>
</div>
<!-- Cleaner -->
<div class="col-lg-4 col-sm-6 nd-business nd-creative">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-cleaner.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/cleaner.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-cleaner.html" target="_blank">Cleaner</a></h3>
<span>Business, Creative</span>
</div>
</div>
</div>
<!-- Beauty Kit -->
<div class="col-lg-4 col-sm-6 nd-landing nd-onepage nd-health">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-beauty-kit.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/beauty-kit.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-beauty-kit.html" target="_blank">Beauty Kit</a></h3>
<span>Health, Beauty, Landing</span>
</div>
</div>
</div>
<!-- Store -->
<div class="col-lg-4 col-sm-6 nd-ecommerce nd-clean">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-store.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/store.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-store.html" target="_blank">Store</a></h3>
<span>eCommerce, Listings</span>
</div>
</div>
</div>
<!-- Hostel -->
<div class="col-lg-4 col-sm-6 nd-creative nd-clean nd-travel">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-hostel.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/hostel.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-hostel.html" target="_blank">Hostel</a></h3>
<span>Travel, Clean, Landing</span>
</div>
</div>
</div>
<!-- Crowdfunding -->
<div class="col-lg-4 col-sm-6 nd-listings nd-health">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-crowdfunding.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/crowdfunding.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-crowdfunding.html" target="_blank">Crowd-Funding</a></h3>
<span>Listings</span>
</div>
</div>
</div>
<!-- Burger -->
<div class="col-lg-4 col-sm-6 nd-landing nd-onepage nd-creative nd-food">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-burger.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/burger.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-burger.html" target="_blank">Burger</a></h3>
<span>One-Page, Food</span>
</div>
</div>
</div>
<!-- Beauty -->
<div class="col-lg-4 col-sm-6 nd-portfolio nd-onepage nd-health">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-beauty.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/beauty.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-beauty.html" target="_blank">Beauty</a></h3>
<span>One-Page, Health</span>
</div>
</div>
</div>
<!-- Recipes -->
<div class="col-lg-4 col-sm-6 nd-creative nd-magazine nd-food">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-recipes.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/recipes.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-recipes.html" target="_blank">Recipes</a></h3>
<span>Magazine, Food</span>
</div>
</div>
</div>
<!-- Movers -->
<div class="col-lg-4 col-sm-6 nd-business nd-travel">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-movers.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/movers.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-movers.html" target="_blank">Movers</a></h3>
<span>Business, Travel</span>
</div>
</div>
</div>
<!-- Conference -->
<div class="col-lg-4 col-sm-6 nd-landing nd-onepage nd-creative nd-events">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-conference.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/conference.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-conference.html" target="_blank">Conference</a></h3>
<span>Landing, Events</span>
</div>
</div>
</div>
<!-- Non-Profit -->
<div class="col-lg-4 col-sm-6 nd-extras">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-nonprofit.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/nonprofit.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-nonprofit.html" target="_blank">Non-Profit</a></h3>
<span>Charity, Extras</span>
</div>
</div>
</div>
<!-- Article -->
<div class="col-lg-4 col-sm-6 nd-media nd-magazine">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-articles.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/article.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-articles.html" target="_blank">Articles</a></h3>
<span>Media, Blog</span>
</div>
</div>
</div>
<!-- Course -->
<div class="col-lg-4 col-sm-6 nd-extras">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-course.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/course.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-course.html" target="_blank">Course</a></h3>
<span>Education, Extras</span>
</div>
</div>
</div>
<!-- Bike -->
<div class="col-lg-4 col-sm-6 nd-landing nd-onepage nd-clean nd-travel">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-bike.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/bike.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-bike.html" target="_blank">Bike</a></h3>
<span>Landing, Travel</span>
</div>
</div>
</div>
<!-- Photographer -->
<div class="col-lg-4 col-sm-6 nd-portfolio nd-creative nd-resume nd-travel">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-photographer.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/photographer.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-photographer.html" target="_blank">Photographer</a></h3>
<span>Resume, Portfolio</span>
</div>
</div>
</div>
<!-- Headphones -->
<div class="col-lg-4 col-sm-6 nd-ecommerce">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-headphones.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/headphones.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-headphones.html" target="_blank">Headphones</a></h3>
<span>eCommerce</span>
</div>
</div>
</div>
<!-- Gym -->
<div class="col-lg-4 col-sm-6 nd-business nd-food nd-events nd-health">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-gym.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/gym.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-gym.html" target="_blank">Gym</a></h3>
<span>Business, Health</span>
</div>
</div>
</div>
<!-- Modern Blog -->
<div class="col-lg-4 col-sm-6 nd-media nd-creative nd-magazine">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-modern-blog.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/modern-blog.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-modern-blog.html" target="_blank">Modern Blog</a></h3>
<span>Creative, Blog</span>
</div>
</div>
</div>
<!-- Music -->
<div class="col-lg-4 col-sm-6 nd-media nd-travel">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-music.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/music.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-music.html" target="_blank">Music</a></h3>
<span>Media, Extras</span>
</div>
</div>
</div>
<!-- Business -->
<div class="col-lg-4 col-sm-6 nd-business">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-business.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/business.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-business.html" target="_blank">Business</a></h3>
<span>Corporate, Folio</span>
</div>
</div>
</div>
<!-- Car -->
<div class="col-lg-4 col-sm-6 nd-business nd-travel">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-car.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/car.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-car.html" target="_blank">Car</a></h3>
<span>Business, Travel</span>
</div>
</div>
</div>
<!-- Restaurant -->
<div class="col-lg-4 col-sm-6 nd-landing nd-creative nd-food">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-restaurant.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/restaurant.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-restaurant.html" target="_blank">Restaurant</a></h3>
<span>Creative, Food</span>
</div>
</div>
</div>
<!-- Barber -->
<div class="col-lg-4 col-sm-6 nd-business nd-landing nd-onepage nd-creative nd-health">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-barber.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/barber.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-barber.html" target="_blank">Barber</a></h3>
<span>Landing, Beauty</span>
</div>
</div>
</div>
<!-- eCommerce -->
<div class="col-lg-4 col-sm-6 nd-ecommerce">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-ecommerce.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/ecommerce.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-ecommerce.html" target="_blank">eCommerce</a></h3>
<span>Shop, Listings</span>
</div>
</div>
</div>
<!-- Pet -->
<div class="col-lg-4 col-sm-6 nd-creative">
<div class="portfolio-item p-2">
<div class="portfolio-image">
<a href="demo-pet.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/pet.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-pet.html" target="_blank">Pet</a></h3>
<span>Creative, Charity</span>
</div>
</div>
</div>
<!-- Resume -->
<div class="col-lg-4 col-sm-6 nd-portfolio nd-onepage nd-creative nd-resume">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-resume.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/resume.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-resume.html" target="_blank">Resume</a></h3>
<span>CV, Portfolio</span>
</div>
</div>
</div>
<!-- Photography -->
<div class="col-lg-4 col-sm-6 nd-portfolio nd-resume">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-photography.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/photography.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-photography.html" target="_blank">Photography</a></h3>
<span>Resume, Landing</span>
</div>
</div>
</div>
<!-- Interior Design -->
<div class="col-lg-4 col-sm-6 nd-business nd-clean">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-interior-design.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/interior-design.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-interior-design.html" target="_blank">Interior Design</a></h3>
<span>Business, Clean</span>
</div>
</div>
</div>
<!-- Writer -->
<div class="col-lg-4 col-sm-6 nd-portfolio nd-creative nd-resume">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-writer.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/writer.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-writer.html" target="_blank">Writer</a></h3>
<span>Creative, Portfolio</span>
</div>
</div>
</div>
<!-- Cafe -->
<div class="col-lg-4 col-sm-6 nd-landing nd-creative nd-food">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-cafe.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/cafe.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-cafe.html" target="_blank">Cafe</a></h3>
<span>Food, Landing</span>
</div>
</div>
</div>
<!-- Spa -->
<div class="col-lg-4 col-sm-6 nd-creative nd-health">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-spa.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/spa.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-spa.html" target="_blank">Spa</a></h3>
<span>Health, Clean</span>
</div>
</div>
</div>
<!-- Media Agency -->
<div class="col-lg-4 col-sm-6 nd-portfolio nd-landing nd-onepage nd-media nd-clean">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-media-agency.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/media-agency.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-media-agency.html" target="_blank">Media Agency</a></h3>
<span>Media, One-Page</span>
</div>
</div>
</div>
<!-- Agency -->
<div class="col-lg-4 col-sm-6 nd-portfolio nd-media">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<a href="demo-agency.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/agency.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-agency.html" target="_blank">Agency</a></h3>
<span>Portfolio</span>
</div>
</div>
</div>
<!-- xmas -->
<div class="col-lg-4 col-sm-6 nd-landing nd-creative nd-extras">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded snow">
<a href="demo-xmas.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/xmas.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3><a href="demo-xmas.html" target="_blank">xMas</a></h3>
<span>Creative, Extras</span>
</div>
</div>
</div>
<!-- more -->
<div class="col-lg-4 col-sm-6">
<div class="portfolio-item p-2">
<div class="portfolio-image shadow-lg rounded">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 121'%3E%3C/svg%3E" width="336" height="242" data-src="images/intro/niche/new/more.jpg" alt="Live Preview">
</div>
<div class="portfolio-desc center pt-4 pb-0">
<h3>Coming Soon!</h3>
<span>More Demos</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="section-homepage" class="section my-3 py-6">
<div class="container">
<div class="heading-block text-center border-bottom-0 text-center">
<h2 class="text-transform-none" style="font-size: 2rem; line-height: 1.2; letter-spacing: -1px;"><span>Home-Page</span> Demos</h2>
</div>
<div class="row g-4 gy-5">
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow rounded-3">
<a href="index-corporate.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage2.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-corporate.html" target="_blank">Corporate 1</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow rounded-3">
<a href="index-corporate-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage3.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-corporate-2.html" target="_blank">Corporate 2</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow rounded-3">
<a href="index-corporate-3.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage30.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-corporate-3.html" target="_blank">Corporate 3</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow rounded-3">
<a href="index-corporate-4.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage4.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-corporate-4.html" target="_blank">Corporate 4</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow rounded-3">
<a href="index-portfolio-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage5.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-portfolio-2.html" target="_blank">Portfolio 1</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-portfolio-3.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage6.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-portfolio-3.html" target="_blank">Portfolio 2</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-portfolio-4.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage7.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-portfolio-4.html" target="_blank">Portfolio 3</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-blog.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage8.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-blog.html" target="_blank">Home Blog</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-shop.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage9.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-shop.html" target="_blank">eCommerce 1</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-shop-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage10.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-shop-2.html" target="_blank">eCommerce 2</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-magazine-3.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage11.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-magazine-3.html" target="_blank">Magazine 1</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-magazine.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage12.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-magazine.html" target="_blank">Magazine 2</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-magazine-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage13.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-magazine-2.html" target="_blank">Magazine 3</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-onepage.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage18.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-onepage.html" target="_blank">OnePage Default</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-onepage-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage19.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-onepage-2.html" target="_blank">OnePage SubMenu</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-onepage-3.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage20.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-onepage-3.html" target="_blank">OnePage Dots Menu</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-wedding.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage21.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-wedding.html" target="_blank">Wedding</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-restaurant.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage22.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-restaurant.html" target="_blank">Restaurant</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-events.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage23.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-events.html" target="_blank">Events</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-parallax.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage24.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-parallax.html" target="_blank">Parallax</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-app-showcase.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage25.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-app-showcase.html" target="_blank">App Showcase</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="landing.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage14.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="landing.html" target="_blank">Landing 1</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="landing-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage15.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="landing-2.html" target="_blank">Landing 2</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="landing-4.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage16.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="landing-4.html" target="_blank">Landing 3</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="landing-5.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage17.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="landing-5.html" target="_blank">Landing 4</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="header-floating.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage26.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="header-floating.html" target="_blank">Floating Header</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="coming-soon-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage27.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="coming-soon-2.html" target="_blank">Coming Soon 1</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="coming-soon.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage28.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="coming-soon.html" target="_blank">Coming Soon 2</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-rtl.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage30.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-rtl.html" target="_blank">RTL</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="index-dark.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/multipage/homepage1.jpg" alt="Live Preview">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="index-dark.html" target="_blank">Dark</a></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="section-onepage" class="section bg-transparent my-3 py-6">
<div class="container">
<div class="heading-block text-center border-bottom-0 text-center">
<h2 class="text-transform-none" style="font-size: 2rem; line-height: 1.2; letter-spacing: -1px;"><span>One-Page</span> Demos</h2>
</div>
<div class="row g-4 gy-5">
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-index.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage1.jpg" alt="Default">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-index.html" target="_blank">Default</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-designer.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/designer.jpg" alt="Designer">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-designer.html" target="_blank">Designer</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-parallax.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/parallax.jpg" alt="Parallax">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-parallax.html" target="_blank">Parallax</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-tourism.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/tourism.jpg" alt="Tourism">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-tourism.html" target="_blank">Tourism</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-developer.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/developer.jpg" alt="Developer">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-developer.html" target="_blank">Developer</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-pet.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/pet.jpg" alt="Pet">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-pet.html" target="_blank">Pet</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-yoga.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/yoga.jpg" alt="Yoga">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-yoga.html" target="_blank">Yoga</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-portrait.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/portrait.jpg" alt="Portrait">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-portrait.html" target="_blank">Portrait</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-articles.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/articles.jpg" alt="Articles">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-articles.html" target="_blank">Articles</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-plan-subscription.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/plan-subscription.jpg" alt="Plan Subscription">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-plan-subscription.html" target="_blank">Plan Subscription</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-interior.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/interior.jpg" alt="Interior">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-interior.html" target="_blank">Interior</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-watch.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/watch.jpg" alt="Watch">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-watch.html" target="_blank">Watch</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-subscription-section.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/subscription.jpg" alt="Subscription Section">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-subscription-section.html" target="_blank">Subscription Section</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-apartment.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/apartment.jpg" alt="Apartment">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-apartment.html" target="_blank">Apartment</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-outdoors.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/outdoors.jpg" alt="Outdoors">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-outdoors.html" target="_blank">Outdoors</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-frame.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/frame.jpg" alt="Frame">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-frame.html" target="_blank">Frame</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-holiday.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage42.jpg" alt="Holiday">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-holiday.html" target="_blank">Holiday</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-personal.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage44.jpg" alt="Personal">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-personal.html" target="_blank">Personal</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-carousel.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage43.jpg" alt="Services">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-carousel.html" target="_blank">Services</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-pricing.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage45.jpg" alt="Pricing">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-pricing.html" target="_blank">Pricing</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-subscription.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage31.jpg" alt="Simple Subscription">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-subscription.html" target="_blank">Subscription Page</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-register.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage32.jpg" alt="Register Form">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-register.html" target="_blank">Register Form</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-register-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage33.jpg" alt="Register Form 2">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-register-2.html" target="_blank">Register Form 2</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-device.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage34.jpg" alt="Landing Page">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-device.html" target="_blank">Landing Page</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-browser.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage35.jpg" alt="Browser Slide">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-browser.html" target="_blank">Browser Slide</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-register-testimonials.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage36.jpg" alt="Testimonials Register Form">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-register-testimonials.html" target="_blank">Testimonials Form</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-event.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage37.jpg" alt="Event Slider">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-event.html" target="_blank">Event Slide</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-video-event-form.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage38.jpg" alt="Video Event">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-video-event-form.html" target="_blank">Video Event</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-chart.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage39.jpg" alt="Chart">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-chart.html" target="_blank">Chart Slide</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-section-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage40.jpg" alt="Slider Section">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-section-2.html" target="_blank">Slider Section</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-section.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage41.jpg" alt="Text Rotator Section">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="one-page/index-section.html" target="_blank">Text Rotator Section</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="one-page/index-dark.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage2.jpg" alt="Dark Scheme">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="one-page/index-dark.html" target="_blank">Dark Scheme</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-big-text.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage3.jpg" alt="Big Text Slider">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-big-text.html" target="_blank">Big Text Slider</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-canvas-slider.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage4.jpg" alt="Canvas Slider">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-canvas-slider.html" target="_blank">Canvas Slider</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-canvas-fade-slider.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage5.jpg" alt="Canvas Fade Slider">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-canvas-fade-slider.html" target="_blank">Canvas Fade Slider</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-video-event.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage28.jpg" alt="HTML5 Video Play Event">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-video-event.html" target="_blank">HTML5 Video Play Event</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-counter.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage7.jpg" alt="Hero Counter">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-counter.html" target="_blank">Hero Counter</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-counter-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage6.jpg" alt="Hero Counter 2">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-counter-2.html" target="_blank">Hero Counter 2</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-dots.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage8.jpg" alt="Dots Menu">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-dots.html" target="_blank">Dots Menu</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-html5-video-dark.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage9.jpg" alt="HTML5 Video Dark">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-html5-video-dark.html" target="_blank">HTML5 Video Dark</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-html5-video-light.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage10.jpg" alt="HTML5 Video Light">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-html5-video-light.html" target="_blank">HTML5 Video Light</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-image-grid-video-lightbox.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage11.jpg" alt="Split Grid Video Lightbox">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-image-grid-video-lightbox.html" target="_blank">Split Grid Video Lightbox</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-lightbox-video.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage12.jpg" alt="Video Lightbox Button">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-lightbox-video.html" target="_blank">Video Lightbox Button</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-owl-slider-video.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage13.jpg" alt="Video Carousel">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-owl-slider-video.html" target="_blank">Video Carousel</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-owl-slider.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage14.jpg" alt="Image Carousel">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-owl-slider.html" target="_blank">Image Carousel</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-parallax-dark-image-full.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage15.jpg" alt="Fullscreen Parallax Dark">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-parallax-dark-image-full.html" target="_blank">Fullscreen Parallax Dark</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-parallax-dark-image-fullwidth.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage16.jpg" alt="Fullwidth Parallax Dark">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-parallax-dark-image-fullwidth.html" target="_blank">Fullwidth Parallax Dark</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-parallax-light-image-full.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage17.jpg" alt="Fullscreen Parallax Light">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-parallax-dark-image-full.html" target="_blank">Fullscreen Parallax Light</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-parallax-light-image-fullwidth.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage18.jpg" alt="Fullwidth Parallax Light">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-parallax-light-image-fullwidth.html" target="_blank">Fullwidth Parallax Light</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-portfolio.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage20.jpg" alt="Portfolio Agency">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-portfolio.html" target="_blank">Portfolio Agency</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-portfolio-side-header.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage19.jpg" alt="Portfolio Side Header">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-portfolio-side-header.html" target="_blank">Portfolio Side Header</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-revolution-fullscreen.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage21.jpg" alt="Fullscreen Revolution">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-revolution-fullscreen.html" target="_blank">Fullscreen Revolution</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-revolution-fullwidth.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage22.jpg" alt="Fullwidth Revolution">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-revolution-fullwidth.html" target="_blank">Fullwidth Revolution</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-side-header.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage23.jpg" alt="Side Header Menu">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-side-header.html" target="_blank">Side Header Menu</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-tr-blank-dark.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage24.jpg" alt="Text Rotator Dark">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-tr-blank-dark.html" target="_blank">Text Rotator Dark</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-tr-blank.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage25.jpg" alt="Text Rotator Light">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-tr-blank.html" target="_blank">Text Rotator Light</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-tr-image-dark.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage26.jpg" alt="Text Rotator Image Dark">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-tr-image-dark.html" target="_blank">Text Rotator Image Dark</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-tr-image-light.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage27.jpg" alt="Text Rotator Image Light">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-tr-image-light.html" target="_blank">Text Rotator Image Light</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-video-grid-2.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage29.jpg" alt="Video Grid Hover Play">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-video-grid-2.html" target="_blank">Video Grid Hover Play</a></h3>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="portfolio-item">
<div class="portfolio-image shadow-lg rounded-3">
<a href="op-video-grid.html" target="_blank">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 135 86'%3E%3C/svg%3E" width="270" height="172" data-src="images/intro/onepage/homepage30.jpg" alt="Video Grid 2 Hover Play">
</a>
</div>
<div class="portfolio-desc text-center pb-0">
<h3><a href="op-video-grid.html" target="_blank">Video Grid 2 Hover Play</a></h3>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="section-features" class="section my-3 py-6">
<div class="shape-divider" data-shape="wave" data-height="36"></div>
<div class="shape-divider" data-shape="wave" data-position="bottom" data-height="36"></div>
<div class="container">
<div class="text-center mb-5 pb-3">
<h2 class="fs-1 mb-1 fw-semibold">Core Features</h2>
<span class="fs-5 fw-light">Features that make <strong class="color">Canvas</strong> stand out from the Crowd</span>
</div>
<div class="row justify-content-center align-items-stretch g-4 mb-5">
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="grid-inner bg-contrast-0 border border-default p-5 rounded-6 h-100 d-flex flex-column all-ts h-shadow-sm h-translate-y" data-class="dark:bg-contrast-100">
<div class="d-flex fs-1 color mb-3">
<i class="bi-magic"></i>
</div>
<h3 class="fs-5 mb-2">170+ Main Demos</h3>
<p class="mb-4 fw-light">Beautiful Category Specific Prebuilt Websites with distinct features and layouts.</p>
<span class="mt-auto">
<a href="#section-niche" data-scrollto="#section-niche" class="more-link px-0">Browse Demos</a>
</span>
<div class="bg-icon bi-layout-wtf color" style="opacity:0.05;bottom:-85px;right:-70px;z-index:-1"></div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="grid-inner bg-contrast-0 border border-default p-5 rounded-6 h-100 d-flex flex-column all-ts h-shadow-sm h-translate-y" data-class="dark:bg-contrast-100">
<div class="d-flex fs-1 color mb-3">
<i class="bi-palette"></i>
</div>
<h3 class="fs-5 mb-2">Super Customizable</h3>
<p class="mb-4 fw-light">Your Website any way with powerful features like SCSS & CSS Variables included.</p>
<span class="mt-auto">
<a href="#cnvs-style-switcher" data-bs-toggle="offcanvas" data-bs-target="#cnvs-style-switcher" aria-controls="cnvs-style-switcher" class="more-link px-0">Use Customizer</a>
</span>
<div class="bg-icon bi-gear color" style="opacity:0.05;bottom:-85px;right:-70px;z-index:-1"></div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="grid-inner bg-contrast-0 border border-default p-5 rounded-6 h-100 d-flex flex-column all-ts h-shadow-sm h-translate-y" data-class="dark:bg-contrast-100">
<div class="d-flex fs-1 color mb-3">
<i class="bi-ui-checks"></i>
</div>
<h3 class="fs-5 mb-2">Powerful Forms</h3>
<p class="mb-4 fw-light">Dyncamic Forms Processor with SPAM Protection, Auto-Responders & reCaptcha.</p>
<span class="mt-auto">
<a href="#section-forms" data-scrollto="#section-forms" class="more-link px-0" data-offset="100">Explore Forms</a>
</span>
<div class="bg-icon bi-shield-check color" style="opacity:0.05;bottom:-85px;right:-70px;z-index:-1"></div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="grid-inner bg-contrast-0 border border-default p-5 rounded-6 h-100 d-flex flex-column all-ts h-shadow-sm h-translate-y" data-class="dark:bg-contrast-100">
<div class="d-flex fs-1 color mb-3">
<i class="bi-speedometer"></i>
</div>
<h3 class="fs-5 mb-2">Ultra High Performance</h3>
<p class="mb-4 fw-light">Canvas has been optimized to deliver your Websites quickly to your Visitors.</p>
<span class="mt-auto">
<a href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fcanvastemplate.com&form_factor=desktop" target="_blank" class="more-link px-0">Get Live Score</a>
</span>
<div class="bg-icon bi-wind color" style="opacity:0.05;bottom:-85px;right:-70px;z-index:-1"></div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="grid-inner bg-contrast-0 border border-default p-5 rounded-6 h-100 d-flex flex-column all-ts h-shadow-sm h-translate-y" data-class="dark:bg-contrast-100">
<div class="d-flex fs-1 color mb-3">
<i class="bi-lightbulb"></i>
<i class="bi-view-stacked ms-3"></i>
</div>
<h3 class="fs-5 mb-2">Tons of Elements</h3>
<p class="mb-4 fw-light">80+ Elements & 2000+ UI Features included to create an Attractive Website.</p>
<span class="mt-auto">
<a href="#section-shortcodes" data-scrollto="#section-shortcodes" class="more-link px-0" data-offset="-60">Browse All Elements</a>
</span>
<div class="bg-icon bi-lightbulb color" style="opacity:0.05;bottom:-85px;right:-70px;z-index:-1"></div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="grid-inner bg-contrast-0 border border-default p-5 rounded-6 h-100 d-flex flex-column all-ts h-shadow-sm h-translate-y" data-class="dark:bg-contrast-100">
<div class="d-flex fs-1 color mb-3">
<i class="bi-phone"></i>
<i class="bi-display ms-3"></i>
</div>
<h3 class="fs-5 mb-2">Custom Breakpoints</h3>
<p class="mb-4 fw-light">Flexible Custom Breakpoints for Responsive Menus in just One Line of Code.</p>
<span class="mt-auto">
<a href="https://docs.semicolonweb.com/docs/header/mobile-menus/" target="_blank" class="more-link px-0">Read Documentation</a>
</span>
<div class="bg-icon bi-phone color" style="opacity:0.05;bottom:-85px;right:-70px;z-index:-1"></div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="grid-inner bg-contrast-0 border border-default p-5 rounded-6 h-100 d-flex flex-column all-ts h-shadow-sm h-translate-y" data-class="dark:bg-contrast-100">
<div class="d-flex fs-1 color mb-3">
<i class="bi-circle-half"></i>
<i class="bi-toggle-off ms-3"></i>
</div>
<h3 class="fs-5 mb-2">Dark Mode</h3>
<p class="mb-4 fw-light">Canvas supports dynamic & Nested Dark Modes on any Element or Sections.</p>
<span class="mt-auto">
<a href="#" class="more-link body-scheme-toggle" data-bodyclass-toggle="dark">Enable Dark Mode</a>
</span>
<div class="bg-icon bi-circle-half color" style="opacity:0.05;bottom:-85px;right:-70px;z-index:-1"></div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="grid-inner bg-contrast-0 border border-default p-5 rounded-6 h-100 d-flex flex-column all-ts h-shadow-sm h-translate-y" data-class="dark:bg-contrast-100">
<div class="d-flex fs-1 color mb-3">
<i class="bi-translate"></i>
</div>
<h3 class="fs-5 mb-2">RTL Compatibility</h3>
<p class="mb-4 fw-light">Canvas is fully Compatible with RTL Languages & Styles for RTL Layouts are included.</p>
<span class="mt-auto">
<a href="http://support.semicolonweb.com/forums/forum/canvas-html/" target="_blank" class="more-link px-0">Check RTL Layout</a>
</span>
<div class="bg-icon bi-translate color" style="opacity:0.05;bottom:-85px;right:-70px;z-index:-1"></div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="grid-inner bg-contrast-0 border border-default p-5 rounded-6 h-100 d-flex flex-column all-ts h-shadow-sm h-translate-y" data-class="dark:bg-contrast-100">
<div class="d-flex fs-1 color mb-3">
<i class="fa-brands fa-node"></i>
<i class="fa-brands fa-gulp ms-3"></i>
</div>
<h3 class="fs-5 mb-2">Gulp & NodeJS</h3>
<p class="mb-4 fw-light">Get Production Ready with Gulp & NodeJS Workflow and Optimize Everything.</p>
<span class="mt-auto">
<a href="http://support.semicolonweb.com/forums/forum/canvas-html/" target="_blank" class="more-link px-0">Start with Gulp.js</a>
</span>
<div class="bg-icon fa-brands fa-sass color" style="opacity:0.05;bottom:-85px;right:-70px;z-index:-1"></div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="grid-inner bg-contrast-0 border border-default p-5 rounded-6 h-100 d-flex flex-column all-ts h-shadow-sm h-translate-y" data-class="dark:bg-contrast-100">
<div class="d-flex fs-1 color mb-3">
<i class="bi-stars"></i>
<span class="d-inline-block ms-1">5.0</span>
</div>
<h3 class="fs-5 mb-2">5-Star Reviews</h3>
<p class="mb-4 fw-light">Highly Rated by Our Customers who find Canvas easy-to-use & customize.</p>
<span class="mt-auto">
<a href="#section-testimonials" data-scrollto="#section-testimonials" class="more-link px-0">Read Reviews</a>
</span>
<div class="bg-icon bi-stars color" style="opacity:0.05;bottom:-85px;right:-70px;z-index:-1"></div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="grid-inner bg-contrast-0 border border-default p-5 rounded-6 h-100 d-flex flex-column all-ts h-shadow-sm h-translate-y" data-class="dark:bg-contrast-100">
<div class="d-flex fs-1 color mb-3">
<i class="bi-hand-thumbs-up"></i>
<i class="bi-emoji-smile ms-3"></i>
</div>
<h3 class="fs-5 mb-2">Stellar Support</h3>
<p class="mb-4 fw-light">Our Support Team has got you covered, 12000+ Support Tickets/Comments resolved.</p>
<span class="mt-auto">
<a href="http://support.semicolonweb.com/forums/forum/canvas-html/" target="_blank" class="more-link px-0">Get Support</a>
</span>
<div class="bg-icon bi-emoji-smile color" style="opacity:0.05;bottom:-85px;right:-70px;z-index:-1"></div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<div class="grid-inner bg-contrast-0 border border-default p-5 rounded-6 h-100 d-flex flex-column all-ts h-shadow-sm h-translate-y" data-class="dark:bg-contrast-100">
<div class="d-flex fs-1 color mb-3">
<i class="bi-clock-history"></i>
<span class="d-inline-block ms-3">8+</span>
</div>
<h3 class="fs-5 mb-2">Lifetime Free Updates</h3>
<p class="mb-4 fw-light">Canvas has been evolving since almost 9 Years & is the #1 Template on the Market.</p>
<span class="mt-auto">
<a href="https://docs.semicolonweb.com/docs-group/changelog/" target="_blank" class="more-link px-0">Check Changelogs</a>
</span>
<div class="bg-icon bi-clock-history color" style="opacity:0.05;bottom:-85px;right:-70px;z-index:-1"></div>
</div>
</div>
</div>
</div>
</div>
<div id="section-blocks" class="section page-section bg-transparent my-0" style="padding: 100px 0;">
<div class="container">
<div class="heading-block text-center border-bottom-0 mw-xs mx-auto">
<h2 class="text-transform-none mb-4 text-dark" style="font-size: calc( 1.75rem + 1.7vw ); letter-spacing: -1px;">Blocks</h2>
<p class="lead mb-5 text-dark">Get Started with Canvas quickly using the premade Section Blocks. Just Copy, Paste and Assemble.</p>
</div>
<div class="d-xl-flex justify-content-xl-start position-relative section-blocks-imgs">
<img width="840" height="530" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 53'%3E%3C/svg%3E" data-src="images/intro/blocks/1.png" alt="Image" class="lazy rounded" data-animate="fadeInLeft">
<img width="472" height="307" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 472 307'%3E%3C/svg%3E" data-src="images/intro/blocks/2.png" alt="Image" class="lazy position-absolute" data-animate="fadeInUp" data-delay="500">
</div>
<div class="row justify-content-center col-mb-50 gutter-50 mt-6 mw-md mx-auto dark pt-4">
<div class="col-6 col-lg-4 text-center px-lg-5">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="#FFFFFF" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><rect x="48" y="48" width="64" height="64" opacity="0.2"></rect><rect x="144" y="48" width="64" height="64" opacity="0.2"></rect><rect x="48" y="144" width="64" height="64" opacity="0.2"></rect><rect x="144" y="144" width="64" height="64" opacity="0.2"></rect><rect x="144" y="144" width="64" height="64" stroke-width="16" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><rect x="48" y="48" width="64" height="64" stroke-width="16" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><rect x="144" y="48" width="64" height="64" stroke-width="16" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><rect x="48" y="144" width="64" height="64" stroke-width="16" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect></svg>
<h4 class="my-3">Many Options</h4>
<p class="fw-normal op-06">Includes 200+ Pre-built Blocks across categories.</p>
</div>
<div class="col-6 col-lg-4 text-center px-lg-5">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="#FFFFFF" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><rect x="39.98633" y="71.99512" width="144.00586" height="144" opacity="0.2"></rect><polyline points="215.993 183.995 215.993 39.994 71.986 39.994" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><rect x="39.98633" y="71.99512" width="144.00586" height="144" stroke-width="16" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect></svg>
<h4 class="my-3">Easy Setup</h4>
<p class="fw-normal op-06">Just Copy, Paste & Assemble on any Template or Section.</p>
</div>
<div class="col-6 col-lg-4 text-center px-lg-5">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" fill="#FFFFFF" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M63.99986,216a8,8,0,0,1-8-8.00009l.00053-42.69468a28,28,0,1,1,0-50.61044L55.99988,72.0001A8,8,0,0,1,64,64l46.69456.00053a27.99993,27.99993,0,1,1,50.61031,0L207.99939,64a8,8,0,0,1,8.00007,7.9999L216,114.69478a28,28,0,1,0,0,50.61044l-.00053,42.69487a8,8,0,0,1-8,7.9999Z" opacity="0.2"></path><path d="M63.99986,216a8,8,0,0,1-8-8.00009l.00053-42.69468a28,28,0,1,1,0-50.61044L55.99988,72.0001A8,8,0,0,1,64,64l46.69456.00053a27.99993,27.99993,0,1,1,50.61031,0L207.99939,64a8,8,0,0,1,8.00007,7.9999L216,114.69478a28,28,0,1,0,0,50.61044l-.00053,42.69487a8,8,0,0,1-8,7.9999Z" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg>
<h4 class="my-3">Customizable</h4>
<p class="fw-normal op-06">Easily modify the Blocks or extend it further.</p>
</div>
</div>
<div class="text-center">
<a href="blocks.html" target="_blank" class="button button-white button-light button-large mt-5">Explore Now</a>
</div>
</div>
</div>
<div class="row align-items-stretch">
<div class="col-lg-3 col-md-6 text-center col-padding" style="background-color:rgba(var(--cnvs-contrast-rgb),0.15);">
<div>
<i class="i-plain i-xlarge mx-auto mb-3 bi-images"></i>
<div class="counter"><span data-from="10" data-to="170" data-refresh-interval="50" data-speed="2000"></span>+</div>
<h5>Portfolio Layouts</h5>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center col-padding" style="background-color:rgba(var(--cnvs-contrast-rgb),0.12);">
<div>
<i class="i-plain i-xlarge mx-auto mb-3 bi-pencil"></i>
<div class="counter"><span data-from="10" data-to="50" data-refresh-interval="50" data-speed="2500"></span>+</div>
<h5>Blog Templates</h5>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center col-padding" style="background-color:rgba(var(--cnvs-contrast-rgb),0.09);">
<div>
<i class="i-plain i-xlarge mx-auto mb-3 bi-puzzle"></i>
<div class="counter"><span data-from="10" data-to="70" data-refresh-interval="25" data-speed="3000"></span>+</div>
<h5>Shortcodes</h5>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center col-padding" style="background-color:rgba(var(--cnvs-contrast-rgb),0.06);">
<div>
<i class="i-plain i-xlarge mx-auto mb-3 bi-file-earmark-richtext"></i>
<div class="counter"><span data-from="10" data-to="100" data-refresh-interval="30" data-speed="2700"></span>+</div>
<h5>PSD Files</h5>
</div>
</div>
</div>
<div class="section dark my-0">
<div class="container">
<div class="heading-block text-center border-bottom-0 mb-0">
<h3 class="fw-medium text-transform-none" style="font-size: 32px;"><span class="fw-bold nocolor">1350+</span> Templates to minimize your Development Time!</h3>
</div>
</div>
</div>
<div id="section-forms" class="section page-section bg-transparent my-0">
<div class="container">
<div class="heading-block text-center border-bottom-0">
<h2 class="text-transform-none" style="font-size: 36px; line-height: 1.2; letter-spacing: -1px;">Canvas <span>Forms</span></h2>
<span>The Ultimate Form Processor</span>
</div>
<video class="mx-auto my-6 d-block mw-100 lazy" data-poster="images/intro/new/canvas-forms-processor-poster.jpg" preload="auto" loop autoplay muted style="width: 720px;">
<source data-src='images/intro/new/canvas-forms-processor.mp4' type='video/mp4'>
</video>
<div class="row">
<div class="col-lg-4 px-4 py-3">
<i class="fa-brands fa-wpforms color ms-0 mb-4 i-xlarge i-plain d-block float-none"></i>
<h4 class="mb-2">Any Form<span>.</span> Any Field<span>.</span></h4>
<p class="text-muted">Add any Field to your Custom Form. Canvas's inbuilt Forms Processor will handle the rest. You will never have to touch any PHP Codes.</p>
</div>
<div class="col-lg-4 px-4 py-3">
<i class="fa-solid fa-infinity color ms-0 mb-4 i-xlarge i-plain d-block float-none"></i>
<h4 class="mb-2">Unlimited Customizations</h4>
<p class="text-muted">Customize anything within the Form, the Fields, the Loaders or the Messages. You now have complete control over what you want to display.</p>
</div>
<div class="col-lg-4 px-4 py-3">
<i class="bi-envelope-fill color ms-0 mb-4 i-xlarge i-plain d-block float-none"></i>
<h4 class="mb-2">Email Templates</h4>
<p class="text-muted">For the First Time ever, Canvas supports Email Templates which makes your Form Responses super easy to read and organize.</p>
</div>
<div class="col-lg-4 px-4 py-3">
<i class="fa-solid fa-user-shield color ms-0 mb-4 i-xlarge i-plain d-block float-none"></i>
<h4 class="mb-2">reCaptcha & Bot Protection</h4>
<p class="text-muted">All the Forms are supported by Bot Protection and Optional reCaptcha Protection on top of the very secure PHPMailer Engine.</p>
</div>
<div class="col-lg-4 px-4 py-3">
<i class="fa-solid fa-plug-circle-plus color ms-0 mb-4 i-xlarge i-plain d-block float-none"></i>
<h4 class="mb-2">Component Support</h4>
<p class="text-muted">All the Components included now works with Canvas Forms. Datepicker, Range Slider, File Uploads etc. all just work fine.</p>
</div>
<div class="col-lg-4 px-4 py-3">
<i class="fa-solid fa-envelopes-bulk color ms-0 mb-4 i-xlarge i-plain d-block float-none"></i>
<h4 class="mb-2">Auto-Responder & Personalization</h4>
<p class="text-muted">Send Auto-Responders to your Form Submitters with Automatic Personalization. Like "<em>Hey <strong>John</strong>, Thanks for your Message!</em>".</p>
</div>
</div>
<div class="text-center my-5">
<a href="forms.html" target="_blank" class="button button-rounded button-dark button-xlarge">Explore Forms</a>
</div>
</div>
</div>
<div id="section-shortcodes" class="overflow-hidden page-section w-100">
<div class="section py-5 m-0 bg-color text-center">
<h2 class="mb-0 text-white">Shortcodes & Components</h2>
</div>
<div class="container py-6">
<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="section m-0 bg-dark text-center">
<h2 class="mb-0 text-light fw-medium">With more than <span class="fw-bold nocolor">2000+</span> UI Features included</h2>
</div>
</div>
<div id="section-p-generator" class="section page-section my-0 py-6" style="background-color: rgba(74,117,214,0.06);">
<div class="container text-center">
<p class="titular-sub-title ls-2 color text-opacity-75 fw-normal mb-2">We know the value of Your Time</p>
<h2 class="text-transform-none fw-bold" style="font-size: 42px; line-height: 1.2; letter-spacing: -1px;">Package <span>Generator</span><small class="rounded-2 bg-contrast-200 ms-2 fw-medium ls-0 color" style="font-size: 11px; vertical-align: top; padding: 1px 6px;">Beta</small></h2>
<div class="row justify-content-center">
<div class="col-lg-6">
<p class="">Create a Custom Package by only selecting the Files you need for your Project. This will help you get started super-quickly without needing to Browse through the Huge Package we provide by default and then sort the Files you need manually.</p>
<a href="http://docs.semicolonweb.com/docs/getting-started/installation/" class="button button-large button-light bg-white color rounded text-transform-none fw-semibold ls-0 shadow-sm">View In Documentation</a>
</div>
<div class="w-100"></div>
<div class="col-lg-7 p-generator-video">
<video class="mt-5 mb-4 shadow rounded-3 position-relative d-block mw-100 lazy" preload="auto" loop autoplay muted>
<source data-src='images/intro/new/p-generator.mp4' type='video/mp4'>
</video>
</div>
</div>
</div>
</div>
<div id="section-hero" class="section parallax page-section m-0 not-dark" style="padding: 150px 0;">
<img data-src="images/intro/new/rev-intro.jpg" class="parallax-bg lazy">
<div class="container">
<div class="row">
<div class="col-lg-5 offset-lg-7 col-md-10">
<div class="emphasis-title">
<span class="before-heading fs-4" style="font-size: 24px;"><em>Get Started with</em></span>
<h2 class="text-capitalize fw-semibold display-6">140+ Revolution Hero Templates.</h2>
</div>
<a href="rs-demos.html" target="_blank" class="button rounded-pill button-border button-large button-black button-fill m-0 text-end"><span>Browse Now <i class="bi-arrow-right"></i></span></a>
</div>
</div>
</div>
<div class="video-wrap d-xl-none d-lg-none">
<div class="video-overlay" style="background: rgba(255,255,255,0.9);"></div>
</div>
<div class="shape-divider" data-shape="wave-4" data-position="bottom" data-height="150"></div>
</div>
<div id="section-testimonials" class="section page-section bg-transparent">
<div class="container">
<div class="heading-block mb-5 text-center border-bottom-0">
<h2 class="text-transform-none" style="font-size: 40px; line-height: 1.2; letter-spacing: -1px;">Customer <span>Ratings</span> <span class="nocolor" style="font-family: 'Playfair Display', serif !important;">&</span> <span>Reviews</span></h2>
</div>
<style>
.user-testimonials .card {
border-color: var(--bs-gray-200);
}
.user-testimonials .card-body {
padding: 2rem;
}
</style>
<div class="row grid-container user-testimonials col-mb-30 mb-5">
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">Great website template!!! Does anything you need!</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">KennethLeoHodges</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">It's an amazing collection of templates to build website faster than ever. Clear and simple to use!</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">Karsp</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">Code quality also customer support five stars ! A real help that gets us out of isolation. This is the advantage of pro developers who do the job with passion. Thank you!</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">DcRod</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">Best buy so far. The designs are very SEO friendly and neat</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">Jeloblis</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">This is a very flexible product, and the ability to choose pieces from different templates to build a whole new creation with minimal fixes is incredible.</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">jokele</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">If I could select more than on main reason for 5 stars i would have. These cats have thought of everything just about. Plus they are good people. Buy this template. You wont regret it.</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">jqualey</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">Great support, great documentation and you guys done a fantastic job in commenting everything, makes it very easy to customize, so thank you.</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">SmileyDot</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">I wish that I could choose more than one reason for my 5-star rating! The Design is great, the features are fantastic, the documentation top-notch, and from what I've read in the support forum the customer support is great. This is a great template.</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">georgewhoffman</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">Excellent Template really versatile and well documented. Makes anyone look like a design professional.</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">georgeuser077</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">This is the most robust template I've ever worked with. So much can be done with this multi-purpose package. Regular updates and enhancements add tremendous value.</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">rmandaro</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">I've been using Canvas for months now and it has exceeded my expectations. Their support has been great too.</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">kwelch2</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">I like Canvas because of all the features and their variations, such as the Portfolio. I can do so many different things with this theme, and I am already using it for my fourth website.</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">vanhove</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">It has almost everything. Have a feature in mind? Just search for it in this theme, you will definitely find it. Amazing support as well.</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">varunD</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">Great customer support. It is amazing to be on top of these many comments and they are doing it very well. It is a great addon on top of their amazing template. Thank you.</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">PrintAndWeb</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">WOW! Unbelievable amount of features. Extremely well documented. SUPER easy to customize... there's just so much to say... it's awesome!!!!!!!</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">ktpher</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">It is very convenient that i can make a lot of pages from my site with uniform design. Code perfectly described in the documentation. Excellent professional and modern design.</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">MoshkovEV</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">The template is very useful if you want to work on Prototyping of any project before you start!!</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">creintech</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">Great Design, Features and Latest Update is Fantastic!</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">pauldowling</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">Fast response, whole lot of features, updates are always there. Keep up the good work! Really glad I bought it.</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">gunpla</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">This template lives up to its name, truly a 'Canvas' for your ideas. The versatility and design are truly exceptional, not to mention the great Support SemiColonWeb provides on its comments section. Keep up the great work!</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">ModularCollective</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card shadow-sm overflow-hidden">
<div class="card-body">
<p class="text-medium mb-4 font-secondary text-muted">This is excellent! A most amazing suite of fully customisable options which at times almost presents too much choice! Ace!</p>
<div class="d-flex mt-2 align-items-center justify-content-between">
<h5 class="fs-6 mb-0 op-08">jcarlisle1966</h5>
<div class="testimonials-rating">
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
<i class="bi-star-fill"></i>
</div>
</div>
</div>
<div class="bg-icon bi-star-fill op-03"></div>
</div>
</div>
</div>
<div class="text-center">
<a href="https://themeforest.net/item/canvas-the-multipurpose-html5-template/reviews/9228123?utf8=%E2%9C%93&reviews_controls%5Bsort%5D=ratings_descending" target="_blank" class="btn btn-lg btn-secondary">Check More Reviews</a>
</div>
</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" 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">
<!-- Copyrights
============================================= -->
<div id="copyrights">
<div class="container text-center">
<p class="mb-1">Copyrights © 2023 All Rights Reserved by SemiColonWeb</p>
<div class="copyright-links"><a href="https://1.envato.market/c/1309643/480739/4415?u=http%3A%2F%2Fthemeforest.net%2Fuser%2Fsemicolonweb%2Fportfolio" target="_blank">Portfolio</a> / <a href="http://support.semicolonweb.com" target="_blank">Support</a></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>
<script>
window.addEventListener( 'pluginIsotopeReady', () => {
document.querySelector('.custom-filter').querySelectorAll('li:not(.custom-filter-reset)').forEach( el => {
var elementFilter = el.querySelector('[data-filter]').getAttribute('data-filter'),
elementFilterContainer = el.closest('.custom-filter').getAttribute('data-container');
elementFilterCount = Number( document.querySelector(elementFilterContainer).querySelectorAll(elementFilter).length );
if( el.querySelector('span') ) {
el.querySelector('span').innerText = elementFilterCount;
}
});
});
window.addEventListener( 'pluginSwiperReady', () => {
let introSwiper = new Swiper('.swiper-container', {
spaceBetween: 20,
centeredSlides: false,
autoHeight: true,
speed: 3300,
loop: true,
autoplay: {
delay: 1,
disableOnInteraction: true,
},
allowTouchMove: false,
breakpoints: {
1: {
slidesPerView: 2
},
576: {
slidesPerView: 3
},
768: {
slidesPerView: 4
},
992: {
slidesPerView: 6
}
}
});
window.addEventListener('scroll', () => {
if( document.querySelector('.slider-inner').classList.contains('is-in-viewport') ) {
if( !introSwiper.el.classList.contains('intro-swiper-resumed') ) {
introSwiper.autoplay.resume();
introSwiper.el.classList.remove('intro-swiper-paused');
introSwiper.el.classList.add('intro-swiper-resumed');
}
} else {
if( !introSwiper.el.classList.contains('intro-swiper-paused') ) {
introSwiper.autoplay.pause();
introSwiper.el.classList.remove('intro-swiper-resumed');
introSwiper.el.classList.add('intro-swiper-paused');
}
}
}, {passive: true});
});
</script>
</body>
</html>