1170 lines
70 KiB
HTML
1170 lines
70 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
|
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
|
<meta name="author" content="elemis">
|
|
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
|
|
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
|
<link rel="stylesheet" href="./assets/css/plugins.css">
|
|
<link rel="stylesheet" href="./assets/css/style.css">
|
|
<link rel="stylesheet" href="./assets/css/colors/aqua.css">
|
|
<link rel="preload" href="./assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="content-wrapper">
|
|
<header class="wrapper bg-dark">
|
|
<nav class="navbar navbar-expand-lg center-nav transparent navbar-dark">
|
|
<div class="container flex-lg-row flex-nowrap align-items-center">
|
|
<div class="navbar-brand w-100">
|
|
<a href="./index.html">
|
|
<img class="logo-dark" src="./assets/img/logo-dark.png" srcset="./assets/img/logo-dark@2x.png 2x" alt="" />
|
|
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@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"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i class="uil uil-search"></i></a></li>
|
|
<li class="nav-item d-none d-md-block">
|
|
<a href="./contact.html" class="btn btn-sm btn-primary rounded">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 -->
|
|
<div class="offcanvas offcanvas-top bg-light" id="offcanvas-search" data-bs-scroll="true">
|
|
<div class="container d-flex flex-row py-6">
|
|
<form class="search-form w-100">
|
|
<input id="search-form" type="text" class="form-control" placeholder="Type keyword and hit enter">
|
|
</form>
|
|
<!-- /.search-form -->
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.offcanvas -->
|
|
</header>
|
|
<!-- /header -->
|
|
<section class="wrapper bg-dark angled lower-start">
|
|
<div class="container pt-7 pt-md-11 pb-8">
|
|
<div class="row gx-0 gy-10 align-items-center">
|
|
<div class="col-lg-6" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h1 class="display-1 text-white mb-4">Sandbox focuses on <br /><span class="typer text-primary text-nowrap" data-delay="100" data-words="customer satisfaction,business needs,creative ideas"></span><span class="cursor text-primary" data-owner="typer"></span></h1>
|
|
<p class="lead fs-24 lh-sm text-white mb-7 pe-md-18 pe-lg-0 pe-xxl-15">We carefully consider our solutions to support each and every stage of your growth.</p>
|
|
<div>
|
|
<a class="btn btn-lg btn-primary rounded">Get Started</a>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-lg-5 offset-lg-1 mb-n18" data-cues="slideInDown">
|
|
<div class="position-relative">
|
|
<a href="./assets/media/movie.mp4" class="btn btn-circle btn-primary btn-play ripple mx-auto mb-6 position-absolute" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right"></i></a>
|
|
<figure class="rounded shadow-lg"><img src="./assets/img/photos/about13.jpg" srcset="./assets/img/photos/about13@2x.jpg 2x" alt=""></figure>
|
|
</div>
|
|
<!-- /div -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-light">
|
|
<div class="container pt-19 pt-md-21 pb-16 pb-md-18">
|
|
<div class="row">
|
|
<div class="col-lg-8 col-xl-7 col-xxl-6">
|
|
<h2 class="fs-16 text-uppercase text-line text-primary mb-3">What We Do?</h2>
|
|
<h3 class="display-4 mb-9">The service we offer is specifically designed to meet your needs.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="row gx-md-8 gy-8 mb-14 mb-md-18">
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="icon btn btn-block btn-lg btn-soft-primary pe-none mb-6"> <i class="uil uil-phone-volume"></i> </div>
|
|
<h4>24/7 Support</h4>
|
|
<p class="mb-3">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo.</p>
|
|
<a href="#" class="more hover link-primary">Learn More</a>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="icon btn btn-block btn-lg btn-soft-primary pe-none mb-6"> <i class="uil uil-shield-exclamation"></i> </div>
|
|
<h4>Secure Payments</h4>
|
|
<p class="mb-3">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo.</p>
|
|
<a href="#" class="more hover link-primary">Learn More</a>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="icon btn btn-block btn-lg btn-soft-primary pe-none mb-6"> <i class="uil uil-laptop-cloud"></i> </div>
|
|
<h4>Daily Updates</h4>
|
|
<p class="mb-3">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo.</p>
|
|
<a href="#" class="more hover link-primary">Learn More</a>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-3">
|
|
<div class="icon btn btn-block btn-lg btn-soft-primary pe-none mb-6"> <i class="uil uil-chart-line"></i> </div>
|
|
<h4>Market Research</h4>
|
|
<p class="mb-3">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo.</p>
|
|
<a href="#" class="more hover link-primary">Learn More</a>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="row gy-10 gy-sm-13 gx-lg-3 mb-16 mb-md-18 align-items-center">
|
|
<div class="col-md-8 col-lg-6 position-relative">
|
|
<div class="shape bg-dot primary rellax w-17 h-21" data-rellax-speed="1" style="top: -2rem; left: -1.9rem;"></div>
|
|
<div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
|
|
<figure class="rounded"><img src="./assets/img/photos/about7.jpg" srcset="./assets/img/photos/about7@2x.jpg 2x" alt="" /></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-5 col-xl-4 offset-lg-1">
|
|
<h2 class="fs-16 text-uppercase text-line text-primary mb-3">How It Works?</h2>
|
|
<h3 class="display-4 mb-7">Here are the 3 working steps on success.</h3>
|
|
<div class="d-flex flex-row mb-6">
|
|
<div>
|
|
<span class="icon btn btn-block btn-soft-primary pe-none me-5"><span class="number fs-18">1</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="mb-1">Collect Ideas</h4>
|
|
<p class="mb-0">Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus.</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-row mb-6">
|
|
<div>
|
|
<span class="icon btn btn-block btn-soft-primary pe-none me-5"><span class="number fs-18">2</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="mb-1">Data Analysis</h4>
|
|
<p class="mb-0">Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna.</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<span class="icon btn btn-block btn-soft-primary pe-none me-5"><span class="number fs-18">3</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="mb-1">Finalize Product</h4>
|
|
<p class="mb-0">Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="row gy-10 gy-sm-13 gx-lg-3 align-items-center">
|
|
<div class="col-md-8 col-lg-6 offset-lg-1 order-lg-2 position-relative">
|
|
<div class="shape rounded-circle bg-line primary rellax w-18 h-18" data-rellax-speed="1" style="top: -2rem; right: -1.9rem;"></div>
|
|
<div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0" style="bottom: -1.8rem; left: -1.5rem; width: 85%; height: 90%; "></div>
|
|
<figure class="rounded"><img src="./assets/img/photos/about9.jpg" srcset="./assets/img/photos/about9@2x.jpg 2x" alt=""></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-5">
|
|
<h2 class="fs-16 text-uppercase text-line text-primary mb-3">Why Choose Us?</h2>
|
|
<h3 class="display-4 mb-7">A few reasons why our valued customers choose us.</h3>
|
|
<div class="accordion accordion-wrapper" id="accordionExample">
|
|
<div class="card plain accordion-item">
|
|
<div class="card-header" id="headingOne">
|
|
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Professional Design </button>
|
|
</div>
|
|
<!--/.card-header -->
|
|
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
|
<div class="card-body">
|
|
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.accordion-collapse -->
|
|
</div>
|
|
<!--/.accordion-item -->
|
|
<div class="card plain accordion-item">
|
|
<div class="card-header" id="headingTwo">
|
|
<button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Top-Notch Support </button>
|
|
</div>
|
|
<!--/.card-header -->
|
|
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
|
<div class="card-body">
|
|
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.accordion-collapse -->
|
|
</div>
|
|
<!--/.accordion-item -->
|
|
<div class="card plain accordion-item">
|
|
<div class="card-header" id="headingThree">
|
|
<button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Header and Slider Options </button>
|
|
</div>
|
|
<!--/.card-header -->
|
|
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
|
<div class="card-body">
|
|
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.accordion-collapse -->
|
|
</div>
|
|
<!--/.accordion-item -->
|
|
</div>
|
|
<!--/.accordion -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper image-wrapper bg-image bg-overlay" data-image-src="./assets/img/photos/bg1.jpg">
|
|
<div class="container py-18">
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<h2 class="fs-16 text-uppercase text-line text-white mb-3">Join Our Community</h2>
|
|
<h3 class="display-4 mb-6 text-white pe-xxl-18">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</h3>
|
|
<a href="#" class="btn btn-white rounded mb-0 text-nowrap">Join Us</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-light angled upper-end">
|
|
<div class="container py-14 py-md-16">
|
|
<div class="row">
|
|
<div class="col-lg-9 col-xl-8 col-xxl-7">
|
|
<h2 class="fs-16 text-uppercase text-line text-primary mb-3">Case Studies</h2>
|
|
<h3 class="display-4 mb-9">Check out some of our awesome projects with creative ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="swiper-container blog grid-view mb-10" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-6"><a href="#"> <img src="./assets/img/photos/b4.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 mb-3"><a class="link-dark" href="./blog-post.html">Ligula tristique quis risus</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Apr 2022</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-file-alt fs-15"></i>Coding</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-6"><a href="#"> <img src="./assets/img/photos/b5.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 mb-3"><a class="link-dark" href="./blog-post.html">Nullam id dolor elit id nibh</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>29 Mar 2022</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-file-alt fs-15"></i>Workspace</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-6"><a href="#"> <img src="./assets/img/photos/b6.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 mb-3"><a class="link-dark" href="./blog-post.html">Ultricies fusce porta elit</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>26 Feb 2022</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-file-alt fs-15"></i>Meeting</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded mb-6"><a href="#"> <img src="./assets/img/photos/b7.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 mb-3"><a class="link-dark" href="./blog-post.html">Morbi leo risus porta eget</a></h2>
|
|
</div>
|
|
<div class="post-footer">
|
|
<ul class="post-meta">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>7 Jan 2022</span></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-file-alt fs-15"></i>Business Tips</a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!-- /.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-soft-primary">
|
|
<div class="container py-14 pt-md-17 pb-md-21">
|
|
<div class="row gx-lg-8 gx-xl-12 gy-10 gy-lg-0 mb-2 align-items-end">
|
|
<div class="col-lg-4">
|
|
<h2 class="fs-16 text-uppercase text-line text-primary mb-3">Company Facts</h2>
|
|
<h3 class="display-4 mb-0 pe-xxl-15">We are proud of our works</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-lg-8 mt-lg-2">
|
|
<div class="row align-items-center counter-wrapper gy-6 text-center">
|
|
<div class="col-md-4">
|
|
<h3 class="counter counter-lg">1000+</h3>
|
|
<p>Completed Projects</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-4">
|
|
<h3 class="counter counter-lg">500+</h3>
|
|
<p>Happy Clients</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-4">
|
|
<h3 class="counter counter-lg">150+</h3>
|
|
<p>Awards Won</p>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-light angled upper-end lower-start">
|
|
<div class="container py-16 py-md-18 position-relative">
|
|
<div class="position-relative mt-n18 mt-md-n23 mb-16 mb-md-18">
|
|
<div class="shape rounded-circle bg-line primary rellax w-18 h-18" data-rellax-speed="1" style="top: -2rem; right: -2.7rem; z-index:0;"></div>
|
|
<div class="shape rounded-circle bg-soft-primary rellax w-18 h-18" data-rellax-speed="1" style="bottom: -1rem; left: -3rem; z-index:0;"></div>
|
|
<div class="card shadow-lg">
|
|
<div class="row gx-0">
|
|
<div class="col-lg-6 image-wrapper bg-image bg-cover rounded-top rounded-lg-start" data-image-src="./assets/img/photos/tm1.jpg">
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-6">
|
|
<div class="p-10 p-md-11 p-lg-13">
|
|
<div class="swiper-container dots-closer mb-4" data-margin="30" data-dots="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<blockquote class="icon icon-top fs-lg text-center">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.”</p>
|
|
<div class="blockquote-details justify-content-center text-center">
|
|
<div class="info ps-0">
|
|
<h5 class="mb-1">Coriss Ambady</h5>
|
|
<p class="mb-0">Financial Analyst</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<blockquote class="icon icon-top fs-lg text-center">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.”</p>
|
|
<div class="blockquote-details justify-content-center text-center">
|
|
<div class="info ps-0">
|
|
<h5 class="mb-1">Cory Zamora</h5>
|
|
<p class="mb-0">Marketing Specialist</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<blockquote class="icon icon-top fs-lg text-center">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.”</p>
|
|
<div class="blockquote-details justify-content-center text-center">
|
|
<div class="info ps-0">
|
|
<h5 class="mb-1">Nikolas Brooten</h5>
|
|
<p class="mb-0">Sales Manager</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!-- /.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!--/div -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /div -->
|
|
<div class="row gy-6 mb-16 mb-md-18">
|
|
<div class="col-lg-4">
|
|
<h2 class="fs-16 text-uppercase text-line text-primary mt-lg-18 mb-3">Our Pricing</h2>
|
|
<h3 class="display-4 mb-3">We offer great and premium prices.</h3>
|
|
<p>Enjoy a <a href="#" class="hover">free 30-day trial</a> and experience the full service. No credit card required!</p>
|
|
<a href="#" class="btn btn-primary rounded mt-2">See All Prices</a>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-7 offset-lg-1 pricing-wrapper">
|
|
<div class="pricing-switcher-wrapper switcher justify-content-start justify-content-lg-end">
|
|
<p class="mb-0 pe-3">Monthly</p>
|
|
<div class="pricing-switchers">
|
|
<div class="pricing-switcher pricing-switcher-active"></div>
|
|
<div class="pricing-switcher"></div>
|
|
<div class="switcher-button bg-primary"></div>
|
|
</div>
|
|
<p class="mb-0 ps-3">Yearly <span class="text-red">(Save 30%)</span></p>
|
|
</div>
|
|
<div class="row gy-6 position-relative mt-5">
|
|
<div class="shape bg-dot primary rellax w-16 h-18" data-rellax-speed="1" style="bottom: -0.5rem; right: -1.6rem;"></div>
|
|
<div class="shape rounded-circle bg-soft-primary rellax w-18 h-18" data-rellax-speed="1" style="top: -1rem; left: -2rem;"></div>
|
|
<div class="col-md-6">
|
|
<div class="pricing card shadow-lg">
|
|
<div class="card-body pb-12">
|
|
<div class="prices text-dark">
|
|
<div class="price price-show justify-content-start"><span class="price-currency">$</span><span class="price-value">19</span> <span class="price-duration">mo</span></div>
|
|
<div class="price price-hide price-hidden justify-content-start"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">yr</span></div>
|
|
</div>
|
|
<!--/.prices -->
|
|
<h4 class="card-title mt-2">Premium Plan</h4>
|
|
<ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8">
|
|
<li><i class="uil uil-check"></i><span><strong>5</strong> Projects </span></li>
|
|
<li><i class="uil uil-check"></i><span><strong>100K</strong> API Access </span></li>
|
|
<li><i class="uil uil-check"></i><span><strong>200MB</strong> Storage </span></li>
|
|
<li><i class="uil uil-check"></i><span> Weekly <strong>Reports</strong></span></li>
|
|
<li><i class="uil uil-times bullet-soft-red"></i><span> 7/24 <strong>Support</strong></span></li>
|
|
</ul>
|
|
<a href="#" class="btn btn-primary rounded">Choose Plan</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.pricing -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 popular">
|
|
<div class="pricing card shadow-lg">
|
|
<div class="card-body pb-12">
|
|
<div class="prices text-dark">
|
|
<div class="price price-show justify-content-start"><span class="price-currency">$</span><span class="price-value">49</span> <span class="price-duration">mo</span></div>
|
|
<div class="price price-hide price-hidden justify-content-start"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">yr</span></div>
|
|
</div>
|
|
<!--/.prices -->
|
|
<h4 class="card-title mt-2">Corporate Plan</h4>
|
|
<ul class="icon-list bullet-bg bullet-soft-primary mt-7 mb-8">
|
|
<li><i class="uil uil-check"></i><span><strong>20</strong> Projects </span></li>
|
|
<li><i class="uil uil-check"></i><span><strong>300K</strong> API Access </span></li>
|
|
<li><i class="uil uil-check"></i><span><strong>500MB</strong> Storage </span></li>
|
|
<li><i class="uil uil-check"></i><span> Weekly <strong>Reports</strong></span></li>
|
|
<li><i class="uil uil-check"></i><span> 7/24 <strong>Support</strong></span></li>
|
|
</ul>
|
|
<a href="#" class="btn btn-primary rounded">Choose Plan</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.pricing -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="row gy-10 gy-sm-13 gx-lg-3 align-items-center">
|
|
<div class="col-md-8 col-lg-6 position-relative">
|
|
<div class="shape bg-dot primary rellax w-17 h-21" data-rellax-speed="1" style="top: -2rem; left: -1.9rem;"></div>
|
|
<div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
|
|
<figure class="rounded"><img src="./assets/img/photos/about14.jpg" srcset="./assets/img/photos/about14@2x.jpg 2x" alt="" /></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-5 col-xl-4 offset-lg-1">
|
|
<h2 class="fs-16 text-uppercase text-line text-primary mb-3">Get In Touch</h2>
|
|
<h2 class="display-4 mb-8">Convinced yet? Let's make something great together.</h2>
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<div class="icon text-primary fs-28 me-6 mt-n1"> <i class="uil uil-location-pin-alt"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-1">Address</h5>
|
|
<address>Moonshine St. 14/05 Light City, <br class="d-none d-md-block" />London, United Kingdom</address>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<div class="icon text-primary fs-28 me-6 mt-n1"> <i class="uil uil-phone-volume"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-1">Phone</h5>
|
|
<p>00 (123) 456 78 90</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<div class="icon text-primary fs-28 me-6 mt-n1"> <i class="uil uil-envelope"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-1">E-mail</h5>
|
|
<p class="mb-0"><a href="mailto:sandbox@email.com" class="link-body">sandbox@email.com</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
<footer class="bg-dark text-inverse">
|
|
<div class="container pt-17 pt-md-19 pb-13 pb-md-15">
|
|
<div class="row gy-6 gy-lg-0">
|
|
<div class="col-md-4 col-lg-3">
|
|
<div class="widget">
|
|
<img class="mb-4" src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" />
|
|
<p class="mb-4">© 2023 Sandbox. <br class="d-none d-lg-block" />All rights reserved.</p>
|
|
<nav class="nav social social-white">
|
|
<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>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-md-4 col-lg-3">
|
|
<div class="widget">
|
|
<h4 class="widget-title text-white mb-3">Get in Touch</h4>
|
|
<address class="pe-xl-15 pe-xxl-17">Moonshine St. 14/05 Light City, London, United Kingdom</address>
|
|
<a href="mailto:#">info@email.com</a><br /> 00 (123) 456 78 90
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-md-4 col-lg-3">
|
|
<div class="widget">
|
|
<h4 class="widget-title text-white mb-3">Learn More</h4>
|
|
<ul class="list-unstyled mb-0">
|
|
<li><a href="#">About Us</a></li>
|
|
<li><a href="#">Our Story</a></li>
|
|
<li><a href="#">Projects</a></li>
|
|
<li><a href="#">Terms of Use</a></li>
|
|
<li><a href="#">Privacy Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-md-12 col-lg-3">
|
|
<div class="widget">
|
|
<h4 class="widget-title text-white mb-3">Our Newsletter</h4>
|
|
<p class="mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
|
|
<div class="newsletter-wrapper">
|
|
<!-- Begin Mailchimp Signup Form -->
|
|
<div id="mc_embed_signup2">
|
|
<form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
|
|
<div id="mc_embed_signup_scroll2">
|
|
<div class="mc-field-group input-group form-floating">
|
|
<input type="email" value="" name="EMAIL" class="required email form-control" placeholder="Email Address" id="mce-EMAIL2">
|
|
<label for="mce-EMAIL2">Email Address</label>
|
|
<input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary ">
|
|
</div>
|
|
<div id="mce-responses2" class="clear">
|
|
<div class="response" id="mce-error-response2" style="display:none"></div>
|
|
<div class="response" id="mce-success-response2" style="display:none"></div>
|
|
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
|
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!--End mc_embed_signup-->
|
|
</div>
|
|
<!-- /.newsletter-wrapper -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</footer>
|
|
<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> |