nabnabilahhp
/
SMAMUGAPAY
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
SMAMUGAPAY/assets/template/docs/blocks/hero.html

3113 lines
186 KiB
HTML
Raw Blame History

<!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 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 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 - Hero</h1>
<p class="lead">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 ">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 text-primary pe-none">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 bg-light">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<div class="alert alert-primary alert-icon" role="alert"><i class="uil uil-exclamation-circle"></i> Click on the image to see the live demo of the hero example.</div>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section id="snippet-1" class="wrapper bg-light wrapper-border">
<div class="container pt-10 pt-md-12">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo1.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero1.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-gradient-primary&quot;&gt;
&lt;div class=&quot;container pt-10 pt-md-14 pb-8 text-center&quot;&gt;
&lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-10 align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-7&quot;&gt;
&lt;figure&gt;&lt;img class=&quot;w-auto&quot; src=&quot;./assets/img/illustrations/i2.png&quot; srcset=&quot;./assets/img/illustrations/i2@2x.png 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start&quot;&gt;
&lt;h1 class=&quot;display-1 mb-5 mx-md-n5 mx-lg-0&quot;&gt;Grow Your Business with Our Solutions.&lt;/h1&gt;
&lt;p class=&quot;lead fs-lg mb-7&quot;&gt;We help our clients to increase their website traffic, rankings and visibility in search results.&lt;/p&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-primary rounded-pill me-2&quot;&gt;Try It For Free&lt;/a&gt;&lt;/span&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-2" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo2.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero2.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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 pt-8 pt-md-14&quot;&gt;
&lt;div class=&quot;row gx-lg-0 gx-xl-8 gy-10 gy-md-13 gy-lg-0 mb-7 mb-md-10 mb-lg-16 align-items-center&quot;&gt;
&lt;div class=&quot;col-md-8 offset-md-2 col-lg-6 offset-lg-1 position-relative order-lg-2&quot; data-cue=&quot;zoomIn&quot;&gt;
&lt;div class=&quot;shape bg-dot primary rellax w-17 h-19&quot; data-rellax-speed=&quot;1&quot; style=&quot;top: -1.7rem; left: -1.5rem;&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape rounded bg-soft-primary rellax d-md-block&quot; data-rellax-speed=&quot;0&quot; style=&quot;bottom: -1.8rem; right: -0.8rem; width: 85%; height: 90%;&quot;&gt;&lt;/div&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/about7.jpg&quot; srcset=&quot;./assets/img/photos/about7@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-lg-5 mt-lg-n10 text-center text-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
&lt;h1 class=&quot;display-1 mb-5&quot;&gt;We bring solutions to make life easier for our customers.&lt;/h1&gt;
&lt;p class=&quot;lead fs-25 lh-sm mb-7 px-md-10 px-lg-0&quot;&gt;We have considered our solutions to support every stage of your growth.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-center justify-content-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-primary rounded-pill me-2&quot;&gt;Explore Now&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-outline-primary rounded-pill&quot;&gt;Free Trial&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-3" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo3.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero3.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-dark angled lower-start&quot;&gt;
&lt;div class=&quot;container pt-7 pt-md-11 pb-8&quot;&gt;
&lt;div class=&quot;row gx-0 gy-10 align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-6&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
&lt;h1 class=&quot;display-1 text-white mb-4&quot;&gt;Sandbox focuses on &lt;br /&gt;&lt;span class=&quot;typer text-primary text-nowrap&quot; data-delay=&quot;100&quot; data-words=&quot;customer satisfaction,business needs,creative ideas&quot;&gt;&lt;/span&gt;&lt;span class=&quot;cursor text-primary&quot; data-owner=&quot;typer&quot;&gt;&lt;/span&gt;&lt;/h1&gt;
&lt;p class=&quot;lead fs-24 lh-sm text-white mb-7 pe-md-18 pe-lg-0 pe-xxl-15&quot;&gt;We carefully consider our solutions to support each and every stage of your growth.&lt;/p&gt;
&lt;div&gt;
&lt;a class=&quot;btn btn-lg btn-primary rounded&quot;&gt;Get Started&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-lg-5 offset-lg-1 mb-n18&quot; data-cues=&quot;slideInDown&quot;&gt;
&lt;div class=&quot;position-relative&quot;&gt;
&lt;a href=&quot;./assets/media/movie.mp4&quot; class=&quot;btn btn-circle btn-primary btn-play ripple mx-auto mb-6 position-absolute&quot; style=&quot;top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;&quot; data-glightbox&gt;&lt;i class=&quot;icn-caret-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;figure class=&quot;rounded shadow-lg&quot;&gt;&lt;img src=&quot;./assets/img/photos/about13.jpg&quot; srcset=&quot;./assets/img/photos/about13@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /div --&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-4" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo4.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero4.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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 position-relative min-vh-70 d-lg-flex align-items-center&quot;&gt;
&lt;div class=&quot;rounded-4-lg-start col-lg-6 order-lg-2 position-lg-absolute top-0 end-0 image-wrapper bg-image bg-cover h-100 min-vh-50&quot; data-image-src=&quot;./assets/img/photos/about16.jpg&quot;&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;div class=&quot;mt-10 mt-md-11 mt-lg-n10 px-10 px-md-11 ps-lg-0 pe-lg-13 text-center text-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
&lt;h1 class=&quot;display-1 mb-5&quot;&gt;Just sit &amp; relax while we take care of your business needs.&lt;/h1&gt;
&lt;p class=&quot;lead fs-25 lh-sm mb-7 pe-md-10&quot;&gt;We make your spending stress-free for you to have the perfect control.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-center justify-content-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-primary rounded-pill me-2&quot;&gt;Explore Now&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-outline-primary rounded-pill&quot;&gt;Contact Us&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/div --&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-5" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo5.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero5.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-5">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-5" 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-soft-primary&quot;&gt;
&lt;div class=&quot;container pt-10 pb-15 pt-md-14 pb-md-20 text-center&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-10 col-lg-8 col-xl-8 col-xxl-6 mx-auto mb-13&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot;&gt;
&lt;h1 class=&quot;display-1 mb-4&quot;&gt;Staying on top of your bills never been this easy&lt;/h1&gt;
&lt;p class=&quot;lead fs-lg px-xl-12 px-xxl-6 mb-7&quot;&gt;Easily achieve your saving goals. Have all your recurring and one time expenses and incomes in one place.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-center&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;600&quot;&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-primary rounded mx-1&quot;&gt;Get Started&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-green rounded mx-1&quot;&gt;Free Trial&lt;/a&gt;&lt;/span&gt;
&lt;/div&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;
&lt;section class=&quot;wrapper bg-light&quot;&gt;
&lt;div class=&quot;container pb-14 pb-md-16 mb-lg-22 mb-xl-24&quot;&gt;
&lt;div class=&quot;row gx-0 mb-16 mb-mb-20&quot;&gt;
&lt;div class=&quot;col-9 col-sm-10 col-lg-9 mx-auto mt-n15 mt-md-n20&quot; data-cues data-group=&quot;images&quot; data-delay=&quot;1500&quot;&gt;
&lt;img class=&quot;img-fluid mx-auto rounded shadow-lg&quot; data-cue=&quot;slideInUp&quot; src=&quot;./assets/img/photos/sa1.jpg&quot; srcset=&quot;./assets/img/photos/sa1@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;img class=&quot;position-absolute rounded shadow-lg&quot; data-cue=&quot;slideInRight&quot; src=&quot;./assets/img/photos/sa2.jpg&quot; srcset=&quot;./assets/img/photos/sa2@2x.jpg 2x&quot; style=&quot;top: 20%; right:-10%; max-width:30%; height: auto;&quot; alt=&quot;&quot; /&gt;
&lt;img class=&quot;position-absolute rounded shadow-lg&quot; data-cue=&quot;slideInLeft&quot; src=&quot;./assets/img/photos/sa3.jpg&quot; srcset=&quot;./assets/img/photos/sa3@2x.jpg 2x&quot; style=&quot;top: 10%; left:-10%; max-width:30%; height: auto;&quot; alt=&quot;&quot; /&gt;
&lt;img class=&quot;position-absolute rounded shadow-lg&quot; data-cue=&quot;slideInLeft&quot; src=&quot;./assets/img/photos/sa4.jpg&quot; srcset=&quot;./assets/img/photos/sa4@2x.jpg 2x&quot; style=&quot;bottom: 10%; left:-13%; max-width:30%; height: auto;&quot; alt=&quot;&quot; /&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-6" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo6.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero6.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-6">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-6" 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-soft-primary&quot;&gt;
&lt;div class=&quot;container pt-5 pb-15 py-lg-17 py-xl-19 pb-xl-20 position-relative&quot;&gt;
&lt;img class=&quot;position-lg-absolute col-12 col-lg-10 col-xl-11 col-xxl-10 px-lg-5 px-xl-0 ms-n5 ms-sm-n8 ms-md-n10 ms-lg-0 mb-md-4 mb-lg-0&quot; src=&quot;./assets/img/photos/devices.png&quot; srcset=&quot;./assets/img/photos/devices@2x.png 2x&quot; data-cue=&quot;fadeIn&quot; alt=&quot;&quot; style=&quot;top: -1%; left: -21%;&quot; /&gt;
&lt;div class=&quot;row gx-0 align-items-center&quot;&gt;
&lt;div class=&quot;col-md-10 offset-md-1 col-lg-5 offset-lg-7 offset-xxl-6 ps-xxl-12 mt-md-n9 text-center text-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
&lt;h1 class=&quot;display-2 mb-4 mx-sm-n2 mx-md-0&quot;&gt;Get all of your steps, exercise, sleep and meds in one place.&lt;/h1&gt;
&lt;p class=&quot;lead fs-lg mb-7 px-md-10 px-lg-0&quot;&gt;Sandbox is now available to download from both the App Store and Google Play Store.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-center justify-content-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-primary btn-icon btn-icon-start rounded me-2&quot;&gt;&lt;i class=&quot;uil uil-apple&quot;&gt;&lt;/i&gt; App Store&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-green btn-icon btn-icon-start rounded&quot;&gt;&lt;i class=&quot;uil uil-google-play&quot;&gt;&lt;/i&gt; Google Play&lt;/a&gt;&lt;/span&gt;
&lt;/div&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-7" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo7.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero7.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-7">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-7" 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-gradient-primary&quot;&gt;
&lt;div class=&quot;container py-14 pt-md-15 pb-md-18&quot;&gt;
&lt;div class=&quot;row text-center&quot;&gt;
&lt;div class=&quot;col-lg-9 col-xxl-7 mx-auto&quot; data-cues=&quot;zoomIn&quot; data-group=&quot;welcome&quot; data-interval=&quot;-200&quot;&gt;
&lt;h2 class=&quot;display-1 mb-4&quot;&gt;Creative. Smart. Awesome.&lt;/h2&gt;
&lt;p class=&quot;lead fs-24 lh-sm px-md-5 px-xl-15 px-xxl-10 mb-7&quot;&gt;We are an award winning web &amp; mobile design agency that strongly believes in the power of creative ideas.&lt;/p&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;d-flex justify-content-center&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;join&quot; data-delay=&quot;900&quot;&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-lg btn-primary rounded-pill mx-1&quot;&gt;See Projects&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-lg btn-outline-primary rounded-pill mx-1&quot;&gt;Contact Us&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;!-- /div --&gt;
&lt;div class=&quot;row mt-12&quot; data-cue=&quot;fadeIn&quot; data-delay=&quot;1600&quot;&gt;
&lt;div class=&quot;col-lg-8 mx-auto&quot;&gt;
&lt;figure&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;./assets/img/illustrations/i12.png&quot; srcset=&quot;./assets/img/illustrations/i12@2x.png 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-8" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo8.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero8.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-8">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-8" 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&quot;&gt;
&lt;div class=&quot;card bg-soft-primary rounded-4 mt-2 mb-13 mb-md-17&quot;&gt;
&lt;div class=&quot;card-body p-md-10 py-xl-11 px-xl-15&quot;&gt;
&lt;div class=&quot;row gx-lg-8 gx-xl-0 gy-10 align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-6 order-lg-2 d-flex position-relative&quot;&gt;
&lt;img class=&quot;img-fluid ms-auto mx-auto me-lg-8&quot; src=&quot;./assets/img/photos/co3.png&quot; srcset=&quot;./assets/img/photos/co3@2x.png 2x&quot; alt=&quot;&quot; data-cue=&quot;fadeIn&quot;&gt;
&lt;div data-cue=&quot;slideInRight&quot; data-delay=&quot;300&quot;&gt;
&lt;div class=&quot;card shadow-lg position-absolute&quot; style=&quot;bottom: 10%; right: -3%;&quot;&gt;
&lt;div class=&quot;card-body py-4 px-5&quot;&gt;
&lt;div class=&quot;d-flex flex-row align-items-center&quot;&gt;
&lt;div&gt;
&lt;div class=&quot;icon btn btn-circle btn-md btn-soft-primary pe-none mx-auto me-3&quot;&gt; &lt;i class=&quot;uil uil-users-alt&quot;&gt;&lt;/i&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h3 class=&quot;counter mb-0 text-nowrap&quot;&gt;25000+&lt;/h3&gt;
&lt;p class=&quot;fs-14 lh-sm mb-0 text-nowrap&quot;&gt;Happy Clients&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;/div&gt;
&lt;!--/div --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-lg-6 text-center text-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
&lt;h1 class=&quot;display-2 mb-5&quot;&gt;Crafting project specific solutions with expertise.&lt;/h1&gt;
&lt;p class=&quot;lead fs-lg lh-sm mb-7 pe-xl-10&quot;&gt;We&apos;re a company that focuses on establishing long-term relationships with customers.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-center justify-content-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-primary rounded-pill me-2&quot;&gt;Explore Now&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-outline-primary rounded-pill&quot;&gt;Contact Us&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-9" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo9.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero9.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-9">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-9" 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-soft-primary&quot;&gt;
&lt;div class=&quot;container pt-10 pb-12 pt-md-14 pb-md-17&quot;&gt;
&lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-10 align-items-center&quot;&gt;
&lt;div class=&quot;col-md-10 offset-md-1 offset-lg-0 col-lg-5 mt-lg-n2 text-center text-lg-start order-2 order-lg-0&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
&lt;h1 class=&quot;display-1 mb-5 mx-md-10 mx-lg-0&quot;&gt;Sandbox is effortless and powerful with &lt;br /&gt;&lt;span class=&quot;typer text-primary text-nowrap&quot; data-delay=&quot;100&quot; data-words=&quot;easy usage,fast transactions,secure payments&quot;&gt;&lt;/span&gt;&lt;span class=&quot;cursor text-primary&quot; data-owner=&quot;typer&quot;&gt;&lt;/span&gt;&lt;/h1&gt;
&lt;p class=&quot;lead fs-lg mb-7&quot;&gt;Achieve your saving goals. Have all your recurring and one time expenses and incomes in one place.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-center justify-content-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-lg btn-primary rounded me-2&quot;&gt;Get Started&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-lg btn-green rounded&quot;&gt;Free Trial&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-lg-7&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-3 offset-1 offset-lg-0 col-lg-4 d-flex flex-column&quot; data-cues=&quot;zoomIn&quot; data-group=&quot;col-start&quot; data-delay=&quot;300&quot;&gt;
&lt;div class=&quot;ms-auto mt-auto&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;./assets/img/photos/sa20.jpg&quot; srcset=&quot;./assets/img/photos/sa20@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;ms-auto mt-5 mb-10&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;./assets/img/photos/sa18.jpg&quot; srcset=&quot;./assets/img/photos/sa18@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-4 col-lg-5&quot; data-cue=&quot;zoomIn&quot;&gt;
&lt;div&gt;&lt;img class=&quot;w-100 img-fluid rounded shadow-lg&quot; src=&quot;./assets/img/photos/sa16.jpg&quot; srcset=&quot;./assets/img/photos/sa16@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-3 d-flex flex-column&quot; data-cues=&quot;zoomIn&quot; data-group=&quot;col-end&quot; data-delay=&quot;300&quot;&gt;
&lt;div class=&quot;mt-auto&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;./assets/img/photos/sa21.jpg&quot; srcset=&quot;./assets/img/photos/sa21@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;mt-5&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;./assets/img/photos/sa19.jpg&quot; srcset=&quot;./assets/img/photos/sa19@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;mt-5 mb-10&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;./assets/img/photos/sa17.jpg&quot; srcset=&quot;./assets/img/photos/sa17@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-10" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo10.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero10.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-10">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-10" 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 pt-11 pt-md-13 pb-11 pb-md-19 pb-lg-22 text-center&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-8 col-xl-7 col-xxl-6 mx-auto&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot;&gt;
&lt;h1 class=&quot;display-1 fs-60 mb-4 px-md-15 px-lg-0&quot;&gt;We bring solutions to make life easier.&lt;/h1&gt;
&lt;p class=&quot;lead fs-24 lh-sm mb-7 mx-md-13 mx-lg-10&quot;&gt;We are a creative company that focuses on long term relationships with customers.&lt;/p&gt;
&lt;div&gt;
&lt;a class=&quot;btn btn-lg btn-primary rounded mb-5&quot;&gt;Read More&lt;/a&gt;
&lt;/div&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;
&lt;section class=&quot;wrapper bg-dark&quot;&gt;
&lt;div class=&quot;container pt-14 pt-md-16 pb-9 pb-md-11&quot;&gt;
&lt;figure class=&quot;rounded mt-md-n21 mt-lg-n23 mb-14&quot; data-cue=&quot;slideInDown&quot; data-delay=&quot;900&quot;&gt;&lt;img src=&quot;./assets/img/photos/about15.jpg&quot; srcset=&quot;./assets/img/photos/about15@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-11" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo11.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero11.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-11">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-11" 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-image bg-overlay bg-overlay-400 bg-content text-white&quot; data-image-src=&quot;./assets/img/photos/bg4.jpg&quot;&gt;
&lt;div class=&quot;container pt-18 pb-16&quot; style=&quot;z-index: 5; position:relative&quot;&gt;
&lt;div class=&quot;row gx-0 gy-12 align-items-center&quot;&gt;
&lt;div class=&quot;col-md-10 offset-md-1 offset-lg-0 col-lg-6 content text-center text-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
&lt;h1 class=&quot;display-2 mb-5 text-white&quot;&gt;Crafting project specific solutions with expertise.&lt;/h1&gt;
&lt;p class=&quot;lead fs-lg lh-sm mb-7 pe-xl-10&quot;&gt;We&rsquo;re a creative company that focuses on establishing long-term relationships with customers.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-center justify-content-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-white rounded-pill me-2&quot;&gt;Explore Now&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-outline-white rounded-pill&quot;&gt;Contact Us&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-lg-5 offset-lg-1&quot;&gt;
&lt;div class=&quot;swiper-container dots-over shadow-lg&quot; data-margin=&quot;5&quot; data-nav=&quot;true&quot; data-dots=&quot;true&quot;&gt;
&lt;div class=&quot;swiper&quot;&gt;
&lt;div class=&quot;swiper-wrapper&quot;&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;&lt;img src=&quot;./assets/img/photos/about21.jpg&quot; srcset=&quot;./assets/img/photos/about21@2x.jpg 2x&quot; class=&quot;rounded&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;&lt;a href=&quot;./assets/media/movie.mp4&quot; class=&quot;btn btn-circle btn-white btn-play ripple mx-auto mb-5 position-absolute&quot; style=&quot;top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;&quot; data-glightbox data-gallery=&quot;hero&quot;&gt;&lt;i class=&quot;icn-caret-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;img src=&quot;./assets/img/photos/about22.jpg&quot; srcset=&quot;./assets/img/photos/about22@2x.jpg 2x&quot; class=&quot;rounded&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;&lt;img src=&quot;./assets/img/photos/about23.jpg&quot; srcset=&quot;./assets/img/photos/about23@2x.jpg 2x&quot; class=&quot;rounded&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;!-- /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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-12" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo12.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero12.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-12">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-12" 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-soft-primary&quot;&gt;
&lt;div class=&quot;container pt-10 pb-15 pt-md-14 pb-md-20&quot;&gt;
&lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-10 mb-5 align-items-center&quot;&gt;
&lt;div class=&quot;col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start order-2 order-lg-0&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
&lt;h1 class=&quot;display-1 mb-5 mx-md-n5 mx-lg-0&quot;&gt;Creative. Smart. Awesome.&lt;/h1&gt;
&lt;p class=&quot;lead fs-lg mb-7&quot;&gt;We specialize in web, mobile and identity design. We love to turn ideas into beautiful things.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-center justify-content-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-primary rounded me-2&quot;&gt;See Projects&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-yellow rounded&quot;&gt;Learn More&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-lg-7&quot; data-cue=&quot;slideInDown&quot;&gt;
&lt;figure&gt;&lt;img class=&quot;w-auto&quot; src=&quot;./assets/img/illustrations/i6.png&quot; srcset=&quot;./assets/img/illustrations/i6@2x.png 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&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;
&lt;section class=&quot;wrapper bg-light&quot;&gt;
&lt;div class=&quot;container pt-14 pt-md-16 pb-9 pb-md-11 pb-md-17&quot;&gt;
&lt;div class=&quot;row gx-md-5 gy-5 mt-n18 mt-md-n21 mb-14 mb-md-17&quot;&gt;
&lt;div class=&quot;col-md-6 col-xl-3&quot;&gt;
&lt;div class=&quot;card shadow-lg&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;img src=&quot;./assets/img/icons/lineal/browser.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-yellow mb-3&quot; alt=&quot;&quot; /&gt;
&lt;h4&gt;Content Marketing&lt;/h4&gt;
&lt;p class=&quot;mb-2&quot;&gt;Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover link-yellow&quot;&gt;Learn More&lt;/a&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-md-6 col-xl-3&quot;&gt;
&lt;div class=&quot;card shadow-lg&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;img src=&quot;./assets/img/icons/lineal/chat-2.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-green mb-3&quot; alt=&quot;&quot; /&gt;
&lt;h4&gt;Social Engagement&lt;/h4&gt;
&lt;p class=&quot;mb-2&quot;&gt;Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover link-green&quot;&gt;Learn More&lt;/a&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-md-6 col-xl-3&quot;&gt;
&lt;div class=&quot;card shadow-lg&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;img src=&quot;./assets/img/icons/lineal/id-card.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-orange mb-3&quot; alt=&quot;&quot; /&gt;
&lt;h4&gt;Identity &amp; Branding&lt;/h4&gt;
&lt;p class=&quot;mb-2&quot;&gt;Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover link-orange&quot;&gt;Learn More&lt;/a&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-md-6 col-xl-3&quot;&gt;
&lt;div class=&quot;card shadow-lg&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;img src=&quot;./assets/img/icons/lineal/gift.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-blue mb-3&quot; alt=&quot;&quot; /&gt;
&lt;h4&gt;Product Design&lt;/h4&gt;
&lt;p class=&quot;mb-2&quot;&gt;Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover link-blue&quot;&gt;Learn More&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-13" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo13.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero13.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-13">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-13" 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-image bg-overlay bg-overlay-300 text-white&quot; data-image-src=&quot;./assets/img/photos/bg2.jpg&quot;&gt;
&lt;div class=&quot;container pt-17 pb-19 pt-md-19 pb-md-20 text-center&quot;&gt;
&lt;div class=&quot;row mb-11&quot;&gt;
&lt;div class=&quot;col-md-9 col-lg-7 col-xxl-6 mx-auto&quot; data-cues=&quot;zoomIn&quot; data-group=&quot;page-title&quot; data-interval=&quot;-200&quot;&gt;
&lt;h2 class=&quot;h6 text-uppercase ls-xl text-white mb-5&quot;&gt;Hello! This is Sandbox&lt;/h2&gt;
&lt;h3 class=&quot;display-1 text-white mb-7&quot;&gt;We bring rapid solutions for your business&lt;/h3&gt;
&lt;a href=&quot;./assets/media/movie.mp4&quot; class=&quot;btn btn-circle btn-white btn-play ripple mx-auto mb-5&quot; data-glightbox&gt;&lt;i class=&quot;icn-caret-right&quot;&gt;&lt;/i&gt;&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;
&lt;section class=&quot;wrapper bg-light angled upper-end lower-end&quot;&gt;
&lt;div class=&quot;container pb-14 pb-md-16&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-12 mt-n20&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/about5.jpg&quot; srcset=&quot;./assets/img/photos/about5@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;div class=&quot;row&quot; data-cue=&quot;slideInUp&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-300 text-white mt-n5 mt-lg-0 mt-lg-n50p mb-lg-n50p border-radius-lg-top&quot; data-image-src=&quot;./assets/img/photos/bg2.jpg&quot;&gt;
&lt;div class=&quot;card-body p-9 p-xl-10&quot;&gt;
&lt;div class=&quot;row align-items-center counter-wrapper gy-4 text-center&quot;&gt;
&lt;div class=&quot;col-6 col-lg-3&quot;&gt;
&lt;h3 class=&quot;counter counter-lg text-white&quot;&gt;7518&lt;/h3&gt;
&lt;p&gt;Completed Projects&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-6 col-lg-3&quot;&gt;
&lt;h3 class=&quot;counter counter-lg text-white&quot;&gt;3472&lt;/h3&gt;
&lt;p&gt;Satisfied Customers&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-6 col-lg-3&quot;&gt;
&lt;h3 class=&quot;counter counter-lg text-white&quot;&gt;2184&lt;/h3&gt;
&lt;p&gt;Expert Employees&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-6 col-lg-3&quot;&gt;
&lt;h3 class=&quot;counter counter-lg text-white&quot;&gt;4523&lt;/h3&gt;
&lt;p&gt;Awards Won&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&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;!-- /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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-14" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo14.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero14.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-14">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-14" 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-soft-primary&quot;&gt;
&lt;div class=&quot;container pt-10 pt-md-14 pb-14 pb-md-0&quot;&gt;
&lt;div class=&quot;row gx-md-8 gx-lg-12 gy-3 gy-lg-0 mb-13&quot;&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;h1 class=&quot;display-1 fs-66 lh-xxs mb-0&quot;&gt;We bring rapid solutions for your business.&lt;/h1&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;p class=&quot;lead fs-25 my-3&quot;&gt;We are an award winning branding design agency that strongly believes in the power of creative ideas.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover&quot;&gt;Learn More&lt;/a&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;position-relative&quot;&gt;
&lt;div class=&quot;shape bg-dot primary rellax w-17 h-21&quot; data-rellax-speed=&quot;1&quot; style=&quot;top: -2.5rem; right: -2.7rem;&quot;&gt;&lt;/div&gt;
&lt;figure class=&quot;rounded mb-md-n20&quot;&gt;&lt;img src=&quot;./assets/img/photos/about18.jpg&quot; srcset=&quot;./assets/img/photos/about18@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-15" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo15.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero15.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-15">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-15" 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;div class=&quot;swiper-container swiper-hero dots-over&quot; data-margin=&quot;0&quot; data-autoplay=&quot;true&quot; data-autoplaytime=&quot;5000&quot; data-nav=&quot;true&quot; data-dots=&quot;true&quot; data-items=&quot;1&quot;&gt;
&lt;div class=&quot;swiper&quot;&gt;
&lt;div class=&quot;swiper-wrapper&quot;&gt;
&lt;div class=&quot;swiper-slide h-100 bg-overlay bg-overlay-400 bg-dark&quot; style=&quot;background-image:url(./assets/img/photos/bg7.jpg);&quot;&gt;
&lt;div class=&quot;container h-100&quot;&gt;
&lt;div class=&quot;row h-100&quot;&gt;
&lt;div class=&quot;col-md-10 offset-md-1 col-lg-7 offset-lg-0 col-xl-6 col-xxl-5 text-center text-lg-start justify-content-center align-self-center align-items-start&quot;&gt;
&lt;h2 class=&quot;display-1 fs-56 mb-4 text-white animate__animated animate__slideInDown animate__delay-1s&quot;&gt;We bring solutions to make life easier.&lt;/h2&gt;
&lt;p class=&quot;lead fs-23 lh-sm mb-7 text-white animate__animated animate__slideInRight animate__delay-2s&quot;&gt;We are a creative company that focuses on long term relationships with customers.&lt;/p&gt;
&lt;div class=&quot;animate__animated animate__slideInUp animate__delay-3s&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-outline-white rounded-pill&quot;&gt;Read More&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!--/.container --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide h-100 bg-overlay bg-overlay-400 bg-dark&quot; style=&quot;background-image:url(./assets/img/photos/bg8.jpg);&quot;&gt;
&lt;div class=&quot;container h-100&quot;&gt;
&lt;div class=&quot;row h-100&quot;&gt;
&lt;div class=&quot;col-md-11 col-lg-8 col-xl-7 col-xxl-6 mx-auto text-center justify-content-center align-self-center&quot;&gt;
&lt;h2 class=&quot;display-1 fs-56 mb-4 text-white animate__animated animate__slideInDown animate__delay-1s&quot;&gt;We are trusted by over a million customers.&lt;/h2&gt;
&lt;p class=&quot;lead fs-23 lh-sm mb-7 text-white animate__animated animate__slideInRight animate__delay-2s&quot;&gt;Here a few reasons why our customers choose us.&lt;/p&gt;
&lt;div class=&quot;animate__animated animate__slideInUp animate__delay-3s&quot;&gt;&lt;a href=&quot;./assets/media/movie.mp4&quot; class=&quot;btn btn-circle btn-white btn-play ripple mx-auto mb-5&quot; data-glightbox&gt;&lt;i class=&quot;icn-caret-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!--/.container --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide h-100 bg-overlay bg-overlay-400 bg-dark&quot; style=&quot;background-image:url(./assets/img/photos/bg9.jpg);&quot;&gt;
&lt;div class=&quot;container h-100&quot;&gt;
&lt;div class=&quot;row h-100&quot;&gt;
&lt;div class=&quot;col-md-10 offset-md-1 col-lg-7 offset-lg-5 col-xl-6 offset-xl-6 col-xxl-5 offset-xxl-6 text-center text-lg-start justify-content-center align-self-center align-items-start&quot;&gt;
&lt;h2 class=&quot;display-1 fs-56 mb-4 text-white animate__animated animate__slideInDown animate__delay-1s&quot;&gt;Just sit and relax.&lt;/h2&gt;
&lt;p class=&quot;lead fs-23 lh-sm mb-7 text-white animate__animated animate__slideInRight animate__delay-2s&quot;&gt;We make sure your spending is stress free so that you can have the perfect control.&lt;/p&gt;
&lt;div class=&quot;animate__animated animate__slideInUp animate__delay-3s&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-outline-white rounded-pill&quot;&gt;Contact Us&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!--/.container --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;/div&gt;
&lt;!--/.swiper-wrapper --&gt;
&lt;/div&gt;
&lt;!-- /.swiper --&gt;
&lt;/div&gt;
&lt;!-- /.swiper-container --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-16" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo16.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero16.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-16">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-16" 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-gray&quot;&gt;
&lt;div class=&quot;container pt-12 pt-md-14 pb-14 pb-md-16&quot;&gt;
&lt;div class=&quot;row gy-10 gy-md-13 gy-lg-0 align-items-center&quot;&gt;
&lt;div class=&quot;col-md-8 col-lg-5 d-flex position-relative mx-auto&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;header&quot;&gt;
&lt;div class=&quot;img-mask mask-1&quot;&gt;&lt;img src=&quot;./assets/img/photos/about17.jpg&quot; srcset=&quot;./assets/img/photos/about17@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-lg position-absolute&quot; style=&quot;bottom: 10%; right: 2%;&quot;&gt;
&lt;div class=&quot;card-body py-4 px-5&quot;&gt;
&lt;div class=&quot;d-flex flex-row align-items-center&quot;&gt;
&lt;div&gt;
&lt;img src=&quot;./assets/img/icons/lineal/check.svg&quot; class=&quot;svg-inject icon-svg icon-svg-sm text-primary mx-auto me-3&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h3 class=&quot;counter mb-0 text-nowrap&quot;&gt;250+&lt;/h3&gt;
&lt;p class=&quot;fs-14 lh-sm mb-0 text-nowrap&quot;&gt;Projects Done&lt;/p&gt;
&lt;/div&gt;
&lt;/div&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-lg-6 offset-lg-1 col-xxl-5 text-center text-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
&lt;h1 class=&quot;display-1 mb-5&quot;&gt;I&apos;m User Interface Designer &amp; Developer.&lt;/h1&gt;
&lt;p class=&quot;lead fs-25 lh-sm mb-7 px-md-10 px-lg-0&quot;&gt;Hello! I&apos;m Julia, a freelance user interface designer &amp; developer based in London. I&rsquo;m very passionate about the work that I do.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-center justify-content-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-primary rounded-pill me-2&quot;&gt;See My Works&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-outline-primary rounded-pill&quot;&gt;Contact Me&lt;/a&gt;&lt;/span&gt;
&lt;/div&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-17" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo17.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero17.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-17">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-17" 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-gray&quot;&gt;
&lt;div class=&quot;container pt-12 pt-md-16 text-center&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-8 col-xxl-7 mx-auto text-center&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
&lt;h2 class=&quot;fs-16 text-uppercase ls-xl text-dark mb-4&quot;&gt;Hello! This is Sandbox&lt;/h2&gt;
&lt;h1 class=&quot;display-1 fs-58 mb-7&quot;&gt;We bring rapid solutions for your business.&lt;/h1&gt;
&lt;div class=&quot;d-flex justify-content-center&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-primary rounded-pill me-2&quot;&gt;Explore Now&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-outline-primary rounded-pill&quot;&gt;Contact Us&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;figure class=&quot;position-absoute&quot; style=&quot;bottom: 0; left: 0; z-index: 2;&quot;&gt;&lt;img src=&quot;./assets/img/photos/bg11.jpg&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-18" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo18.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero18.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-18">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-18" 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-card&quot;&gt;
&lt;div class=&quot;card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 mt-2 mb-5&quot; data-image-src=&quot;./assets/img/photos/bg22.png&quot;&gt;
&lt;div class=&quot;card-body py-14 px-0&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row gx-md-8 gx-xl-12 gy-10 align-items-center text-center text-lg-start&quot;&gt;
&lt;div class=&quot;col-lg-6&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;900&quot;&gt;
&lt;h1 class=&quot;display-2 mb-4 me-xl-5 me-xxl-0&quot;&gt;Networking &lt;span class=&quot;text-gradient gradient-1&quot;&gt;solutions&lt;/span&gt; for worldwide communication&lt;/h1&gt;
&lt;p class=&quot;lead fs-23 lh-sm mb-7 pe-xxl-15&quot;&gt;We&apos;re a company that focuses on establishing long-term relationships with customers.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-gradient gradient-1 rounded&quot;&gt;Explore Now&lt;/a&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;img class=&quot;img-fluid mb-n18&quot; src=&quot;./assets/img/illustrations/3d6.png&quot; srcset=&quot;./assets/img/illustrations/3d6@2x.png 2x&quot; data-cue=&quot;fadeIn&quot; data-delay=&quot;300&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;/div&gt;
&lt;!-- /.container-card --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-19" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo19.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero19.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-19">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-19" 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-image bg-overlay bg-overlay-300&quot; data-image-src=&quot;./assets/img/photos/bg16.png&quot;&gt;
&lt;div class=&quot;container pt-17 pb-19 pt-md-18 pb-md-17 text-center&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-8 col-xl-7 col-xxl-6 mx-auto&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot;&gt;
&lt;h1 class=&quot;display-1 text-white fs-60 mb-4 px-md-15 px-lg-0&quot;&gt;We bring solutions to make life &lt;span class=&quot;underline-3 style-2 yellow&quot;&gt;easier&lt;/span&gt;&lt;/h1&gt;
&lt;p class=&quot;lead fs-24 text-white lh-sm mb-7 mx-md-13 mx-lg-10&quot;&gt;We are a creative company that focuses on long term relationships with customers.&lt;/p&gt;
&lt;div&gt;
&lt;a class=&quot;btn btn-white rounded mb-10 mb-xxl-5&quot;&gt;Read More&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;div class=&quot;overflow-hidden&quot;&gt;
&lt;div class=&quot;divider text-light mx-n2&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 60&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M0,0V60H1440V0A5771,5771,0,0,1,0,0Z&quot;/&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;
&lt;section class=&quot;wrapper bg-light&quot;&gt;
&lt;div class=&quot;container pb-15 pb-md-17&quot;&gt;
&lt;div class=&quot;row gx-md-5 gy-5 mt-n19&quot;&gt;
&lt;div class=&quot;col-md-6 col-xl-3&quot;&gt;
&lt;div class=&quot;card shadow-lg&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;img src=&quot;./assets/img/icons/solid/edit.svg&quot; class=&quot;svg-inject icon-svg icon-svg-sm solid-mono text-fuchsia mb-3&quot; alt=&quot;&quot; /&gt;
&lt;h4&gt;Content Marketing&lt;/h4&gt;
&lt;p class=&quot;mb-2&quot;&gt;Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover link-fuchsia&quot;&gt;Learn More&lt;/a&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-md-6 col-xl-3&quot;&gt;
&lt;div class=&quot;card shadow-lg&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;img src=&quot;./assets/img/icons/solid/team.svg&quot; class=&quot;svg-inject icon-svg icon-svg-sm solid-mono text-violet mb-3&quot; alt=&quot;&quot; /&gt;
&lt;h4&gt;Social Engagement&lt;/h4&gt;
&lt;p class=&quot;mb-2&quot;&gt;Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover link-violet&quot;&gt;Learn More&lt;/a&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-md-6 col-xl-3&quot;&gt;
&lt;div class=&quot;card shadow-lg&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;img src=&quot;./assets/img/icons/solid/lamp.svg&quot; class=&quot;svg-inject icon-svg icon-svg-sm solid-mono text-orange mb-3&quot; alt=&quot;&quot; /&gt;
&lt;h4&gt;Identity &amp; Branding&lt;/h4&gt;
&lt;p class=&quot;mb-2&quot;&gt;Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover link-orange&quot;&gt;Learn More&lt;/a&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-md-6 col-xl-3&quot;&gt;
&lt;div class=&quot;card shadow-lg&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;img src=&quot;./assets/img/icons/solid/delivery-box.svg&quot; class=&quot;svg-inject icon-svg icon-svg-sm solid-mono text-green mb-3&quot; alt=&quot;&quot; /&gt;
&lt;h4&gt;Product Design&lt;/h4&gt;
&lt;p class=&quot;mb-2&quot;&gt;Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover link-green&quot;&gt;Learn More&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>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-20" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo20.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero20.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-20">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-20" 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;video-wrapper bg-overlay bg-overlay-gradient px-0 mt-0 min-vh-80&quot;&gt;
&lt;video poster=&quot;./assets/img/photos/movie2.jpg&quot; src=&quot;./assets/media/movie2.mp4&quot; autoplay loop playsinline muted&gt;&lt;/video&gt;
&lt;div class=&quot;video-content&quot;&gt;
&lt;div class=&quot;container text-center&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-8 col-xl-6 text-center text-white mx-auto&quot;&gt;
&lt;h1 class=&quot;display-1 fs-54 text-white mb-5&quot;&gt;&lt;span class=&quot;rotator-zoom&quot;&gt;Rapid Solutions,Innovative Thinking,Top-Notch Support&lt;/span&gt;&lt;/h1&gt;
&lt;p class=&quot;lead fs-24 mb-0 mx-xxl-8&quot;&gt;We are a digital agency specializing in web design, mobile development and seo optimization.&lt;/p&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.video-content --&gt;
&lt;/div&gt;
&lt;!-- /.content-overlay --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-21" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo21.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero21.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-21">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-21" 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 pt-10 pt-md-14 pb-14 pb-md-16 text-center&quot;&gt;
&lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-10 gy-xl-0 mb-14 align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-7 order-lg-2&quot;&gt;
&lt;figure&gt;&lt;img class=&quot;img-auto&quot; src=&quot;./assets/img/illustrations/i21.png&quot; srcset=&quot;./assets/img/illustrations/i21@2x.png 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start&quot;&gt;
&lt;h1 class=&quot;display-1 fs-54 mb-5 mx-md-n5 mx-lg-0 mt-7&quot;&gt;A digital agency &lt;br class=&quot;d-md-none&quot;&gt;specializing on &lt;br class=&quot;d-md-none&quot;&gt;&lt;span class=&quot;rotator-fade text-primary&quot;&gt;mobile design,web design,3D animation&lt;/span&gt;&lt;/h1&gt;
&lt;p class=&quot;lead fs-lg mb-7&quot;&gt;We are an award winning design agency that strongly believes in the power of creative ideas.&lt;/p&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-lg btn-primary rounded-pill me-2&quot;&gt;Get Started&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;p class=&quot;text-center mb-8&quot;&gt;Trusted by over 2K+ clients across the world&lt;/p&gt;
&lt;div class=&quot;row row-cols-4 row-cols-md-4 row-cols-lg-7 row-cols-xl-7 gy-10 mb-2 d-flex align-items-center justify-content-center&quot;&gt;
&lt;div class=&quot;col&quot;&gt;&lt;img class=&quot;img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5&quot; src=&quot;./assets/img/brands/c1.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;&lt;img class=&quot;img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5&quot; src=&quot;./assets/img/brands/c2.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;&lt;img class=&quot;img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5&quot; src=&quot;./assets/img/brands/c3.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;&lt;img class=&quot;img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5&quot; src=&quot;./assets/img/brands/c4.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;&lt;img class=&quot;img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5&quot; src=&quot;./assets/img/brands/c5.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;&lt;img class=&quot;img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5&quot; src=&quot;./assets/img/brands/c6.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;&lt;img class=&quot;img-fluid px-md-3 px-lg-0 px-xl-2 px-xxl-5&quot; src=&quot;./assets/img/brands/c7.png&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;div class=&quot;overflow-hidden&quot;&gt;
&lt;div class=&quot;divider text-soft-primary mx-n2&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 100&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M1260,1.65c-60-5.07-119.82,2.47-179.83,10.13s-120,11.48-180,9.57-120-7.66-180-6.42c-60,1.63-120,11.21-180,16a1129.52,1129.52,0,0,1-180,0c-60-4.78-120-14.36-180-19.14S60,7,30,7H0v93H1440V30.89C1380.07,23.2,1319.93,6.15,1260,1.65Z&quot;/&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
</div>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-22" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo22.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero22.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-22">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-22" 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;section-frame br-fix overflow-hidden&quot;&gt;
&lt;div class=&quot;wrapper image-wrapper bg-cover bg-image bg-overlay bg-overlay-500&quot; data-image-src=&quot;./assets/img/photos/bg26.jpg&quot;&gt;
&lt;div class=&quot;container pt-18 pt-lg-21 pb-17 pb-lg-19 text-center&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-9 col-lg-8 col-xl-7 col-xxl-6 mx-auto&quot; data-cues=&quot;zoomIn&quot; data-group=&quot;page-title&quot; data-interval=&quot;-200&quot; data-delay=&quot;500&quot;&gt;
&lt;h2 class=&quot;h6 text-uppercase ls-xl text-white mb-5&quot;&gt;Hello! We are Sandbox&lt;/h2&gt;
&lt;h3 class=&quot;display-1 fs-54 text-white mb-7&quot;&gt;Grow your business with our marketing solutions&lt;/h3&gt;
&lt;a href=&quot;./assets/media/movie.mp4&quot; class=&quot;btn btn-circle btn-white btn-play ripple mx-auto&quot; data-glightbox&gt;&lt;i class=&quot;icn-caret-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;div class=&quot;overflow-hidden&quot;&gt;
&lt;div class=&quot;divider text-white mx-n2&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 60&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M0,0V60H1440V0A5771,5771,0,0,1,0,0Z&quot;/&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.overflow-hidden --&gt;
&lt;/div&gt;
&lt;!-- /.wrapper --&gt;
&lt;/section&gt;
&lt;!--/section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-23" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo23.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero23.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-23">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-23" 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-dark&quot;&gt;
&lt;div class=&quot;swiper-container swiper-thumbs-container swiper-fullscreen nav-dark&quot; data-margin=&quot;0&quot; data-autoplay=&quot;true&quot; data-autoplaytime=&quot;5000&quot; data-nav=&quot;true&quot; data-dots=&quot;false&quot; data-items=&quot;1&quot; data-thumbs=&quot;true&quot;&gt;
&lt;div class=&quot;swiper&quot;&gt;
&lt;div class=&quot;swiper-wrapper&quot;&gt;
&lt;div class=&quot;swiper-slide bg-overlay bg-overlay-400 bg-dark bg-image&quot; data-image-src=&quot;./assets/img/photos/bg28.jpg&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide bg-overlay bg-overlay-400 bg-dark bg-image&quot; data-image-src=&quot;./assets/img/photos/bg29.jpg&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide bg-overlay bg-overlay-400 bg-dark bg-image&quot; data-image-src=&quot;./assets/img/photos/bg30.jpg&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide bg-overlay bg-overlay-400 bg-dark bg-image&quot; data-image-src=&quot;./assets/img/photos/bg31.jpg&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!--/.swiper-wrapper --&gt;
&lt;/div&gt;
&lt;!-- /.swiper --&gt;
&lt;div class=&quot;swiper swiper-thumbs&quot;&gt;
&lt;div class=&quot;swiper-wrapper&quot;&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;&lt;img src=&quot;./assets/img/photos/bg28-th.jpg&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;&lt;img src=&quot;./assets/img/photos/bg29-th.jpg&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;&lt;img src=&quot;./assets/img/photos/bg30-th.jpg&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;&lt;img src=&quot;./assets/img/photos/bg31-th.jpg&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!--/.swiper-wrapper --&gt;
&lt;/div&gt;
&lt;!-- /.swiper --&gt;
&lt;div class=&quot;swiper-static&quot;&gt;
&lt;div class=&quot;container h-100 d-flex align-items-center justify-content-center&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-8 mx-auto mt-n10 text-center&quot;&gt;
&lt;h1 class=&quot;fs-19 text-uppercase ls-xl text-white mb-3 animate__animated animate__zoomIn animate__delay-1s&quot;&gt;I&apos;m Julia Sandbox&lt;/h1&gt;
&lt;h2 class=&quot;display-1 fs-60 text-white mb-0 animate__animated animate__zoomIn animate__delay-2s&quot;&gt;couples &amp; wedding photographer&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/div&gt;
&lt;!-- /.swiper-static --&gt;
&lt;/div&gt;
&lt;!-- /.swiper-container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-24" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo24.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero24.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-24">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-24" 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-gray&quot;&gt;
&lt;div class=&quot;overflow-hidden&quot;&gt;
&lt;div class=&quot;container-fluid px-xl-0 pt-6 pb-10&quot;&gt;
&lt;div class=&quot;swiper-container&quot; data-margin=&quot;30&quot; data-dots=&quot;true&quot; data-nav=&quot;true&quot; data-centered=&quot;true&quot; data-loop=&quot;true&quot; data-items-xxl=&quot;2&quot; data-items-xl=&quot;2&quot; data-items-lg=&quot;2&quot; data-items-md=&quot;1&quot; data-items-xs=&quot;1&quot;&gt;
&lt;div class=&quot;swiper overflow-visible&quot;&gt;
&lt;div class=&quot;swiper-wrapper&quot;&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/cf1.jpg&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/cf1.jpg&quot; data-glightbox data-gallery=&quot;gallery-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/cf2.jpg&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/cf2.jpg&quot; data-glightbox data-gallery=&quot;gallery-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/cf3.jpg&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/cf3.jpg&quot; data-glightbox data-gallery=&quot;gallery-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/cf4.jpg&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/cf4.jpg&quot; data-glightbox data-gallery=&quot;gallery-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/cf5.jpg&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/cf5.jpg&quot; data-glightbox data-gallery=&quot;gallery-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/cf6.jpg&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/cf6.jpg&quot; data-glightbox data-gallery=&quot;gallery-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&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;!-- /.cotnainer --&gt;
&lt;/div&gt;
&lt;!-- /.overflow-hidden --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-25" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo25.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero25.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-25">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-25" 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-gray&quot;&gt;
&lt;div class=&quot;container pt-10 pb-14 pb-md-16&quot;&gt;
&lt;div class=&quot;swiper-container blog grid-view mb-16&quot; data-margin=&quot;30&quot; data-dots=&quot;true&quot; data-items-lg=&quot;2&quot; data-items-md=&quot;1&quot; data-items-xs=&quot;1&quot;&gt;
&lt;div class=&quot;swiper&quot;&gt;
&lt;div class=&quot;swiper-wrapper&quot;&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;overlay caption caption-overlay rounded mb-0&quot;&gt;&lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;./assets/img/photos/tb1.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;span class=&quot;badge badge-lg bg-white text-uppercase mb-3&quot;&gt;Places&lt;/span&gt;
&lt;h2 class=&quot;post-title h3 mt-1 mb-3&quot;&gt;&lt;a href=&quot;./blog-post.html&quot;&gt;The Best Moments in Venice&lt;/a&gt;&lt;/h2&gt;
&lt;ul class=&quot;post-meta text-white mb-0&quot;&gt;
&lt;li class=&quot;post-date&quot;&gt;&lt;i class=&quot;uil uil-calendar-alt&quot;&gt;&lt;/i&gt;&lt;span&gt;8 Aug 2022&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;post-author&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-user&quot;&gt;&lt;/i&gt;&lt;span&gt;By Sandbox&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;post-comments&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-comment&quot;&gt;&lt;/i&gt;3&lt;span&gt; Comments&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- /.post-meta --&gt;
&lt;/figcaption&gt;
&lt;!-- /figcaption --&gt;
&lt;/figure&gt;
&lt;!-- /figure --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;overlay caption caption-overlay rounded mb-0&quot;&gt;&lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;./assets/img/photos/tb2.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;span class=&quot;badge badge-lg bg-white text-uppercase mb-3&quot;&gt;Restaurants&lt;/span&gt;
&lt;h2 class=&quot;post-title h3 mt-1 mb-3&quot;&gt;&lt;a href=&quot;./blog-post.html&quot;&gt;10 Great Places in Belgium&lt;/a&gt;&lt;/h2&gt;
&lt;ul class=&quot;post-meta text-white mb-0&quot;&gt;
&lt;li class=&quot;post-date&quot;&gt;&lt;i class=&quot;uil uil-calendar-alt&quot;&gt;&lt;/i&gt;&lt;span&gt;5 Jul 2022&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;post-author&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-user&quot;&gt;&lt;/i&gt;&lt;span&gt;By Sandbox&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;post-comments&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-comment&quot;&gt;&lt;/i&gt;5&lt;span&gt; Comments&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- /.post-meta --&gt;
&lt;/figcaption&gt;
&lt;!-- /figcaption --&gt;
&lt;/figure&gt;
&lt;!-- /figure --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;overlay caption caption-overlay rounded mb-0&quot;&gt;&lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;./assets/img/photos/tb3.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;span class=&quot;badge badge-lg bg-white text-uppercase mb-3&quot;&gt;Roadtrip&lt;/span&gt;
&lt;h2 class=&quot;post-title h3 mt-1 mb-3&quot;&gt;&lt;a href=&quot;./blog-post.html&quot;&gt;A Dreamy Roadtrip in Australia&lt;/a&gt;&lt;/h2&gt;
&lt;ul class=&quot;post-meta text-white mb-0&quot;&gt;
&lt;li class=&quot;post-date&quot;&gt;&lt;i class=&quot;uil uil-calendar-alt&quot;&gt;&lt;/i&gt;&lt;span&gt;23 Jun 2022&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;post-author&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-user&quot;&gt;&lt;/i&gt;&lt;span&gt;By Sandbox&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;post-comments&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-comment&quot;&gt;&lt;/i&gt;8&lt;span&gt; Comments&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- /.post-meta --&gt;
&lt;/figcaption&gt;
&lt;!-- /figcaption --&gt;
&lt;/figure&gt;
&lt;!-- /figure --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;overlay caption caption-overlay rounded mb-0&quot;&gt;&lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;./assets/img/photos/tb4.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;span class=&quot;badge badge-lg bg-white text-uppercase mb-3&quot;&gt;Historic&lt;/span&gt;
&lt;h2 class=&quot;post-title h3 mt-1 mb-3&quot;&gt;&lt;a href=&quot;./blog-post.html&quot;&gt;My Love Affair with Cappadocia&lt;/a&gt;&lt;/h2&gt;
&lt;ul class=&quot;post-meta text-white mb-0&quot;&gt;
&lt;li class=&quot;post-date&quot;&gt;&lt;i class=&quot;uil uil-calendar-alt&quot;&gt;&lt;/i&gt;&lt;span&gt;15 Apr 2022&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;post-author&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-user&quot;&gt;&lt;/i&gt;&lt;span&gt;By Sandbox&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;post-comments&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-comment&quot;&gt;&lt;/i&gt;9&lt;span&gt; Comments&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- /.post-meta --&gt;
&lt;/figcaption&gt;
&lt;!-- /figcaption --&gt;
&lt;/figure&gt;
&lt;!-- /figure --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;overlay caption caption-overlay rounded mb-0&quot;&gt;&lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;./assets/img/photos/tb5.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;span class=&quot;badge badge-lg bg-white text-uppercase mb-3&quot;&gt;Nature&lt;/span&gt;
&lt;h2 class=&quot;post-title h3 mt-1 mb-3&quot;&gt;&lt;a href=&quot;./blog-post.html&quot;&gt;24 Hours in a Village of Valencia&lt;/a&gt;&lt;/h2&gt;
&lt;ul class=&quot;post-meta text-white mb-0&quot;&gt;
&lt;li class=&quot;post-date&quot;&gt;&lt;i class=&quot;uil uil-calendar-alt&quot;&gt;&lt;/i&gt;&lt;span&gt;14 Feb 2022&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;post-author&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-user&quot;&gt;&lt;/i&gt;&lt;span&gt;By Sandbox&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;post-comments&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-comment&quot;&gt;&lt;/i&gt;11&lt;span&gt; Comments&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- /.post-meta --&gt;
&lt;/figcaption&gt;
&lt;!-- /figcaption --&gt;
&lt;/figure&gt;
&lt;!-- /figure --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;overlay caption caption-overlay rounded mb-0&quot;&gt;&lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;./assets/img/photos/tb6.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;span class=&quot;badge badge-lg bg-white text-uppercase mb-3&quot;&gt;Architecture&lt;/span&gt;
&lt;h2 class=&quot;post-title h3 mt-1 mb-3&quot;&gt;&lt;a href=&quot;./blog-post.html&quot;&gt;The Largest Train Station in Europe&lt;/a&gt;&lt;/h2&gt;
&lt;ul class=&quot;post-meta text-white mb-0&quot;&gt;
&lt;li class=&quot;post-date&quot;&gt;&lt;i class=&quot;uil uil-calendar-alt&quot;&gt;&lt;/i&gt;&lt;span&gt;22 Jan 2022&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;post-author&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-user&quot;&gt;&lt;/i&gt;&lt;span&gt;By Sandbox&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;post-comments&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-comment&quot;&gt;&lt;/i&gt;8&lt;span&gt; Comments&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- /.post-meta --&gt;
&lt;/figcaption&gt;
&lt;!-- /figcaption --&gt;
&lt;/figure&gt;
&lt;!-- /figure --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;overlay caption caption-overlay rounded mb-0&quot;&gt;&lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;./assets/img/photos/tb7.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;span class=&quot;badge badge-lg bg-white text-uppercase mb-3&quot;&gt;Nature&lt;/span&gt;
&lt;h2 class=&quot;post-title h3 mt-1 mb-3&quot;&gt;&lt;a href=&quot;./blog-post.html&quot;&gt;The Natural Places in Brazil&lt;/a&gt;&lt;/h2&gt;
&lt;ul class=&quot;post-meta text-white mb-0&quot;&gt;
&lt;li class=&quot;post-date&quot;&gt;&lt;i class=&quot;uil uil-calendar-alt&quot;&gt;&lt;/i&gt;&lt;span&gt;2 Jan 2022&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;post-author&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-user&quot;&gt;&lt;/i&gt;&lt;span&gt;By Sandbox&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;post-comments&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;uil uil-comment&quot;&gt;&lt;/i&gt;14&lt;span&gt; Comments&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- /.post-meta --&gt;
&lt;/figcaption&gt;
&lt;!-- /figcaption --&gt;
&lt;/figure&gt;
&lt;!-- /figure --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&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>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-26" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo26.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero26.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-26">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-26" 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-soft-primary&quot;&gt;
&lt;div class=&quot;container pt-10 pt-lg-12 pt-xl-12 pt-xxl-10 pb-lg-10 pb-xl-10 pb-xxl-0&quot;&gt;
&lt;div class=&quot;row gx-md-8 gx-xl-12 gy-10 align-items-center text-center text-lg-start&quot;&gt;
&lt;div class=&quot;col-lg-6&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;900&quot;&gt;
&lt;h1 class=&quot;display-1 mb-4 me-xl-5 mt-lg-n10&quot;&gt;Grow Your Business with &lt;br class=&quot;d-none d-md-block d-lg-none&quot; /&gt;&lt;span class=&quot;text-primary&quot;&gt;Our Marketing Solutions&lt;/span&gt;&lt;/h1&gt;
&lt;p class=&quot;lead fs-24 lh-sm mb-7 pe-xxl-15&quot;&gt;We help our clients to increase their website &lt;br class=&quot;d-none d-md-block d-lg-none&quot; /&gt; traffic, rankings and visibility in search results.&lt;/p&gt;
&lt;div class=&quot;d-inline-flex me-2&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-grape rounded&quot;&gt;Try it for Free&lt;/a&gt;&lt;/div&gt;
&lt;div class=&quot;d-inline-flex&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-outline-grape rounded&quot;&gt;Explore Now&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-10 col-md-7 mx-auto col-lg-6 col-xl-5 ms-xl-5&quot;&gt;
&lt;img class=&quot;img-fluid mb-n12 mb-md-n14 mb-lg-n19&quot; src=&quot;./assets/img/illustrations/3d11.png&quot; srcset=&quot;./assets/img/illustrations/3d11@2x.png 2x&quot; data-cue=&quot;fadeIn&quot; data-delay=&quot;300&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;figure&gt;&lt;img src=&quot;./assets/img/photos/clouds.png&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-27" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo27.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero27.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-27">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-27" 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-cover bg-image bg-xs-none bg-gray&quot; data-image-src=&quot;./assets/img/photos/bg37.jpg&quot;&gt;
&lt;div class=&quot;container pt-17 pb-15 py-sm-17 py-xxl-20&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-6 col-xxl-5 text-center text-sm-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-interval=&quot;-200&quot; data-delay=&quot;500&quot;&gt;
&lt;h2 class=&quot;display-1 fs-56 mb-4 mt-0 mt-lg-5 ls-xs pe-xl-5 pe-xxl-0&quot;&gt;We bring solutions to make life &lt;span class=&quot;underline-3 style-3 yellow&quot;&gt;easier&lt;/span&gt;&lt;/h2&gt;
&lt;p class=&quot;lead fs-23 lh-sm mb-7 pe-lg-5 pe-xl-5 pe-xxl-0&quot;&gt;We are a creative company that focuses on long term relationships with customers.&lt;/p&gt;
&lt;div&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-primary rounded&quot;&gt;Read More&lt;/a&gt;&lt;/div&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>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-28" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo28.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero28.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-28">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-28" 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-gradient-blend&quot;&gt;
&lt;div class=&quot;container pt-16 pt-md-18 pb-12 pb-md-18 pb-lg-20&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-3 mx-auto&quot;&gt;
&lt;div class=&quot;img-mask mask-2&quot;&gt;&lt;img src=&quot;./assets/img/photos/about28.jpg&quot; srcset=&quot;./assets/img/photos/about28@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;row mt-10&quot;&gt;
&lt;div class=&quot;col-md-10 col-lg-9 col-xxl-8 mx-auto text-center&quot;&gt;
&lt;h2 class=&quot;fs-17 text-uppercase text-muted mb-3&quot;&gt;Hello! I&apos;m Julia&lt;/h2&gt;
&lt;h3 class=&quot;display-1 mb-5 px-xl-12&quot;&gt;I&rsquo;m a corporate &lt;em&gt;brand designer&lt;/em&gt; based in New York City.&lt;/h3&gt;
&lt;p class=&quot;lead fs-22&quot;&gt;I&rsquo;m very passionate about the work that I do, and if you are curious you can find my works on &lt;a href=&quot;#&quot; class=&quot;hover&quot; style=&quot;color: var(--bs-dribbble);&quot;&gt;Dribbble&lt;/a&gt;, my portfolio on &lt;a href=&quot;#&quot; class=&quot;hover&quot; style=&quot;color: var(--bs-behance);&quot;&gt;Behance&lt;/a&gt;, and my shots on &lt;a href=&quot;#&quot; class=&quot;hover&quot; style=&quot;color: var(--bs-instagram);&quot;&gt;Instagram&lt;/a&gt;.&lt;/p&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;div class=&quot;overflow-hidden&quot;&gt;
&lt;div class=&quot;divider text-light mx-n2&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 92.26&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M1206,21.2c-60-5-119-36.92-291-5C772,51.11,768,48.42,708,43.13c-60-5.68-108-29.92-168-30.22-60,.3-147,27.93-207,28.23-60-.3-122-25.94-182-36.91S30,5.93,0,16.2V92.26H1440v-87l-30,5.29C1348.94,22.29,1266,26.19,1206,21.2Z&quot;/&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.overflow-hidden --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-29" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo29.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero29.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-29">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-29" 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-full bg-image bg-overlay bg-overlay-light-600&quot; data-image-src=&quot;./assets/img/photos/bg23.png&quot;&gt;
&lt;div class=&quot;container pt-16 pt-md-18 pb-9&quot;&gt;
&lt;div class=&quot;row gx-0 gy-10 align-items-center text-center text-lg-start&quot;&gt;
&lt;div class=&quot;col-lg-6 col-xxl-5 position-relative&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;700&quot;&gt;
&lt;img src=&quot;./assets/img/svg/doodle1.svg&quot; class=&quot;h-9 position-absolute d-none d-lg-block&quot; data-cue=&quot;fadeIn&quot; data-delay=&quot;3000&quot; style=&quot;top: -9%; left: -6%&quot; alt=&quot;&quot;&gt;
&lt;img src=&quot;./assets/img/svg/doodle2.svg&quot; class=&quot;h-15 position-absolute d-none d-lg-block&quot; data-cue=&quot;fadeIn&quot; data-delay=&quot;3000&quot; style=&quot;bottom: 9%; right: -22%&quot; alt=&quot;&quot;&gt;
&lt;h1 class=&quot;display-1 fs-50 mb-4&quot;&gt;Manage all your bills, accounts and budgets in &lt;span class=&quot;text-gradient gradient-7&quot;&gt;one place.&lt;/span&gt;&lt;/h1&gt;
&lt;p class=&quot;lead fs-24 lh-sm mb-7&quot;&gt;Sandbox is available to download from both App Store and Google Play Store.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-center justify-content-lg-start&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;1800&quot;&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;me-2&quot;&gt;&lt;img src=&quot;./assets/img/photos/button-appstore.svg&quot; class=&quot;h-11 rounded-xl&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./assets/img/photos/button-google-play.svg&quot; class=&quot;h-11 rounded-xl&quot; alt=&quot;&quot;&gt;&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-lg-6 ms-auto mb-n20 mb-xxl-n22&quot; data-cues=&quot;slideInDown&quot; data-delay=&quot;600&quot;&gt;
&lt;figure&gt;&lt;img src=&quot;./assets/img/photos/devices3.png&quot; srcset=&quot;./assets/img/photos/devices3@2x.png 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;div class=&quot;overflow-hidden&quot; style=&quot;z-index:1;&quot;&gt;
&lt;div class=&quot;divider text-light mx-n2&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 100&quot;&gt;&lt;g fill=&quot;currentColor&quot;&gt;&lt;polygon points=&quot;1440 100 0 100 0 85 1440 0 1440 100&quot; /&gt;&lt;/g&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.overflow-hidden --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-30" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo30.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero30.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-30">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-30" 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 overflow-hidden&quot;&gt;
&lt;div class=&quot;container pt-19 pt-md-21 text-center position-relative&quot;&gt;
&lt;div class=&quot;position-absolute&quot; style=&quot;top: -15%; left: 50%; transform: translateX(-50%);&quot;&gt;&lt;img src=&quot;./assets/img/photos/blurry.png&quot; data-cue=&quot;fadeIn&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;row position-relative&quot;&gt;
&lt;div class=&quot;col-lg-8 col-xxl-7 mx-auto position-relative&quot;&gt;
&lt;div class=&quot;position-absolute shape grape w-5 d-none d-lg-block&quot; style=&quot;top: -5%; left: -15%;&quot; data-cue=&quot;fadeIn&quot; data-delay=&quot;1500&quot;&gt;&lt;img src=&quot;./assets/img/svg/pie.svg&quot; class=&quot;svg-inject icon-svg w-100 h-100&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;position-absolute shape violet w-10 d-none d-lg-block&quot; style=&quot;bottom: 30%; left: -20%;&quot; data-cue=&quot;fadeIn&quot; data-delay=&quot;1500&quot;&gt;&lt;img src=&quot;./assets/img/svg/scribble.svg&quot; class=&quot;svg-inject icon-svg w-100 h-100&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;position-absolute shape fuchsia w-6 d-none d-lg-block&quot; style=&quot;top: 0%; right: -25%; transform: rotate(70deg);&quot; data-cue=&quot;fadeIn&quot; data-delay=&quot;1500&quot;&gt;&lt;img src=&quot;./assets/img/svg/tri.svg&quot; class=&quot;svg-inject icon-svg w-100 h-100&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;position-absolute shape yellow w-6 d-none d-lg-block&quot; style=&quot;bottom: 25%; right: -17%;&quot; data-cue=&quot;fadeIn&quot; data-delay=&quot;1500&quot;&gt;&lt;img src=&quot;./assets/img/svg/circle.svg&quot; class=&quot;svg-inject icon-svg w-100 h-100&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot;&gt;
&lt;h1 class=&quot;display-1 fs-64 mb-5 mx-md-10 mx-lg-0&quot;&gt;We are a digital web agency specializing on &lt;br /&gt;&lt;span class=&quot;rotator-fade text-primary&quot;&gt;web design.,SEO services.,e-commerce.,Google Adwords.&lt;/span&gt;&lt;/h1&gt;
&lt;p class=&quot;lead fs-24 mb-8&quot;&gt;We are an award winning digital web agency that strongly believes in the power of creative ideas.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;d-flex justify-content-center&quot; data-cues=&quot;slideInDown&quot; data-delay=&quot;600&quot;&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-lg btn-primary rounded-xl mx-1&quot;&gt;See Projects&lt;/a&gt;&lt;/span&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-lg btn-fuchsia rounded-xl mx-1&quot;&gt;Contact Us&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;!-- /div --&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>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-31" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo31.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero31.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-31">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-31" 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&quot;&gt;
&lt;div class=&quot;container pt-11 pt-md-13 pb-19 pb-md-17 text-center&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-9 col-xl-8 col-xxl-7 mx-auto&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;500&quot;&gt;
&lt;h1 class=&quot;display-1 ls-sm fs-64 mb-4 px-md-8 px-lg-0&quot;&gt;We bring rapid solutions for your &lt;span class=&quot;underline-3 style-1 primary&quot;&gt;&lt;em&gt;business&lt;/em&gt;&lt;/span&gt;&lt;/h1&gt;
&lt;p class=&quot;lead fs-24 lh-sm mb-7&quot;&gt;We are creative company that values quality and focuses on establishing long-term relationships with customers.&lt;/p&gt;
&lt;div&gt;
&lt;a class=&quot;btn btn-lg btn-primary rounded mb-10 mb-xxl-5&quot;&gt;See Projects&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-10 col-xl-9 mx-auto mt-11 mb-n21&quot;&gt;
&lt;figure&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;./assets/img/illustrations/i28.png&quot; srcset=&quot;./assets/img/illustrations/i28@2x.png 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;div class=&quot;overflow-hidden&quot;&gt;
&lt;div class=&quot;divider text-soft-primary mx-n2&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 70&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M1440,70H0V45.16a5762.49,5762.49,0,0,1,1440,0Z&quot;/&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-32" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo32.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero32.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-32">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-32" 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 gradient-8 bg-lines&quot;&gt;
&lt;div class=&quot;container pt-17 pt-md-19 pb-21 pb-lg-23 text-center&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-10 col-xl-9 col-xxl-8 mx-auto&quot; data-cues=&quot;zoomIn&quot; data-group=&quot;page-title&quot; data-interval=&quot;-200&quot; data-delay=&quot;500&quot;&gt;
&lt;h2 class=&quot;h6 text-uppercase ls-xl text-white mb-5&quot;&gt;Hello! We are Sandbox&lt;/h2&gt;
&lt;h1 class=&quot;display-1 fs-68 lh-xxs mb-8 text-white&quot;&gt;We have considered our solutions to &lt;span class=&quot;underline-2 underline-gradient-6&quot;&gt;&lt;em&gt;assist&lt;/em&gt;&lt;/span&gt; every stage of your growth.&lt;/h1&gt;
&lt;div class=&quot;d-flex justify-content-center mb-4&quot; data-cues=&quot;zoomIn&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
&lt;span&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-white&quot;&gt;Explore Now&lt;/a&gt;&lt;/span&gt;
&lt;/div&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>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-33" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo33.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero33.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-33">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-33" 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;section-frame mx-xxl-11 overflow-hidden&quot;&gt;
&lt;div class=&quot;wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500&quot; data-image-src=&quot;./assets/img/photos/bg23.png&quot;&gt;
&lt;div class=&quot;container py-16 py-md-18 text-center position-relative&quot;&gt;
&lt;div class=&quot;position-absolute shape yellow d-none d-lg-block w-5&quot; style=&quot;top: 18%; left: 5%;&quot;&gt;&lt;img src=&quot;./assets/img/svg/pie.svg&quot; class=&quot;svg-inject icon-svg w-100 h-100&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;position-absolute shape leaf d-none d-lg-block w-10&quot; style=&quot;bottom: 30%; left: 2%;&quot;&gt;&lt;img src=&quot;./assets/img/svg/scribble.svg&quot; class=&quot;svg-inject icon-svg w-100 h-100&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;position-absolute shape fuchsia d-none d-lg-block w-6&quot; style=&quot;top: 20%; right: 2%; transform: rotate(70deg);&quot;&gt;&lt;img src=&quot;./assets/img/svg/tri.svg&quot; class=&quot;svg-inject icon-svg w-100 h-100&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;position-absolute shape grape d-none d-lg-block w-6&quot; style=&quot;bottom: 28%; right: 5%;&quot;&gt;&lt;img src=&quot;./assets/img/svg/circle.svg&quot; class=&quot;svg-inject icon-svg w-100 h-100&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-9 col-xxl-8 mx-auto&quot;&gt;
&lt;h1 class=&quot;display-1 fs-70 px-md-10 px-lg-0 px-xl-8 mb-5&quot;&gt;👋 Hello! I&apos;m &lt;img class=&quot;d-inline w-12 mx-1&quot; src=&quot;./assets/img/avatars/avatar.png&quot; alt=&quot;&quot;&gt; Camille, a product designer.&lt;/h1&gt;
&lt;p class=&quot;lead fs-24 px-md-10 px-lg-0 mx-lg-n10 mx-xl-0 mb-8&quot;&gt;I&rsquo;m very passionate about the work that I do, and if you are curious you can find my works on &lt;a href=&quot;#&quot; class=&quot;hover&quot; style=&quot;color: var(--bs-dribbble);&quot;&gt;Dribbble&lt;/a&gt;, my portfolio on &lt;a href=&quot;#&quot; class=&quot;hover&quot; style=&quot;color: var(--bs-behance);&quot;&gt;Behance&lt;/a&gt;.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-primary btn-icon btn-icon-end&quot;&gt;See My Works &lt;i class=&quot;uil uil-arrow-up-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/div&gt;
&lt;!-- /.wrapper --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-34" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<figure><a href="../../demo34.html" target="_blank"><img class="img-fluid" src="../../assets/img/docs/hero34.jpg" alt=""></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="row">
<div class="col-xxl-10 mx-auto">
<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-34">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-34" 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-gradient-primary&quot;&gt;
&lt;div class=&quot;container pt-10 pt-md-14&quot;&gt;
&lt;div class=&quot;row gx-2 gy-10 align-items-center&quot;&gt;
&lt;div class=&quot;col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start order-2 order-lg-0&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot; data-delay=&quot;600&quot;&gt;
&lt;h1 class=&quot;display-1 mb-5 mx-md-10 mx-lg-0&quot;&gt;Create a powerful but effortless website for &lt;br /&gt;&lt;span class=&quot;typer text-primary text-nowrap&quot; data-delay=&quot;100&quot; data-words=&quot;your business.,your portfolio.,your startup.,digital marketing.&quot;&gt;&lt;/span&gt;&lt;span class=&quot;cursor text-primary&quot; data-owner=&quot;typer&quot;&gt;&lt;/span&gt;&lt;/h1&gt;
&lt;p class=&quot;lead fs-23 mb-7&quot;&gt;Build your website in minutes with the help of countless amazing features of Sandbox.&lt;/p&gt;
&lt;div class=&quot;d-flex justify-content-center justify-content-lg-start mb-4&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;900&quot;&gt;
&lt;span&gt;&lt;a class=&quot;btn btn-lg btn-primary rounded-pill me-2 scroll&quot; href=&quot;#demos&quot;&gt;Check Demos&lt;/a&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-lg-6 ms-auto position-relative&quot;&gt;
&lt;div class=&quot;row g-4&quot;&gt;
&lt;div class=&quot;col-4 d-flex flex-column ms-auto&quot; data-cues=&quot;fadeIn&quot; data-group=&quot;col-start&quot; data-delay=&quot;900&quot;&gt;
&lt;div class=&quot;ms-auto mt-6&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;./assets/img/demos/vc1.jpg&quot; srcset=&quot;./assets/img/demos/vc1@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;ms-auto mt-4&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;./assets/img/demos/vc2.jpg&quot; srcset=&quot;./assets/img/demos/vc2@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;ms-auto mt-4&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;./assets/img/demos/vc3.jpg&quot; srcset=&quot;./assets/img/demos/vc3@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-4&quot; data-cues=&quot;fadeIn&quot; data-group=&quot;col-middle&quot;&gt;
&lt;div&gt;&lt;img class=&quot;w-100 img-fluid rounded shadow-lg&quot; src=&quot;./assets/img/demos/vc4.jpg&quot; srcset=&quot;./assets/img/demos/vc4@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div&gt;&lt;img class=&quot;w-100 img-fluid rounded shadow-lg mt-4&quot; src=&quot;./assets/img/demos/vc5.jpg&quot; srcset=&quot;./assets/img/demos/vc5@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div&gt;&lt;img class=&quot;w-100 img-fluid rounded shadow-lg mt-4&quot; src=&quot;./assets/img/demos/vc6.jpg&quot; srcset=&quot;./assets/img/demos/vc6@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-4 d-flex flex-column&quot; data-cues=&quot;fadeIn&quot; data-group=&quot;col-end&quot; data-delay=&quot;900&quot;&gt;
&lt;div class=&quot;mt-8&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;./assets/img/demos/vc7.jpg&quot; srcset=&quot;./assets/img/demos/vc7@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div class=&quot;mt-4 mb-10&quot;&gt;&lt;img class=&quot;img-fluid rounded shadow-lg&quot; src=&quot;./assets/img/demos/vc8.jpg&quot; srcset=&quot;./assets/img/demos/vc8@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;position-relative mt-n20 mb-20&quot; data-cue=&quot;fadeIn&quot; data-delay=&quot;1800&quot;&gt;
&lt;div class=&quot;btn btn-circle btn-fuchsia pe-none ripple position-absolute counter-wrapper flex-column d-none d-xxl-flex&quot; style=&quot;bottom: 0; right: -8%; width: 120px; height: 120px;&quot;&gt;
&lt;h3 class=&quot;fs-26 text-white mt-n1 mb-0&quot;&gt;NO&lt;/h3&gt;
&lt;p&gt;jQuery&lt;/p&gt;
&lt;/div&gt;
&lt;/div&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>
<!--/column -->
</div>
<!--/.row -->
</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>
Reference in New Issue View Git Blame Copy Permalink