786 lines
53 KiB
HTML
786 lines
53 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">
|
||
</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">Get Started</h1>
|
||
<p class="lead px-xxl-11">Guide to get started with Sandbox Modern & Multipurpose Bootstrap 5 Template.</p>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<div class="container">
|
||
<div class="row">
|
||
<aside class="col-xl-2 sidebar doc-sidebar mt-md-0 py-16 d-none d-xl-block">
|
||
<div class="widget pb-3">
|
||
<h6 class="widget-title fs-17 mb-2">Usage</h6>
|
||
<nav id="collapse-usage">
|
||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||
<li><a href="../docs/index.html" class="active">Get Started</a></li>
|
||
<li><a href="../docs/forms.html">Forms</a></li>
|
||
<li><a href="../docs/faq.html">FAQ</a></li>
|
||
<li><a href="../docs/changelog.html">Changelog</a></li>
|
||
<li><a href="../docs/credits.html">Credits</a></li>
|
||
</ul>
|
||
</nav>
|
||
<!-- /nav -->
|
||
</div>
|
||
<!-- /.widget -->
|
||
<div class="widget pb-3">
|
||
<h6 class="widget-title fs-17 mb-2">Styleguide</h6>
|
||
<nav id="collapse-style">
|
||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||
<li><a href="../docs/styleguide/colors.html">Colors</a></li>
|
||
<li><a href="../docs/styleguide/fonts.html">Fonts</a></li>
|
||
<li><a href="../docs/styleguide/icons-svg.html">SVG Icons</a></li>
|
||
<li><a href="../docs/styleguide/icons-font.html">Font Icons</a></li>
|
||
<li><a href="../docs/styleguide/illustrations.html">Illustrations</a></li>
|
||
<li><a href="../docs/styleguide/backgrounds.html">Backgrounds</a></li>
|
||
<li><a href="../docs/styleguide/misc.html">Misc</a></li>
|
||
</ul>
|
||
</nav>
|
||
<!-- /nav -->
|
||
</div>
|
||
<!-- /.widget -->
|
||
<div class="widget pb-3">
|
||
<h6 class="widget-title fs-17 mb-2">Elements</h6>
|
||
<nav id="collapse-elements">
|
||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||
<li><a href="../docs/elements/accordion.html">Accordion</a></li>
|
||
<li><a href="../docs/elements/alerts.html">Alerts</a></li>
|
||
<li><a href="../docs/elements/animations.html">Animations</a></li>
|
||
<li><a href="../docs/elements/avatars.html">Avatars</a></li>
|
||
<li><a href="../docs/elements/background.html">Background</a></li>
|
||
<li><a href="../docs/elements/badges.html">Badges</a></li>
|
||
<li><a href="../docs/elements/buttons.html">Buttons</a></li>
|
||
<li><a href="../docs/elements/card.html">Card</a></li>
|
||
<li><a href="../docs/elements/carousel.html">Carousel</a></li>
|
||
<li><a href="../docs/elements/dividers.html">Dividers</a></li>
|
||
<li><a href="../docs/elements/form-elements.html">Form Elements</a></li>
|
||
<li><a href="../docs/elements/image-hover.html">Image Hover</a></li>
|
||
<li><a href="../docs/elements/image-mask.html">Image Mask</a></li>
|
||
<li><a href="../docs/elements/lightbox.html">Lightbox</a></li>
|
||
<li><a href="../docs/elements/player.html">Media Player</a></li>
|
||
<li><a href="../docs/elements/modal.html">Modal</a></li>
|
||
<li><a href="../docs/elements/pagination.html">Pagination</a></li>
|
||
<li><a href="../docs/elements/progressbar.html">Progressbar</a></li>
|
||
<li><a href="../docs/elements/shadows.html">Shadows</a></li>
|
||
<li><a href="../docs/elements/shapes.html">Shapes</a></li>
|
||
<li><a href="../docs/elements/tables.html">Tables</a></li>
|
||
<li><a href="../docs/elements/tabs.html">Tabs</a></li>
|
||
<li><a href="../docs/elements/text-animations.html">Text Animations</a></li>
|
||
<li><a href="../docs/elements/text-highlight.html">Text Highlight</a></li>
|
||
<li><a href="../docs/elements/tiles.html">Tiles</a></li>
|
||
<li><a href="../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
||
<li><a href="../docs/elements/typography.html">Typography</a></li>
|
||
</ul>
|
||
</nav>
|
||
<!-- /nav -->
|
||
</div>
|
||
<!-- /.widget -->
|
||
</aside>
|
||
<!-- /column -->
|
||
<aside class="col-xl-2 order-xl-3 sidebar sticky-sidebar mt-md-0 py-16 d-none d-xl-block">
|
||
<div class="widget">
|
||
<h6 class="widget-title fs-17 mb-2 ps-xl-5">On this page</h6>
|
||
<nav class="ps-xl-5" id="sidebar-nav">
|
||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||
<li><a class="nav-link scroll active" href="#snippet-1">Overview</a></li>
|
||
<li><a class="nav-link scroll" href="#snippet-2">File Structure</a></li>
|
||
<li><a class="nav-link scroll" href="#snippet-3">Installation</a></li>
|
||
<li><a class="nav-link scroll" href="#snippet-4">Gulp Commands</a></li>
|
||
<li><a class="nav-link scroll" href="#snippet-5">Quick Video</a></li>
|
||
</ul>
|
||
</nav>
|
||
<!-- /nav -->
|
||
</div>
|
||
<!-- /.widget -->
|
||
</aside>
|
||
<!-- /column -->
|
||
<div class="col-xl-8 order-xl-2">
|
||
<section id="snippet-1" class="wrapper pt-16">
|
||
<h2 class="mb-5">Overview</h2>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<p>This guide will help you get started with Sandbox. All the information regarding file structure, build tools, components, credits, license and FAQ can be found here.</p>
|
||
<p>If you have any questions that are beyond the scope of this help documentation, please feel free to contact us with the links below and please don't forget to provide your website URL.</p>
|
||
<a href="https://1.envato.market/VKeok" class="btn btn-primary rounded-pill me-2" target="_blank">Contact Form</a>
|
||
<a href="https://1.envato.market/ZdVOOX" class="btn btn-soft-primary rounded-pill" target="_blank">Discussions Page</a>
|
||
<div class="card bg-soft-blue shadow-lg card-border-start border-soft-blue text-navy mt-10">
|
||
<div class="card-body">
|
||
<p><strong>Please remember...</strong></p>
|
||
<ul class="unordered-list mb-0">
|
||
<li>Requests sent during weekends or on holidays will be replied on business days.</li>
|
||
<li>We only provide support for the issues related to the features that are included in the template. Debugging or providing guides on how to make custom modifications are not part of our support. Thank you for understanding.</li>
|
||
</ul>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</section>
|
||
<section id="snippet-2" class="wrapper pt-16">
|
||
<h2 class="mb-5">File Structure</h2>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<ul class="list-unstyled mb-0">
|
||
<li><code class="folder bg-pale-primary">dev</code> All template files with unminified CSS / JS. <strong>Use this folder</strong> if you don't wish to use <mark class="doc">Node.js / Gulp / SASS</mark>.</li>
|
||
<li><code class="folder bg-pale-primary">dist</code> All template distribution files like HTML / CSS / JS that have been processed (compiled / minified) from <code class="folder">src</code> folder using <mark class="doc">Node.js / Gulp</mark>.</li>
|
||
<li><code class="folder bg-pale-primary">src</code> All template source files like HTML / SCSS / CSS / JS that are then processed (compiled / minified) to <code class="folder">dist</code> folder. <ul>
|
||
<li><code class="folder bg-pale-primary">src/assets/js</code> Contains main <code class="file">theme.js</code> and JS vendor files. If you don't wish to use all included plugins and scripts, just remove unwanted vendor JS files from <code class="folder">src/assets/js/vendor</code> then remove unwanted functions from <code class="file">src/assets/js/theme.js</code> and recompile.</li>
|
||
<li><code class="folder bg-pale-primary">src/assets/css</code> Contains CSS vendor files. If you don't wish to use all included plugins, just remove unwanted vendor CSS from <code class="folder">src/assets/css/vendor</code> and recompile.</li>
|
||
<li><code class="folder bg-pale-primary">src/assets/scss</code> Contains all project SCSS files that are compiled and minified in <code class="folder">dist/assets/css</code> folder.</li>
|
||
</ul>
|
||
</li>
|
||
<li><code class="folder bg-pale-primary">dev/docs</code> & <code class="folder bg-pale-primary">dist/docs</code> Contain all documentation files (installation, blocks, elements, etc.) regarding the template. You can also reach the documentation from the <a href="https://sandbox.elemisthemes.com/docs/index.html" class="external" target="_blank">live demo</a> as well.</li>
|
||
<li><code class="file bg-pale-primary">package.json</code> Includes the list of dependencies to install from npm.</li>
|
||
<li><code class="file bg-pale-primary">gulpfile.js</code> Configuration file for Gulp library. It contains all tasks to perform with Gulp. Learn more about it from <a href="https://github.com/gulpjs/gulp/blob/v4.0.0/docs/API.md" class="external" target="_blank">official Gulp documentation</a>.</li>
|
||
</ul>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</section>
|
||
<section id="snippet-3" class="wrapper pt-16">
|
||
<h2 class="mb-5">Installation</h2>
|
||
<div class="alert alert-primary alert-icon mb-6" role="alert"><i class="uil uil-exclamation-circle"></i> This step aims for advanced users who want to speed up development process and is <strong>optional</strong>. You can still use plain <mark class="doc bg-primary text-white">HTML / CSS / JS</mark> to customize Sandbox. Files you need are located in <code class="folder bg-primary text-white">dev</code></div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<p>If you'd like to speed up development process with <mark class="doc">Node.js / Gulp / SASS</mark>, then follow these steps:</p>
|
||
<ol class="mb-0">
|
||
<li>Install <a href="https://nodejs.org/en/" class="external" target="_blank">Node.js</a> if you don’t have it yet.</li>
|
||
<li>Run <kbd class="terminal">npm install gulp-cli -g</kbd> command, if you haven't already installed Gulp CLI previously.</li>
|
||
<li>Unzip the template package and in the root project folder <code class="folder">sandbox</code>, go to your command line and run <kbd class="terminal">npm install</kbd>. This will install the npm packages listed in the <code class="file">package.json</code> file.</li>
|
||
<li>You should now have the project files set up and all the npm packages installed.</li>
|
||
</ol>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</section>
|
||
<section id="snippet-4" class="wrapper pt-16">
|
||
<h2 class="mb-5">Gulp Commands</h2>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<ul class="list-unstyled">
|
||
<li><kbd class="terminal bg-pale-primary">gulp</kbd> This command will fire default gulp task which includes: creating <code class="folder">dist</code> folder, launching BrowserSync, merging vendor libraries, JS minification, SASS and HTML compilation and starting watch task.</li>
|
||
<li><kbd class="terminal bg-pale-primary">gulp serve</kbd> This command will launch watch task and BrowserSync. It will watch changes of your HTML / SCSS / CSS / JS files and automatically compile them.</li>
|
||
<li><kbd class="terminal bg-pale-primary">gulp build:dist</kbd> This will create <code class="folder">dist</code> which includes all template files with <strong>minified</strong> CSS / JS.</li>
|
||
<li><kbd class="terminal bg-pale-primary">gulp build:dev</kbd> This will create <code class="folder">dev</code> which includes all template files with <strong>unminified</strong> CSS / JS.</li>
|
||
</ul>
|
||
<p class="mb-0">When you want to kill the server just hit <kbd class="kbd">Control + C</kbd></p>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</section>
|
||
<section id="snippet-5" class="wrapper py-16">
|
||
<h2 class="mb-5">Quick Installation Video</h2>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<p class="mb-2">This <a href="https://www.youtube.com/watch?v=kQow-YDksXA" class="external" target="_blank">quick video</a> demonstrates:</p>
|
||
<ul class="unordered-list mb-0">
|
||
<li>Installing npm packages (Terminal command: <kbd class="terminal mt-n1">npm install</kbd>)</li>
|
||
<li>Running gulp (Terminal command: <kbd class="terminal mt-n1">gulp serve</kbd>)</li>
|
||
<li>Changing the primary color.</li>
|
||
</ul>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</section>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</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> |