first commit

This commit is contained in:
dev-chiefworks
2022-09-25 15:25:10 -04:00
commit b085356c99
4709 changed files with 430211 additions and 0 deletions
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,728 @@
<!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">
</head>
<body>
<div class="content-wrapper">
<header class="wrapper bg-soft-primary">
<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.png" srcset="../../assets/img/logo@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">
<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">
<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 I</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 II</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 III</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 IV</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 V</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 VI</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 VII</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 VIII</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 IX</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 X</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 XI</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 XII</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 XIII</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 XIV</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 XV</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 XVI</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 XVII</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 XVIII</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 XIX</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 XX</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 XXI</span>
</a></li>
</ul>
<!--/.row -->
</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>
</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/breadcrumb.html">Breadcrumb</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/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 dropdown language-select text-uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item d-none d-md-block">
<a href="../../contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</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 bg-soft-primary">
<div class="container pt-10 pb-12 pt-md-14 pb-md-16 text-center">
<div class="row">
<div class="col-md-9 col-lg-7 col-xl-5 mx-auto">
<h1 class="display-1 mb-3">Blocks - Call to Action</h1>
<p class="lead px-xxl-10">Copy any custom block snippet below and paste it on your page to build your website easily.</p>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light wrapper-border">
<div class="container py-11">
<h2 class="h5">Filter Blocks:</h2>
<ul class="list-inline mb-0">
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/about.html" class="btn btn-soft-ash btn-sm rounded ">About</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/blog.html" class="btn btn-soft-ash btn-sm rounded ">Blog</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/call-to-action.html" class="btn btn-soft-ash btn-sm rounded text-primary pe-none">Call to Action</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/clients.html" class="btn btn-soft-ash btn-sm rounded ">Clients</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/contact.html" class="btn btn-soft-ash btn-sm rounded ">Contact</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/facts.html" class="btn btn-soft-ash btn-sm rounded ">Facts</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/faq.html" class="btn btn-soft-ash btn-sm rounded ">FAQ</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/features.html" class="btn btn-soft-ash btn-sm rounded ">Features</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/footer.html" class="btn btn-soft-ash btn-sm rounded ">Footer</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/hero.html" class="btn btn-soft-ash btn-sm rounded ">Hero</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/misc.html" class="btn btn-soft-ash btn-sm rounded ">Misc</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/navbar.html" class="btn btn-soft-ash btn-sm rounded ">Navbar</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/portfolio.html" class="btn btn-soft-ash btn-sm rounded ">Portfolio</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/pricing.html" class="btn btn-soft-ash btn-sm rounded ">Pricing</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/process.html" class="btn btn-soft-ash btn-sm rounded ">Process</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/team.html" class="btn btn-soft-ash btn-sm rounded ">Team</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/testimonials.html" class="btn btn-soft-ash btn-sm rounded ">Testimonials</a></li>
</ul>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper image-wrapper bg-auto no-overlay bg-image text-center py-14 py-md-16 bg-map" data-image-src="../../assets/img/map.png">
<div class="container py-0 py-md-17">
<div class="row">
<div class="col-lg-6 col-xl-5 mx-auto">
<h2 class="display-4 mb-3 text-center">Join Our Community</h2>
<p class="lead mb-5 px-md-16 px-lg-3">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</p>
<a href="#" class="btn btn-primary rounded-pill">Join Us</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-1" class="wrapper bg-light wrapper-border">
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-1">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-1" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper image-wrapper bg-auto no-overlay bg-image text-center py-14 py-md-16 bg-map&quot; data-image-src=&quot;./assets/img/map.png&quot;&gt;
&lt;div class=&quot;container py-0 py-md-18&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-6 col-xl-5 mx-auto&quot;&gt;
&lt;h2 class=&quot;display-4 mb-3 text-center&quot;&gt;Join Our Community&lt;/h2&gt;
&lt;p class=&quot;lead mb-5 px-md-16 px-lg-3&quot;&gt;We are trusted by over 5000+ clients. Join them by using our services and grow your business.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary rounded-pill&quot;&gt;Join Us&lt;/a&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!--/.container -->
</section>
<!-- /section -->
<section id="snippet-2" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row">
<div class="col-xl-10 mx-auto">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400" data-image-src="../../assets/img/photos/bg3.jpg">
<div class="card-body p-6 p-md-11 d-lg-flex flex-row align-items-lg-center justify-content-md-between text-center text-lg-start">
<h3 class="display-6 mb-6 mb-lg-0 pe-lg-10 pe-xl-5 pe-xxl-18 text-white">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</h3>
<a href="#" class="btn btn-white rounded-pill mb-0 text-nowrap">Join Us</a>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-2">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-2" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper bg-light&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-xl-10 mx-auto&quot;&gt;
&lt;div class=&quot;card image-wrapper bg-full bg-image bg-overlay bg-overlay-400&quot; data-image-src=&quot;./assets/img/photos/bg3.jpg&quot;&gt;
&lt;div class=&quot;card-body p-6 p-md-11 d-lg-flex flex-row align-items-lg-center justify-content-md-between text-center text-lg-start&quot;&gt;
&lt;h3 class=&quot;display-6 mb-6 mb-lg-0 pe-lg-10 pe-xl-5 pe-xxl-18 text-white&quot;&gt;We are trusted by over 5000+ clients. Join them by using our services and grow your business.&lt;/h3&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-white rounded-pill mb-0 text-nowrap&quot;&gt;Join Us&lt;/a&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-3" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15 text-center">
<div class="row">
<div class="col-md-9 col-lg-7 col-xl-7 mx-auto text-center">
<img src="../../assets/img/icons/lineal/puzzle-2.svg" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
<h2 class="display-4 mb-3">Join Our Community</h2>
<p class="lead fs-lg mb-6 px-xl-10 px-xxl-15">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</p>
<a href="#" class="btn btn-primary rounded">Join Us</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-3">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-3" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper bg-light&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16 text-center&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-9 col-lg-7 col-xl-7 mx-auto text-center&quot;&gt;
&lt;img src=&quot;./assets/img/icons/lineal/puzzle-2.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md mb-4&quot; alt=&quot;&quot; /&gt;
&lt;h2 class=&quot;display-4 mb-3&quot;&gt;Join Our Community&lt;/h2&gt;
&lt;p class=&quot;lead fs-lg mb-6 px-xl-10 px-xxl-15&quot;&gt;We are trusted by over 5000+ clients. Join them by using our services and grow your business.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary rounded&quot;&gt;Join Us&lt;/a&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-4" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-300" data-image-src="../../assets/img/photos/bg16.png">
<div class="card-body p-10 p-xl-12">
<div class="row text-center">
<div class="col-xl-11 col-xxl-9 mx-auto">
<h2 class="fs-16 text-uppercase text-white mb-3">Join Our Community</h2>
<h3 class="display-3 mb-8 px-lg-8 text-white">We are <span class="underline-3 style-2 yellow">trusted</span> by over 5000+ clients. Join them now and grow your business.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="d-flex justify-content-center">
<span><a class="btn btn-white rounded">Get Started</a></span>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-4">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-4" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper bg-light&quot;&gt;
&lt;div class=&quot;container pb-13 pb-md-15&quot;&gt;
&lt;div class=&quot;card image-wrapper bg-full bg-image bg-overlay bg-overlay-300 mb-14&quot; data-image-src=&quot;./assets/img/photos/bg16.png&quot;&gt;
&lt;div class=&quot;card-body p-10 p-xl-12&quot;&gt;
&lt;div class=&quot;row text-center&quot;&gt;
&lt;div class=&quot;col-xl-11 col-xxl-9 mx-auto&quot;&gt;
&lt;h2 class=&quot;fs-16 text-uppercase text-white mb-3&quot;&gt;Join Our Community&lt;/h2&gt;
&lt;h3 class=&quot;display-3 mb-8 px-lg-8 text-white&quot;&gt;We are &lt;span class=&quot;underline-3 style-2 yellow&quot;&gt;trusted&lt;/span&gt; by over 5000+ clients. Join them now and grow your business.&lt;/h3&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;d-flex justify-content-center&quot;&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-white rounded&quot;&gt;Get Started&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
</div>
<!-- /.content-wrapper -->
<section class="wrapper bg-dark text-white">
<div class="container pt-14 pt-md-16 text-center">
<div class="row">
<div class="col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
<h2 class="display-3 text-white mt-3 mb-3 px-lg-8">Think unique and be creative. Make a difference with Sandbox.</h2>
<p class="lead fs-lg mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
<a href="https://1.envato.market/NKGrx2" target="_blank" class="btn btn-lg btn-white rounded-pill mb-10">Buy Sandbox</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<img class="img-fluid" src="../../assets/img/demos/f1.png" srcset="../../assets/img/demos/f1@2x.png 2x" alt="" />
</div>
<!-- /.container -->
</section>
<!-- /section -->
<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>
+860
View File
@@ -0,0 +1,860 @@
<!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">
</head>
<body>
<div class="content-wrapper">
<header class="wrapper bg-soft-primary">
<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.png" srcset="../../assets/img/logo@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">
<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">
<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 I</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 II</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 III</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 IV</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 V</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 VI</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 VII</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 VIII</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 IX</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 X</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 XI</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 XII</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 XIII</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 XIV</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 XV</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 XVI</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 XVII</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 XVIII</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 XIX</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 XX</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 XXI</span>
</a></li>
</ul>
<!--/.row -->
</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>
</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/breadcrumb.html">Breadcrumb</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/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 dropdown language-select text-uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item d-none d-md-block">
<a href="../../contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</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 bg-soft-primary">
<div class="container pt-10 pb-12 pt-md-14 pb-md-16 text-center">
<div class="row">
<div class="col-md-9 col-lg-7 col-xl-5 mx-auto">
<h1 class="display-1 mb-3">Blocks - Clients</h1>
<p class="lead px-xxl-10">Copy any custom block snippet below and paste it on your page to build your website easily.</p>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light wrapper-border">
<div class="container py-11">
<h2 class="h5">Filter Blocks:</h2>
<ul class="list-inline mb-0">
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/about.html" class="btn btn-soft-ash btn-sm rounded ">About</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/blog.html" class="btn btn-soft-ash btn-sm rounded ">Blog</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/call-to-action.html" class="btn btn-soft-ash btn-sm rounded ">Call to Action</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/clients.html" class="btn btn-soft-ash btn-sm rounded text-primary pe-none">Clients</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/contact.html" class="btn btn-soft-ash btn-sm rounded ">Contact</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/facts.html" class="btn btn-soft-ash btn-sm rounded ">Facts</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/faq.html" class="btn btn-soft-ash btn-sm rounded ">FAQ</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/features.html" class="btn btn-soft-ash btn-sm rounded ">Features</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/footer.html" class="btn btn-soft-ash btn-sm rounded ">Footer</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/hero.html" class="btn btn-soft-ash btn-sm rounded ">Hero</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/misc.html" class="btn btn-soft-ash btn-sm rounded ">Misc</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/navbar.html" class="btn btn-soft-ash btn-sm rounded ">Navbar</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/portfolio.html" class="btn btn-soft-ash btn-sm rounded ">Portfolio</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/pricing.html" class="btn btn-soft-ash btn-sm rounded ">Pricing</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/process.html" class="btn btn-soft-ash btn-sm rounded ">Process</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/team.html" class="btn btn-soft-ash btn-sm rounded ">Team</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/testimonials.html" class="btn btn-soft-ash btn-sm rounded ">Testimonials</a></li>
</ul>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-1" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<h2 class="fs-15 text-uppercase text-muted text-center mb-8">Trusted by Over 5000 Clients</h2>
<div class="swiper-container clients mb-0" data-margin="30" data-dots="false" data-autoplay-timeout="3000" data-items-xxl="7" data-items-xl="6" data-items-lg="5" data-items-md="4" data-items-xs="2">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide px-5"><img src="../../assets/img/brands/c1.png" alt="" /></div>
<div class="swiper-slide px-5"><img src="../../assets/img/brands/c2.png" alt="" /></div>
<div class="swiper-slide px-5"><img src="../../assets/img/brands/c3.png" alt="" /></div>
<div class="swiper-slide px-5"><img src="../../assets/img/brands/c4.png" alt="" /></div>
<div class="swiper-slide px-5"><img src="../../assets/img/brands/c5.png" alt="" /></div>
<div class="swiper-slide px-5"><img src="../../assets/img/brands/c6.png" alt="" /></div>
<div class="swiper-slide px-5"><img src="../../assets/img/brands/c7.png" alt="" /></div>
<div class="swiper-slide px-5"><img src="../../assets/img/brands/c8.png" alt="" /></div>
<div class="swiper-slide px-5"><img src="../../assets/img/brands/c9.png" alt="" /></div>
<div class="swiper-slide px-5"><img src="../../assets/img/brands/c10.png" alt="" /></div>
<div class="swiper-slide px-5"><img src="../../assets/img/brands/c11.png" alt="" /></div>
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-1">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-1" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper bg-light wrapper-border&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;h2 class=&quot;fs-15 text-uppercase text-muted text-center mb-8&quot;&gt;Trusted by Over 5000 Clients&lt;/h2&gt;
&lt;div class=&quot;swiper-container clients mb-0&quot; data-margin=&quot;30&quot; data-dots=&quot;false&quot; data-autoplay-timeout=&quot;3000&quot; data-items-xxl=&quot;7&quot; data-items-xl=&quot;6&quot; data-items-lg=&quot;5&quot; data-items-md=&quot;4&quot; data-items-xs=&quot;2&quot;&gt;
&lt;div class=&quot;swiper&quot;&gt;
&lt;div class=&quot;swiper-wrapper&quot;&gt;
&lt;div class=&quot;swiper-slide px-5&quot;&gt;&lt;img src=&quot;./assets/img/brands/c1.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide px-5&quot;&gt;&lt;img src=&quot;./assets/img/brands/c2.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide px-5&quot;&gt;&lt;img src=&quot;./assets/img/brands/c3.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide px-5&quot;&gt;&lt;img src=&quot;./assets/img/brands/c4.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide px-5&quot;&gt;&lt;img src=&quot;./assets/img/brands/c5.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide px-5&quot;&gt;&lt;img src=&quot;./assets/img/brands/c6.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide px-5&quot;&gt;&lt;img src=&quot;./assets/img/brands/c7.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide px-5&quot;&gt;&lt;img src=&quot;./assets/img/brands/c8.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide px-5&quot;&gt;&lt;img src=&quot;./assets/img/brands/c9.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide px-5&quot;&gt;&lt;img src=&quot;./assets/img/brands/c10.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide px-5&quot;&gt;&lt;img src=&quot;./assets/img/brands/c11.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!--/.swiper-wrapper --&gt;
&lt;/div&gt;
&lt;!-- /.swiper --&gt;
&lt;/div&gt;
&lt;!-- /.swiper-container --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-2" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gx-lg-8 gx-xl-12 gy-10 gy-lg-0">
<div class="col-lg-4 mt-lg-2">
<h2 class="fs-15 text-uppercase text-muted mb-3">Our Clients</h2>
<h3 class="display-4 mb-3 pe-xxl-5">Trusted by over 300+ clients</h3>
<p class="lead fs-lg mb-0 pe-xxl-5">We bring solutions to make life easier for our customers.</p>
</div>
<!-- /column -->
<div class="col-lg-8">
<div class="row row-cols-2 row-cols-md-4 gx-0 gx-md-8 gx-xl-12 gy-12">
<div class="col">
<figure class="px-3 px-md-0 px-xxl-2"><img src="../../assets/img/brands/z1.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col">
<figure class="px-3 px-md-0 px-xxl-2"><img src="../../assets/img/brands/z2.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col">
<figure class="px-3 px-md-0 px-xxl-2"><img src="../../assets/img/brands/z3.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col">
<figure class="px-3 px-md-0 px-xxl-2"><img src="../../assets/img/brands/z4.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col">
<figure class="px-3 px-md-0 px-xxl-2"><img src="../../assets/img/brands/z5.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col">
<figure class="px-3 px-md-0 px-xxl-2"><img src="../../assets/img/brands/z6.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col">
<figure class="px-3 px-md-0 px-xxl-2"><img src="../../assets/img/brands/z7.png" alt="" /></figure>
</div>
<!--/column -->
<div class="col">
<figure class="px-3 px-md-0 px-xxl-2"><img src="../../assets/img/brands/z8.png" alt="" /></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-2">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-2" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper bg-light&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-10 gy-lg-0&quot;&gt;
&lt;div class=&quot;col-lg-4 mt-lg-2&quot;&gt;
&lt;h2 class=&quot;fs-15 text-uppercase text-muted mb-3&quot;&gt;Our Clients&lt;/h2&gt;
&lt;h3 class=&quot;display-4 mb-3 pe-xxl-5&quot;&gt;Trusted by over 300+ clients&lt;/h3&gt;
&lt;p class=&quot;lead fs-lg mb-0 pe-xxl-5&quot;&gt;We bring solutions to make life easier for our customers.&lt;/p&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-lg-8&quot;&gt;
&lt;div class=&quot;row row-cols-2 row-cols-md-4 gx-0 gx-md-8 gx-xl-12 gy-12&quot;&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;figure class=&quot;px-3 px-md-0 px-xxl-2&quot;&gt;&lt;img src=&quot;./assets/img/brands/z1.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;figure class=&quot;px-3 px-md-0 px-xxl-2&quot;&gt;&lt;img src=&quot;./assets/img/brands/z2.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;figure class=&quot;px-3 px-md-0 px-xxl-2&quot;&gt;&lt;img src=&quot;./assets/img/brands/z3.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;figure class=&quot;px-3 px-md-0 px-xxl-2&quot;&gt;&lt;img src=&quot;./assets/img/brands/z4.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;figure class=&quot;px-3 px-md-0 px-xxl-2&quot;&gt;&lt;img src=&quot;./assets/img/brands/z5.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;figure class=&quot;px-3 px-md-0 px-xxl-2&quot;&gt;&lt;img src=&quot;./assets/img/brands/z6.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;figure class=&quot;px-3 px-md-0 px-xxl-2&quot;&gt;&lt;img src=&quot;./assets/img/brands/z7.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;figure class=&quot;px-3 px-md-0 px-xxl-2&quot;&gt;&lt;img src=&quot;./assets/img/brands/z8.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-3" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<h2 class="fs-15 text-uppercase text-muted mb-3">Our Clients</h2>
<div class="row gx-lg-8 mb-10 gy-5">
<div class="col-lg-6">
<h3 class="display-5 mb-0">We are trusted by over 300+ clients. Join them by using our services and grow your business.</h3>
</div>
<!-- /column -->
<div class="col-lg-6">
<p class="lead mb-0">Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Maecenas faucibus mollis interdum. Cras justo odio mollis.</p>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row row-cols-2 row-cols-md-3 row-cols-xl-5 gx-lg-6 gy-6 justify-content-center">
<div class="col">
<div class="card shadow-lg h-100 align-items-center">
<div class="card-body align-items-center d-flex px-3 py-6 p-md-8">
<figure class="px-md-3 px-xl-0 px-xxl-3 mb-0"><img src="../../assets/img/brands/z1.png" alt="" /></figure>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col">
<div class="card shadow-lg h-100 align-items-center">
<div class="card-body align-items-center d-flex px-3 py-6 p-md-8">
<figure class="px-md-3 px-xl-0 px-xxl-3 mb-0"><img src="../../assets/img/brands/z2.png" alt="" /></figure>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col">
<div class="card shadow-lg h-100 align-items-center">
<div class="card-body align-items-center d-flex px-3 py-6 p-md-8">
<figure class="px-md-3 px-xl-0 px-xxl-3 mb-0"><img src="../../assets/img/brands/z3.png" alt="" /></figure>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col">
<div class="card shadow-lg h-100 align-items-center">
<div class="card-body align-items-center d-flex px-3 py-6 p-md-8">
<figure class="px-md-3 px-xl-0 px-xxl-3 mb-0"><img src="../../assets/img/brands/z4.png" alt="" /></figure>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col">
<div class="card shadow-lg h-100 align-items-center">
<div class="card-body align-items-center d-flex px-3 py-6 p-md-8">
<figure class="px-md-3 px-xl-0 px-xxl-3 mb-0"><img src="../../assets/img/brands/z5.png" alt="" /></figure>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-3">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-3" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper bg-light&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;h2 class=&quot;fs-15 text-uppercase text-muted mb-3&quot;&gt;Our Clients&lt;/h2&gt;
&lt;div class=&quot;row gx-lg-8 mb-10 gy-5&quot;&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;h3 class=&quot;display-5 mb-0&quot;&gt;We are trusted by over 300+ clients. Join them by using our services and grow your business.&lt;/h3&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;p class=&quot;lead mb-0&quot;&gt;Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Maecenas faucibus mollis interdum. Cras justo odio mollis.&lt;/p&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;row row-cols-2 row-cols-md-3 row-cols-xl-5 gx-lg-6 gy-6 justify-content-center&quot;&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;div class=&quot;card shadow-lg h-100 align-items-center&quot;&gt;
&lt;div class=&quot;card-body align-items-center d-flex px-3 py-6 p-md-8&quot;&gt;
&lt;figure class=&quot;px-md-3 px-xl-0 px-xxl-3 mb-0&quot;&gt;&lt;img src=&quot;./assets/img/brands/z1.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;div class=&quot;card shadow-lg h-100 align-items-center&quot;&gt;
&lt;div class=&quot;card-body align-items-center d-flex px-3 py-6 p-md-8&quot;&gt;
&lt;figure class=&quot;px-md-3 px-xl-0 px-xxl-3 mb-0&quot;&gt;&lt;img src=&quot;./assets/img/brands/z2.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;div class=&quot;card shadow-lg h-100 align-items-center&quot;&gt;
&lt;div class=&quot;card-body align-items-center d-flex px-3 py-6 p-md-8&quot;&gt;
&lt;figure class=&quot;px-md-3 px-xl-0 px-xxl-3 mb-0&quot;&gt;&lt;img src=&quot;./assets/img/brands/z3.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;div class=&quot;card shadow-lg h-100 align-items-center&quot;&gt;
&lt;div class=&quot;card-body align-items-center d-flex px-3 py-6 p-md-8&quot;&gt;
&lt;figure class=&quot;px-md-3 px-xl-0 px-xxl-3 mb-0&quot;&gt;&lt;img src=&quot;./assets/img/brands/z4.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col&quot;&gt;
&lt;div class=&quot;card shadow-lg h-100 align-items-center&quot;&gt;
&lt;div class=&quot;card-body align-items-center d-flex px-3 py-6 p-md-8&quot;&gt;
&lt;figure class=&quot;px-md-3 px-xl-0 px-xxl-3 mb-0&quot;&gt;&lt;img src=&quot;./assets/img/brands/z5.png&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
</div>
<!-- /.content-wrapper -->
<section class="wrapper bg-dark text-white">
<div class="container pt-14 pt-md-16 text-center">
<div class="row">
<div class="col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
<h2 class="display-3 text-white mt-3 mb-3 px-lg-8">Think unique and be creative. Make a difference with Sandbox.</h2>
<p class="lead fs-lg mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
<a href="https://1.envato.market/NKGrx2" target="_blank" class="btn btn-lg btn-white rounded-pill mb-10">Buy Sandbox</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<img class="img-fluid" src="../../assets/img/demos/f1.png" srcset="../../assets/img/demos/f1@2x.png 2x" alt="" />
</div>
<!-- /.container -->
</section>
<!-- /section -->
<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>
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff