SMAMUGAPAY/assets/template/demo23.html

1366 lines
76 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/leaf.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 bg-soft-primary">
<nav class="navbar navbar-expand-lg center-nav transparent position-absolute navbar-dark caret-none">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img class="logo-dark" src="./assets/img/logo-dark.png" srcset="./assets/img/logo-dark@2x.png 2x" alt="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<ul class="navbar-nav">
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content mega-menu-scroll">
<ul class="row row-cols-1 row-cols-lg-6 gx-0 gx-lg-4 gy-lg-2 list-unstyled">
<li class="col">
<a class="dropdown-item" href="./demo1.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi1.jpg" srcset="./assets/img/demos/mi1@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 1</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo2.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi2.jpg" srcset="./assets/img/demos/mi2@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 2</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo3.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi3.jpg" srcset="./assets/img/demos/mi3@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 3</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo4.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi4.jpg" srcset="./assets/img/demos/mi4@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 4</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo5.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi5.jpg" srcset="./assets/img/demos/mi5@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 5</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo6.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi6.jpg" srcset="./assets/img/demos/mi6@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 6</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo7.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi7.jpg" srcset="./assets/img/demos/mi7@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 7</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo8.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi8.jpg" srcset="./assets/img/demos/mi8@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 8</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo9.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi9.jpg" srcset="./assets/img/demos/mi9@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 9</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo10.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi10.jpg" srcset="./assets/img/demos/mi10@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 10</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo11.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi11.jpg" srcset="./assets/img/demos/mi11@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 11</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo12.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi12.jpg" srcset="./assets/img/demos/mi12@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 12</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo13.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi13.jpg" srcset="./assets/img/demos/mi13@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 13</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo14.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi14.jpg" srcset="./assets/img/demos/mi14@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 14</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo15.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi15.jpg" srcset="./assets/img/demos/mi15@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 15</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo16.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi16.jpg" srcset="./assets/img/demos/mi16@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 16</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo17.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi17.jpg" srcset="./assets/img/demos/mi17@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 17</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo18.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi18.jpg" srcset="./assets/img/demos/mi18@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 18</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo19.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi19.jpg" srcset="./assets/img/demos/mi19@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 19</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo20.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi20.jpg" srcset="./assets/img/demos/mi20@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 20</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo21.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi21.jpg" srcset="./assets/img/demos/mi21@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 21</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo22.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi22.jpg" srcset="./assets/img/demos/mi22@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 22</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo23.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi23.jpg" srcset="./assets/img/demos/mi23@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 23</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo24.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi24.jpg" srcset="./assets/img/demos/mi24@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 24</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo25.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi25.jpg" srcset="./assets/img/demos/mi25@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 25</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo26.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi26.jpg" srcset="./assets/img/demos/mi26@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 26</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo27.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi27.jpg" srcset="./assets/img/demos/mi27@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 27</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo28.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi28.jpg" srcset="./assets/img/demos/mi28@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 28</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo29.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi29.jpg" srcset="./assets/img/demos/mi29@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 29</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo30.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi30.jpg" srcset="./assets/img/demos/mi30@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 30</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo31.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi31.jpg" srcset="./assets/img/demos/mi31@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 31</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo32.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi32.jpg" srcset="./assets/img/demos/mi32@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 32</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo33.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi33.jpg" srcset="./assets/img/demos/mi33@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 33</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="./demo34.html">
<figure class="rounded lift d-none d-lg-block"><img src="./assets/img/demos/mi34.jpg" srcset="./assets/img/demos/mi34@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 34</span>
</a>
</li>
</ul>
<!--/.row -->
<span class="d-none d-lg-flex"><i class="uil uil-direction"></i><strong>Scroll to view more</strong></span>
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./services.html">Services I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./services2.html">Services II</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./about.html">About I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./about2.html">About II</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./shop.html">Shop I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./shop2.html">Shop II</a></li>
<li class="nav-item"><a class="dropdown-item" href="./shop-product.html">Product Page</a></li>
<li class="nav-item"><a class="dropdown-item" href="./shop-cart.html">Shopping Cart</a></li>
<li class="nav-item"><a class="dropdown-item" href="./shop-checkout.html">Checkout</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./contact.html">Contact I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./contact2.html">Contact II</a></li>
<li class="nav-item"><a class="dropdown-item" href="./contact3.html">Contact III</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./career.html">Job Listing I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./career2.html">Job Listing II</a></li>
<li class="nav-item"><a class="dropdown-item" href="./career-job.html">Job Description</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./404.html">404 Not Found</a></li>
<li class="nav-item"><a class="dropdown-item" href="./page-loader.html">Page Loader</a></li>
<li class="nav-item"><a class="dropdown-item" href="./signin.html">Sign In I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./signin2.html">Sign In II</a></li>
<li class="nav-item"><a class="dropdown-item" href="./signup.html">Sign Up I</a></li>
<li class="nav-item"><a class="dropdown-item" href="./signup2.html">Sign Up II</a></li>
<li class="nav-item"><a class="dropdown-item" href="./terms.html">Terms</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="./pricing.html">Pricing</a></li>
<li class="nav-item"><a class="dropdown-item" href="./onepage.html">One Page</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">Project Pages</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="./projects.html">Projects I</a></li>
<li><a class="dropdown-item" href="./projects2.html">Projects II</a></li>
<li><a class="dropdown-item" href="./projects3.html">Projects III</a></li>
<li><a class="dropdown-item" href="./projects4.html">Projects IV</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Single Projects</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="./single-project.html">Single Project I</a></li>
<li><a class="dropdown-item" href="./single-project2.html">Single Project II</a></li>
<li><a class="dropdown-item" href="./single-project3.html">Single Project III</a></li>
<li><a class="dropdown-item" href="./single-project4.html">Single Project IV</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./blog.html">Blog without Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item" href="./blog2.html">Blog with Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item" href="./blog3.html">Blog with Left Sidebar</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="./blog-post.html">Post without Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item" href="./blog-post2.html">Post with Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item" href="./blog-post3.html">Post with Left Sidebar</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content">
<ul class="row row-cols-1 row-cols-lg-6 gx-0 gx-lg-6 gy-lg-4 list-unstyled">
<li class="col"><a class="dropdown-item" href="./docs/blocks/about.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block1.svg" alt=""></div>
<span>About</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/blog.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block2.svg" alt=""></div>
<span>Blog</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/call-to-action.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block3.svg" alt=""></div>
<span>Call to Action</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/clients.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block4.svg" alt=""></div>
<span>Clients</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/contact.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block5.svg" alt=""></div>
<span>Contact</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/facts.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block6.svg" alt=""></div>
<span>Facts</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/faq.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block7.svg" alt=""></div>
<span>FAQ</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/features.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block8.svg" alt=""></div>
<span>Features</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/footer.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block9.svg" alt=""></div>
<span>Footer</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/hero.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block10.svg" alt=""></div>
<span>Hero</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/misc.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block17.svg" alt=""></div>
<span>Misc</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/navbar.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block11.svg" alt=""></div>
<span>Navbar</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/portfolio.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block12.svg" alt=""></div>
<span>Portfolio</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/pricing.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block13.svg" alt=""></div>
<span>Pricing</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/process.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block14.svg" alt=""></div>
<span>Process</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/team.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block15.svg" alt=""></div>
<span>Team</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="./docs/blocks/testimonials.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="./assets/img/demos/block16.svg" alt=""></div>
<span>Testimonials</span>
</a>
</li>
</ul>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-4">
<h6 class="dropdown-header">Usage</h6>
<ul class="list-unstyled cc-2 pb-lg-1">
<li><a class="dropdown-item" href="./docs/index.html">Get Started</a></li>
<li><a class="dropdown-item" href="./docs/forms.html">Forms</a></li>
<li><a class="dropdown-item" href="./docs/faq.html">FAQ</a></li>
<li><a class="dropdown-item" href="./docs/changelog.html">Changelog</a></li>
<li><a class="dropdown-item" href="./docs/credits.html">Credits</a></li>
</ul>
<h6 class="dropdown-header mt-lg-6">Styleguide</h6>
<ul class="list-unstyled cc-2">
<li><a class="dropdown-item" href="./docs/styleguide/colors.html">Colors</a></li>
<li><a class="dropdown-item" href="./docs/styleguide/fonts.html">Fonts</a></li>
<li><a class="dropdown-item" href="./docs/styleguide/icons-svg.html">SVG Icons</a></li>
<li><a class="dropdown-item" href="./docs/styleguide/icons-font.html">Font Icons</a></li>
<li><a class="dropdown-item" href="./docs/styleguide/illustrations.html">Illustrations</a></li>
<li><a class="dropdown-item" href="./docs/styleguide/backgrounds.html">Backgrounds</a></li>
<li><a class="dropdown-item" href="./docs/styleguide/misc.html">Misc</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-8">
<h6 class="dropdown-header">Elements</h6>
<ul class="list-unstyled cc-3">
<li><a class="dropdown-item" href="./docs/elements/accordion.html">Accordion</a></li>
<li><a class="dropdown-item" href="./docs/elements/alerts.html">Alerts</a></li>
<li><a class="dropdown-item" href="./docs/elements/animations.html">Animations</a></li>
<li><a class="dropdown-item" href="./docs/elements/avatars.html">Avatars</a></li>
<li><a class="dropdown-item" href="./docs/elements/background.html">Background</a></li>
<li><a class="dropdown-item" href="./docs/elements/badges.html">Badges</a></li>
<li><a class="dropdown-item" href="./docs/elements/buttons.html">Buttons</a></li>
<li><a class="dropdown-item" href="./docs/elements/card.html">Card</a></li>
<li><a class="dropdown-item" href="./docs/elements/carousel.html">Carousel</a></li>
<li><a class="dropdown-item" href="./docs/elements/dividers.html">Dividers</a></li>
<li><a class="dropdown-item" href="./docs/elements/form-elements.html">Form Elements</a></li>
<li><a class="dropdown-item" href="./docs/elements/image-hover.html">Image Hover</a></li>
<li><a class="dropdown-item" href="./docs/elements/image-mask.html">Image Mask</a></li>
<li><a class="dropdown-item" href="./docs/elements/lightbox.html">Lightbox</a></li>
<li><a class="dropdown-item" href="./docs/elements/player.html">Media Player</a></li>
<li><a class="dropdown-item" href="./docs/elements/modal.html">Modal</a></li>
<li><a class="dropdown-item" href="./docs/elements/pagination.html">Pagination</a></li>
<li><a class="dropdown-item" href="./docs/elements/progressbar.html">Progressbar</a></li>
<li><a class="dropdown-item" href="./docs/elements/shadows.html">Shadows</a></li>
<li><a class="dropdown-item" href="./docs/elements/shapes.html">Shapes</a></li>
<li><a class="dropdown-item" href="./docs/elements/tables.html">Tables</a></li>
<li><a class="dropdown-item" href="./docs/elements/tabs.html">Tabs</a></li>
<li><a class="dropdown-item" href="./docs/elements/text-animations.html">Text Animations</a></li>
<li><a class="dropdown-item" href="./docs/elements/text-highlight.html">Text Highlight</a></li>
<li><a class="dropdown-item" href="./docs/elements/tiles.html">Tiles</a></li>
<li><a class="dropdown-item" href="./docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
<li><a class="dropdown-item" href="./docs/elements/typography.html">Typography</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer d-lg-none">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br /> 00 (123) 456 78 90 <br />
<nav class="nav social social-white mt-4">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i class="uil uil-search"></i></a></li>
<li class="nav-item d-lg-none">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="offcanvas offcanvas-end text-inverse" id="offcanvas-info" data-bs-scroll="true">
<div class="offcanvas-header">
<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 pb-6">
<div class="widget mb-8">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> 00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget mb-8">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.offcanvas -->
<div class="offcanvas offcanvas-top bg-light" id="offcanvas-search" data-bs-scroll="true">
<div class="container d-flex flex-row py-6">
<form class="search-form w-100">
<input id="search-form" type="text" class="form-control" placeholder="Type keyword and hit enter">
</form>
<!-- /.search-form -->
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<!-- /.container -->
</div>
<!-- /.offcanvas -->
</header>
<!-- /header -->
<section class="wrapper bg-dark">
<div class="swiper-container swiper-thumbs-container swiper-fullscreen nav-dark" data-margin="0" data-autoplay="true" data-autoplaytime="7000" data-nav="true" data-dots="false" data-items="1" data-thumbs="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide bg-overlay bg-overlay-400 bg-dark bg-image" data-image-src="./assets/img/photos/bg28.jpg"></div>
<div class="swiper-slide bg-overlay bg-overlay-400 bg-dark bg-image" data-image-src="./assets/img/photos/bg29.jpg"></div>
<div class="swiper-slide bg-overlay bg-overlay-400 bg-dark bg-image" data-image-src="./assets/img/photos/bg30.jpg"></div>
<div class="swiper-slide bg-overlay bg-overlay-400 bg-dark bg-image" data-image-src="./assets/img/photos/bg31.jpg"></div>
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
<div class="swiper swiper-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./assets/img/photos/bg28-th.jpg" srcset="./assets/img/photos/bg28-th@2x.jpg 2x" alt="" /></div>
<div class="swiper-slide"><img src="./assets/img/photos/bg29-th.jpg" srcset="./assets/img/photos/bg29-th@2x.jpg 2x" alt="" /></div>
<div class="swiper-slide"><img src="./assets/img/photos/bg30-th.jpg" srcset="./assets/img/photos/bg30-th@2x.jpg 2x" alt="" /></div>
<div class="swiper-slide"><img src="./assets/img/photos/bg31-th.jpg" srcset="./assets/img/photos/bg31-th@2x.jpg 2x" alt="" /></div>
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
<div class="swiper-static">
<div class="container h-100 d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-lg-8 mx-auto mt-n10 text-center">
<h1 class="fs-19 text-uppercase ls-xl text-white mb-3 animate__animated animate__zoomIn animate__delay-1s">I'm Julia Sandbox</h1>
<h2 class="display-1 fs-60 text-white mb-0 animate__animated animate__zoomIn animate__delay-2s">couples & wedding photographer</h2>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.swiper-static -->
</div>
<!-- /.swiper-container -->
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row">
<div class="col-lg-12 col-xl-10 col-xxl-7 mx-auto text-center">
<i class="icn-flower text-leaf fs-30 opacity-25"></i>
<h2 class="display-5 text-center mt-2 mb-10">I absolutely love shooting weddings and couples because there are so many feelings to capture.</h2>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row grid-view gx-md-8 gx-xl-10 gy-8 gy-lg-0 text-center">
<div class="col-sm-8 col-md-6 col-lg-4 mx-auto">
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1">
<a href="#"><img class="img-fluid" src="./assets/img/photos/fs1.jpg" srcset="./assets/img/photos/fs1@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">View Gallery</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<h3 class="fs-21 mb-0">Wedding</h3>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="col-sm-8 col-md-6 col-lg-4 mx-auto">
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1">
<a href="#"><img class="img-fluid" src="./assets/img/photos/fs2.jpg" srcset="./assets/img/photos/fs2@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">View Gallery</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<h3 class="fs-21 mb-0">Couples</h3>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
<div class="col-sm-8 col-md-6 col-lg-4 mx-auto">
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1">
<a href="#"><img class="img-fluid" src="./assets/img/photos/fs3.jpg" srcset="./assets/img/photos/fs3@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">View Gallery</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<h3 class="fs-21 mb-0">Engagement</h3>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg32.jpg">
<div class="container py-14 py-md-17 text-center">
<i class="icn-flower text-white fs-30 opacity-50"></i>
<div class="row mt-3">
<div class="col-xl-9 col-xxl-8 mx-auto">
<div class="swiper-container dots-light dots-closer mb-6" data-margin="30" data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="border-0 fs-24 mb-0">
<p>“Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus.”</p>
<div class="blockquote-details justify-content-center">
<div class="info p-0">
<h6 class="mb-0 text-white">Julia & David</h6>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="border-0 fs-24 mb-0">
<p>“Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus.”</p>
<div class="blockquote-details justify-content-center">
<div class="info p-0">
<h6 class="mb-0 text-white">Jolene & Andrea</h6>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<blockquote class="border-0 fs-24 mb-0">
<p>“Fusce dapibus tellus ac cursus commodo, tortor mauris condimentum nibh fermentum massa, justo sit amet vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus.”</p>
<div class="blockquote-details justify-content-center">
<div class="info p-0">
<h6 class="mb-0 text-white">Eve & Will</h6>
</div>
</div>
</blockquote>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!--/.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-soft-primary">
<div class="container py-14 py-md-16">
<div class="row">
<div class="col-xl-9 col-xxl-7 mx-auto text-center">
<i class="icn-flower text-leaf fs-30 opacity-25"></i>
<h2 class="display-5 text-center mt-2 mb-10">I would like to give you a unique photography and video experience, built to serve you best.</h2>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row text-center">
<div class="col-xl-9 mx-auto">
<div class="player" data-plyr-provider="vimeo" data-plyr-embed-id="94837904"></div>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="overflow-hidden">
<div class="container py-14 py-md-16">
<div class="row">
<div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
<i class="icn-flower text-leaf fs-30 opacity-25"></i>
<h2 class="display-5 text-center mt-2 mb-10">Some of wonderful love stories <br class="d-none d-md-block"> I witnessed and had the chance to capture</h2>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="swiper-container grid-view nav-bottom nav-color mb-14 text-center" data-margin="30" data-dots="false" data-nav="true" data-items-md="2" data-items-xs="1">
<div class="swiper overflow-visible pb-2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1">
<a href="#"><img class="img-fluid" src="./assets/img/photos/fc1.jpg" srcset="./assets/img/photos/fc1@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">View Gallery</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<h3 class="fs-21 mb-1">Lucy & David</h3>
<ul class="post-meta fs-16 mb-0">
<li>5 Photos</li>
<li>Wedding</li>
</ul>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1">
<a href="#"><img class="img-fluid" src="./assets/img/photos/fc2.jpg" srcset="./assets/img/photos/fc2@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">View Gallery</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<h3 class="fs-21 mb-1">Stacy & Thomas</h3>
<ul class="post-meta fs-16 mb-0">
<li>8 Photos</li>
<li>Wedding</li>
</ul>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1">
<a href="#"><img class="img-fluid" src="./assets/img/photos/fc3.jpg" srcset="./assets/img/photos/fc3@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">View Gallery</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<h3 class="fs-21 mb-1">Katherine & Jack</h3>
<ul class="post-meta fs-16 mb-0">
<li>7 Photos</li>
<li>Couples</li>
</ul>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1">
<a href="#"><img class="img-fluid" src="./assets/img/photos/fc4.jpg" srcset="./assets/img/photos/fc4@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">View Gallery</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<h3 class="fs-21 mb-1">Jolene & William</h3>
<ul class="post-meta fs-16 mb-0">
<li>9 Photos</li>
<li>Wedding</li>
</ul>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1">
<a href="#"><img class="img-fluid" src="./assets/img/photos/fc5.jpg" srcset="./assets/img/photos/fc5@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">View Gallery</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<h3 class="fs-21 mb-1">Jenn & Richard</h3>
<ul class="post-meta fs-16 mb-0">
<li>6 Photos</li>
<li>Engagement</li>
</ul>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1">
<a href="#"><img class="img-fluid" src="./assets/img/photos/fc6.jpg" srcset="./assets/img/photos/fc6@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">View Gallery</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<h3 class="fs-21 mb-1">Gloria & Leo</h3>
<ul class="post-meta fs-16 mb-0">
<li>8 Photos</li>
<li>Wedding</li>
</ul>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1">
<a href="#"><img class="img-fluid" src="./assets/img/photos/fc7.jpg" srcset="./assets/img/photos/fc7@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">View Gallery</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<h3 class="fs-21 mb-1">Grace & Finn</h3>
<ul class="post-meta fs-16 mb-0">
<li>7 Photos</li>
<li>Engagement</li>
</ul>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.container -->
</div>
<!-- /.overflow-hidden -->
</section>
<!-- /section -->
<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg33.jpg">
<div class="container py-14 py-md-17 text-center">
<div class="row">
<div class="col-xl-10 col-xxl-8 mx-auto text-center">
<i class="icn-flower text-white fs-30 opacity-50"></i>
<h2 class="display-4 text-white mt-2 mb-7">I'm here to capture your moments. Looking for a caring, fun, passionate photographer?</h2>
<a href="#" class="btn btn-white rounded-pill mb-5">Contact Me</a>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="container pt-12 pt-md-14 pb-14 pb-md-16">
<div class="row gx-md-8 gx-xl-12 gy-6 align-items-center">
<div class="col-md-8 col-lg-6 mx-auto">
<div class="img-mask mask-1"><img src="./assets/img/photos/about29.jpg" srcset="./assets/img/photos/about29@2x.jpg 2x" alt="" /></div>
</div>
<!--/column -->
<div class="col-lg-6">
<h2 class="display-5 mb-5">Hi, I'm Julia, a documentary wedding and couples photographer currently working from and based in London.</h2>
<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. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio. Sed posuere consectetur est at lobortis facilisis in.</p>
<div class="row counter-wrapper gy-6">
<div class="col-md-4">
<h3 class="counter">500K+</h3>
<p>Shots Taken</p>
</div>
<!--/column -->
<div class="col-md-4">
<h3 class="counter">500+</h3>
<p>Happy Clients</p>
</div>
<!--/column -->
<div class="col-md-4">
<h3 class="counter">25</h3>
<p>Awards Won</p>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!-- /.row -->
<div class="row gx-md-8 gx-xl-12 gy-6 mt-8">
<div class="col-lg-4">
<h3>My Skills</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna vel consectetur purus sit amet fermentum.</p>
<ul class="progress-list">
<li>
<p>Photoshop</p>
<div class="progressbar line soft-primary" data-value="100"></div>
</li>
<li>
<p>Final Cut</p>
<div class="progressbar line soft-primary" data-value="80"></div>
</li>
<li>
<p>Motion Video</p>
<div class="progressbar line soft-primary" data-value="85"></div>
</li>
<li>
<p>Manupilation</p>
<div class="progressbar line soft-primary" data-value="75"></div>
</li>
</ul>
<!-- /.progress-list -->
</div>
<!-- /column -->
<div class="col-lg-4">
<h3>Why Choose Me?</h3>
<p>Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies. Cras mattis consectetur purus amet fermentum.</p>
<ul class="icon-list bullet-bg bullet-soft-primary">
<li><i class="uil uil-check"></i>Aenean eu leo quam pellentesque.</li>
<li><i class="uil uil-check"></i>Nullam quis risus eget urna mollis.</li>
<li><i class="uil uil-check"></i>Donec id elit non mi porta gravida.</li>
<li><i class="uil uil-check"></i>Fusce dapibus tellus ac commodo.</li>
<li><i class="uil uil-check"></i>Cras justo odio dapibus ac facilisis in.</li>
</ul>
</div>
<!-- /column -->
<div class="col-lg-4">
<h3>My Process</h3>
<div class="d-flex flex-row mb-5">
<div>
<span class="icon btn btn-circle btn-soft-primary pe-none mt-1 me-5"><span class="number fs-18">1</span></span>
</div>
<div>
<h5 class="mb-1">Collect Ideas</h5>
<p class="mb-0">Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus.</p>
</div>
</div>
<div class="d-flex flex-row mb-5">
<div>
<span class="icon btn btn-circle btn-soft-primary pe-none mt-1 me-5"><span class="number fs-18">2</span></span>
</div>
<div>
<h5 class="mb-1">Data Analysis</h5>
<p class="mb-0">Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna.</p>
</div>
</div>
<div class="d-flex flex-row">
<div>
<span class="icon btn btn-circle btn-soft-primary pe-none mt-1 me-5"><span class="number fs-18">3</span></span>
</div>
<div>
<h5 class="mb-1">Finalize Product</h5>
<p class="mb-0">Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed.</p>
</div>
</div>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-soft-primary">
<div class="overflow-hidden">
<div class="container py-14 py-md-16">
<div class="row">
<div class="col-xl-7 col-xxl-6 mx-auto text-center">
<i class="icn-flower text-leaf fs-30 opacity-25"></i>
<h2 class="display-5 text-center mt-2 mb-10">Here are the latest posts from my blog that grabbed the most attention.</h2>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="swiper-container nav-bottom nav-color mb-14" data-margin="30" data-dots="false" data-nav="true" data-items-lg="3" data-items-md="2" data-items-xs="1">
<div class="swiper overflow-visible pb-2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<article>
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1"><a href="#"> <img src="./assets/img/photos/b12.jpg" srcset="./assets/img/photos/b12@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Read More</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<div class="post-header">
<div class="post-category">
<a href="#" class="hover" rel="category">Wedding</a>
</div>
<!-- /.post-category -->
<h2 class="post-title h3 mt-1 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 d-flex mb-0">
<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-comment"></i>4</a></li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-footer -->
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</article>
<!-- /article -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<article>
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1"><a href="#"> <img src="./assets/img/photos/b13.jpg" srcset="./assets/img/photos/b13@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Read More</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<div class="post-header">
<div class="post-category">
<a href="#" class="hover" rel="category">Engagement</a>
</div>
<!-- /.post-category -->
<h2 class="post-title h3 mt-1 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 d-flex mb-0">
<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-comment"></i>3</a></li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-footer -->
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</article>
<!-- /article -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<article>
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1"><a href="#"> <img src="./assets/img/photos/b14.jpg" srcset="./assets/img/photos/b14@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Read More</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<div class="post-header">
<div class="post-category">
<a href="#" class="hover" rel="category">Couples</a>
</div>
<!-- /.post-category -->
<h2 class="post-title h3 mt-1 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 d-flex mb-0">
<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-comment"></i>6</a></li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-footer -->
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</article>
<!-- /article -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<article>
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1"><a href="#"> <img src="./assets/img/photos/b15.jpg" srcset="./assets/img/photos/b15@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Read More</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<div class="post-header">
<div class="post-category">
<a href="#" class="hover" rel="category">Engagement</a>
</div>
<!-- /.post-category -->
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Morbi leo risus porta eget</a></h2>
</div>
<!-- /.post-header -->
<div class="post-footer">
<ul class="post-meta d-flex mb-0">
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>17 Jan 2022</span></li>
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3</a></li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-footer -->
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</article>
<!-- /article -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<article>
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1"><a href="#"> <img src="./assets/img/photos/b16.jpg" srcset="./assets/img/photos/b16@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Read More</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<div class="post-header">
<div class="post-category">
<a href="#" class="hover" rel="category">Couples</a>
</div>
<!-- /.post-category -->
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Nulla vitae elit libero</a></h2>
</div>
<!-- /.post-header -->
<div class="post-footer">
<ul class="post-meta d-flex mb-0">
<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-comment"></i>1</a></li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-footer -->
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</article>
<!-- /article -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<article>
<div class="card shadow-lg">
<figure class="card-img-top overlay overlay-1"><a href="#"> <img src="./assets/img/photos/b17.jpg" srcset="./assets/img/photos/b17@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Read More</h5>
</figcaption>
</figure>
<div class="card-body p-6">
<div class="post-header">
<div class="post-category">
<a href="#" class="hover" rel="category">Wedding</a>
</div>
<!-- /.post-category -->
<h2 class="post-title h3 mt-1 mb-3"><a class="link-dark" href="./blog-post.html">Pharetra augue elit sem</a></h2>
</div>
<!-- /.post-header -->
<div class="post-footer">
<ul class="post-meta d-flex mb-0">
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>2 Jan 2022</span></li>
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>2</a></li>
</ul>
<!-- /.post-meta -->
</div>
<!-- /.post-footer -->
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</article>
<!-- /article -->
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.container -->
</div>
<!-- /.overflow-hidden -->
</section>
<!-- /section -->
</div>
<!-- /.content-wrapper -->
<footer class="bg-dark text-inverse">
<div class="container py-13 py-md-15">
<div class="row gy-6 gy-lg-0">
<div class="col-lg-4">
<div class="widget">
<img class="mb-4" src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 2x" alt="" />
<p class="mb-4">© 2023 Sandbox. All rights reserved.</p>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /column -->
<div class="col-md-4 col-lg-2 offset-lg-2">
<div class="widget">
<h4 class="widget-title mb-3 text-white">Need Help?</h4>
<ul class="list-unstyled mb-0">
<li><a href="#">Support</a></li>
<li><a href="#">Get Started</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-4 col-lg-2">
<div class="widget">
<h4 class="widget-title mb-3 text-white">Learn More</h4>
<ul class="list-unstyled mb-0">
<li><a href="#">About Us</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Features</a></li>
</ul>
</div>
<!-- /.widget -->
</div>
<!-- /column -->
<div class="col-md-4 col-lg-2">
<div class="widget">
<h4 class="widget-title mb-3 text-white">Get in Touch</h4>
<address>Moonshine St. 14/05 Light City, London, United Kingdom</address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> 00 (123) 456 78 90
</div>
<!-- /.widget -->
</div>
<!-- /column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</footer>
<div class="progress-wrap">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="./assets/js/plugins.js"></script>
<script src="./assets/js/theme.js"></script>
</body>
</html>