first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,721 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
||||
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
||||
<meta name="author" content="elemis">
|
||||
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
|
||||
<link rel="shortcut icon" href="../../assets/img/favicon.png">
|
||||
<link rel="stylesheet" href="../../assets/css/plugins.css">
|
||||
<link rel="stylesheet" href="../../assets/css/style.css">
|
||||
</head>
|
||||
|
||||
<body data-bs-spy="scroll" data-bs-target="#sidebar-nav">
|
||||
<div class="content-wrapper">
|
||||
<header class="wrapper bg-soft-primary">
|
||||
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
|
||||
<div class="container flex-lg-row flex-nowrap align-items-center">
|
||||
<div class="navbar-brand w-100">
|
||||
<a href="../../index.html">
|
||||
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
||||
<div class="offcanvas-header d-lg-none">
|
||||
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown dropdown-mega">
|
||||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
|
||||
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
||||
<li class="mega-menu-content">
|
||||
<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 I</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 II</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 III</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 IV</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 V</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 VI</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 VII</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 VIII</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 IX</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 X</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 XI</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 XII</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 XIII</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 XIV</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 XV</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 XVI</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 XVII</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 XVIII</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 XIX</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 XX</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 XXI</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
<!--/.row -->
|
||||
</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>
|
||||
</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/breadcrumb.html">Breadcrumb</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/progressbar.html">Progressbar</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/shadows.html">Shadows</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/shapes.html">Shapes</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tables.html">Tables</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tabs.html">Tabs</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tiles.html">Tiles</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</li>
|
||||
<!--/.mega-menu-content-->
|
||||
</ul>
|
||||
<!--/.dropdown-menu -->
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
<div class="offcanvas-footer d-lg-none">
|
||||
<div>
|
||||
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
|
||||
<br /> 00 (123) 456 78 90 <br />
|
||||
<nav class="nav social social-white mt-4">
|
||||
<a href="#"><i class="uil uil-twitter"></i></a>
|
||||
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
||||
<a href="#"><i class="uil uil-dribbble"></i></a>
|
||||
<a href="#"><i class="uil uil-instagram"></i></a>
|
||||
<a href="#"><i class="uil uil-youtube"></i></a>
|
||||
</nav>
|
||||
<!-- /.social -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.offcanvas-footer -->
|
||||
</div>
|
||||
<!-- /.offcanvas-body -->
|
||||
</div>
|
||||
<!-- /.navbar-collapse -->
|
||||
<div class="navbar-other w-100 d-flex ms-auto">
|
||||
<ul class="navbar-nav flex-row align-items-center ms-auto">
|
||||
<li class="nav-item dropdown language-select text-uppercase">
|
||||
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<a href="../../contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none">
|
||||
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
</div>
|
||||
<!-- /.navbar-other -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
</header>
|
||||
<!-- /header -->
|
||||
<section class="wrapper bg-soft-primary">
|
||||
<div class="container pt-10 pb-12 pt-md-14 pb-md-16 text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-lg-7 col-xl-6 mx-auto">
|
||||
<h1 class="display-1 mb-3">Backgrounds</h1>
|
||||
<p class="lead px-xxl-10">Below you can find the list of abstract and gradient background images that come bundled with Sandbox.</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<aside class="col-xl-2 sidebar doc-sidebar mt-md-0 py-16 d-none d-xl-block">
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Usage</h6>
|
||||
<nav id="collapse-usage">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/index.html">Get Started</a></li>
|
||||
<li><a href="../../docs/forms.html">Forms</a></li>
|
||||
<li><a href="../../docs/faq.html">FAQ</a></li>
|
||||
<li><a href="../../docs/changelog.html">Changelog</a></li>
|
||||
<li><a href="../../docs/credits.html">Credits</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Styleguide</h6>
|
||||
<nav id="collapse-style">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/styleguide/colors.html">Colors</a></li>
|
||||
<li><a href="../../docs/styleguide/fonts.html">Fonts</a></li>
|
||||
<li><a href="../../docs/styleguide/icons-svg.html">SVG Icons</a></li>
|
||||
<li><a href="../../docs/styleguide/icons-font.html">Font Icons</a></li>
|
||||
<li><a href="../../docs/styleguide/illustrations.html">Illustrations</a></li>
|
||||
<li><a href="../../docs/styleguide/backgrounds.html" class="active">Backgrounds</a></li>
|
||||
<li><a href="../../docs/styleguide/misc.html">Misc</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Elements</h6>
|
||||
<nav id="collapse-elements">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/elements/accordion.html">Accordion</a></li>
|
||||
<li><a href="../../docs/elements/alerts.html">Alerts</a></li>
|
||||
<li><a href="../../docs/elements/animations.html">Animations</a></li>
|
||||
<li><a href="../../docs/elements/avatars.html">Avatars</a></li>
|
||||
<li><a href="../../docs/elements/background.html">Background</a></li>
|
||||
<li><a href="../../docs/elements/badges.html">Badges</a></li>
|
||||
<li><a href="../../docs/elements/breadcrumb.html">Breadcrumb</a></li>
|
||||
<li><a href="../../docs/elements/buttons.html">Buttons</a></li>
|
||||
<li><a href="../../docs/elements/card.html">Card</a></li>
|
||||
<li><a href="../../docs/elements/carousel.html">Carousel</a></li>
|
||||
<li><a href="../../docs/elements/dividers.html">Dividers</a></li>
|
||||
<li><a href="../../docs/elements/form-elements.html">Form Elements</a></li>
|
||||
<li><a href="../../docs/elements/image-hover.html">Image Hover</a></li>
|
||||
<li><a href="../../docs/elements/image-mask.html">Image Mask</a></li>
|
||||
<li><a href="../../docs/elements/lightbox.html">Lightbox</a></li>
|
||||
<li><a href="../../docs/elements/player.html">Media Player</a></li>
|
||||
<li><a href="../../docs/elements/modal.html">Modal</a></li>
|
||||
<li><a href="../../docs/elements/progressbar.html">Progressbar</a></li>
|
||||
<li><a href="../../docs/elements/shadows.html">Shadows</a></li>
|
||||
<li><a href="../../docs/elements/shapes.html">Shapes</a></li>
|
||||
<li><a href="../../docs/elements/tables.html">Tables</a></li>
|
||||
<li><a href="../../docs/elements/tabs.html">Tabs</a></li>
|
||||
<li><a href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
||||
<li><a href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
||||
<li><a href="../../docs/elements/tiles.html">Tiles</a></li>
|
||||
<li><a href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
||||
<li><a href="../../docs/elements/typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</aside>
|
||||
<!-- /column -->
|
||||
<aside class="col-xl-2 order-xl-3 sidebar sticky-sidebar mt-md-0 py-16 d-none d-xl-block">
|
||||
<div class="widget">
|
||||
<h6 class="widget-title fs-17 mb-2 ps-xl-5">On this page</h6>
|
||||
<nav class="ps-xl-5" id="sidebar-nav">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a class="nav-link scroll" href="#snippet-1">Abstract</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-2">Gradient</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</aside>
|
||||
<!-- /column -->
|
||||
<div class="col-xl-8 order-xl-2">
|
||||
<section id="snippet-1" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Abstract</h2>
|
||||
<ul class="glyphs glyphs-svg row gy-6">
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg2.jpg" alt="" /></figure>
|
||||
<span class="py-3">bg2.jpg</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg2.jpg"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg3.jpg" alt="" /></figure>
|
||||
<span class="py-3">bg3.jpg</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg3.jpg"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg4.jpg" alt="" /></figure>
|
||||
<span class="py-3">bg4.jpg</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg4.jpg"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg13.jpg" alt="" /></figure>
|
||||
<span class="py-3">bg13.jpg</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg13.jpg"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="snippet-2" class="wrapper py-16">
|
||||
<h2 class="mb-5">Gradient</h2>
|
||||
<ul class="glyphs glyphs-svg row gy-6">
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg14.png" alt="" /></figure>
|
||||
<span class="py-3">bg14.png</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg14.png"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg15.png" alt="" /></figure>
|
||||
<span class="py-3">bg15.png</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg15.png"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg16.png" alt="" /></figure>
|
||||
<span class="py-3">bg16.png</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg16.png"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg17.png" alt="" /></figure>
|
||||
<span class="py-3">bg17.png</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg17.png"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg18.png" alt="" /></figure>
|
||||
<span class="py-3">bg18.png</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg18.png"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg19.png" alt="" /></figure>
|
||||
<span class="py-3">bg19.png</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg19.png"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg20.png" alt="" /></figure>
|
||||
<span class="py-3">bg20.png</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg20.png"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg21.png" alt="" /></figure>
|
||||
<span class="py-3">bg21.png</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg21.png"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg22.png" alt="" /></figure>
|
||||
<span class="py-3">bg22.png</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg22.png"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg23.png" alt="" /></figure>
|
||||
<span class="py-3">bg23.png</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg23.png"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg24.png" alt="" /></figure>
|
||||
<span class="py-3">bg24.png</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg24.png"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-0 rounded-top">
|
||||
<figure><img class="img-fluid rounded-top" src="../../assets/img/photos/bg25.png" alt="" /></figure>
|
||||
<span class="py-3">bg25.png</span>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg25.png"></section>">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
<section class="wrapper bg-dark text-white">
|
||||
<div class="container pt-14 pt-md-16 text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
|
||||
<h2 class="display-3 text-white mt-3 mb-3 px-lg-8">Think unique and be creative. Make a difference with Sandbox.</h2>
|
||||
<p class="lead fs-lg mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
|
||||
<a href="https://1.envato.market/NKGrx2" target="_blank" class="btn btn-lg btn-white rounded-pill mb-10">Buy Sandbox</a>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<img class="img-fluid" src="../../assets/img/demos/f1.png" srcset="../../assets/img/demos/f1@2x.png 2x" alt="" />
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<div class="progress-wrap">
|
||||
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
||||
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
||||
</svg>
|
||||
</div>
|
||||
<script src="../../assets/js/plugins.js"></script>
|
||||
<script src="../../assets/js/theme.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,981 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
||||
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
||||
<meta name="author" content="elemis">
|
||||
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
|
||||
<link rel="shortcut icon" href="../../assets/img/favicon.png">
|
||||
<link rel="stylesheet" href="../../assets/css/plugins.css">
|
||||
<link rel="stylesheet" href="../../assets/css/style.css">
|
||||
</head>
|
||||
|
||||
<body data-bs-spy="scroll" data-bs-target="#sidebar-nav">
|
||||
<div class="content-wrapper">
|
||||
<header class="wrapper bg-soft-primary">
|
||||
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
|
||||
<div class="container flex-lg-row flex-nowrap align-items-center">
|
||||
<div class="navbar-brand w-100">
|
||||
<a href="../../index.html">
|
||||
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
||||
<div class="offcanvas-header d-lg-none">
|
||||
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown dropdown-mega">
|
||||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
|
||||
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
||||
<li class="mega-menu-content">
|
||||
<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 I</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 II</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 III</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 IV</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 V</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 VI</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 VII</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 VIII</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 IX</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 X</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 XI</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 XII</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 XIII</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 XIV</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 XV</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 XVI</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 XVII</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 XVIII</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 XIX</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 XX</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 XXI</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
<!--/.row -->
|
||||
</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>
|
||||
</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/breadcrumb.html">Breadcrumb</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/progressbar.html">Progressbar</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/shadows.html">Shadows</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/shapes.html">Shapes</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tables.html">Tables</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tabs.html">Tabs</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tiles.html">Tiles</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</li>
|
||||
<!--/.mega-menu-content-->
|
||||
</ul>
|
||||
<!--/.dropdown-menu -->
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
<div class="offcanvas-footer d-lg-none">
|
||||
<div>
|
||||
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
|
||||
<br /> 00 (123) 456 78 90 <br />
|
||||
<nav class="nav social social-white mt-4">
|
||||
<a href="#"><i class="uil uil-twitter"></i></a>
|
||||
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
||||
<a href="#"><i class="uil uil-dribbble"></i></a>
|
||||
<a href="#"><i class="uil uil-instagram"></i></a>
|
||||
<a href="#"><i class="uil uil-youtube"></i></a>
|
||||
</nav>
|
||||
<!-- /.social -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.offcanvas-footer -->
|
||||
</div>
|
||||
<!-- /.offcanvas-body -->
|
||||
</div>
|
||||
<!-- /.navbar-collapse -->
|
||||
<div class="navbar-other w-100 d-flex ms-auto">
|
||||
<ul class="navbar-nav flex-row align-items-center ms-auto">
|
||||
<li class="nav-item dropdown language-select text-uppercase">
|
||||
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<a href="../../contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none">
|
||||
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
</div>
|
||||
<!-- /.navbar-other -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
</header>
|
||||
<!-- /header -->
|
||||
<section class="wrapper bg-soft-primary">
|
||||
<div class="container pt-10 pb-12 pt-md-14 pb-md-16 text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-lg-7 col-xl-6 mx-auto">
|
||||
<h1 class="display-1 mb-3">Colors</h1>
|
||||
<p class="lead px-xxl-10">Use our custom color options to add color to your backgrounds, text or to change the theme color scheme.</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<aside class="col-xl-2 sidebar doc-sidebar mt-md-0 py-16 d-none d-xl-block">
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Usage</h6>
|
||||
<nav id="collapse-usage">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/index.html">Get Started</a></li>
|
||||
<li><a href="../../docs/forms.html">Forms</a></li>
|
||||
<li><a href="../../docs/faq.html">FAQ</a></li>
|
||||
<li><a href="../../docs/changelog.html">Changelog</a></li>
|
||||
<li><a href="../../docs/credits.html">Credits</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Styleguide</h6>
|
||||
<nav id="collapse-style">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/styleguide/colors.html" class="active">Colors</a></li>
|
||||
<li><a href="../../docs/styleguide/fonts.html">Fonts</a></li>
|
||||
<li><a href="../../docs/styleguide/icons-svg.html">SVG Icons</a></li>
|
||||
<li><a href="../../docs/styleguide/icons-font.html">Font Icons</a></li>
|
||||
<li><a href="../../docs/styleguide/illustrations.html">Illustrations</a></li>
|
||||
<li><a href="../../docs/styleguide/backgrounds.html">Backgrounds</a></li>
|
||||
<li><a href="../../docs/styleguide/misc.html">Misc</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Elements</h6>
|
||||
<nav id="collapse-elements">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/elements/accordion.html">Accordion</a></li>
|
||||
<li><a href="../../docs/elements/alerts.html">Alerts</a></li>
|
||||
<li><a href="../../docs/elements/animations.html">Animations</a></li>
|
||||
<li><a href="../../docs/elements/avatars.html">Avatars</a></li>
|
||||
<li><a href="../../docs/elements/background.html">Background</a></li>
|
||||
<li><a href="../../docs/elements/badges.html">Badges</a></li>
|
||||
<li><a href="../../docs/elements/breadcrumb.html">Breadcrumb</a></li>
|
||||
<li><a href="../../docs/elements/buttons.html">Buttons</a></li>
|
||||
<li><a href="../../docs/elements/card.html">Card</a></li>
|
||||
<li><a href="../../docs/elements/carousel.html">Carousel</a></li>
|
||||
<li><a href="../../docs/elements/dividers.html">Dividers</a></li>
|
||||
<li><a href="../../docs/elements/form-elements.html">Form Elements</a></li>
|
||||
<li><a href="../../docs/elements/image-hover.html">Image Hover</a></li>
|
||||
<li><a href="../../docs/elements/image-mask.html">Image Mask</a></li>
|
||||
<li><a href="../../docs/elements/lightbox.html">Lightbox</a></li>
|
||||
<li><a href="../../docs/elements/player.html">Media Player</a></li>
|
||||
<li><a href="../../docs/elements/modal.html">Modal</a></li>
|
||||
<li><a href="../../docs/elements/progressbar.html">Progressbar</a></li>
|
||||
<li><a href="../../docs/elements/shadows.html">Shadows</a></li>
|
||||
<li><a href="../../docs/elements/shapes.html">Shapes</a></li>
|
||||
<li><a href="../../docs/elements/tables.html">Tables</a></li>
|
||||
<li><a href="../../docs/elements/tabs.html">Tabs</a></li>
|
||||
<li><a href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
||||
<li><a href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
||||
<li><a href="../../docs/elements/tiles.html">Tiles</a></li>
|
||||
<li><a href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
||||
<li><a href="../../docs/elements/typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</aside>
|
||||
<!-- /column -->
|
||||
<aside class="col-xl-2 order-xl-3 sidebar sticky-sidebar mt-md-0 py-16 d-none d-xl-block">
|
||||
<div class="widget">
|
||||
<h6 class="widget-title fs-17 mb-2 ps-xl-5">On this page</h6>
|
||||
<nav class="ps-xl-5" id="sidebar-nav">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a class="nav-link scroll" href="#snippet-1">Theme Colors</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-2">Changing Primary</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-3">Background Colors</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-4">Text Colors</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</aside>
|
||||
<!-- /column -->
|
||||
<div class="col-xl-8 order-xl-2">
|
||||
<section id="snippet-1" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Theme Colors</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">To change the theme color, add color CSS file you wish to use inside the <code class="code"><head></code> tag, right after <mark class="doc">style.css</mark> link, in all your HTML pages. Available color options: <mark class="doc">aqua.css</mark>, <mark class="doc">green.css</mark>, <mark class="doc">leaf.css</mark>, <mark class="doc">navy.css</mark>, <mark class="doc">orange.css</mark>, <mark class="doc">pink.css</mark>, <mark class="doc">purple.css</mark>, <mark class="doc">red.css</mark>, <mark class="doc">violet.css</mark>, <mark class="doc">yellow.css</mark>, <mark class="doc">fuchsia.css</mark>, <mark class="doc">sky.css</mark>, <mark class="doc">grape.css</mark>.</p>
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
<div class="card-footer position-relative">
|
||||
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-1">View example's code</a>
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
<div id="collapse-1" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
||||
<div class="code-wrapper">
|
||||
<div class="code-wrapper-inner">
|
||||
<pre class="language-html"><code><link rel="stylesheet" href="./assets/css/style.css">
|
||||
<link rel="stylesheet" href="./assets/css/colors/yellow.css"></code></pre>
|
||||
</div>
|
||||
<!--/.code-wrapper-inner -->
|
||||
</div>
|
||||
<!--/.code-wrapper -->
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
<section id="snippet-2" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Changing Primary Color</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">To change the primary color to a custom color, open <code class="file">src/assets/scss/user-variables.scss</code> and assign your custom color value to <code class="code">$primary</code> and recompile.</p>
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
<div class="card-footer position-relative">
|
||||
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-2">View example's code</a>
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
<div id="collapse-2" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
||||
<div class="code-wrapper">
|
||||
<div class="code-wrapper-inner">
|
||||
<pre class="language-scss"><code>//src/assets/scss/user-variables.scss
|
||||
$primary: #36a6cf;</code></pre>
|
||||
</div>
|
||||
<!--/.code-wrapper-inner -->
|
||||
</div>
|
||||
<!--/.code-wrapper -->
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
<section id="snippet-3" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Background Colors</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row gy-6">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-yellow text-white">.bg-yellow</div>
|
||||
<div class="card-body p-4 bg-pale-yellow text-yellow">.bg-pale-yellow</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-yellow text-yellow">.bg-soft-yellow</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-orange text-white">.bg-orange</div>
|
||||
<div class="card-body p-4 bg-pale-orange text-orange">.bg-pale-orange</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-orange text-orange">.bg-soft-orange</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-red text-white">.bg-red</div>
|
||||
<div class="card-body p-4 bg-pale-red text-red">.bg-pale-red</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-red text-red">.bg-soft-red</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-pink text-white">.bg-pink</div>
|
||||
<div class="card-body p-4 bg-pale-pink text-pink">.bg-pale-pink</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-pink text-pink">.bg-soft-pink</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-violet text-white">.bg-violet</div>
|
||||
<div class="card-body p-4 bg-pale-violet text-violet">.bg-pale-violet</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-violet text-violet">.bg-soft-violet</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-purple text-white">.bg-purple</div>
|
||||
<div class="card-body p-4 bg-pale-purple text-purple">.bg-pale-purple</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-purple text-purple">.bg-soft-purple</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-blue text-white">.bg-blue</div>
|
||||
<div class="card-body p-4 bg-pale-blue text-blue">.bg-pale-blue</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-blue text-blue">.bg-soft-blue</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-aqua text-white">.bg-aqua</div>
|
||||
<div class="card-body p-4 bg-pale-aqua text-aqua">.bg-pale-aqua</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-aqua text-aqua">.bg-soft-aqua</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-green text-white">.bg-green</div>
|
||||
<div class="card-body p-4 bg-pale-green text-green">.bg-pale-green</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-green text-green">.bg-soft-green</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-leaf text-white">.bg-leaf</div>
|
||||
<div class="card-body p-4 bg-pale-leaf text-leaf">.bg-pale-leaf</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-leaf text-leaf">.bg-soft-leaf</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-ash text-white">.bg-ash</div>
|
||||
<div class="card-body p-4 bg-pale-ash text-ash">.bg-pale-ash</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-ash text-ash">.bg-soft-ash</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-navy text-white">.bg-navy</div>
|
||||
<div class="card-body p-4 bg-pale-navy text-navy">.bg-pale-navy</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-navy text-navy">.bg-soft-navy</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-fuchsia text-white">.bg-fuchsia</div>
|
||||
<div class="card-body p-4 bg-pale-fuchsia text-fuchsia">.bg-pale-fuchsia</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-fuchsia text-fuchsia">.bg-soft-fuchsia</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-sky text-white">.bg-sky</div>
|
||||
<div class="card-body p-4 bg-pale-sky text-sky">.bg-pale-sky</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-sky text-sky">.bg-soft-sky</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-header p-4 border-0 bg-grape text-white">.bg-grape</div>
|
||||
<div class="card-body p-4 bg-pale-grape text-grape">.bg-pale-grape</div>
|
||||
<div class="card-footer p-4 border-0 bg-soft-grape text-grape">.bg-soft-grape</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-body rounded p-4 border-0 gradient-1 text-white">.gradient-1</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-body rounded p-4 border-0 gradient-2 text-white">.gradient-2</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-body rounded p-4 border-0 gradient-3 text-white">.gradient-3</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-body rounded p-4 border-0 gradient-4 text-white">.gradient-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-body rounded p-4 border-0 gradient-5 text-white">.gradient-5</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-body rounded p-4 border-0 gradient-6 text-white">.gradient-6</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card shadow-none">
|
||||
<div class="card-body rounded p-4 border-0 gradient-7 text-white">.gradient-7</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
<div class="card-footer position-relative">
|
||||
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-3">View example's code</a>
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
<div id="collapse-3" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
||||
<div class="code-wrapper">
|
||||
<div class="code-wrapper-inner">
|
||||
<pre class="language-html"><code><div class="bg-yellow"></div>
|
||||
<div class="bg-pale-yellow"></div>
|
||||
<div class="bg-soft-yellow"></div>
|
||||
|
||||
<div class="bg-orange"></div>
|
||||
<div class="bg-pale-orange"></div>
|
||||
<div class="bg-soft-orange"></div>
|
||||
|
||||
<div class="bg-red"></div>
|
||||
<div class="bg-pale-red"></div>
|
||||
<div class="bg-soft-red"></div>
|
||||
|
||||
<div class="bg-pink"></div>
|
||||
<div class="bg-pale-pink"></div>
|
||||
<div class="bg-soft-pink"></div>
|
||||
|
||||
<div class="bg-violet"></div>
|
||||
<div class="bg-pale-violet"></div>
|
||||
<div class="bg-soft-violet"></div>
|
||||
|
||||
<div class="bg-purple"></div>
|
||||
<div class="bg-pale-purple"></div>
|
||||
<div class="bg-soft-purple"></div>
|
||||
|
||||
<div class="bg-blue"></div>
|
||||
<div class="bg-pale-blue"></div>
|
||||
<div class="bg-soft-blue"></div>
|
||||
|
||||
<div class="bg-aqua"></div>
|
||||
<div class="bg-pale-aqua"></div>
|
||||
<div class="bg-soft-aqua"></div>
|
||||
|
||||
<div class="bg-green"></div>
|
||||
<div class="bg-pale-green"></div>
|
||||
<div class="bg-soft-green"></div>
|
||||
|
||||
<div class="bg-leaf"></div>
|
||||
<div class="bg-pale-leaf"></div>
|
||||
<div class="bg-soft-leaf"></div>
|
||||
|
||||
<div class="bg-ash"></div>
|
||||
<div class="bg-pale-ash"></div>
|
||||
<div class="bg-soft-ash"></div>
|
||||
|
||||
<div class="bg-navy"></div>
|
||||
<div class="bg-pale-navy"></div>
|
||||
<div class="bg-soft-navy"></div>
|
||||
|
||||
<div class="bg-fuchsia"></div>
|
||||
<div class="bg-pale-fuchsia"></div>
|
||||
<div class="bg-soft-fuchsia"></div>
|
||||
|
||||
<div class="bg-sky"></div>
|
||||
<div class="bg-pale-sky"></div>
|
||||
<div class="bg-soft-sky"></div>
|
||||
|
||||
<div class="bg-grape"></div>
|
||||
<div class="bg-pale-grape"></div>
|
||||
<div class="bg-soft-grape"></div>
|
||||
|
||||
<div class="gradient-1"></div>
|
||||
<div class="gradient-2"></div>
|
||||
<div class="gradient-3"></div>
|
||||
<div class="gradient-4"></div>
|
||||
<div class="gradient-5"></div>
|
||||
<div class="gradient-6"></div>
|
||||
<div class="gradient-7"></div></code></pre>
|
||||
</div>
|
||||
<!--/.code-wrapper-inner -->
|
||||
</div>
|
||||
<!--/.code-wrapper -->
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
<section id="snippet-4" class="wrapper py-16">
|
||||
<h2 class="mb-5">Text Colors</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row gy-8">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<p class="text-yellow">.text-yellow</p>
|
||||
<p class="text-orange">.text-orange</p>
|
||||
<p class="text-red">.text-red</p>
|
||||
<p class="text-pink">.text-pink</p>
|
||||
<p class="text-fuchsia mb-0">.text-fuchsia</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<p class="text-violet">.text-violet</p>
|
||||
<p class="text-purple">.text-purple</p>
|
||||
<p class="text-blue">.text-blue</p>
|
||||
<p class="text-aqua">.text-aqua</p>
|
||||
<p class="text-sky mb-0">.text-sky</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<p class="text-green">.text-green</p>
|
||||
<p class="text-leaf">.text-leaf</p>
|
||||
<p class="text-ash">.text-ash</p>
|
||||
<p class="text-navy">.text-navy</p>
|
||||
<p class="text-grape mb-0">.text-grape</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<p class="text-primary mb-0">.text-primary</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<p class="text-muted mb-0">.text-muted</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<p class="text-white bg-black d-inline-block py-1 px-2 mb-0">.text-white</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<p class="text-gradient gradient-1">.gradient-1</p>
|
||||
<br>
|
||||
<p class="text-gradient gradient-2">.gradient-2</p>
|
||||
<br>
|
||||
<p class="text-gradient gradient-3">.gradient-3</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<p class="text-gradient gradient-4">.gradient-4</p>
|
||||
<br>
|
||||
<p class="text-gradient gradient-5">.gradient-5</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<p class="text-gradient gradient-6">.gradient-6</p>
|
||||
<br>
|
||||
<p class="text-gradient gradient-7">.gradient-7</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
<div class="card-footer position-relative">
|
||||
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-4">View example's code</a>
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
<div id="collapse-4" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
||||
<div class="code-wrapper">
|
||||
<div class="code-wrapper-inner">
|
||||
<pre class="language-html"><code><span class="text-yellow"></span>
|
||||
<span class="text-orange"></span>
|
||||
<span class="text-red"></span>
|
||||
<span class="text-pink"></span>
|
||||
<span class="text-violet"></span>
|
||||
<span class="text-purple"></span>
|
||||
<span class="text-blue"></span>
|
||||
<span class="text-aqua"></span>
|
||||
<span class="text-green"></span>
|
||||
<span class="text-leaf"></span>
|
||||
<span class="text-ash"></span>
|
||||
<span class="text-navy"></span>
|
||||
<span class="text-fuchsia"></span>
|
||||
<span class="text-sky"></span>
|
||||
<span class="text-grape"></span>
|
||||
|
||||
<span class="text-primary"></span>
|
||||
<span class="text-muted"></span>
|
||||
<span class="text-white"></span>
|
||||
|
||||
<span class="text-gradient gradient-1"></span>
|
||||
<span class="text-gradient gradient-2"></span>
|
||||
<span class="text-gradient gradient-3"></span>
|
||||
<span class="text-gradient gradient-4"></span>
|
||||
<span class="text-gradient gradient-5"></span>
|
||||
<span class="text-gradient gradient-6"></span>
|
||||
<span class="text-gradient gradient-7"></span></code></pre>
|
||||
</div>
|
||||
<!--/.code-wrapper-inner -->
|
||||
</div>
|
||||
<!--/.code-wrapper -->
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
<section class="wrapper bg-dark text-white">
|
||||
<div class="container pt-14 pt-md-16 text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
|
||||
<h2 class="display-3 text-white mt-3 mb-3 px-lg-8">Think unique and be creative. Make a difference with Sandbox.</h2>
|
||||
<p class="lead fs-lg mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
|
||||
<a href="https://1.envato.market/NKGrx2" target="_blank" class="btn btn-lg btn-white rounded-pill mb-10">Buy Sandbox</a>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<img class="img-fluid" src="../../assets/img/demos/f1.png" srcset="../../assets/img/demos/f1@2x.png 2x" alt="" />
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<div class="progress-wrap">
|
||||
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
||||
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
||||
</svg>
|
||||
</div>
|
||||
<script src="../../assets/js/plugins.js"></script>
|
||||
<script src="../../assets/js/theme.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,661 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
||||
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
||||
<meta name="author" content="elemis">
|
||||
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
|
||||
<link rel="shortcut icon" href="../../assets/img/favicon.png">
|
||||
<link rel="stylesheet" href="../../assets/css/plugins.css">
|
||||
<link rel="stylesheet" href="../../assets/css/style.css">
|
||||
</head>
|
||||
|
||||
<body data-bs-spy="scroll" data-bs-target="#sidebar-nav">
|
||||
<div class="content-wrapper">
|
||||
<header class="wrapper bg-soft-primary">
|
||||
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
|
||||
<div class="container flex-lg-row flex-nowrap align-items-center">
|
||||
<div class="navbar-brand w-100">
|
||||
<a href="../../index.html">
|
||||
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
||||
<div class="offcanvas-header d-lg-none">
|
||||
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown dropdown-mega">
|
||||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
|
||||
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
||||
<li class="mega-menu-content">
|
||||
<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 I</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 II</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 III</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 IV</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 V</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 VI</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 VII</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 VIII</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 IX</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 X</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 XI</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 XII</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 XIII</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 XIV</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 XV</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 XVI</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 XVII</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 XVIII</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 XIX</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 XX</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 XXI</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
<!--/.row -->
|
||||
</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>
|
||||
</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/breadcrumb.html">Breadcrumb</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/progressbar.html">Progressbar</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/shadows.html">Shadows</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/shapes.html">Shapes</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tables.html">Tables</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tabs.html">Tabs</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tiles.html">Tiles</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</li>
|
||||
<!--/.mega-menu-content-->
|
||||
</ul>
|
||||
<!--/.dropdown-menu -->
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
<div class="offcanvas-footer d-lg-none">
|
||||
<div>
|
||||
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
|
||||
<br /> 00 (123) 456 78 90 <br />
|
||||
<nav class="nav social social-white mt-4">
|
||||
<a href="#"><i class="uil uil-twitter"></i></a>
|
||||
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
||||
<a href="#"><i class="uil uil-dribbble"></i></a>
|
||||
<a href="#"><i class="uil uil-instagram"></i></a>
|
||||
<a href="#"><i class="uil uil-youtube"></i></a>
|
||||
</nav>
|
||||
<!-- /.social -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.offcanvas-footer -->
|
||||
</div>
|
||||
<!-- /.offcanvas-body -->
|
||||
</div>
|
||||
<!-- /.navbar-collapse -->
|
||||
<div class="navbar-other w-100 d-flex ms-auto">
|
||||
<ul class="navbar-nav flex-row align-items-center ms-auto">
|
||||
<li class="nav-item dropdown language-select text-uppercase">
|
||||
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<a href="../../contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none">
|
||||
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
</div>
|
||||
<!-- /.navbar-other -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
</header>
|
||||
<!-- /header -->
|
||||
<section class="wrapper bg-soft-primary">
|
||||
<div class="container pt-10 pb-12 pt-md-14 pb-md-16 text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-lg-7 col-xl-6 mx-auto">
|
||||
<h1 class="display-1 mb-3">Fonts</h1>
|
||||
<p class="lead px-xxl-10">Use one of the existing font options or a custom font of your choice to change the overall font in Sandbox.</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<aside class="col-xl-2 sidebar doc-sidebar mt-md-0 py-16 d-none d-xl-block">
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Usage</h6>
|
||||
<nav id="collapse-usage">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/index.html">Get Started</a></li>
|
||||
<li><a href="../../docs/forms.html">Forms</a></li>
|
||||
<li><a href="../../docs/faq.html">FAQ</a></li>
|
||||
<li><a href="../../docs/changelog.html">Changelog</a></li>
|
||||
<li><a href="../../docs/credits.html">Credits</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Styleguide</h6>
|
||||
<nav id="collapse-style">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/styleguide/colors.html">Colors</a></li>
|
||||
<li><a href="../../docs/styleguide/fonts.html" class="active">Fonts</a></li>
|
||||
<li><a href="../../docs/styleguide/icons-svg.html">SVG Icons</a></li>
|
||||
<li><a href="../../docs/styleguide/icons-font.html">Font Icons</a></li>
|
||||
<li><a href="../../docs/styleguide/illustrations.html">Illustrations</a></li>
|
||||
<li><a href="../../docs/styleguide/backgrounds.html">Backgrounds</a></li>
|
||||
<li><a href="../../docs/styleguide/misc.html">Misc</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Elements</h6>
|
||||
<nav id="collapse-elements">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/elements/accordion.html">Accordion</a></li>
|
||||
<li><a href="../../docs/elements/alerts.html">Alerts</a></li>
|
||||
<li><a href="../../docs/elements/animations.html">Animations</a></li>
|
||||
<li><a href="../../docs/elements/avatars.html">Avatars</a></li>
|
||||
<li><a href="../../docs/elements/background.html">Background</a></li>
|
||||
<li><a href="../../docs/elements/badges.html">Badges</a></li>
|
||||
<li><a href="../../docs/elements/breadcrumb.html">Breadcrumb</a></li>
|
||||
<li><a href="../../docs/elements/buttons.html">Buttons</a></li>
|
||||
<li><a href="../../docs/elements/card.html">Card</a></li>
|
||||
<li><a href="../../docs/elements/carousel.html">Carousel</a></li>
|
||||
<li><a href="../../docs/elements/dividers.html">Dividers</a></li>
|
||||
<li><a href="../../docs/elements/form-elements.html">Form Elements</a></li>
|
||||
<li><a href="../../docs/elements/image-hover.html">Image Hover</a></li>
|
||||
<li><a href="../../docs/elements/image-mask.html">Image Mask</a></li>
|
||||
<li><a href="../../docs/elements/lightbox.html">Lightbox</a></li>
|
||||
<li><a href="../../docs/elements/player.html">Media Player</a></li>
|
||||
<li><a href="../../docs/elements/modal.html">Modal</a></li>
|
||||
<li><a href="../../docs/elements/progressbar.html">Progressbar</a></li>
|
||||
<li><a href="../../docs/elements/shadows.html">Shadows</a></li>
|
||||
<li><a href="../../docs/elements/shapes.html">Shapes</a></li>
|
||||
<li><a href="../../docs/elements/tables.html">Tables</a></li>
|
||||
<li><a href="../../docs/elements/tabs.html">Tabs</a></li>
|
||||
<li><a href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
||||
<li><a href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
||||
<li><a href="../../docs/elements/tiles.html">Tiles</a></li>
|
||||
<li><a href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
||||
<li><a href="../../docs/elements/typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</aside>
|
||||
<!-- /column -->
|
||||
<aside class="col-xl-2 order-xl-3 sidebar sticky-sidebar mt-md-0 py-16 d-none d-xl-block">
|
||||
<div class="widget">
|
||||
<h6 class="widget-title fs-17 mb-2 ps-xl-5">On this page</h6>
|
||||
<nav class="ps-xl-5" id="sidebar-nav">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a class="nav-link scroll" href="#snippet-1">Font Options</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-2">Google Fonts</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-3">@font-face</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</aside>
|
||||
<!-- /column -->
|
||||
<div class="col-xl-8 order-xl-2">
|
||||
<section id="snippet-1" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Font Options</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<h6 class="d-inline">Manrope</h6>
|
||||
<p class="d-inline"> <a href="../../demo12.html" class="external" target="_blank">Demo 12</a>, <a href="../../demo16.html" class="external" target="_blank">Demo 16</a>, <a href="../../demo17.html" class="external" target="_blank">Demo 17</a></p>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<h6 class="d-inline">Thicccboi (thicccboi.css)</h6>
|
||||
<p class="d-inline"> <a href="../../demo3.html" class="external" target="_blank">Demo 3</a>, <a href="../../demo5.html" class="external" target="_blank">Demo 5</a>, <a href="../../demo6.html" class="external" target="_blank">Demo 6</a></p>
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<h6 class="d-inline">DM Serif + Manrope (dm.css)</h6>
|
||||
<p class="d-inline mb-0"> <a href="../../demo2.html" class="external" target="_blank">Demo 2</a>, <a href="../../demo4.html" class="external" target="_blank">Demo 4</a>, <a href="../../demo8.html" class="external" target="_blank">Demo 8</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<h6 class="d-inline">Urbanist (urbanist.css)</h6>
|
||||
<p class="d-inline mb-0"> <a href="../../demo19.html" class="external" target="_blank">Demo 19</a>, <a href="../../demo20.html" class="external" target="_blank">Demo 20</a>, <a href="../../demo21.html" class="external" target="_blank">Demo 21</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mb-0">Manrope is the default font in Sandbox. If you wish to use one of the other available font options, add the link of the font CSS file you wish to use inside the <code class="code"><head></code> tag, right after <mark class="doc">style.css</mark> link, in all your HTML pages.</p>
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
<div class="card-footer position-relative">
|
||||
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-1">View example's code</a>
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
<div id="collapse-1" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
||||
<div class="code-wrapper">
|
||||
<div class="code-wrapper-inner">
|
||||
<pre class="language-html"><code><link rel="stylesheet" href="./assets/css/style.css">
|
||||
<link rel="preload" href="./assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'"></code></pre>
|
||||
</div>
|
||||
<!--/.code-wrapper-inner -->
|
||||
</div>
|
||||
<!--/.code-wrapper -->
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
<section id="snippet-2" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Google Fonts</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">To use a custom Google Font, open <code class="file">src/assets/scss/user-variables.scss</code>, and use the example code below to add @import link and name of your font.</p>
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
<div class="card-footer position-relative">
|
||||
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-2">View example's code</a>
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
<div id="collapse-2" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
||||
<div class="code-wrapper">
|
||||
<div class="code-wrapper-inner">
|
||||
<pre class="language-scss"><code>$path-to-fonts: 'GOOGLE FONT URL';
|
||||
$font-family-sans-serif: GOOGLE FONT NAME;</code></pre>
|
||||
</div>
|
||||
<!--/.code-wrapper-inner -->
|
||||
</div>
|
||||
<!--/.code-wrapper -->
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
<section id="snippet-3" class="wrapper py-16">
|
||||
<h2 class="mb-5">@font-face</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">To use a custom font with @font-face, first add the font files inside folder <code class="folder">src/assets/fonts/</code> Then use the example below to import your custom font.</p>
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
<div class="card-footer position-relative">
|
||||
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-3">View example's code</a>
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
<div id="collapse-3" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
||||
<div class="code-wrapper">
|
||||
<div class="code-wrapper-inner">
|
||||
<pre class="language-scss"><code>$path-to-fonts: '../fonts/myfont/myfont.css';
|
||||
$font-family-sans-serif: "My Font Name", sans-serif;</code></pre>
|
||||
</div>
|
||||
<!--/.code-wrapper-inner -->
|
||||
</div>
|
||||
<!--/.code-wrapper -->
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
<section class="wrapper bg-dark text-white">
|
||||
<div class="container pt-14 pt-md-16 text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
|
||||
<h2 class="display-3 text-white mt-3 mb-3 px-lg-8">Think unique and be creative. Make a difference with Sandbox.</h2>
|
||||
<p class="lead fs-lg mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
|
||||
<a href="https://1.envato.market/NKGrx2" target="_blank" class="btn btn-lg btn-white rounded-pill mb-10">Buy Sandbox</a>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<img class="img-fluid" src="../../assets/img/demos/f1.png" srcset="../../assets/img/demos/f1@2x.png 2x" alt="" />
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<div class="progress-wrap">
|
||||
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
||||
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
||||
</svg>
|
||||
</div>
|
||||
<script src="../../assets/js/plugins.js"></script>
|
||||
<script src="../../assets/js/theme.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,991 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
||||
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
||||
<meta name="author" content="elemis">
|
||||
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
|
||||
<link rel="shortcut icon" href="../../assets/img/favicon.png">
|
||||
<link rel="stylesheet" href="../../assets/css/plugins.css">
|
||||
<link rel="stylesheet" href="../../assets/css/style.css">
|
||||
</head>
|
||||
|
||||
<body data-bs-spy="scroll" data-bs-target="#sidebar-nav">
|
||||
<div class="content-wrapper">
|
||||
<header class="wrapper bg-soft-primary">
|
||||
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
|
||||
<div class="container flex-lg-row flex-nowrap align-items-center">
|
||||
<div class="navbar-brand w-100">
|
||||
<a href="../../index.html">
|
||||
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
||||
<div class="offcanvas-header d-lg-none">
|
||||
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown dropdown-mega">
|
||||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
|
||||
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
||||
<li class="mega-menu-content">
|
||||
<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 I</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 II</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 III</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 IV</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 V</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 VI</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 VII</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 VIII</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 IX</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 X</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 XI</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 XII</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 XIII</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 XIV</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 XV</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 XVI</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 XVII</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 XVIII</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 XIX</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 XX</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 XXI</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
<!--/.row -->
|
||||
</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>
|
||||
</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/breadcrumb.html">Breadcrumb</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/progressbar.html">Progressbar</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/shadows.html">Shadows</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/shapes.html">Shapes</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tables.html">Tables</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tabs.html">Tabs</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tiles.html">Tiles</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</li>
|
||||
<!--/.mega-menu-content-->
|
||||
</ul>
|
||||
<!--/.dropdown-menu -->
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
<div class="offcanvas-footer d-lg-none">
|
||||
<div>
|
||||
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
|
||||
<br /> 00 (123) 456 78 90 <br />
|
||||
<nav class="nav social social-white mt-4">
|
||||
<a href="#"><i class="uil uil-twitter"></i></a>
|
||||
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
||||
<a href="#"><i class="uil uil-dribbble"></i></a>
|
||||
<a href="#"><i class="uil uil-instagram"></i></a>
|
||||
<a href="#"><i class="uil uil-youtube"></i></a>
|
||||
</nav>
|
||||
<!-- /.social -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.offcanvas-footer -->
|
||||
</div>
|
||||
<!-- /.offcanvas-body -->
|
||||
</div>
|
||||
<!-- /.navbar-collapse -->
|
||||
<div class="navbar-other w-100 d-flex ms-auto">
|
||||
<ul class="navbar-nav flex-row align-items-center ms-auto">
|
||||
<li class="nav-item dropdown language-select text-uppercase">
|
||||
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<a href="../../contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none">
|
||||
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
</div>
|
||||
<!-- /.navbar-other -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
</header>
|
||||
<!-- /header -->
|
||||
<section class="wrapper bg-soft-primary">
|
||||
<div class="container pt-10 pb-12 pt-md-14 pb-md-16 text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-lg-7 col-xl-5 mx-auto">
|
||||
<h1 class="display-1 mb-3">Illustrations</h1>
|
||||
<p class="lead px-xxl-12">Below you can find the list of illustrations that come bundled with Sandbox.</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<aside class="col-xl-2 sidebar doc-sidebar mt-md-0 py-16 d-none d-xl-block">
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Usage</h6>
|
||||
<nav id="collapse-usage">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/index.html">Get Started</a></li>
|
||||
<li><a href="../../docs/forms.html">Forms</a></li>
|
||||
<li><a href="../../docs/faq.html">FAQ</a></li>
|
||||
<li><a href="../../docs/changelog.html">Changelog</a></li>
|
||||
<li><a href="../../docs/credits.html">Credits</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Styleguide</h6>
|
||||
<nav id="collapse-style">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/styleguide/colors.html">Colors</a></li>
|
||||
<li><a href="../../docs/styleguide/fonts.html">Fonts</a></li>
|
||||
<li><a href="../../docs/styleguide/icons-svg.html">SVG Icons</a></li>
|
||||
<li><a href="../../docs/styleguide/icons-font.html">Font Icons</a></li>
|
||||
<li><a href="../../docs/styleguide/illustrations.html" class="active">Illustrations</a></li>
|
||||
<li><a href="../../docs/styleguide/backgrounds.html">Backgrounds</a></li>
|
||||
<li><a href="../../docs/styleguide/misc.html">Misc</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Elements</h6>
|
||||
<nav id="collapse-elements">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/elements/accordion.html">Accordion</a></li>
|
||||
<li><a href="../../docs/elements/alerts.html">Alerts</a></li>
|
||||
<li><a href="../../docs/elements/animations.html">Animations</a></li>
|
||||
<li><a href="../../docs/elements/avatars.html">Avatars</a></li>
|
||||
<li><a href="../../docs/elements/background.html">Background</a></li>
|
||||
<li><a href="../../docs/elements/badges.html">Badges</a></li>
|
||||
<li><a href="../../docs/elements/breadcrumb.html">Breadcrumb</a></li>
|
||||
<li><a href="../../docs/elements/buttons.html">Buttons</a></li>
|
||||
<li><a href="../../docs/elements/card.html">Card</a></li>
|
||||
<li><a href="../../docs/elements/carousel.html">Carousel</a></li>
|
||||
<li><a href="../../docs/elements/dividers.html">Dividers</a></li>
|
||||
<li><a href="../../docs/elements/form-elements.html">Form Elements</a></li>
|
||||
<li><a href="../../docs/elements/image-hover.html">Image Hover</a></li>
|
||||
<li><a href="../../docs/elements/image-mask.html">Image Mask</a></li>
|
||||
<li><a href="../../docs/elements/lightbox.html">Lightbox</a></li>
|
||||
<li><a href="../../docs/elements/player.html">Media Player</a></li>
|
||||
<li><a href="../../docs/elements/modal.html">Modal</a></li>
|
||||
<li><a href="../../docs/elements/progressbar.html">Progressbar</a></li>
|
||||
<li><a href="../../docs/elements/shadows.html">Shadows</a></li>
|
||||
<li><a href="../../docs/elements/shapes.html">Shapes</a></li>
|
||||
<li><a href="../../docs/elements/tables.html">Tables</a></li>
|
||||
<li><a href="../../docs/elements/tabs.html">Tabs</a></li>
|
||||
<li><a href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
||||
<li><a href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
||||
<li><a href="../../docs/elements/tiles.html">Tiles</a></li>
|
||||
<li><a href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
||||
<li><a href="../../docs/elements/typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</aside>
|
||||
<!-- /column -->
|
||||
<aside class="col-xl-2 order-xl-3 sidebar sticky-sidebar mt-md-0 py-16 d-none d-xl-block">
|
||||
<div class="widget">
|
||||
<h6 class="widget-title fs-17 mb-2 ps-xl-5">On this page</h6>
|
||||
<nav class="ps-xl-5" id="sidebar-nav">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a class="nav-link scroll" href="#snippet-1">Set 1</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-2">Set 2</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-3">Set 3</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-4">Set 4</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-5">Set 5</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</aside>
|
||||
<!-- /column -->
|
||||
<div class="col-xl-8 order-xl-2">
|
||||
<section id="snippet-1" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Set 1</h2>
|
||||
<ul class="glyphs glyphs-svg row gy-6">
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i1.png" srcset="../../assets/img/illustrations/i1@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/growing-up-landing-page-design_4238115.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i1.png" srcset="./assets/img/illustrations/i1@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i2.png" srcset="../../assets/img/illustrations/i2@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/startup-landing-page_4237363.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i2.png" srcset="./assets/img/illustrations/i2@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i3.png" srcset="../../assets/img/illustrations/i3@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/teamwork-landing-page_4238239.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i3.png" srcset="./assets/img/illustrations/i3@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i4.png" srcset="../../assets/img/illustrations/i4@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/about-us-landing-page-design_4238455.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i4.png" srcset="./assets/img/illustrations/i4@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i5.png" srcset="../../assets/img/illustrations/i5@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/data-protection-landing-page-design_4237696.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i5.png" srcset="./assets/img/illustrations/i5@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i6.png" srcset="../../assets/img/illustrations/i6@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/digital-marketing-landing-page-web-design_4237912.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i6.png" srcset="./assets/img/illustrations/i6@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i7.png" srcset="../../assets/img/illustrations/i7@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/online-shopping-landing-page_4237971.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i7.png" srcset="./assets/img/illustrations/i7@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i8.png" srcset="../../assets/img/illustrations/i8@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/seo-optimization-landing-page-design_4237777.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i8.png" srcset="./assets/img/illustrations/i8@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="snippet-2" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Set 2</h2>
|
||||
<ul class="glyphs glyphs-svg row gy-6">
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i9.png" srcset="../../assets/img/illustrations/i9@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/app-development-landing-page_3103245.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i9.png" srcset="./assets/img/illustrations/i9@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i10.png" srcset="../../assets/img/illustrations/i10@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/web-design-landing-page_3103246.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i10.png" srcset="./assets/img/illustrations/i10@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i11.png" srcset="../../assets/img/illustrations/i11@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/data-analysis-landing-page_3103247.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i11.png" srcset="./assets/img/illustrations/i11@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i12.png" srcset="../../assets/img/illustrations/i12@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/teamwork-design-landing-page_3103248.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i12.png" srcset="./assets/img/illustrations/i12@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i13.png" srcset="../../assets/img/illustrations/i13@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/time-management-landing-page_3103250.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i13.png" srcset="./assets/img/illustrations/i13@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i14.png" srcset="../../assets/img/illustrations/i14@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/workspace-design-landing-page_3103252.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i14.png" srcset="./assets/img/illustrations/i14@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i15.png" srcset="../../assets/img/illustrations/i15@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/online-shopping-landing-page_3103253.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i15.png" srcset="./assets/img/illustrations/i15@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i16.png" srcset="../../assets/img/illustrations/i16@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/responsive-design-landing-page_3103254.htm#page=56&query=landing+page&position=41" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i16.png" srcset="./assets/img/illustrations/i16@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i17.png" srcset="../../assets/img/illustrations/i17@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/creative-process-landing-page_4405718.htm#page=9&query=landing+page&position=37" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i17.png" srcset="./assets/img/illustrations/i17@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="snippet-3" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Set 3</h2>
|
||||
<ul class="glyphs glyphs-svg row gy-6">
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i18.png" srcset="../../assets/img/illustrations/i18@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-vector/3d-printing-technology-web-banner-landing-page-set_12447938.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i18.png" srcset="./assets/img/illustrations/i18@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i19.png" srcset="../../assets/img/illustrations/i19@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-vector/advert-designer-illustrator-web-banner-landing-page_12447940.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i19.png" srcset="./assets/img/illustrations/i19@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i20.png" srcset="../../assets/img/illustrations/i20@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-vector/cyber-web-security-specialist-web-banner-landing-page-set_12447948.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i20.png" srcset="./assets/img/illustrations/i20@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i21.png" srcset="../../assets/img/illustrations/i21@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-vector/graphic-designer-digital-illustrator-web-banner-landing-page-set_12447958.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i21.png" srcset="./assets/img/illustrations/i21@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i22.png" srcset="../../assets/img/illustrations/i22@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-vector/graphic-designer-digital-illustrator-web-banner-landing-page-set_12447958.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i22.png" srcset="./assets/img/illustrations/i22@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i23.png" srcset="../../assets/img/illustrations/i23@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-vector/system-administrator-web-banner-landing-page-set_12447983.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i23.png" srcset="./assets/img/illustrations/i23@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i24.png" srcset="../../assets/img/illustrations/i24@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-vector/web-design-web-layout-landing-page-set-presenting-content-web-pages-website-layout-composition-color-development-idea-computer-technology_13137171.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i24.png" srcset="./assets/img/illustrations/i24@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i25.png" srcset="../../assets/img/illustrations/i25@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-vector/web-programming-web-layout-landing-page-set-coding-testing-writing-program-website-using-internet-different-software-website-development_13137173.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i25.png" srcset="./assets/img/illustrations/i25@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i26.png" srcset="../../assets/img/illustrations/i26@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-vector/mobile-app-development-web-layout-landing-page-set-modern-technology-smartphone-interface-design-application-building-programming_13137153.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i26.png" srcset="./assets/img/illustrations/i26@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/i27.png" srcset="../../assets/img/illustrations/i27@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-vector/director-web-banner-landing-page_12447955.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/i27.png" srcset="./assets/img/illustrations/i27@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="snippet-4" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Set 4</h2>
|
||||
<ul class="glyphs glyphs-svg row gy-6">
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/ui1.png" srcset="../../assets/img/illustrations/ui1@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/mobile-phone-interface-3d-concepts-landing-page_6721408.htm#page=1&query=Seo%20company&position=36&from_view=keyword" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/ui1.png" srcset="./assets/img/illustrations/ui1@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/ui2.png" srcset="../../assets/img/illustrations/ui2@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/digital-screens-plants-3d-concepts-landing-page_6721403.htm#page=1&query=3d&position=9&from_view=search" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/ui2.png" srcset="./assets/img/illustrations/ui2@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/ui3.png" srcset="../../assets/img/illustrations/ui3@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/online-purchases-from-home-3d-concepts-landing-page_6721402.htm#page=1&query=3d&position=48&from_view=search" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/ui3.png" srcset="./assets/img/illustrations/ui3@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/ui4.png" srcset="../../assets/img/illustrations/ui4@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/free-vector/social-online-interaction-3d-concepts-landing-page_6721405.htm#page=1&position=9&from_view=user" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/ui4.png" srcset="./assets/img/illustrations/ui4@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/ui5.png" srcset="../../assets/img/illustrations/ui5@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-vector/landing-page-template-with-easy-shipping_12392824.htm#page=1&position=21&from_view=user" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/ui5.png" srcset="./assets/img/illustrations/ui5@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="snippet-5" class="wrapper py-16">
|
||||
<h2 class="mb-5">Set 5</h2>
|
||||
<ul class="glyphs glyphs-svg row gy-6">
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/3d1.png" srcset="../../assets/img/illustrations/3d1@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-psd/3-email-campaign-with-mobile-phone_15751106.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/3d1.png" srcset="./assets/img/illustrations/3d1@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/3d2.png" srcset="../../assets/img/illustrations/3d2@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-psd/great-idea-3d-illustration-concept_14514386.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/3d2.png" srcset="./assets/img/illustrations/3d2@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/3d3.png" srcset="../../assets/img/illustrations/3d3@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-psd/3d-email-campaign-with-laptop_15751105.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/3d3.png" srcset="./assets/img/illustrations/3d3@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/3d4.png" srcset="../../assets/img/illustrations/3d4@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-psd/3d-illustration-concept-man-looking-ideas_14514382.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/3d4.png" srcset="./assets/img/illustrations/3d4@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/3d5.png" srcset="../../assets/img/illustrations/3d5@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-psd/3d-new-employee-interview-with-applicants-identity_16069636.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/3d5.png" srcset="./assets/img/illustrations/3d5@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/3d6.png" srcset="../../assets/img/illustrations/3d6@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-psd/3d-online-connection-with-male-character_15751113.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/3d6.png" srcset="./assets/img/illustrations/3d6@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/3d7.png" srcset="../../assets/img/illustrations/3d7@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-psd/3d-online-shopping-illustration_16523091.htm#page=1&query=online%20shopping%20illustration&position=7&from_view=search" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/3d7.png" srcset="./assets/img/illustrations/3d7@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/3d8.png" srcset="../../assets/img/illustrations/3d8@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-psd/3d-working-time-with-male-female-characters_16644661.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/3d8.png" srcset="./assets/img/illustrations/3d8@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/3d9.png" srcset="../../assets/img/illustrations/3d9@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-psd/3d-startup-life-with-man-standing-rocket_16644633.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/3d9.png" srcset="./assets/img/illustrations/3d9@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/3d10.png" srcset="../../assets/img/illustrations/3d10@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-psd/3d-hosting-with-male-character-using-laptop_16428910.htm#page=1&position=21&from_view=detail#&position=21&from_view=detail" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/3d10.png" srcset="./assets/img/illustrations/3d10@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/3d11.png" srcset="../../assets/img/illustrations/3d11@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-psd/3d-startup-life-with-man-holding-notes_16644607.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/3d11.png" srcset="./assets/img/illustrations/3d11@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="col-6 text-center">
|
||||
<div class="card h-100">
|
||||
<div class="card-body p-10 pb-6">
|
||||
<figure><img class="img-fluid" src="../../assets/img/illustrations/3d12.png" srcset="../../assets/img/illustrations/3d12@2x.png 2x" alt="" /></figure>
|
||||
<a href="https://www.freepik.com/premium-psd/3d-think-illustration_14902775.htm" class="external mt-6" target="_blank">Resource</a>
|
||||
</div>
|
||||
<div class="card-footer position-relative"><a class="stretched-link link-body btn-copy-icon" data-clipboard-text="<img class="img-fluid" src="./assets/img/illustrations/3d12.png" srcset="./assets/img/illustrations/3d12@2x.png 2x" alt="" />">Copy</a></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
<section class="wrapper bg-dark text-white">
|
||||
<div class="container pt-14 pt-md-16 text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
|
||||
<h2 class="display-3 text-white mt-3 mb-3 px-lg-8">Think unique and be creative. Make a difference with Sandbox.</h2>
|
||||
<p class="lead fs-lg mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
|
||||
<a href="https://1.envato.market/NKGrx2" target="_blank" class="btn btn-lg btn-white rounded-pill mb-10">Buy Sandbox</a>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<img class="img-fluid" src="../../assets/img/demos/f1.png" srcset="../../assets/img/demos/f1@2x.png 2x" alt="" />
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<div class="progress-wrap">
|
||||
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
||||
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
||||
</svg>
|
||||
</div>
|
||||
<script src="../../assets/js/plugins.js"></script>
|
||||
<script src="../../assets/js/theme.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,701 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
||||
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
||||
<meta name="author" content="elemis">
|
||||
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
|
||||
<link rel="shortcut icon" href="../../assets/img/favicon.png">
|
||||
<link rel="stylesheet" href="../../assets/css/plugins.css">
|
||||
<link rel="stylesheet" href="../../assets/css/style.css">
|
||||
</head>
|
||||
|
||||
<body data-bs-spy="scroll" data-bs-target="#sidebar-nav">
|
||||
<div class="content-wrapper">
|
||||
<header class="wrapper bg-soft-primary">
|
||||
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
|
||||
<div class="container flex-lg-row flex-nowrap align-items-center">
|
||||
<div class="navbar-brand w-100">
|
||||
<a href="../../index.html">
|
||||
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
||||
<div class="offcanvas-header d-lg-none">
|
||||
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item dropdown dropdown-mega">
|
||||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
|
||||
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
||||
<li class="mega-menu-content">
|
||||
<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 I</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 II</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 III</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 IV</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 V</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 VI</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 VII</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 VIII</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 IX</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 X</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 XI</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 XII</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 XIII</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 XIV</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 XV</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 XVI</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 XVII</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 XVIII</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 XIX</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 XX</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 XXI</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
<!--/.row -->
|
||||
</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>
|
||||
</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/breadcrumb.html">Breadcrumb</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/progressbar.html">Progressbar</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/shadows.html">Shadows</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/shapes.html">Shapes</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tables.html">Tables</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tabs.html">Tabs</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tiles.html">Tiles</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
||||
<li><a class="dropdown-item" href="../../docs/elements/typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</li>
|
||||
<!--/.mega-menu-content-->
|
||||
</ul>
|
||||
<!--/.dropdown-menu -->
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
<div class="offcanvas-footer d-lg-none">
|
||||
<div>
|
||||
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
|
||||
<br /> 00 (123) 456 78 90 <br />
|
||||
<nav class="nav social social-white mt-4">
|
||||
<a href="#"><i class="uil uil-twitter"></i></a>
|
||||
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
||||
<a href="#"><i class="uil uil-dribbble"></i></a>
|
||||
<a href="#"><i class="uil uil-instagram"></i></a>
|
||||
<a href="#"><i class="uil uil-youtube"></i></a>
|
||||
</nav>
|
||||
<!-- /.social -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.offcanvas-footer -->
|
||||
</div>
|
||||
<!-- /.offcanvas-body -->
|
||||
</div>
|
||||
<!-- /.navbar-collapse -->
|
||||
<div class="navbar-other w-100 d-flex ms-auto">
|
||||
<ul class="navbar-nav flex-row align-items-center ms-auto">
|
||||
<li class="nav-item dropdown language-select text-uppercase">
|
||||
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
|
||||
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<a href="../../contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item d-lg-none">
|
||||
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- /.navbar-nav -->
|
||||
</div>
|
||||
<!-- /.navbar-other -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
</header>
|
||||
<!-- /header -->
|
||||
<section class="wrapper bg-soft-primary">
|
||||
<div class="container pt-10 pb-12 pt-md-14 pb-md-16 text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-lg-7 col-xl-5 mx-auto">
|
||||
<h1 class="display-1 mb-3">Misc</h1>
|
||||
<p class="lead px-xxl-12">Learn more about some miscellaneous styling features used in Sandbox.</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<aside class="col-xl-2 sidebar doc-sidebar mt-md-0 py-16 d-none d-xl-block">
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Usage</h6>
|
||||
<nav id="collapse-usage">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/index.html">Get Started</a></li>
|
||||
<li><a href="../../docs/forms.html">Forms</a></li>
|
||||
<li><a href="../../docs/faq.html">FAQ</a></li>
|
||||
<li><a href="../../docs/changelog.html">Changelog</a></li>
|
||||
<li><a href="../../docs/credits.html">Credits</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Styleguide</h6>
|
||||
<nav id="collapse-style">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/styleguide/colors.html">Colors</a></li>
|
||||
<li><a href="../../docs/styleguide/fonts.html">Fonts</a></li>
|
||||
<li><a href="../../docs/styleguide/icons-svg.html">SVG Icons</a></li>
|
||||
<li><a href="../../docs/styleguide/icons-font.html">Font Icons</a></li>
|
||||
<li><a href="../../docs/styleguide/illustrations.html">Illustrations</a></li>
|
||||
<li><a href="../../docs/styleguide/backgrounds.html">Backgrounds</a></li>
|
||||
<li><a href="../../docs/styleguide/misc.html" class="active">Misc</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
<div class="widget pb-3">
|
||||
<h6 class="widget-title fs-17 mb-2">Elements</h6>
|
||||
<nav id="collapse-elements">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a href="../../docs/elements/accordion.html">Accordion</a></li>
|
||||
<li><a href="../../docs/elements/alerts.html">Alerts</a></li>
|
||||
<li><a href="../../docs/elements/animations.html">Animations</a></li>
|
||||
<li><a href="../../docs/elements/avatars.html">Avatars</a></li>
|
||||
<li><a href="../../docs/elements/background.html">Background</a></li>
|
||||
<li><a href="../../docs/elements/badges.html">Badges</a></li>
|
||||
<li><a href="../../docs/elements/breadcrumb.html">Breadcrumb</a></li>
|
||||
<li><a href="../../docs/elements/buttons.html">Buttons</a></li>
|
||||
<li><a href="../../docs/elements/card.html">Card</a></li>
|
||||
<li><a href="../../docs/elements/carousel.html">Carousel</a></li>
|
||||
<li><a href="../../docs/elements/dividers.html">Dividers</a></li>
|
||||
<li><a href="../../docs/elements/form-elements.html">Form Elements</a></li>
|
||||
<li><a href="../../docs/elements/image-hover.html">Image Hover</a></li>
|
||||
<li><a href="../../docs/elements/image-mask.html">Image Mask</a></li>
|
||||
<li><a href="../../docs/elements/lightbox.html">Lightbox</a></li>
|
||||
<li><a href="../../docs/elements/player.html">Media Player</a></li>
|
||||
<li><a href="../../docs/elements/modal.html">Modal</a></li>
|
||||
<li><a href="../../docs/elements/progressbar.html">Progressbar</a></li>
|
||||
<li><a href="../../docs/elements/shadows.html">Shadows</a></li>
|
||||
<li><a href="../../docs/elements/shapes.html">Shapes</a></li>
|
||||
<li><a href="../../docs/elements/tables.html">Tables</a></li>
|
||||
<li><a href="../../docs/elements/tabs.html">Tabs</a></li>
|
||||
<li><a href="../../docs/elements/text-animations.html">Text Animations</a></li>
|
||||
<li><a href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
|
||||
<li><a href="../../docs/elements/tiles.html">Tiles</a></li>
|
||||
<li><a href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
|
||||
<li><a href="../../docs/elements/typography.html">Typography</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</aside>
|
||||
<!-- /column -->
|
||||
<aside class="col-xl-2 order-xl-3 sidebar sticky-sidebar mt-md-0 py-16 d-none d-xl-block">
|
||||
<div class="widget">
|
||||
<h6 class="widget-title fs-17 mb-2 ps-xl-5">On this page</h6>
|
||||
<nav class="ps-xl-5" id="sidebar-nav">
|
||||
<ul class="list-unstyled fs-sm lh-sm text-reset">
|
||||
<li><a class="nav-link scroll" href="#snippet-1">Spacing</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-2">Font Size</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-3">Line Height</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-4">Letter Spacing</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-5">Gutters</a></li>
|
||||
<li><a class="nav-link scroll" href="#snippet-6">Retina Images</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /nav -->
|
||||
</div>
|
||||
<!-- /.widget -->
|
||||
</aside>
|
||||
<!-- /column -->
|
||||
<div class="col-xl-8 order-xl-2">
|
||||
<section id="snippet-1" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Spacing</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">Sandbox adds additional spacing variables to existing <a href="https://getbootstrap.com/docs/5.1/utilities/spacing/" class="external" target="_blank">Bootstrap spacing</a> ranging between values <mark class="doc">0</mark> and <mark class="doc">25</mark></p></code>
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
<section id="snippet-2" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Font Size</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">Quickly change the font-size of text using <code class="code">.fs-*</code> classes ranging between <mark class="doc">1</mark> and <mark class="doc">200</mark>, while <mark class="doc">sm</mark>, and <mark class="doc">lg</mark> also apply.</p>
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
<div class="card-footer position-relative">
|
||||
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-2">View example's code</a>
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
<div id="collapse-2" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
||||
<div class="code-wrapper">
|
||||
<div class="code-wrapper-inner">
|
||||
<pre class="language-html"><code><p class="fs-sm">.fs-sm text</p>
|
||||
<p class="fs-lg">.fs-lg text</p>
|
||||
|
||||
<p class="fs-1">.fs-1 text</p>
|
||||
...
|
||||
<p class="fs-200">.fs-200 text</p></code></pre>
|
||||
</div>
|
||||
<!--/.code-wrapper-inner -->
|
||||
</div>
|
||||
<!--/.code-wrapper -->
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
<section id="snippet-3" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Line Height</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">Change the line height with <code class="code">.lh-*</code> utilities.</p>
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
<div class="card-footer position-relative">
|
||||
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-3">View example's code</a>
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
<div id="collapse-3" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
||||
<div class="code-wrapper">
|
||||
<div class="code-wrapper-inner">
|
||||
<pre class="language-html"><code><p class="lh-1">Text</p>
|
||||
<p class="lh-xxs">Text</p>
|
||||
<p class="lh-xs">Text</p>
|
||||
<p class="lh-sm">Text</p>
|
||||
<p class="lh-base">Text</p>
|
||||
<p class="lh-lg">Text</p></code></pre>
|
||||
</div>
|
||||
<!--/.code-wrapper-inner -->
|
||||
</div>
|
||||
<!--/.code-wrapper -->
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
<section id="snippet-4" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Letter Spacing</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">Change the letter spacing with <code class="code">.ls-*</code> utilities.</p>
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
<div class="card-footer position-relative">
|
||||
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-4">View example's code</a>
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
<div id="collapse-4" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
||||
<div class="code-wrapper">
|
||||
<div class="code-wrapper-inner">
|
||||
<pre class="language-html"><code><p class="ls-sm">Text</p>
|
||||
<p class="ls-md">Text</p>
|
||||
<p class="ls-lg">Text</p>
|
||||
<p class="ls-xl">Text</p>
|
||||
<p class="ls-normal">Text</p></code></pre>
|
||||
</div>
|
||||
<!--/.code-wrapper-inner -->
|
||||
</div>
|
||||
<!--/.code-wrapper -->
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
<section id="snippet-5" class="wrapper pt-16">
|
||||
<h2 class="mb-5">Gutters</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">Spacing variables mentioned above can also be used for column gutters. More information regarding Bootstrap gutters can be found on <a href="https://getbootstrap.com/docs/5.0/layout/gutters/" class="external" target="_blank">Bootstrap docs</a></p>
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
<section id="snippet-6" class="wrapper py-16">
|
||||
<h2 class="mb-5">Retina Images</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="mb-0">In order to display a high resolution image on devices with retina display, you need two versions of the image. One with regular size and another with twice its size. The high resolution one should have the exact same name with <mark class="doc">@2x</mark> at the end.</p>
|
||||
</div>
|
||||
<!--/.card-body -->
|
||||
<div class="card-footer position-relative">
|
||||
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-3">View example's code</a>
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
<div id="collapse-3" class="card-footer bg-dark p-0 accordion-collapse collapse">
|
||||
<div class="code-wrapper">
|
||||
<div class="code-wrapper-inner">
|
||||
<pre class="language-html"><code><img src="logo.png" srcset="logo@2x.png 2x" alt="" /></code></pre>
|
||||
</div>
|
||||
<!--/.code-wrapper-inner -->
|
||||
</div>
|
||||
<!--/.code-wrapper -->
|
||||
</div>
|
||||
<!--/.card-footer -->
|
||||
</div>
|
||||
<!--/.card -->
|
||||
</section>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
<section class="wrapper bg-dark text-white">
|
||||
<div class="container pt-14 pt-md-16 text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
|
||||
<h2 class="display-3 text-white mt-3 mb-3 px-lg-8">Think unique and be creative. Make a difference with Sandbox.</h2>
|
||||
<p class="lead fs-lg mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
|
||||
<a href="https://1.envato.market/NKGrx2" target="_blank" class="btn btn-lg btn-white rounded-pill mb-10">Buy Sandbox</a>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<img class="img-fluid" src="../../assets/img/demos/f1.png" srcset="../../assets/img/demos/f1@2x.png 2x" alt="" />
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
<div class="progress-wrap">
|
||||
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
||||
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
||||
</svg>
|
||||
</div>
|
||||
<script src="../../assets/js/plugins.js"></script>
|
||||
<script src="../../assets/js/theme.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user