Sandbox Multilevel Main Menu
https://themeforest.net/item/sandbox-modern-multipurpose-bootstrap-5-template/32441701
user_1359869
html
a year ago
83 kB
33
Indexable
Never
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
<meta name="author" content="elemis">
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
<link rel="shortcut icon" href="./assets/img/favicon.png">
<link rel="stylesheet" href="./assets/css/plugins.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/colors/grape.css">
<link rel="preload" href="./assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
</head>
<body class="bg-soft-primary">
<div class="content-wrapper">
<header class="position-absolute w-100">
<div class="gradient-5 text-white fw-bold fs-15 mb-2 position-relative" style="z-index: 1;">
<div class="container py-2 text-center">
<p class="mb-0">✨ Wordpress version of Sandbox is released! Grab a copy <a href="https://1.envato.market/0Jg6NN" class="link-white hover d-inline-flex align-items-center" target="_blank">here <i class="uil uil-arrow-up-right"></i></a></p>
</div>
<!-- /.container -->
</div>
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo-dark.png" srcset="./assets/img/logo-dark@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<ul class="navbar-nav">
<!-- Start -->
<li class="nav-item dropdown parent-link">
<a class="nav-link"
href="https://google.com">Blog</a>
<a class="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"><span class="visually-hidden">Blog</span></a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item"
href="./blog.html">Blog without Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item"
href="./blog2.html">Blog with Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item"
href="./blog3.html">Blog with Left Sidebar</a></li>
<li class="nav-item dropdown parent-link">
<a class="nav-link"
href="https://google.com">Blog</a>
<a class="nav-link dropdown-toggle"
href="#"
data-bs-toggle="dropdown"><span class="visually-hidden">Blog</span></a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item"
href="./blog.html">Blog without Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item"
href="./blog2.html">Blog with Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item"
href="./blog3.html">Blog with Left Sidebar</a></li>
<li class="dropdown dropdown-submenu dropend"><a
class="dropdown-item dropdown-toggle"
href="#"
data-bs-toggle="dropdown">Blog Posts</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item"
href="./blog-post.html">Post without Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item"
href="./blog-post2.html">Post with Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item"
href="./blog-post3.html">Post with Left Sidebar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<!-- Finish -->
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content mega-menu-scroll">
<ul class="row row-cols-1 row-cols-lg-6 gx-0 gx-lg-4 gy-lg-2 list-unstyled">
<li class="col">
<a class="dropdown-item" href="./demo1.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi1.jpg" srcset="./assets/img/demos/mi1@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 1</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo2.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi2.jpg" srcset="./assets/img/demos/mi2@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 2</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo3.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi3.jpg" srcset="./assets/img/demos/mi3@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 3</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo4.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi4.jpg" srcset="./assets/img/demos/mi4@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 4</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo5.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi5.jpg" srcset="./assets/img/demos/mi5@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 5</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo6.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi6.jpg" srcset="./assets/img/demos/mi6@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 6</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo7.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi7.jpg" srcset="./assets/img/demos/mi7@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 7</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo8.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi8.jpg" srcset="./assets/img/demos/mi8@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 8</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo9.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi9.jpg" srcset="./assets/img/demos/mi9@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 9</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo10.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi10.jpg" srcset="./assets/img/demos/mi10@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 10</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo11.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi11.jpg" srcset="./assets/img/demos/mi11@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 11</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo12.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi12.jpg" srcset="./assets/img/demos/mi12@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 12</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo13.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi13.jpg" srcset="./assets/img/demos/mi13@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 13</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo14.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi14.jpg" srcset="./assets/img/demos/mi14@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 14</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo15.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi15.jpg" srcset="./assets/img/demos/mi15@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 15</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo16.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi16.jpg" srcset="./assets/img/demos/mi16@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 16</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo17.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi17.jpg" srcset="./assets/img/demos/mi17@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 17</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo18.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi18.jpg" srcset="./assets/img/demos/mi18@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 18</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo19.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi19.jpg" srcset="./assets/img/demos/mi19@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 19</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo20.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi20.jpg" srcset="./assets/img/demos/mi20@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 20</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo21.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi21.jpg" srcset="./assets/img/demos/mi21@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 21</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo22.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi22.jpg" srcset="./assets/img/demos/mi22@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 22</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo23.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi23.jpg" srcset="./assets/img/demos/mi23@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 23</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo24.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi24.jpg" srcset="./assets/img/demos/mi24@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 24</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo25.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi25.jpg" srcset="./assets/img/demos/mi25@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 25</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo26.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi26.jpg" srcset="./assets/img/demos/mi26@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 26</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo27.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi27.jpg" srcset="./assets/img/demos/mi27@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 27</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo28.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi28.jpg" srcset="./assets/img/demos/mi28@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 28</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo29.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi29.jpg" srcset="./assets/img/demos/mi29@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 29</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo30.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi30.jpg" srcset="./assets/img/demos/mi30@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 30</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo31.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi31.jpg" srcset="./assets/img/demos/mi31@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 31</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo32.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi32.jpg" srcset="./assets/img/demos/mi32@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 32</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo33.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi33.jpg" srcset="./assets/img/demos/mi33@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 33</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo34.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi34.jpg" srcset="./assets/img/demos/mi34@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 34</span>
</a>
</li>
</ul>
<!--/.row -->
<span class="d-none d-lg-flex"><i class="uil uil-direction"></i><strong>Scroll to view more</strong></span>
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./services.html">Services I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./services2.html">Services II</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./about.html">About I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./about2.html">About II</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./shop.html">Shop I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./shop2.html">Shop II</a></li>
<li class="nav-item"><a class="dropdown-item" href="./shop-product.html">Product Page</a></li>
<li class="nav-item"><a class="dropdown-item" href="./shop-cart.html">Shopping Cart</a></li>
<li class="nav-item"><a class="dropdown-item" href="./shop-checkout.html">Checkout</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./contact.html">Contact I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./contact2.html">Contact II</a></li>
<li class="nav-item"><a class="dropdown-item" href="./contact3.html">Contact III</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./career.html">Job Listing I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./career2.html">Job Listing II</a></li>
<li class="nav-item"><a class="dropdown-item" href="./career-job.html">Job Description</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./404.html">404 Not Found</a></li>
<li class="nav-item"><a class="dropdown-item" href="./page-loader.html">Page Loader</a></li>
<li class="nav-item"><a class="dropdown-item" href="./signin.html">Sign In I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./signin2.html">Sign In II</a></li>
<li class="nav-item"><a class="dropdown-item" href="./signup.html">Sign Up I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./signup2.html">Sign Up II</a></li>
<li class="nav-item"><a class="dropdown-item" href="./terms.html">Terms</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="./pricing.html">Pricing</a></li>
<li class="nav-item"><a class="dropdown-item" href="./onepage.html">One Page</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">Project Pages</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="./projects.html">Projects I</a></li>
<li><a class="dropdown-item" href="./projects2.html">Projects II</a></li>
<li><a class="dropdown-item" href="./projects3.html">Projects III</a></li>
<li><a class="dropdown-item" href="./projects4.html">Projects IV</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Single Projects</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="./single-project.html">Single Project I</a></li>
<li><a class="dropdown-item" href="./single-project2.html">Single Project II</a></li>
<li><a class="dropdown-item" href="./single-project3.html">Single Project III</a></li>
<li><a class="dropdown-item" href="./single-project4.html">Single Project IV</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./blog.html">Blog without Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item" href="./blog2.html">Blog with Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item" href="./blog3.html">Blog with Left Sidebar</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./blog-post.html">Post without Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item" href="./blog-post2.html">Post with Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item" href="./blog-post3.html">Post with Left Sidebar</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content">
<ul class="row row-cols-1 row-cols-lg-6 gx-0 gx-lg-6 gy-lg-4 list-unstyled">
<li class="col"><a class="dropdown-item" href="./docs/blocks/about.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block1.svg" alt=""></div>
<span>About</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/blog.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block2.svg" alt=""></div>
<span>Blog</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/call-to-action.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block3.svg" alt=""></div>
<span>Call to Action</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/clients.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block4.svg" alt=""></div>
<span>Clients</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/contact.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block5.svg" alt=""></div>
<span>Contact</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/facts.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block6.svg" alt=""></div>
<span>Facts</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/faq.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block7.svg" alt=""></div>
<span>FAQ</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/features.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block8.svg" alt=""></div>
<span>Features</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/footer.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block9.svg" alt=""></div>
<span>Footer</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/hero.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block10.svg" alt=""></div>
<span>Hero</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/misc.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block17.svg" alt=""></div>
<span>Misc</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/navbar.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block11.svg" alt=""></div>
<span>Navbar</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/portfolio.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block12.svg" alt=""></div>
<span>Portfolio</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/pricing.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block13.svg" alt=""></div>
<span>Pricing</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/process.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block14.svg" alt=""></div>
<span>Process</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/team.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block15.svg" alt=""></div>
<span>Team</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/testimonials.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block16.svg" alt=""></div>
<span>Testimonials</span>
</a>
</li>
</ul>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-4">
<h6 class="dropdown-header">Usage</h6>
<ul class="list-unstyled cc-2 pb-lg-1">
<li><a class="dropdown-item" href="./docs/index.html">Get Started</a></li>
<li><a class="dropdown-item" href="./docs/forms.html">Forms</a></li>
<li><a class="dropdown-item" href="./docs/faq.html">FAQ</a></li>
<li><a class="dropdown-item" href="./docs/changelog.html">Changelog</a></li>
<li><a class="dropdown-item" href="./docs/credits.html">Credits</a></li>
</ul>
<h6 class="dropdown-header mt-lg-6">Styleguide</h6>
<ul class="list-unstyled cc-2">
<li><a class="dropdown-item" href="./docs/styleguide/colors.html">Colors</a></li>
<li><a class="dropdown-item" href="./docs/styleguide/fonts.html">Fonts</a></li>
<li><a class="dropdown-item" href="./docs/styleguide/icons-svg.html">SVG Icons</a></li>
<li><a class="dropdown-item" href="./docs/styleguide/icons-font.html">Font Icons</a></li>
<li><a class="dropdown-item" href="./docs/styleguide/illustrations.html">Illustrations</a></li>
<li><a class="dropdown-item" href="./docs/styleguide/backgrounds.html">Backgrounds</a></li>
<li><a class="dropdown-item" href="./docs/styleguide/misc.html">Misc</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-8">
<h6 class="dropdown-header">Elements</h6>
<ul class="list-unstyled cc-3">
<li><a class="dropdown-item" href="./docs/elements/accordion.html">Accordion</a></li>
<li><a class="dropdown-item" href="./docs/elements/alerts.html">Alerts</a></li>
<li><a class="dropdown-item" href="./docs/elements/animations.html">Animations</a></li>
<li><a class="dropdown-item" href="./docs/elements/avatars.html">Avatars</a></li>
<li><a class="dropdown-item" href="./docs/elements/background.html">Background</a></li>
<li><a class="dropdown-item" href="./docs/elements/badges.html">Badges</a></li>
<li><a class="dropdown-item" href="./docs/elements/buttons.html">Buttons</a></li>
<li><a class="dropdown-item" href="./docs/elements/card.html">Card</a></li>
<li><a class="dropdown-item" href="./docs/elements/carousel.html">Carousel</a></li>
<li><a class="dropdown-item" href="./docs/elements/dividers.html">Dividers</a></li>
<li><a class="dropdown-item" href="./docs/elements/form-elements.html">Form Elements</a></li>
<li><a class="dropdown-item" href="./docs/elements/image-hover.html">Image Hover</a></li>
<li><a class="dropdown-item" href="./docs/elements/image-mask.html">Image Mask</a></li>
<li><a class="dropdown-item" href="./docs/elements/lightbox.html">Lightbox</a></li>
<li><a class="dropdown-item" href="./docs/elements/player.html">Media Player</a></li>
<li><a class="dropdown-item" href="./docs/elements/modal.html">Modal</a></li>
<li><a class="dropdown-item" href="./docs/elements/pagination.html">Pagination</a></li>
<li><a class="dropdown-item" href="./docs/elements/progressbar.html">Progressbar</a></li>
<li><a class="dropdown-item" href="./docs/elements/shadows.html">Shadows</a></li>
<li><a class="dropdown-item" href="./docs/elements/shapes.html">Shapes</a></li>
<li><a class="dropdown-item" href="./docs/elements/tables.html">Tables</a></li>
<li><a class="dropdown-item" href="./docs/elements/tabs.html">Tabs</a></li>
<li><a class="dropdown-item" href="./docs/elements/text-animations.html">Text Animations</a></li>
<li><a class="dropdown-item" href="./docs/elements/text-highlight.html">Text Highlight</a></li>
<li><a class="dropdown-item" href="./docs/elements/tiles.html">Tiles</a></li>
<li><a class="dropdown-item" href="./docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
<li><a class="dropdown-item" href="./docs/elements/typography.html">Typography</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer d-lg-none">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br /> 00 (123) 456 78 90 <br />
<nav class="nav social social-white mt-4">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item d-none d-md-block">
<a href="https://1.envato.market/NKGrx2" class="btn btn-primary rounded-xl" target="_blank">Purchase Now</a>
</li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
</header>
<!-- /header -->
<section class="wrapper overflow-hidden">
<div class="container pt-19 pt-md-21 pb-16 pb-md-18 text-center position-relative">
<div class="position-absolute" style="top: -12%; left: 50%; transform: translateX(-50%);" data-cue="fadeIn"><img src="./assets/img/photos/blurry.png" alt=""></div>
<div class="row position-relative">
<div class="col-lg-8 col-xxl-7 mx-auto position-relative">
<div class="position-absolute shape grape w-5 d-none d-lg-block" style="top: -5%; left: -15%;" data-cue="fadeIn" data-delay="1500"><img src="./assets/img/svg/pie.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
<div class="position-absolute shape violet w-10 d-none d-lg-block" style="bottom: 30%; left: -20%;" data-cue="fadeIn" data-delay="1500"><img src="./assets/img/svg/scribble.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
<div class="position-absolute shape fuchsia w-6 d-none d-lg-block" style="top: 0%; right: -25%; transform: rotate(70deg);" data-cue="fadeIn" data-delay="1500"><img src="./assets/img/svg/tri.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
<div class="position-absolute shape yellow w-6 d-none d-lg-block" style="bottom: 25%; right: -17%;" data-cue="fadeIn" data-delay="1500"><img src="./assets/img/svg/circle.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
<div data-cues="slideInDown" data-group="page-title">
<h1 class="display-1 fs-64 mb-5 mx-md-10 mx-lg-0">Create a powerful but effortless website for <br /><span class="rotator-fade text-primary">your business.,your portfolio.,your startup.,digital marketing.</span></h1>
<p class="lead fs-24 mb-8">You can create your website in minutes with the help of countless amazing features of Sandbox.</p>
</div>
<div class="d-flex justify-content-center" data-cues="slideInDown" data-delay="600">
<span><a href="#demos" class="btn btn-lg btn-primary btn-icon btn-icon-end rounded-xl mx-1 scroll">See Demo Pages <i class="uil uil-arrow-down-right"></i></a></span>
<span><a href="https://1.envato.market/0Jg6NN" class="btn btn-lg btn-fuchsia btn-icon btn-icon-end rounded-xl mx-1" target="_blank">Wordpress Version <i class="uil uil-arrow-up-right"></i></a></span>
</div>
<!-- /div -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="swiper-container swiper-auto swiper-auto-xs mb-8" data-margin="40" data-nav="false" data-dots="false" data-centered="true" data-loop="true" data-items-auto="true" data-autoplay="true" data-autoplaytime="1" data-drag="false" data-resizeupdate="false" data-speed="7000">
<div class="swiper overflow-visible pe-none">
<div class="swiper-wrapper ticker">
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma8.jpg" srcset="./assets/img/photos/ma8@2x.jpg 2x" alt="" /></figure>
</div>
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma9.jpg" srcset="./assets/img/photos/ma9@2x.jpg 2x" alt="" /></figure>
</div>
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma10.jpg" srcset="./assets/img/photos/ma10@2x.jpg 2x" alt="" /></figure>
</div>
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma11.jpg" srcset="./assets/img/photos/ma11@2x.jpg 2x" alt="" /></figure>
</div>
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma12.jpg" srcset="./assets/img/photos/ma12@2x.jpg 2x" alt="" /></figure>
</div>
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma13.jpg" srcset="./assets/img/photos/ma13@2x.jpg 2x" alt="" /></figure>
</div>
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma14.jpg" srcset="./assets/img/photos/ma14@2x.jpg 2x" alt="" /></figure>
</div>
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
<div class="swiper-container swiper-auto swiper-auto-xs mb-10 mb-md-12" data-margin="40" data-nav="false" data-dots="false" data-centered="true" data-loop="true" data-items-auto="true" data-autoplay="true" data-autoplaytime="1" data-drag="false" data-resizeupdate="false" data-speed="7000">
<div class="swiper overflow-visible pe-none" dir="rtl">
<div class="swiper-wrapper ticker">
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma1.jpg" srcset="./assets/img/photos/ma1@2x.jpg 2x" alt="" /></figure>
</div>
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma2.jpg" srcset="./assets/img/photos/ma2@2x.jpg 2x" alt="" /></figure>
</div>
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma3.jpg" srcset="./assets/img/photos/ma3@2x.jpg 2x" alt="" /></figure>
</div>
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma4.jpg" srcset="./assets/img/photos/ma4@2x.jpg 2x" alt="" /></figure>
</div>
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma5.jpg" srcset="./assets/img/photos/ma5@2x.jpg 2x" alt="" /></figure>
</div>
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma6.jpg" srcset="./assets/img/photos/ma6@2x.jpg 2x" alt="" /></figure>
</div>
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/ma7.jpg" srcset="./assets/img/photos/ma7@2x.jpg 2x" alt="" /></figure>
</div>
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</section>
<!-- /section -->
<section class="wrapper bg-soft-primary" id="demos">
<div class="container pt-16 pt-mb-18">
<div class="row mb-10">
<div class="col-md-9 col-lg-8 col-xl-7 col-xxl-6 mx-auto">
<div class="counter-wrapper">
<h3 class="fs-70 mb-3 text-primary text-center counter">34</h3>
</div>
<h2 class="display-2 mb-3 text-center mb-0 px-xxl-8">Functional, impressive and rich demos to start with</h2>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="demos-wrapper text-center mb-16 mb-md-18">
<h2 class="fs-17 text-uppercase text-muted mb-6">New Demos</h2>
<div class="row mb-10 gx-md-8 gy-12">
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo18.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d18.jpg" srcset="./assets/img/demos/d18@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo18.html" class="link-dark">Layout 18</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo19.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d19.jpg" srcset="./assets/img/demos/d19@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo19.html" class="link-dark">Layout 19</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo20.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d20.jpg" srcset="./assets/img/demos/d20@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo20.html" class="link-dark">Layout 20</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo21.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d21.jpg" srcset="./assets/img/demos/d21@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo21.html" class="link-dark">Layout 21</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo22.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d22.jpg" srcset="./assets/img/demos/d22@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo22.html" class="link-dark">Layout 22</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo23.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d23.jpg" srcset="./assets/img/demos/d23@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo23.html" class="link-dark">Layout 23</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo24.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d24.jpg" srcset="./assets/img/demos/d24@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo24.html" class="link-dark">Layout 24</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo25.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d25.jpg" srcset="./assets/img/demos/d25@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo25.html" class="link-dark">Layout 25</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo26.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d26.jpg" srcset="./assets/img/demos/d26@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo26.html" class="link-dark">Layout 26</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo27.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d27.jpg" srcset="./assets/img/demos/d27@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo27.html" class="link-dark">Layout 27</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo28.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d28.jpg" srcset="./assets/img/demos/d28@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo28.html" class="link-dark">Layout 28</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo29.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d29.jpg" srcset="./assets/img/demos/d29@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo29.html" class="link-dark">Layout 29</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo30.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d30.jpg" srcset="./assets/img/demos/d30@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo30.html" class="link-dark">Layout 30</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo31.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d31.jpg" srcset="./assets/img/demos/d31@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo31.html" class="link-dark">Layout 31</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo32.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d32.jpg" srcset="./assets/img/demos/d32@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo32.html" class="link-dark">Layout 32</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo33.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d33.jpg" srcset="./assets/img/demos/d33@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo33.html" class="link-dark">Layout 33</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo34.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d34.jpg" srcset="./assets/img/demos/d34@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo34.html" class="link-dark">Layout 34</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4 d-none d-md-flex align-items-center justify-content-center flex-column">
<img src="./assets/img/icons/solid/layers.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia mt-md-n10 mb-4" alt="" />
<h3 class="fs-17 text-uppercase text-muted mb-4">Scroll for more</h3>
<a href="#prev-demos" class="btn btn-lg btn-primary btn-icon btn-icon-end rounded-xl mx-1 scroll">Previous Demos <i class="uil uil-arrow-down-right"></i></a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<h2 class="fs-17 text-uppercase text-muted pt-16 mt-n8 mb-6" id="prev-demos">Previous Demos</h2>
<div class="row mb-10 gx-md-8 gy-12">
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo1.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d1.jpg" srcset="./assets/img/demos/d1@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo1.html" class="link-dark">Layout 1</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo2.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d2.jpg" srcset="./assets/img/demos/d2@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo2.html" class="link-dark">Layout 2</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo3.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d3.jpg" srcset="./assets/img/demos/d3@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo3.html" class="link-dark">Layout 3</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo4.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d4.jpg" srcset="./assets/img/demos/d4@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo4.html" class="link-dark">Layout 4</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo5.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d5.jpg" srcset="./assets/img/demos/d5@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo5.html" class="link-dark">Layout 5</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo6.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d6.jpg" srcset="./assets/img/demos/d6@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo6.html" class="link-dark">Layout 6</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo7.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d7.jpg" srcset="./assets/img/demos/d7@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo7.html" class="link-dark">Layout 7</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo8.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d8.jpg" srcset="./assets/img/demos/d8@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo8.html" class="link-dark">Layout 8</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo9.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d9.jpg" srcset="./assets/img/demos/d9@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo9.html" class="link-dark">Layout 9</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo10.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d10.jpg" srcset="./assets/img/demos/d10@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo10.html" class="link-dark">Layout 10</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo11.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d11.jpg" srcset="./assets/img/demos/d11@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo11.html" class="link-dark">Layout 11</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo12.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d12.jpg" srcset="./assets/img/demos/d12@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo12.html" class="link-dark">Layout 12</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo13.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d13.jpg" srcset="./assets/img/demos/d13@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo13.html" class="link-dark">Layout 13</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo14.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d14.jpg" srcset="./assets/img/demos/d14@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo14.html" class="link-dark">Layout 14</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo15.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d15.jpg" srcset="./assets/img/demos/d15@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo15.html" class="link-dark">Layout 15</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo16.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d16.jpg" srcset="./assets/img/demos/d16@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo16.html" class="link-dark">Layout 16</a></h2>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-4">
<figure class="lift rounded-xl mb-6" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo17.html" target="_blank"><img class="shadow-xl" src="./assets/img/demos/d17.jpg" srcset="./assets/img/demos/d17@2x.jpg 2x" alt="" /></a></figure>
<h2 class="fs-22 mb-0"><a href="./demo17.html" class="link-dark">Layout 17</a></h2>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.demos-wrapper -->
<div class="row mb-8 text-center">
<div class="col-md-11 col-lg-10 col-xl-8 col-xxl-7 mx-auto">
<h2 class="display-2 mt-3 mb-3 mb-0 px-lg-10 px-xl-0">Save your time and money by choosing Sandbox for your website.</h2>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row mb-12 mb-md-14">
<div class="col-lg-10 col-xl-8 col-xxl-7 mx-auto">
<div class="row align-items-center counter-wrapper gy-6 text-center">
<div class="col-md-4">
<h3 class="counter fs-50 text-primary mb-1">250+</h3>
<p class="fs-18 mb-0">UI elements</p>
</div>
<!--/column -->
<div class="col-md-4">
<h3 class="counter fs-50 text-primary mb-1">150+</h3>
<p class="fs-18 mb-0">Pre-made blocks</p>
</div>
<!--/column -->
<div class="col-md-4">
<h3 class="counter fs-50 text-primary mb-1">100+</h3>
<p class="fs-18 mb-0">Neatly coded pages</p>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row gx-lg-0 gy-10 align-items-center mb-16 mb-md-18">
<div class="col-lg-7 position-relative">
<div class="position-absolute" style="top: 50%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index:0"><img class="w-100" src="./assets/img/photos/blurry.png" alt=""></div>
<figure class="position-relative" style="z-index: 2;"><img src="./assets/img/photos/mi1.png" srcset="./assets/img/photos/mi1@2x.png 2x" alt="" /></figure>
</div>
<!--/column -->
<div class="col-lg-4 ms-auto">
<div class="d-flex flex-row mb-6">
<div>
<div class="svg-bg bg-white rounded-xl shadow-xl me-5"> <img src="./assets/img/icons/solid/puzzle.svg" class="svg-inject icon-svg solid-duo text-grape-fuchsia" alt="" /> </div>
</div>
<div>
<h4 class="mb-1">Color and Font Options</h4>
<p class="mb-0">Easily customize colors and fonts, or choose from provided options.</p>
</div>
</div>
<div class="d-flex flex-row mb-6">
<div>
<div class="svg-bg bg-white rounded-xl shadow-xl me-5"> <img src="./assets/img/icons/solid/pen-tool.svg" class="svg-inject icon-svg solid-duo text-grape-fuchsia" alt="" /> </div>
</div>
<div>
<h4 class="mb-1">Cool Features & Elements</h4>
<p class="mb-0">Equipped with stunning features and elements for designing appealing pages.</p>
</div>
</div>
<div class="d-flex flex-row">
<div>
<div class="svg-bg bg-white rounded-xl shadow-xl me-5"> <img src="./assets/img/icons/solid/share.svg" class="svg-inject icon-svg solid-duo text-grape-fuchsia" alt="" /> </div>
</div>
<div>
<h4 class="mb-1">Modern Portfolio Layouts</h4>
<p class="mb-0">Effortlessly create and maintain a visually stunning and impactful portfolio.</p>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row gx-lg-0 gy-10 align-items-center">
<div class="col-lg-7 position-relative order-lg-2">
<div class="position-absolute" style="top: 50%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index:0"><img class="w-100" src="./assets/img/photos/blurry.png" alt=""></div>
<figure class="position-relative" style="z-index: 2;"><img src="./assets/img/photos/mi2.png" srcset="./assets/img/photos/mi2@2x.png 2x" alt="" /></figure>
</div>
<!--/column -->
<div class="col-lg-4 me-auto">
<div class="d-flex flex-row mb-6">
<div>
<div class="svg-bg bg-white rounded-xl shadow-xl me-5"> <img src="./assets/img/icons/solid/devices.svg" class="svg-inject icon-svg solid-duo text-grape-fuchsia" alt="" /> </div>
</div>
<div>
<h4 class="mb-1">Well-Written Code</h4>
<p class="mb-0">Pixel-perfect and easily editable code with comprehensive comments.</p>
</div>
</div>
<div class="d-flex flex-row mb-6">
<div>
<div class="svg-bg bg-white rounded-xl shadow-xl me-5"> <img src="./assets/img/icons/solid/safe.svg" class="svg-inject icon-svg solid-duo text-grape-fuchsia" alt="" /> </div>
</div>
<div>
<h4 class="mb-1">Gorgeous Shop Layouts</h4>
<p class="mb-0">Present your products to your visitors in an efficient and visually appealing manner.</p>
</div>
</div>
<div class="d-flex flex-row">
<div>
<div class="svg-bg bg-white rounded-xl shadow-xl me-5"> <img src="./assets/img/icons/solid/globe-2.svg" class="svg-inject icon-svg solid-duo text-grape-fuchsia" alt="" /> </div>
</div>
<div>
<h4 class="mb-1">Fully Responsive Layouts</h4>
<p class="mb-0">Adjusts to varying screen sizes, ensuring seamless compatibility across all devices.</p>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row mb-8 text-center mt-17 mt-md-19 mb-9 mb-md-11">
<div class="col-md-11 col-lg-10 col-xl-8 col-xxl-7 mx-auto">
<h2 class="display-2 mb-0 px-lg-10 px-xl-0">Build your website using the powerful features of Sandbox</h2>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container-fluid px-xl-0 pb-16 pb-md-18">
<div class="swiper-container swiper-auto" data-margin="40" data-nav="false" data-centered="true" data-loop="true" data-items-auto="true">
<div class="swiper overflow-visible">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/bp1.jpg" srcset="./assets/img/photos/bp1@2x.jpg 2x" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/bp2.jpg" srcset="./assets/img/photos/bp2@2x.jpg 2x" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/bp3.jpg" srcset="./assets/img/photos/bp3@2x.jpg 2x" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/bp4.jpg" srcset="./assets/img/photos/bp4@2x.jpg 2x" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/bp5.jpg" srcset="./assets/img/photos/bp5@2x.jpg 2x" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded-xl shadow-xl"><img src="./assets/img/photos/bp6.jpg" srcset="./assets/img/photos/bp6@2x.jpg 2x" alt="" /></figure>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.container -->
<div class="container pb-6 pb-md-8">
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-5 gx-md-8 gy-10 text-center justify-content-center pb-16 pb-md-18">
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi1.png" srcset="./assets/img/demos/fi1@2x.png 2x" alt="" />
<h4>Built with Sass <br> & Bootstrap 5</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi2.png" srcset="./assets/img/demos/fi2@2x.png 2x" alt="" />
<h4>SEO-friendly <br> Coding</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi3.png" srcset="./assets/img/demos/fi3@2x.png 2x" alt="" />
<h4>Valid W3C <br> HTML5 & CSS3</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi4.png" srcset="./assets/img/demos/fi4@2x.png 2x" alt="" />
<h4>Retina-ready <br> Graphics</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi5.png" srcset="./assets/img/demos/fi5@2x.png 2x" alt="" />
<h4>One-page <br> Layout Option</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi6.png" srcset="./assets/img/demos/fi6@2x.png 2x" alt="" />
<h4>Isotope <br> Filterable Gallery</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi7.png" srcset="./assets/img/demos/fi7@2x.png 2x" alt="" />
<h4>Mailchimp <br> Compatible </h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi8.png" srcset="./assets/img/demos/fi8@2x.png 2x" alt="" />
<h4>Contact Form <br> w/o Page Refresh</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi9.png" srcset="./assets/img/demos/fi9@2x.png 2x" alt="" />
<h4>Animations <br> on Page Scroll</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi10.png" srcset="./assets/img/demos/fi10@2x.png 2x" alt="" />
<h4>Top-Notch Support <br> & Free Updates</h4>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-lg-7 position-relative">
<div class="position-absolute" style="top: 50%; left: 50%; width: 130%; height: auto; transform: translate(-50%,-50%); z-index:0"><img class="w-100" src="./assets/img/photos/blurry.png" alt=""></div>
<div class="row gx-md-5 gy-5">
<div class="col-md-6 col-xl-5 align-self-end">
<div class="card shadow-xl rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>“Sandbox is really attractive and it saves my time. The support team is really amazing.”</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-0">stevenstrange</h5>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-md-6 align-self-end">
<div class="card shadow-xl rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>“This is just next level stuff in terms of quality, docs and features. I don't think I'm going to need or tolerate any other template from now on.”</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-0">70656e6973</h5>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-md-6 col-xl-5 offset-xl-1">
<div class="card shadow-xl rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>“I've been a Themeforest user for almost 10 years and I have purchased well over 100 themes during my time. This theme is amongst the best here.”</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-0">bmwe92m3</h5>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-md-6 align-self-start">
<div class="card shadow-xl rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>“Simply the best templates that I have bought so far. Super clean code, intuitive documentations, and most important of all the best design.”</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-0">oziuji</h5>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-4">
<h2 class="display-2 mb-4 mt-lg-n6">Our top priority is ensuring customer satisfaction.</h2>
<p class="lead fs-22 mb-6">Don't take our word for it. Hear from customers about Sandbox.</p>
<a href="https://1.envato.market/Rygn0y" class="btn btn-lg btn-primary btn-icon btn-icon-end rounded-xl" target="_blank">All Reviews <i class="uil uil-arrow-up-right"></i></a>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.container -->
</section>
<!-- /section -->
<section class="wrapper overflow-hidden">
<div class="container pt-16 pt-md-18 text-center position-relative">
<div class="position-absolute" style="top: -7%; left: 50%; transform: translateX(-50%);"><img src="./assets/img/photos/blurry.png" alt=""></div>
<div class="row position-relative mb-9 mb-md-11">
<div class="col-lg-10 col-xl-9 col-xxl-7 mx-auto">
<div>
<img src="./assets/img/demos/icon-grape.png" srcset="./assets/img/demos/icon-grape@2x.png 2x" alt="" />
<h1 class="display-1 fs-64 mt-5 mb-5">Think unique and make a difference with Sandbox.</h1>
<p class="lead fs-24 mb-8 px-lg-12 px-xl-14 px-xxl-10">We are trusted by thousands of clients. Join them now and easily create your stunning website in no time.</p>
</div>
<div class="d-flex justify-content-center">
<span><a href="https://1.envato.market/NKGrx2" class="btn btn-lg btn-primary btn-icon btn-icon-end rounded-xl" target="_blank">Buy Sandbox <i class="uil uil-arrow-up-right"></i></a></span>
</div>
<!-- /div -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container text-center">
<img class="img-fluid position-relative" style="z-index: 2;" src="./assets/img/demos/f1.png" srcset="./assets/img/demos/f1@2x.png 2x" alt="" />
</div>
</section>
<!-- /section -->
</div>
<!-- /.content-wrapper -->
<div class="progress-wrap">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="./assets/js/plugins.js"></script>
<script src="./assets/js/theme.js"></script>
</body>
</html>