1212 lines
70 KiB
HTML
1212 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/grape.css">
|
|
<link rel="preload" href="./assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="content-wrapper">
|
|
<header class="wrapper">
|
|
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light caret-none">
|
|
<div class="container flex-lg-row flex-nowrap align-items-center">
|
|
<div class="navbar-brand w-100">
|
|
<a href="./index.html">
|
|
<img src="./assets/img/logo-dark.png" srcset="./assets/img/logo-dark@2x.png 2x" alt="" />
|
|
</a>
|
|
</div>
|
|
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
|
<div class="offcanvas-header d-lg-none">
|
|
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
|
|
<ul class="navbar-nav">
|
|
<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">
|
|
<nav class="nav social social-muted justify-content-end text-end">
|
|
<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>
|
|
</nav>
|
|
<!-- /.social -->
|
|
</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-light">
|
|
<div class="container-card">
|
|
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 mt-2 mb-5" data-image-src="./assets/img/photos/bg22.png">
|
|
<div class="card-body py-14 px-0">
|
|
<div class="container">
|
|
<div class="row gx-md-8 gx-xl-12 gy-10 align-items-center text-center text-lg-start">
|
|
<div class="col-lg-6" data-cues="slideInDown" data-group="page-title" data-delay="900">
|
|
<h1 class="display-2 mb-4 me-xl-5 me-xxl-0">Networking <span class="text-gradient gradient-1">solutions</span> for worldwide communication</h1>
|
|
<p class="lead fs-23 lh-sm mb-7 pe-xxl-15">We're a company that focuses on establishing long-term relationships with customers.</p>
|
|
<div><a href="#" class="btn btn-lg btn-gradient gradient-1 rounded">Explore Now</a></div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-6">
|
|
<img class="img-fluid mb-n18" src="./assets/img/illustrations/3d6.png" srcset="./assets/img/illustrations/3d6@2x.png 2x" data-cue="fadeIn" data-delay="300" alt="" />
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container-card -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-light">
|
|
<div class="container pt-14 pt-md-17 pb-14 pb-md-18">
|
|
<div class="row text-center">
|
|
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
|
<h2 class="fs-16 text-uppercase text-gradient gradient-1 mb-3">Our Features</h2>
|
|
<h3 class="display-4 mb-9 px-xl-11">The service we offer is specifically designed to meet your needs.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="row gy-8 mb-17">
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<img src="./assets/img/icons/solid/script.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia me-4" alt="" />
|
|
</div>
|
|
<div>
|
|
<h3 class="fs-22 mb-1">Software & Integration</h3>
|
|
<p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<img src="./assets/img/icons/solid/verify.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia me-4" alt="" />
|
|
</div>
|
|
<div>
|
|
<h3 class="fs-22 mb-1">Network Security</h3>
|
|
<p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<img src="./assets/img/icons/solid/cloud-network.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia me-4" alt="" />
|
|
</div>
|
|
<div>
|
|
<h3 class="fs-22 mb-1">Cloud Services</h3>
|
|
<p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<img src="./assets/img/icons/solid/director.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia me-4" alt="" />
|
|
</div>
|
|
<div>
|
|
<h3 class="fs-22 mb-1">Wireless Networking</h3>
|
|
<p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<img src="./assets/img/icons/solid/setting.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia me-4" alt="" />
|
|
</div>
|
|
<div>
|
|
<h3 class="fs-22 mb-1">IT Solutions</h3>
|
|
<p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<img src="./assets/img/icons/solid/server.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia me-4" alt="" />
|
|
</div>
|
|
<div>
|
|
<h3 class="fs-22 mb-1">Server Configuration</h3>
|
|
<p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem aget elit nullam quis risus eget.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="row gx-3 gy-10 mb-15 mb-md-18 align-items-center">
|
|
<div class="col-lg-5 offset-lg-1">
|
|
<figure><img class="w-auto" src="./assets/img/illustrations/3d2.png" srcset="./assets/img/illustrations/3d2@2x.png 2x" alt="" /></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-5 offset-lg-1">
|
|
<h2 class="fs-16 text-uppercase text-gradient gradient-1 mb-3">Have Perfect Control</h2>
|
|
<h3 class="display-4 mb-4">We bring solutions to make life easier for our customers.</h3>
|
|
<p class="mb-6">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue rutrum.</p>
|
|
<div class="row gy-3">
|
|
<div class="col-xl-6">
|
|
<ul class="icon-list bullet-bg bullet-soft-primary mb-0">
|
|
<li><span><i class="uil uil-check"></i></span><span>Aenean quam ornare. Curabitur blandit.</span></li>
|
|
<li class="mt-3"><span><i class="uil uil-check"></i></span><span>Nullam quis risus eget urna mollis ornare.</span></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-xl-6">
|
|
<ul class="icon-list bullet-bg bullet-soft-primary mb-0">
|
|
<li><span><i class="uil uil-check"></i></span><span>Etiam porta euismod malesuada mollis.</span></li>
|
|
<li class="mt-3"><span><i class="uil uil-check"></i></span><span>Vivamus sagittis lacus vel augue rutrum.</span></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="row gx-md-8 gy-10 align-items-center">
|
|
<div class="col-lg-6 offset-lg-1 order-lg-2 position-relative">
|
|
<figure class="rounded"><img class="img-fluid" src="./assets/img/photos/about27.jpg" srcset="./assets/img/photos/about27@2x.jpg 2x" alt="" /></figure>
|
|
<div class="card shadow-lg position-absolute d-none d-md-block" style="top: 15%; left: -7%">
|
|
<div class="card-body py-4 px-5">
|
|
<div class="d-flex flex-row align-items-center">
|
|
<div>
|
|
<img src="./assets/img/icons/solid/cloud-group.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia me-3" alt="" />
|
|
</div>
|
|
<div>
|
|
<h3 class="fs-25 counter mb-0 text-nowrap">25000+</h3>
|
|
<p class="fs-16 lh-sm mb-0 text-nowrap">Happy Clients</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
<div class="card shadow-lg position-absolute text-center d-none d-md-block" style="bottom: 10%; left: -10%;">
|
|
<div class="card-body p-6">
|
|
<div class="progressbar semi-circle fuchsia mb-3" data-value="80"></div>
|
|
<h4 class="mb-0">Time Saved</h4>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-5">
|
|
<h2 class="fs-16 text-uppercase text-gradient gradient-1 mb-3">What Makes Us Different?</h2>
|
|
<h3 class="display-4 mb-4 me-lg-n5">We make spending stress free so you have the perfect control.</h3>
|
|
<p class="mb-6">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus. Integer posuere erat a ante venenatis dapibus posuere velit.</p>
|
|
<ul class="icon-list bullet-bg bullet-soft-primary">
|
|
<li><i class="uil uil-check"></i>Aenean eu leo quam. Pellentesque ornare.</li>
|
|
<li><i class="uil uil-check"></i>Nullam quis risus eget urna mollis ornare.</li>
|
|
<li><i class="uil uil-check"></i>Donec id elit non mi porta gravida at eget.</li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-light">
|
|
<div class="container-card">
|
|
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 pb-15" data-image-src="./assets/img/photos/bg22.png">
|
|
<div class="card-body py-14 px-0">
|
|
<div class="container">
|
|
<div class="row gx-lg-8 gx-xl-12 gy-10 gy-lg-0">
|
|
<div class="col-lg-4 text-center text-lg-start">
|
|
<h3 class="display-4 mb-3 pe-xxl-15">We are proud of our works</h3>
|
|
<p class="lead fs-lg mb-0 pe-xxl-10">We bring solutions to make life easier for our customers.</p>
|
|
</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">
|
|
<img src="./assets/img/icons/solid/target.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia mb-3" alt="" />
|
|
<h3 class="counter">1000+</h3>
|
|
<p class="mb-0">Completed Projects</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-4">
|
|
<img src="./assets/img/icons/solid/bar-chart.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia mb-3" alt="" />
|
|
<h3 class="counter">4x</h3>
|
|
<p class="mb-0">Revenue Growth</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-4">
|
|
<img src="./assets/img/icons/solid/employees.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia mb-3" alt="" />
|
|
<h3 class="counter">99.7%</h3>
|
|
<p class="mb-0">Customer Satisfaction</p>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container-card -->
|
|
<div class="container">
|
|
<div class="grid mb-18">
|
|
<div class="row isotope gy-6 mt-n18">
|
|
<div class="item col-md-6 col-xl-3">
|
|
<div class="card shadow-lg card-border-bottom border-soft-primary">
|
|
<div class="card-body">
|
|
<blockquote class="border-0 mb-0">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta. Cras mattis consectetur.”</p>
|
|
<div class="blockquote-details">
|
|
<div class="info ps-0">
|
|
<h5 class="mb-1">Coriss Ambady</h5>
|
|
<p class="mb-0">Financial Analyst</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="item col-md-6 col-xl-3">
|
|
<div class="card shadow-lg card-border-bottom border-soft-primary">
|
|
<div class="card-body">
|
|
<blockquote class="border-0 mb-0">
|
|
<p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet purus sit amet fermentum.”</p>
|
|
<div class="blockquote-details">
|
|
<div class="info ps-0">
|
|
<h5 class="mb-1">Cory Zamora</h5>
|
|
<p class="mb-0">Marketing Specialist</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="item col-md-6 col-xl-3">
|
|
<div class="card shadow-lg card-border-bottom border-soft-primary">
|
|
<div class="card-body">
|
|
<blockquote class="border-0 mb-0">
|
|
<p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor eu rutrum. Nulla vitae libero.”</p>
|
|
<div class="blockquote-details">
|
|
<div class="info ps-0">
|
|
<h5 class="mb-1">Nikolas Brooten</h5>
|
|
<p class="mb-0">Sales Manager</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="item col-md-6 col-xl-3">
|
|
<div class="card shadow-lg card-border-bottom border-soft-primary">
|
|
<div class="card-body">
|
|
<blockquote class="border-0 mb-0">
|
|
<p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus eu tincidunt auctor nullam rutrum, pharetra augue.”</p>
|
|
<div class="blockquote-details">
|
|
<div class="info ps-0">
|
|
<h5 class="mb-1">Coriss Ambady</h5>
|
|
<p class="mb-0">Financial Analyst</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.grid-view -->
|
|
<div class="row text-center">
|
|
<div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto">
|
|
<h2 class="fs-16 text-uppercase text-gradient gradient-1 mb-3">Case Studies</h2>
|
|
<h3 class="display-4 mb-9 me-lg-n5">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-17 mb-md-20" 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 class="row gy-10 gy-sm-13 gx-md-8 gx-xl-12 align-items-center mb-10 mb-md-12">
|
|
<div class="col-lg-6">
|
|
<div class="row gx-md-5 gy-5">
|
|
<div class="col-md-6">
|
|
<figure class="rounded"><img src="./assets/img/photos/g12.jpg" srcset="./assets/img/photos/g12@2x.jpg 2x" alt=""></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6 align-self-end">
|
|
<figure class="rounded"><img src="./assets/img/photos/g13.jpg" srcset="./assets/img/photos/g13@2x.jpg 2x" alt=""></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-12">
|
|
<figure class="rounded mx-md-5"><img src="./assets/img/photos/g11.jpg" srcset="./assets/img/photos/g11@2x.jpg 2x" alt=""></figure>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-6">
|
|
<h2 class="fs-16 text-uppercase text-gradient gradient-1 mb-3">Who Are We?</h2>
|
|
<h3 class="display-4 mb-4">Company that believes in the power of creative strategy.</h3>
|
|
<p class="mb-6">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed.</p>
|
|
<div class="row gy-3 gx-xl-8">
|
|
<div class="col-xl-6">
|
|
<ul class="icon-list bullet-bg bullet-soft-primary mb-0">
|
|
<li><span><i class="uil uil-check"></i></span><span>Aenean eu leo quam ornare curabitur blandit tempus.</span></li>
|
|
<li class="mt-3"><span><i class="uil uil-check"></i></span><span>Nullam quis risus eget urna mollis ornare donec elit.</span></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-xl-6">
|
|
<ul class="icon-list bullet-bg bullet-soft-primary mb-0">
|
|
<li><span><i class="uil uil-check"></i></span><span>Etiam porta sem malesuada magna mollis euismod.</span></li>
|
|
<li class="mt-3"><span><i class="uil uil-check"></i></span><span>Fermentum massa vivamus faucibus amet euismod.</span></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="row gx-lg-8 gx-xl-12 gy-6 mb-14 mb-md-17">
|
|
<div class="col-lg-4">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<div class="icon btn btn-circle pe-none btn-soft-primary me-4"> <span class="number fs-18">1</span> </div>
|
|
</div>
|
|
<div>
|
|
<h4>Our Vision</h4>
|
|
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget. Fusce dapibus tellus.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-4">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<div class="icon btn btn-circle pe-none btn-soft-primary me-4"> <span class="number fs-18">2</span> </div>
|
|
</div>
|
|
<div>
|
|
<h4>Our Mission</h4>
|
|
<p class="mb-2">Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet. Sed posuere consectetur.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-4">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<div class="icon btn btn-circle pe-none btn-soft-primary me-4"> <span class="number fs-18">3</span> </div>
|
|
</div>
|
|
<div>
|
|
<h4>Our Values</h4>
|
|
<p class="mb-2">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna scelerisque.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="row gx-3 gy-10 mb-15 mb-md-18 align-items-center">
|
|
<div class="col-lg-6">
|
|
<figure><img class="w-auto" src="./assets/img/illustrations/3d3.png" srcset="./assets/img/illustrations/3d3@2x.png 2x" alt="" /></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-5 offset-lg-1">
|
|
<h2 class="fs-16 text-uppercase text-gradient gradient-1 mb-3">Contact Us</h2>
|
|
<h3 class="display-4 mb-8">Got any questions? Don't hesitate to get in touch.</h3>
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<img src="./assets/img/icons/solid/pin.svg" class="svg-inject icon-svg icon-svg-xs solid-duo text-grape-fuchsia mt-1 me-4" style="width: 1.5rem; height: 1.5rem;" alt="" />
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">Address</h5>
|
|
<address>Moonshine St. 14/05 Light City, London</address>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<img src="./assets/img/icons/solid/rotary.svg" class="svg-inject icon-svg icon-svg-xs solid-duo text-grape-fuchsia mt-1 me-4" style="width: 1.5rem; height: 1.5rem;" alt="" />
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">Phone</h5>
|
|
<p>00 (123) 456 78 90</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<img src="./assets/img/icons/solid/emails.svg" class="svg-inject icon-svg icon-svg-xs solid-duo text-grape-fuchsia mt-1 me-4" style="width: 1.5rem; height: 1.5rem;" alt="" />
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">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-light">
|
|
<div class="container-card">
|
|
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 mb-14" data-image-src="./assets/img/photos/bg22.png">
|
|
<div class="card-body py-14 px-0">
|
|
<div class="container">
|
|
<div class="row text-center">
|
|
<div class="col-xl-11 col-xxl-9 mx-auto">
|
|
<h2 class="fs-16 text-uppercase text-gradient gradient-1 mb-3">Join Our Community</h2>
|
|
<h3 class="display-4 mb-7 px-lg-17">We are trusted by over 5000+ clients. Join them now and grow your business.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="d-flex justify-content-center">
|
|
<span><a class="btn btn-lg btn-gradient gradient-1 rounded">Get Started</a></span>
|
|
</div>
|
|
</div>
|
|
<!--/.container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container-card -->
|
|
<div class="container 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-dark.png" srcset="./assets/img/logo-dark@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 ">
|
|
<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 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:#" class="link-body">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 mb-3">Learn More</h4>
|
|
<ul class="list-unstyled text-reset 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 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 " 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 btn-gradient gradient-1">
|
|
</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>
|
|
</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> |