997 lines
62 KiB
HTML
997 lines
62 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/navy.css">
|
||
<link rel="preload" href="./assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="content-wrapper">
|
||
<header class="wrapper bg-soft-primary my-1">
|
||
<nav class="navbar navbar-expand-lg center-nav navbar-light navbar-bg-light">
|
||
<div class="container flex-lg-row flex-nowrap align-items-center">
|
||
<div class="navbar-brand w-100">
|
||
<a href="./index.html">
|
||
<img src="./assets/img/logo-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 d-none d-md-block">
|
||
<a href="./contact.html" class="btn btn-sm btn-primary">Contact Me</a>
|
||
</li>
|
||
<li class="nav-item d-lg-none">
|
||
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
||
</li>
|
||
</ul>
|
||
<!-- /.navbar-nav -->
|
||
</div>
|
||
<!-- /.navbar-other -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</nav>
|
||
<!-- /.navbar -->
|
||
</header>
|
||
<!-- /header -->
|
||
<section class="section-frame mx-xxl-11 overflow-hidden">
|
||
<div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500" data-image-src="./assets/img/photos/bg23.png">
|
||
<div class="container py-16 py-md-18 text-center position-relative">
|
||
<div class="position-absolute shape yellow d-none d-lg-block w-5" style="top: 18%; left: 5%;"><img src="./assets/img/svg/pie.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
|
||
<div class="position-absolute shape leaf d-none d-lg-block w-10" style="bottom: 30%; left: 2%;"><img src="./assets/img/svg/scribble.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
|
||
<div class="position-absolute shape fuchsia d-none d-lg-block w-6" style="top: 20%; right: 2%; transform: rotate(70deg);"><img src="./assets/img/svg/tri.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
|
||
<div class="position-absolute shape grape d-none d-lg-block w-6" style="bottom: 28%; right: 5%;"><img src="./assets/img/svg/circle.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
|
||
<div class="row">
|
||
<div class="col-lg-9 col-xxl-8 mx-auto">
|
||
<h1 class="display-1 fs-70 px-md-10 px-lg-0 px-xl-8 mb-5">👋 Hello! I'm <img class="d-inline w-12 mx-1" src="./assets/img/avatars/avatar.png" alt=""> Camille, a product designer.</h1>
|
||
<p class="lead fs-24 px-md-10 px-lg-0 mx-lg-n10 mx-xl-0 mb-8">I’m very passionate about the work that I do, and if you are curious you can find my works on <a href="#" class="hover" style="color: var(--bs-dribbble);">Dribbble</a>, my portfolio on <a href="#" class="hover" style="color: var(--bs-behance);">Behance</a>.</p>
|
||
<a href="#" class="btn btn-lg btn-primary btn-icon btn-icon-end">See My Works <i class="uil uil-arrow-up-right"></i></a>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</div>
|
||
<!-- /.wrapper -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper bg-light">
|
||
<div class="container py-16 py-md-18">
|
||
<div class="row d-flex align-items-start gy-10 mb-18 mb-md-20">
|
||
<div class="col-lg-5 position-lg-sticky" style="top: 8rem;">
|
||
<h3 class="display-2 mb-5">The service I offer is specifically designed to meet your needs.</h3>
|
||
<p class="mb-7">Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||
<a href="#" class="btn btn-lg btn-primary btn-icon btn-icon-end">More Details <i class="uil uil-arrow-up-right"></i></a>
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="col-lg-6 ms-auto">
|
||
<div class="card bg-soft-fuchsia mb-6">
|
||
<div class="card-body d-flex flex-row">
|
||
<div>
|
||
<img src="./assets/img/icons/lineal/search-2.svg" class="svg-inject icon-svg icon-svg-md text-fuchsia me-5" alt="" />
|
||
</div>
|
||
<div>
|
||
<h3 class="fs-21 mb-2">User Research</h3>
|
||
<p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
<div class="card bg-soft-aqua mb-6">
|
||
<div class="card-body d-flex flex-row">
|
||
<div>
|
||
<img src="./assets/img/icons/lineal/puzzle-2.svg" class="svg-inject icon-svg icon-svg-md text-aqua me-5" alt="" />
|
||
</div>
|
||
<div>
|
||
<h3 class="fs-21 mb-2">Strategy & Planning</h3>
|
||
<p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
<div class="card bg-soft-yellow mb-6">
|
||
<div class="card-body d-flex flex-row">
|
||
<div>
|
||
<img src="./assets/img/icons/lineal/smartphone.svg" class="svg-inject icon-svg icon-svg-md text-yellow me-5" alt="" />
|
||
</div>
|
||
<div>
|
||
<h3 class="fs-21 mb-2">App Design</h3>
|
||
<p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
<div class="card bg-soft-leaf mb-6">
|
||
<div class="card-body d-flex flex-row">
|
||
<div>
|
||
<img src="./assets/img/icons/lineal/design.svg" class="svg-inject icon-svg icon-svg-md text-leaf me-5" alt="" />
|
||
</div>
|
||
<div>
|
||
<h3 class="fs-21 mb-2">Brand Design</h3>
|
||
<p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
<div class="card bg-soft-orange mb-6">
|
||
<div class="card-body d-flex flex-row">
|
||
<div>
|
||
<img src="./assets/img/icons/lineal/video-editing.svg" class="svg-inject icon-svg icon-svg-md text-orange me-5" alt="" />
|
||
</div>
|
||
<div>
|
||
<h3 class="fs-21 mb-2">Motion Graphic</h3>
|
||
<p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
<div class="card bg-soft-grape">
|
||
<div class="card-body d-flex flex-row">
|
||
<div>
|
||
<img src="./assets/img/icons/lineal/browser.svg" class="svg-inject icon-svg icon-svg-md text-grape me-5" alt="" />
|
||
</div>
|
||
<div>
|
||
<h3 class="fs-21 mb-2">Web Design</h3>
|
||
<p class="mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
<div class="row align-items-center mb-10">
|
||
<div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7">
|
||
<h2 class="display-2 mb-0">Check out some of my latest projects with creative ideas.</h2>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
|
||
<a href="#" class="btn btn-lg btn-primary btn-icon btn-icon-end mb-0">See All Projects <i class="uil uil-arrow-up-right"></i></a>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
<div class="card bg-soft-violet mb-10">
|
||
<div class="card-body p-12 pb-0">
|
||
<div class="row">
|
||
<div class="col-lg-4 pb-12 align-self-center">
|
||
<div class="post-category fs-15 mb-3 text-violet">Web Design</div>
|
||
<h3 class="h1 post-title mb-3">Snowlake Theme</h3>
|
||
<p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>
|
||
<a href="#" class="btn btn-sm btn-violet btn-icon btn-icon-end mb-0">See Project <i class="uil uil-arrow-up-right"></i></a>
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="col-lg-7 offset-lg-1 align-self-end">
|
||
<figure><img class="img-fluid" src="./assets/img/photos/f1.png" srcset="./assets/img/photos/f1@2x.png 2x" alt="" /></figure>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
<div class="card bg-soft-blue mb-10">
|
||
<div class="card-body p-12">
|
||
<div class="row gy-10 align-items-center">
|
||
<div class="col-lg-4 order-lg-2 offset-lg-1">
|
||
<div class="post-category fs-15 mb-3 text-blue">Mobile Design</div>
|
||
<h3 class="h1 post-title mb-3">Budget App</h3>
|
||
<p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>
|
||
<a href="#" class="btn btn-sm btn-blue btn-icon btn-icon-end mb-0">See Project <i class="uil uil-arrow-up-right"></i></a>
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="col-lg-7">
|
||
<figure><img class="img-fluid" src="./assets/img/photos/f2.png" srcset="./assets/img/photos/f2@2x.png 2x" alt="" /></figure>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
<div class="row gx-md-8 gx-xl-10">
|
||
<div class="col-lg-6">
|
||
<div class="card bg-soft-leaf mb-10">
|
||
<div class="card-body p-12 pb-0">
|
||
<div class="post-category fs-15 mb-3 text-leaf">Web Design</div>
|
||
<h3 class="h1 post-title mb-3">Missio Theme</h3>
|
||
<p>Maecenas faucibus mollis interdum sed posuere porta consectetur cursus porta lobortis. Scelerisque id ligula felis.</p>
|
||
<a href="#" class="btn btn-sm btn-leaf btn-icon btn-icon-end mb-10">See Project <i class="uil uil-arrow-up-right"></i></a>
|
||
</div>
|
||
<!--/.card-body -->
|
||
<img class="card-img-bottom" src="./assets/img/photos/f3.png" srcset="./assets/img/photos/f3@2x.png 2x" alt="" />
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="col-lg-6">
|
||
<div class="card bg-soft-pink">
|
||
<div class="card-body p-12 pb-0">
|
||
<div class="post-category fs-15 mb-3 text-pink">Mobile Design</div>
|
||
<h3 class="h1 post-title mb-3">Storage App</h3>
|
||
<p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis.</p>
|
||
<a href="#" class="btn btn-sm btn-pink btn-icon btn-icon-end mb-10">See Project <i class="uil uil-arrow-up-right"></i></a>
|
||
</div>
|
||
<!--/.card-body -->
|
||
<img class="card-img-bottom" src="./assets/img/photos/f4.png" srcset="./assets/img/photos/f4@2x.png 2x" alt="" />
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="section-frame mx-xxl-11">
|
||
<div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500 section-frame-wrapper" data-image-src="./assets/img/photos/bg23.png">
|
||
<div class="container py-16 py-md-18">
|
||
<div class="row">
|
||
<div class="col-md-10 col-lg-9 col-xl-8 mx-auto text-center">
|
||
<h3 class="display-2 mb-10 px-xxl-10">Don't take our word for it. See what customers are saying about us.</h3>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
<div class="row">
|
||
<div class="grid col-md-11 mx-auto mb-lg-n23">
|
||
<div class="row isotope gy-6">
|
||
<div class="item col-md-6 col-xl-4">
|
||
<div class="card shadow-lg">
|
||
<div class="card-body">
|
||
<span class="ratings five mb-3"></span>
|
||
<blockquote class="icon mb-0">
|
||
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis.”</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-4">
|
||
<div class="card shadow-lg">
|
||
<div class="card-body">
|
||
<span class="ratings five mb-3"></span>
|
||
<blockquote class="icon mb-0">
|
||
<p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur 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-4">
|
||
<div class="card shadow-lg">
|
||
<div class="card-body">
|
||
<span class="ratings five mb-3"></span>
|
||
<blockquote class="icon mb-0">
|
||
<p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur.”</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-4">
|
||
<div class="card shadow-lg">
|
||
<div class="card-body">
|
||
<span class="ratings five mb-3"></span>
|
||
<blockquote class="icon mb-0">
|
||
<p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien.”</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-4">
|
||
<div class="card shadow-lg">
|
||
<div class="card-body">
|
||
<span class="ratings five mb-3"></span>
|
||
<blockquote class="icon mb-0">
|
||
<p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui.”</p>
|
||
<div class="blockquote-details">
|
||
<div class="info ps-0">
|
||
<h5 class="mb-1">Jackie Sanders</h5>
|
||
<p class="mb-0">Investment Planner</p>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div class="item col-md-6 col-xl-4">
|
||
<div class="card shadow-lg">
|
||
<div class="card-body">
|
||
<span class="ratings five mb-3"></span>
|
||
<blockquote class="icon mb-0">
|
||
<p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.”</p>
|
||
<div class="blockquote-details">
|
||
<div class="info ps-0">
|
||
<h5 class="mb-1">Laura Widerski</h5>
|
||
<p class="mb-0">Sales Specialist</p>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.grid-view -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</div>
|
||
<!-- /.wrapper -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper bg-light">
|
||
<div class="container py-16 py-md-18">
|
||
<div class="row gx-md-8 gx-xl-12 gy-10 align-items-center mt-lg-18 mb-16 mb-md-18">
|
||
<div class="col-md-8 col-lg-6 mx-auto">
|
||
<div class="img-mask mask-3 px-xxl-5"><img src="./assets/img/avatars/avatar.jpg" srcset="./assets/img/avatars/avatar@2x.jpg 2x" alt="" /></div>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="col-lg-6">
|
||
<h2 class="display-2 mb-3">More about me</h2>
|
||
<p class="lead fs-24">👋 Hello! I'm Camille, a multidisciplinary product designer 🧸 based in New York City 🚕. I’m very passionate about the work 💌 that I do.</p>
|
||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh ut fermentum massa justo sit amet risus.</p>
|
||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||
<a href="#" class="btn btn-primary btn-icon btn-icon-end mt-2">Learn More <i class="uil uil-arrow-up-right"></i></a>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
<div class="row gx-md-8 gx-xl-12 gy-10">
|
||
<div class="col-lg-5 mx-auto">
|
||
<h2 class="display-2 mb-3">My experiences</h2>
|
||
<p class="lead fs-24 pe-xxl-8">I've had the pleasure to work with companies 🏢 across a variety of industries 🏛️ I'm always interested in new ✨ and exciting adventures 🧨</p>
|
||
<a href="#" class="btn btn-primary btn-icon btn-icon-end mt-2">Download Resume <i class="uil uil-arrow-up-right"></i></a>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="col-lg-7">
|
||
<ul class="timeline">
|
||
<li class="timeline-item">
|
||
<div class="timeline-info meta fs-14">Nov 2017 - Present</div>
|
||
<div class="timeline-marker"></div>
|
||
<div class="timeline-content">
|
||
<h3 class="timeline-title">Creative Director at Malory House</h3>
|
||
<p>Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non euismod id nulla.</p>
|
||
</div>
|
||
</li>
|
||
<li class="timeline-item">
|
||
<div class="timeline-info meta fs-14">Sep 2015 - Apr 2017</div>
|
||
<div class="timeline-marker"></div>
|
||
<div class="timeline-content">
|
||
<h3 class="timeline-title">Senior Developer at Longwave Studio</h3>
|
||
<p>Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis eu pede mollis pretium. Pellentesque ut neque.</p>
|
||
</div>
|
||
</li>
|
||
<li class="timeline-item">
|
||
<div class="timeline-info meta fs-14">May 2011 - Sep 2015</div>
|
||
<div class="timeline-marker"></div>
|
||
<div class="timeline-content">
|
||
<h3 class="timeline-title">Junior Developer at Webpaint Media</h3>
|
||
<p>Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="section-frame mx-xxl-11 overflow-hidden">
|
||
<div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500" data-image-src="./assets/img/photos/bg23.png">
|
||
<div class="container py-16 py-md-18 text-center">
|
||
<div class="position-absolute shape yellow d-none d-lg-block w-5" style="top: 18%; left: 5%;"><img src="./assets/img/svg/pie.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
|
||
<div class="position-absolute shape leaf d-none d-lg-block w-10" style="bottom: 30%; left: 2%;"><img src="./assets/img/svg/scribble.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
|
||
<div class="position-absolute shape fuchsia d-none d-lg-block w-6" style="top: 20%; right: 2%; transform: rotate(70deg);"><img src="./assets/img/svg/tri.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
|
||
<div class="position-absolute shape grape d-none d-lg-block w-6" style="bottom: 28%; right: 5%;"><img src="./assets/img/svg/circle.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
|
||
<div class="row">
|
||
<div class="col-lg-9 col-xxl-8 mx-auto">
|
||
<h1 class="display-1 fs-70 mx-lg-n10 mx-xl-0 mb-5">Got a 👾 project in mind? Let's work together. ✌️</h1>
|
||
<p class="lead fs-24 px-md-12 px-lg-0 mx-lg-n10 mx-xl-0 mb-8">I bring rapid solutions to make the life of my clients easier. Have any questions? Reach out to me and I will get back to you shortly.</p>
|
||
<a href="#" class="btn btn-lg btn-primary btn-icon btn-icon-end">Contact Me <i class="uil uil-arrow-up-right"></i></a>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</div>
|
||
<!-- /.wrapper -->
|
||
</section>
|
||
<!-- /section -->
|
||
</div>
|
||
<!-- /.content-wrapper -->
|
||
<footer>
|
||
<div class="container py-7">
|
||
<div class="d-md-flex align-items-center justify-content-between">
|
||
<p class="mb-2 mb-lg-0">© 2023 Sandbox. All rights reserved.</p>
|
||
<nav class="nav social social-muted mb-0 text-md-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>
|
||
<a href="#"><i class="uil uil-youtube"></i></a>
|
||
</nav>
|
||
<!-- /.social -->
|
||
</div>
|
||
</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> |