Chiefsoft/WrenchCoinWebsite
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
dev-chiefworks
2022-09-25 15:25:10 -04:00
commit b085356c99
4709 changed files with 430211 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sandbox310/dev/docs/elements/accordion.html
+909
View File
@@ -0,0 +1,909 @@
<!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">Accordion</h1>
<p class="lead px-xxl-10">Use our custom accordion element to build vertically collapsing accordions. <a href="https://getbootstrap.com/docs/5.1/components/accordion/" target="_blank" class="hover more">Bootstrap docs</a></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">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" class="active">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">Simple</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Background</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Icon</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-3">Simple Accordion</h2>
<p class="lead">Omit the <code class="code">data-bs-parent</code> attribute on each <code class="code">.accordion-collapse</code> to make accordion items stay open when another item is opened.</p>
<p class="lead mb-8">Add <code class="code">caret-simple</code> class to <code class="code">accordion-wrapper</code> to use the other caret option.</p>
<div class="card">
<div class="card-body mb-n2">
<div class="accordion accordion-wrapper" id="accordionSimpleExample">
<div class="card plain accordion-item">
<div class="card-header" id="headingSimpleOne">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseSimpleOne" aria-expanded="true" aria-controls="collapseSimpleOne"> Professional Design </button>
</div>
<!--/.card-header -->
<div id="collapseSimpleOne" class="accordion-collapse collapse show" aria-labelledby="headingSimpleOne" data-bs-parent="#accordionSimpleExample">
<div class="card-body">
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
</div>
<!--/.card-body -->
</div>
<!--/.accordion-collapse -->
</div>
<!--/.accordion-item -->
<div class="card plain accordion-item">
<div class="card-header" id="headingSimpleTwo">
<button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseSimpleTwo" aria-expanded="false" aria-controls="collapseSimpleTwo"> Top-Notch Support </button>
</div>
<!--/.card-header -->
<div id="collapseSimpleTwo" class="accordion-collapse collapse" aria-labelledby="headingSimpleTwo" data-bs-parent="#accordionSimpleExample">
<div class="card-body">
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
</div>
<!--/.card-body -->
</div>
<!--/.accordion-collapse -->
</div>
<!--/.accordion-item -->
<div class="card plain accordion-item">
<div class="card-header" id="headingSimpleThree">
<button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseSimpleThree" aria-expanded="false" aria-controls="collapseSimpleThree"> Header and Slider Options </button>
</div>
<!--/.card-header -->
<div id="collapseSimpleThree" class="accordion-collapse collapse" aria-labelledby="headingSimpleThree" data-bs-parent="#accordionSimpleExample">
<div class="card-body">
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
</div>
<!--/.card-body -->
</div>
<!--/.accordion-collapse -->
</div>
<!--/.accordion-item -->
</div>
<!--/.accordion -->
</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>&lt;div class=&quot;accordion accordion-wrapper&quot; id=&quot;accordionSimpleExample&quot;&gt;
&lt;div class=&quot;card plain accordion-item&quot;&gt;
&lt;div class=&quot;card-header&quot; id=&quot;headingSimpleOne&quot;&gt;
&lt;button class=&quot;accordion-button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseSimpleOne&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseSimpleOne&quot;&gt; Professional Design &lt;/button&gt;
&lt;/div&gt;
&lt;!--/.card-header --&gt;
&lt;div id=&quot;collapseSimpleOne&quot; class=&quot;accordion-collapse collapse show&quot; aria-labelledby=&quot;headingSimpleOne&quot; data-bs-parent=&quot;#accordionSimpleExample&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.&lt;/p&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.accordion-collapse --&gt;
&lt;/div&gt;
&lt;!--/.accordion-item --&gt;
&lt;div class=&quot;card plain accordion-item&quot;&gt;
&lt;div class=&quot;card-header&quot; id=&quot;headingSimpleTwo&quot;&gt;
&lt;button class=&quot;collapsed&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseSimpleTwo&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseSimpleTwo&quot;&gt; Top-Notch Support &lt;/button&gt;
&lt;/div&gt;
&lt;!--/.card-header --&gt;
&lt;div id=&quot;collapseSimpleTwo&quot; class=&quot;accordion-collapse collapse&quot; aria-labelledby=&quot;headingSimpleTwo&quot; data-bs-parent=&quot;#accordionSimpleExample&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.&lt;/p&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.accordion-collapse --&gt;
&lt;/div&gt;
&lt;!--/.accordion-item --&gt;
&lt;div class=&quot;card plain accordion-item&quot;&gt;
&lt;div class=&quot;card-header&quot; id=&quot;headingSimpleThree&quot;&gt;
&lt;button class=&quot;collapsed&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseSimpleThree&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseSimpleThree&quot;&gt; Header and Slider Options &lt;/button&gt;
&lt;/div&gt;
&lt;!--/.card-header --&gt;
&lt;div id=&quot;collapseSimpleThree&quot; class=&quot;accordion-collapse collapse&quot; aria-labelledby=&quot;headingSimpleThree&quot; data-bs-parent=&quot;#accordionSimpleExample&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.&lt;/p&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.accordion-collapse --&gt;
&lt;/div&gt;
&lt;!--/.accordion-item --&gt;
&lt;/div&gt;
&lt;!--/.accordion --&gt;</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-3">Accordion with Background</h2>
<p class="lead">Omit the <code class="code">data-bs-parent</code> attribute on each <code class="code">.accordion-collapse</code> to make accordion items stay open when another item is opened.</p>
<p class="lead mb-8">Add <code class="code">caret-simple</code> class to <code class="code">accordion-wrapper</code> to use the other caret option.</p>
<div class="card">
<div class="card-body mb-n4">
<div class="accordion accordion-wrapper" id="accordionExample">
<div class="card accordion-item">
<div class="card-header" id="headingOne">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Professional Design </button>
</div>
<!--/.card-header -->
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="card-body">
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>
<!--/.card-body -->
</div>
<!--/.accordion-collapse -->
</div>
<!--/.accordion-item -->
<div class="card accordion-item">
<div class="card-header" id="headingTwo">
<button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Top-Notch Support </button>
</div>
<!--/.card-header -->
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="card-body">
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>
<!--/.card-body -->
</div>
<!--/.accordion-collapse -->
</div>
<!--/.accordion-item -->
<div class="card accordion-item">
<div class="card-header" id="headingThree">
<button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Header and Slider Options </button>
</div>
<!--/.card-header -->
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="card-body">
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>
<!--/.card-body -->
</div>
<!--/.accordion-collapse -->
</div>
<!--/.accordion-item -->
</div>
<!--/.accordion -->
</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>&lt;div class=&quot;accordion accordion-wrapper&quot; id=&quot;accordionExample&quot;&gt;
&lt;div class=&quot;card accordion-item&quot;&gt;
&lt;div class=&quot;card-header&quot; id=&quot;headingOne&quot;&gt;
&lt;button class=&quot;accordion-button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseOne&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseOne&quot;&gt; Professional Design &lt;/button&gt;
&lt;/div&gt;
&lt;!--/.card-header --&gt;
&lt;div id=&quot;collapseOne&quot; class=&quot;accordion-collapse collapse show&quot; aria-labelledby=&quot;headingOne&quot; data-bs-parent=&quot;#accordionExample&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.&lt;/p&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.accordion-collapse --&gt;
&lt;/div&gt;
&lt;!--/.accordion-item --&gt;
&lt;div class=&quot;card accordion-item&quot;&gt;
&lt;div class=&quot;card-header&quot; id=&quot;headingTwo&quot;&gt;
&lt;button class=&quot;collapsed&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseTwo&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseTwo&quot;&gt; Top-Notch Support &lt;/button&gt;
&lt;/div&gt;
&lt;!--/.card-header --&gt;
&lt;div id=&quot;collapseTwo&quot; class=&quot;accordion-collapse collapse&quot; aria-labelledby=&quot;headingTwo&quot; data-bs-parent=&quot;#accordionExample&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.&lt;/p&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.accordion-collapse --&gt;
&lt;/div&gt;
&lt;!--/.accordion-item --&gt;
&lt;div class=&quot;card accordion-item&quot;&gt;
&lt;div class=&quot;card-header&quot; id=&quot;headingThree&quot;&gt;
&lt;button class=&quot;collapsed&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseThree&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseThree&quot;&gt; Header and Slider Options &lt;/button&gt;
&lt;/div&gt;
&lt;!--/.card-header --&gt;
&lt;div id=&quot;collapseThree&quot; class=&quot;accordion-collapse collapse&quot; aria-labelledby=&quot;headingThree&quot; data-bs-parent=&quot;#accordionExample&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes.&lt;/p&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.accordion-collapse --&gt;
&lt;/div&gt;
&lt;!--/.accordion-item --&gt;
&lt;/div&gt;
&lt;!--/.accordion --&gt;</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-3">Accordion with Icon</h2>
<p class="lead mb-8">Omit the <code class="code">data-bs-parent</code> attribute on each <code class="code">.accordion-collapse</code> to make accordion items stay open when another item is opened.</p>
<div class="card">
<div class="card-body mb-n2">
<div class="accordion accordion-wrapper" id="accordionIconExample">
<div class="card accordion-item icon">
<div class="card-header" id="headingIconOne">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseIconOne" aria-expanded="true" aria-controls="collapseIconOne"><span><i class="uil uil-shield-exclamation"></i></span>Secure Payments</button>
</div>
<!--/.card-header -->
<div id="collapseIconOne" class="accordion-collapse collapse show" aria-labelledby="headingIconOne" data-bs-parent="#accordionIconExample">
<div class="card-body">
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
</div>
<!--/.card-body -->
</div>
<!--/.accordion-collapse -->
</div>
<!--/.accordion-item -->
<div class="card accordion-item icon">
<div class="card-header" id="headingIconTwo">
<button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseIconTwo" aria-expanded="false" aria-controls="collapseIconTwo"><span><i class="uil uil-check-circle"></i></span>Daily Updates</button>
</div>
<!--/.card-header -->
<div id="collapseIconTwo" class="accordion-collapse collapse" aria-labelledby="headingIconTwo" data-bs-parent="#accordionIconExample">
<div class="card-body">
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
</div>
<!--/.card-body -->
</div>
<!--/.accordion-collapse -->
</div>
<!--/.accordion-item -->
<div class="card accordion-item icon">
<div class="card-header" id="headingIconThree">
<button class="collapsed" data-bs-toggle="collapse" data-bs-target="#collapseIconThree" aria-expanded="false" aria-controls="collapseIconThree"><span><i class="uil uil-chart-line"></i></span>Market Research</button>
</div>
<!--/.card-header -->
<div id="collapseIconThree" class="accordion-collapse collapse" aria-labelledby="headingIconThree" data-bs-parent="#accordionIconExample">
<div class="card-body">
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.</p>
</div>
<!--/.card-body -->
</div>
<!--/.accordion-collapse -->
</div>
<!--/.accordion-item -->
</div>
<!--/.accordion -->
</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>&lt;div class=&quot;accordion accordion-wrapper&quot; id=&quot;accordionIconExample&quot;&gt;
&lt;div class=&quot;card accordion-item icon&quot;&gt;
&lt;div class=&quot;card-header&quot; id=&quot;headingIconOne&quot;&gt;
&lt;button class=&quot;accordion-button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseIconOne&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapseIconOne&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-shield-exclamation&quot;&gt;&lt;/i&gt;&lt;/span&gt;Secure Payments&lt;/button&gt;
&lt;/div&gt;
&lt;!--/.card-header --&gt;
&lt;div id=&quot;collapseIconOne&quot; class=&quot;accordion-collapse collapse show&quot; aria-labelledby=&quot;headingIconOne&quot; data-bs-parent=&quot;#accordionIconExample&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.&lt;/p&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.accordion-collapse --&gt;
&lt;/div&gt;
&lt;!--/.accordion-item --&gt;
&lt;div class=&quot;card accordion-item icon&quot;&gt;
&lt;div class=&quot;card-header&quot; id=&quot;headingIconTwo&quot;&gt;
&lt;button class=&quot;collapsed&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseIconTwo&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseIconTwo&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check-circle&quot;&gt;&lt;/i&gt;&lt;/span&gt;Daily Updates&lt;/button&gt;
&lt;/div&gt;
&lt;!--/.card-header --&gt;
&lt;div id=&quot;collapseIconTwo&quot; class=&quot;accordion-collapse collapse&quot; aria-labelledby=&quot;headingIconTwo&quot; data-bs-parent=&quot;#accordionIconExample&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.&lt;/p&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.accordion-collapse --&gt;
&lt;/div&gt;
&lt;!--/.accordion-item --&gt;
&lt;div class=&quot;card accordion-item icon&quot;&gt;
&lt;div class=&quot;card-header&quot; id=&quot;headingIconThree&quot;&gt;
&lt;button class=&quot;collapsed&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#collapseIconThree&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapseIconThree&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-chart-line&quot;&gt;&lt;/i&gt;&lt;/span&gt;Market Research&lt;/button&gt;
&lt;/div&gt;
&lt;!--/.card-header --&gt;
&lt;div id=&quot;collapseIconThree&quot; class=&quot;accordion-collapse collapse&quot; aria-labelledby=&quot;headingIconThree&quot; data-bs-parent=&quot;#accordionIconExample&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;p&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.&lt;/p&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.accordion-collapse --&gt;
&lt;/div&gt;
&lt;!--/.accordion-item --&gt;
&lt;/div&gt;
&lt;!--/.accordion --&gt;</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>
sandbox310/dev/docs/elements/alerts.html
+705
View File
@@ -0,0 +1,705 @@
<!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">Alerts</h1>
<p class="lead px-xxl-10">Use our custom alert styles to provide contextual feedback messages for typical user actions. <a href="https://getbootstrap.com/docs/5.1/components/alerts/" target="_blank" class="hover more">Bootstrap docs</a></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">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" class="active">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">Simple</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Dismissing</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">Simple</h2>
<div class="card">
<div class="card-body">
<div class="alert alert-primary alert-icon" role="alert"><i class="uil uil-star"></i> A simple primary alert with <a href="#" class="alert-link hover">an example link</a>.</div>
<div class="alert alert-secondary alert-icon" role="alert"><i class="uil uil-clock"></i> A simple secondary alert with <a href="#" class="alert-link hover">an example link</a>.</div>
<div class="alert alert-success alert-icon" role="alert"><i class="uil uil-check-circle"></i> A simple success alert with <a href="#" class="alert-link hover">an example link</a>.</div>
<div class="alert alert-danger alert-icon" role="alert"><i class="uil uil-times-circle"></i> A simple danger alert with <a href="#" class="alert-link hover">an example link</a>.</div>
<div class="alert alert-warning alert-icon" role="alert"><i class="uil uil-exclamation-triangle"></i> A simple warning alert with <a href="#" class="alert-link hover">an example link</a>.</div>
<div class="alert alert-info alert-icon" role="alert"><i class="uil uil-exclamation-circle"></i> A simple info alert with <a href="#" class="alert-link hover">an example link</a>.</div>
<div class="alert alert-light alert-icon" role="alert"><i class="uil uil-lock"></i> A simple light alert with <a href="#" class="alert-link hover">an example link</a>.</div>
<div class="alert alert-dark alert-icon" role="alert"><i class="uil uil-map-marker-info"></i> A simple dark alert with <a href="#" class="alert-link hover">an example link</a>.</div>
</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>&lt;div class=&quot;alert alert-primary alert-icon&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-star&quot;&gt;&lt;/i&gt; A simple primary alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;/div&gt;
&lt;div class=&quot;alert alert-secondary alert-icon&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-clock&quot;&gt;&lt;/i&gt; A simple secondary alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;/div&gt;
&lt;div class=&quot;alert alert-success alert-icon&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-check-circle&quot;&gt;&lt;/i&gt; A simple success alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;/div&gt;
&lt;div class=&quot;alert alert-danger alert-icon&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-times-circle&quot;&gt;&lt;/i&gt; A simple danger alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;/div&gt;
&lt;div class=&quot;alert alert-warning alert-icon&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-exclamation-triangle&quot;&gt;&lt;/i&gt; A simple warning alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;/div&gt;
&lt;div class=&quot;alert alert-info alert-icon&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-exclamation-circle&quot;&gt;&lt;/i&gt; A simple info alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;/div&gt;
&lt;div class=&quot;alert alert-light alert-icon&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-lock&quot;&gt;&lt;/i&gt; A simple light alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;/div&gt;
&lt;div class=&quot;alert alert-dark alert-icon&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-map-marker-info&quot;&gt;&lt;/i&gt; A simple dark alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;/div&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-2" class="wrapper py-16">
<h2 class="mb-5">Dismissing</h2>
<div class="card">
<div class="card-body">
<div class="alert alert-primary alert-icon alert-dismissible fade show" role="alert"><i class="uil uil-star"></i> A simple primary alert with <a href="#" class="alert-link hover">an example link</a>.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-icon alert-dismissible fade show" role="alert"><i class="uil uil-clock"></i> A simple secondary alert with <a href="#" class="alert-link hover">an example link</a>.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-icon alert-dismissible fade show" role="alert"><i class="uil uil-check-circle"></i> A simple success alert with <a href="#" class="alert-link hover">an example link</a>.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-icon alert-dismissible fade show" role="alert"><i class="uil uil-times-circle"></i> A simple danger alert with <a href="#" class="alert-link hover">an example link</a>.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-icon alert-dismissible fade show" role="alert"><i class="uil uil-exclamation-triangle"></i> A simple warning alert with <a href="#" class="alert-link hover">an example link</a>.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-icon alert-dismissible fade show" role="alert"><i class="uil uil-exclamation-circle"></i> A simple info alert with <a href="#" class="alert-link hover">an example link</a>.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light alert-icon alert-dismissible fade show" role="alert"><i class="uil uil-lock"></i> A simple light alert with <a href="#" class="alert-link hover">an example link</a>.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-icon alert-dismissible fade show" role="alert"><i class="uil uil-map-marker-info"></i> A simple dark alert with <a href="#" class="alert-link hover">an example link</a>.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</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>&lt;div class=&quot;alert alert-primary alert-icon alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-star&quot;&gt;&lt;/i&gt; A simple primary alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;alert alert-secondary alert-icon alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-clock&quot;&gt;&lt;/i&gt; A simple secondary alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;alert alert-success alert-icon alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-check-circle&quot;&gt;&lt;/i&gt; A simple success alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;alert alert-danger alert-icon alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-times-circle&quot;&gt;&lt;/i&gt; A simple danger alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;alert alert-warning alert-icon alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-exclamation-triangle&quot;&gt;&lt;/i&gt; A simple warning alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;alert alert-info alert-icon alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-exclamation-circle&quot;&gt;&lt;/i&gt; A simple info alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;alert alert-light alert-icon alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-lock&quot;&gt;&lt;/i&gt; A simple light alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;alert alert-dark alert-icon alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
&lt;i class=&quot;uil uil-map-marker-info&quot;&gt;&lt;/i&gt; A simple dark alert with &lt;a href=&quot;#&quot; class=&quot;alert-link hover&quot;&gt;an example link&lt;/a&gt;.
&lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
&lt;/div&gt;</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>
sandbox310/dev/docs/elements/animations.html
+851
View File
@@ -0,0 +1,851 @@
<!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">Animations</h1>
<p class="lead px-xxl-5">Add animations to elements to show them by scrolling. For further plugin documentation please visit <a href="https://prjct-samwest.github.io/scrollCue/" target="_blank" class="hover more">scrollCue.js docs</a></p>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-3 mx-auto">
<form class="Preview">
<select class="form-select" onchange="ac(this.value);">
<option value="fadeIn" selected>fadeIn</option>
<option value="slideInLeft">slideInLeft</option>
<option value="slideInRight">slideInRight</option>
<option value="slideInDown">slideInDown</option>
<option value="slideInUp">slideInUp</option>
<option value="zoomIn">zoomIn</option>
<option value="zoomOut">zoomOut</option>
<option value="rotateIn">rotateIn</option>
<option value="bounceIn">bounceIn</option>
<option value="bounceInLeft">bounceInLeft</option>
<option value="bounceInRight">bounceInRight</option>
<option value="bounceInDown">bounceInDown</option>
<option value="bounceInUp">bounceInUp</option>
<option value="flipInX">flipInX</option>
<option value="flipInY">flipInY</option>
</select>
<input class="d-none" type="button" value="RELOAD" onclick="reload();">
</form>
</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">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" class="active">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">Standard Example</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Parent Wrap</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Group Wrap</a></li>
<li><a class="nav-link scroll" href="#snippet-4">[data-duration]</a></li>
<li><a class="nav-link scroll" href="#snippet-5">[data-interval]</a></li>
<li><a class="nav-link scroll" href="#snippet-6">[data-delay]</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-3">Standard Example</h2>
<p class="lead mb-8">Set the <code class="code">data-cue</code> attribute in the target element and specify the animation type.</p>
<div class="card">
<div class="card-body">
<div class="row g-4">
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p1.jpg" srcset="../../assets/img/photos/p1@2x.jpg 2x" alt="" /></figure>
</div>
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p2.jpg" srcset="../../assets/img/photos/p2@2x.jpg 2x" alt="" /></figure>
</div>
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p3.jpg" srcset="../../assets/img/photos/p3@2x.jpg 2x" alt="" /></figure>
</div>
</div>
</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>&lt;img src=&quot;1.jpg&quot; data-cue=&quot;fadeIn&quot; alt=&quot;&quot; /&gt;
&lt;img src=&quot;2.jpg&quot; data-cue=&quot;fadeIn&quot; alt=&quot;&quot; /&gt;
&lt;img src=&quot;3.jpg&quot; data-cue=&quot;fadeIn&quot; alt=&quot;&quot; /&gt;</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-3">Parent Wrap</h2>
<p class="lead mb-8">You can wrap it in a parent element by setting the <code class="code">data-cues</code> attribute.</p>
<div class="card">
<div class="card-body">
<div class="row g-4" data-cues="fadeIn">
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p1.jpg" srcset="../../assets/img/photos/p1@2x.jpg 2x" alt="" /></figure>
</div>
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p2.jpg" srcset="../../assets/img/photos/p2@2x.jpg 2x" alt="" /></figure>
</div>
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p3.jpg" srcset="../../assets/img/photos/p3@2x.jpg 2x" alt="" /></figure>
</div>
</div>
</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>&lt;div data-cues=&quot;fadeIn&quot;&gt;
&lt;img src=&quot;1.jpg&quot; alt=&quot;&quot; /&gt;
...
&lt;img src=&quot;3.jpg&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;</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-3">Group Wrap</h2>
<p class="lead mb-8">You can group target elements by setting the <code class="code">data-group</code> attribute. With grouping, when the first element is triggered, the remaining elements are also triggered sequentially, regardless of the scroll amount.</p>
<div class="card">
<div class="card-body">
<div class="row g-4" data-cues="fadeIn" data-group="images">
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p1.jpg" srcset="../../assets/img/photos/p1@2x.jpg 2x" alt="" /></figure>
</div>
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p2.jpg" srcset="../../assets/img/photos/p2@2x.jpg 2x" alt="" /></figure>
</div>
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p3.jpg" srcset="../../assets/img/photos/p3@2x.jpg 2x" alt="" /></figure>
</div>
</div>
</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>&lt;div data-cues=&quot;fadeIn&quot; data-group=&quot;images&quot;&gt;
&lt;img src=&quot;1.jpg&quot; alt=&quot;&quot; /&gt;
...
&lt;img src=&quot;3.jpg&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;</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-3">[data-duration]</h2>
<p class="lead mb-8">You can set the showing time of the element. (ms)</p>
<div class="card">
<div class="card-body">
<div class="row g-4" data-cues="fadeIn" data-duration="2000">
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p1.jpg" srcset="../../assets/img/photos/p1@2x.jpg 2x" alt="" /></figure>
</div>
<div class="col" data-cue="fadeIn" data-duration="500">
<figure class="rounded"><img src="../../assets/img/photos/p2.jpg" srcset="../../assets/img/photos/p2@2x.jpg 2x" alt="" /></figure>
</div>
<div class="col" data-cue="fadeIn" data-duration="500">
<figure class="rounded"><img src="../../assets/img/photos/p3.jpg" srcset="../../assets/img/photos/p3@2x.jpg 2x" alt="" /></figure>
</div>
</div>
</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>&lt;div data-cues=&quot;fadeIn&quot; data-duration=&quot;2000&quot;&gt;
&lt;img src=&quot;1.jpg&quot; alt=&quot;&quot; /&gt;
&lt;img src=&quot;2.jpg&quot; data-duration=&quot;500&quot; alt=&quot;&quot; /&gt;
&lt;img src=&quot;3.jpg&quot; data-duration=&quot;500&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;</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-3">[data-interval]</h2>
<p class="lead mb-8">You can set the showing interval time of the element. (ms)</p>
<div class="card">
<div class="card-body">
<div class="row g-4" data-cues="fadeIn" data-interval="-200">
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p1.jpg" srcset="../../assets/img/photos/p1@2x.jpg 2x" alt="" /></figure>
</div>
<div class="col" data-cue="fadeIn" data-interval="1000">
<figure class="rounded"><img src="../../assets/img/photos/p2.jpg" srcset="../../assets/img/photos/p2@2x.jpg 2x" alt="" /></figure>
</div>
<div class="col" data-cue="fadeIn" data-interval="-0.2">
<figure class="rounded"><img src="../../assets/img/photos/p3.jpg" srcset="../../assets/img/photos/p3@2x.jpg 2x" alt="" /></figure>
</div>
</div>
</div>
<!--/.card-body -->
<div class="card-footer position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-5">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-5" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;div data-cues=&quot;fadeIn&quot; data-interval=&quot;-200&quot;&gt;
&lt;img src=&quot;1.jpg&quot; alt=&quot;&quot; /&gt;
&lt;img src=&quot;2.jpg&quot; data-interval=&quot;1000&quot; alt=&quot;&quot; /&gt;
&lt;img src=&quot;3.jpg&quot; data-interval=&quot;-0.2&quot; alt=&quot;&quot; /&gt; &lt;!-- 200ms --&gt;
&lt;/div&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-6" class="wrapper py-16">
<h2 class="mb-3">[data-delay]</h2>
<p class="mb-8">You can set the showing delay time of the element. (ms)</p>
<div class="card">
<div class="card-body">
<div class="row g-4" data-cues="fadeIn" data-delay="1000">
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p1.jpg" srcset="../../assets/img/photos/p1@2x.jpg 2x" alt="" /></figure>
</div>
<div class="col" data-cue="fadeIn" data-delay="2000">
<figure class="rounded"><img src="../../assets/img/photos/p2.jpg" srcset="../../assets/img/photos/p2@2x.jpg 2x" alt="" /></figure>
</div>
<div class="col" data-cue="fadeIn">
<figure class="rounded"><img src="../../assets/img/photos/p3.jpg" srcset="../../assets/img/photos/p3@2x.jpg 2x" alt="" /></figure>
</div>
</div>
</div>
<!--/.card-body -->
<div class="card-footer position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-6">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-6" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;div data-cues=&quot;fadeIn&quot; data-delay=&quot;1000&quot;&gt;
&lt;img src=&quot;1.jpg&quot; alt=&quot;&quot; /&gt;
&lt;img src=&quot;2.jpg&quot; data-delay=&quot;2000&quot; alt=&quot;&quot; /&gt;
&lt;img src=&quot;3.jpg&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;</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>
<script>
let name = document.querySelectorAll('.anim .hljs-string');
let elm = document.querySelectorAll('[data-cue]:not(span)');
let select = document.querySelector('select');
let button = document.querySelector('input');
function ac(val) {
for (let i = 0; i < name.length; i++) {
name[i].innerHTML = val;
}
button.click();
}
function reload() {
for (let i = 0; i < elm.length; i++) {
elm[i].style.animationName = null;
elm[i].setAttribute('data-cue', select.value);
elm[i].removeAttribute('data-show');
}
scrollCue.update();
}
</script>
</body>
</html>
sandbox310/dev/docs/elements/avatars.html
+635
View File
@@ -0,0 +1,635 @@
<!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">Avatars</h1>
<p class="lead px-xxl-10">Use our custom avatar styles on your profile images or initials.</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">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" class="active">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">Letters</a></li>
<li><a class="nav-link scroll" href="#snippet-2">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-3">Letters</h2>
<p class="lead mb-8">Use any size between <mark class="doc">.w-1 / .h-1</mark> and <mark class="doc">.w-25 / .h-25</mark> to change the avatar size.</p>
<div class="card">
<div class="card-body d-flex flex-row align-items-center">
<span class="avatar bg-primary text-white w-15 h-15 me-4"><span class="fs-30">TC</span></span>
<span class="avatar bg-pale-primary text-primary w-12 h-12 me-4"><span class="fs-18">AH</span></span>
<span class="avatar bg-soft-primary text-primary w-10 h-10 me-4"><span class="fs-15">CH</span></span>
</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>&lt;span class=&quot;avatar bg-primary text-white w-15 h-15&quot;&gt;
&lt;span&gt;TC&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;avatar bg-pale-primary text-primary w-12 h-12&quot;&gt;
&lt;span&gt;AH&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;avatar bg-soft-primary text-primary w-10 h-10&quot;&gt;
&lt;span&gt;CH&lt;/span&gt;
&lt;/span&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-2" class="wrapper py-16">
<h2 class="mb-3">Image</h2>
<p class="lead mb-8">Use any size between <mark class="doc">.w-1</mark> and <mark class="doc">.w-25</mark> to change the image size. Image height will change automatically. Make sure to use images with 1:1 ratio to avoid stretching.</p>
<div class="card">
<div class="card-body d-flex flex-row align-items-center">
<img class="avatar w-15 me-4" src="../../assets/img/avatars/te1.jpg" srcset="../../assets/img/avatars/te1@2x.jpg 2x" alt="" />
<img class="avatar w-12 me-4" src="../../assets/img/avatars/te2.jpg" srcset="../../assets/img/avatars/te2@2x.jpg 2x" alt="" />
<img class="avatar w-10 me-4" src="../../assets/img/avatars/t3.jpg" srcset="../../assets/img/avatars/t3@2x.jpg 2x" alt="" />
</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>&lt;img class=&quot;avatar w-15&quot; src=&quot;...&quot; alt=&quot;&quot; /&gt;
&lt;img class=&quot;avatar w-12&quot; src=&quot;...&quot; alt=&quot;&quot; /&gt;
&lt;img class=&quot;avatar w-10&quot; src=&quot;...&quot; alt=&quot;&quot; /&gt;</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>
sandbox310/dev/docs/elements/background.html
+861
View File
@@ -0,0 +1,861 @@
<!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">Background</h1>
<p class="lead px-xxl-10">Use our custom background styles to add image, color, pattern or video backgrounds to your sections.</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">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" class="active">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-0">Image</a></li>
<li><a class="nav-link scroll" href="#snippet-1">Dark</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Gradient</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Color</a></li>
<li><a class="nav-link scroll" href="#snippet-4">Soft</a></li>
<li><a class="nav-link scroll" href="#snippet-5">Pale</a></li>
<li><a class="nav-link scroll" href="#snippet-6">Pattern</a></li>
<li><a class="nav-link scroll" href="#snippet-7">Video</a></li>
</li>
</ul>
</nav>
<!-- /nav -->
</div>
<!-- /.widget -->
</aside>
<!-- /column -->
<div class="col-xl-8 order-xl-2">
<section id="snippet-0" class="wrapper pt-16">
<h2 class="mb-5">Image Background</h2>
<div class="card">
<div class="card-body">
<section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="../../assets/img/photos/bg1.jpg">
<div class="container py-14 py-md-16">
<h2 class="display-5 mb-0 text-center text-white">Content goes here</h2>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<p class="mt-6"><code class="code">.image-wrapper</code> class enables <code class="code">background-attachment: fixed;</code> to disable image from scrolling with the page; along with <code class="code">background-size: cover;</code> which scales the image as large as possible to fill the container. You can use the following classes along with <code class="code">.image-wrapper</code> to change these behaviors:</p>
<ul class="list-unstyled mb-6">
<li><code class="code bg-pale-primary">.bg-auto</code> Disables fixed background, changes <mark class="doc">background-size</mark> to <mark class="doc">auto</mark>.</li>
<li><code class="code bg-pale-primary">.bg-full</code> Disables fixed background, changes <mark class="doc">background-size</mark> to <mark class="doc">100%</mark>.</li>
<li><code class="code bg-pale-primary">.bg-cover</code> Disables fixed background, but keeps <mark class="doc">background-size</mark> as <mark class="doc">cover</mark>.</li>
</ul>
<p>To add overlay on the background images use <code class="code">.bg-overlay</code> class:</p>
<ul class="list-unstyled mb-0">
<li><code class="code bg-pale-primary">.bg-overlay</code> Adds 50% overlay. </li>
<li><code class="code bg-pale-primary">.bg-overlay.bg-overlay-300</code> Adds 30% overlay.</li>
<li><code class="code bg-pale-primary">.bg-overlay.bg-overlay-400</code> Adds 40% overlay.</li>
</ul>
</div>
<!--/.card-body -->
<div class="card-footer position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-0">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-0" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper image-wrapper bg-image bg-overlay text-white&quot; data-image-src=&quot;./assets/img/photos/bg1.jpg&quot;&gt;&lt;/section&gt;
&lt;section class=&quot;wrapper image-wrapper bg-image bg-full bg-overlay text-white&quot; data-image-src=&quot;./assets/img/photos/bg1.jpg&quot;&gt;&lt;/section&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-1" class="wrapper pt-16">
<h2 class="mb-5">Dark Background</h2>
<div class="card">
<div class="card-body">
<section class="wrapper bg-dark text-white">
<div class="container py-14 py-md-16">
<h2 class="display-5 mb-0 text-center text-white">Content goes here</h2>
</div>
<!-- /.container -->
</section>
<!-- /section -->
</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>&lt;section class=&quot;wrapper bg-dark text-white&quot;&gt;&lt;/section&gt;</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-3">Gradient Background</h2>
<p class="lead">Available options:</p>
<p class="lead"><code class="code">.gradient-1</code>, <code class="code">.gradient-2</code>, <code class="code">.gradient-3</code>, <code class="code">.gradient-4</code>, <code class="code">.gradient-5</code>, <code class="code">.gradient-6</code>, <code class="code">.gradient-7</code>, </p>
<p class="lead mb-8"><code class="code">bg-gradient-primary</code>, <code class="code">bg-gradient-aqua</code>, <code class="code">bg-gradient-green</code>, <code class="code">bg-gradient-leaf</code>, <code class="code">bg-gradient-navy</code>, <code class="code">bg-gradient-orange</code>, <code class="code">bg-gradient-pink</code>, <code class="code">bg-gradient-purple</code>, <code class="code">bg-gradient-red</code>, <code class="code">bg-gradient-violet</code>, <code class="code">bg-gradient-yellow</code>, <code class="code">bg-gradient-fuchsia</code>, <code class="code">bg-gradient-sky</code>, <code class="code">bg-gradient-grape</code>, <code class="code">bg-gradient-reverse-primary</code>, <code class="code">bg-gradient-reverse-aqua</code>, <code class="code">bg-gradient-reverse-green</code>, <code class="code">bg-gradient-reverse-leaf</code>, <code class="code">bg-gradient-reverse-navy</code>, <code class="code">bg-gradient-reverse-orange</code>, <code class="code">bg-gradient-reverse-pink</code>, <code class="code">bg-gradient-reverse-purple</code>, <code class="code">bg-gradient-reverse-red</code>, <code class="code">bg-gradient-reverse-violet</code>, <code class="code">bg-gradient-reverse-yellow</code>, <code class="code">bg-gradient-reverse-fuchsia</code>, <code class="code">bg-gradient-reverse-sky</code>, <code class="code">bg-gradient-reverse-grape</code>.</p>
<div class="card">
<div class="card-body">
<section class="wrapper gradient-3 text-white mb-5">
<div class="container py-14 py-md-16">
<h2 class="display-5 mb-0 text-center text-white">Content goes here</h2>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-gradient-primary mb-5">
<div class="container py-14 py-md-16">
<h2 class="display-5 mb-0 text-center">Content goes here</h2>
</div>
<!-- /.container -->
</section>
<!-- /section -->
</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>&lt;section class=&quot;wrapper gradient-3 text-white&quot;&gt;&lt;/section&gt;
&lt;section class=&quot;wrapper bg-gradient-primary text-white&quot;&gt;&lt;/section&gt;
&lt;section class=&quot;wrapper bg-gradient-reverse-primary text-white&quot;&gt;&lt;/section&gt;
</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-3">Color Background</h2>
<p class="lead">Available options:</p>
<p class="lead mb-8"><code class="code">bg-white</code>, <code class="code">bg-primary</code>, <code class="code">bg-aqua</code>, <code class="code">bg-green</code>, <code class="code">bg-leaf</code>, <code class="code">bg-navy</code>, <code class="code">bg-orange</code>, <code class="code">bg-pink</code>, <code class="code">bg-purple</code>, <code class="code">bg-red</code>, <code class="code">bg-violet</code>, <code class="code">bg-yellow</code>, <code class="code">bg-fuchsia</code>, <code class="code">bg-sky</code>, <code class="code">bg-grape</code>.</p>
<div class="card">
<div class="card-body">
<section class="wrapper bg-primary text-white">
<div class="container py-14 py-md-16">
<h2 class="display-5 mb-0 text-center text-white">Content goes here</h2>
</div>
<!-- /.container -->
</section>
<!-- /section -->
</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>&lt;section class=&quot;wrapper bg-primary text-white&quot;&gt;&lt;/section&gt;</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-3">Soft Background</h2>
<p class="lead">Available options:</p>
<p class="lead mb-8"><code class="code">bg-soft-primary</code>, <code class="code">bg-soft-aqua</code>, <code class="code">bg-soft-green</code>, <code class="code">bg-soft-leaf</code>, <code class="code">bg-soft-navy</code>, <code class="code">bg-soft-orange</code>, <code class="code">bg-soft-pink</code>, <code class="code">bg-soft-purple</code>, <code class="code">bg-soft-red</code>, <code class="code">bg-soft-violet</code>, <code class="code">bg-soft-yellow</code>, <code class="code">bg-soft-fuchsia</code>, <code class="code">bg-soft-sky</code>, <code class="code">bg-soft-grape</code>.</p>
<div class="card">
<div class="card-body">
<section class="wrapper bg-soft-primary">
<div class="container py-14 py-md-16">
<h2 class="display-5 mb-0 text-center">Content goes here</h2>
</div>
<!-- /.container -->
</section>
<!-- /section -->
</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>&lt;section class=&quot;wrapper bg-soft-primary&quot;&gt;&lt;/section&gt;</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-3">Pale Background</h2>
<p class="lead">Available options:</p>
<p class="lead mb-8"><code class="code">bg-pale-primary</code>, <code class="code">bg-pale-aqua</code>, <code class="code">bg-pale-green</code>, <code class="code">bg-pale-leaf</code>, <code class="code">bg-pale-navy</code>, <code class="code">bg-pale-orange</code>, <code class="code">bg-pale-pink</code>, <code class="code">bg-pale-purple</code>, <code class="code">bg-pale-red</code>, <code class="code">bg-pale-violet</code>, <code class="code">bg-pale-yellow</code>, <code class="code">bg-pale-fuchsia</code>, <code class="code">bg-pale-sky</code>, <code class="code">bg-pale-grape</code>.</p>
<div class="card">
<div class="card-body">
<section class="wrapper bg-pale-primary">
<div class="container py-14 py-md-16">
<h2 class="display-5 mb-0 text-center">Content goes here</h2>
</div>
<!-- /.container -->
</section>
<!-- /section -->
</div>
<!--/.card-body -->
<div class="card-footer position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-5">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-5" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper bg-pale-primary&quot;&gt;&lt;/section&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-6" class="wrapper pt-16">
<h2 class="mb-5">Pattern Background</h2>
<div class="card">
<div class="card-body">
<section class="wrapper pattern-wrapper bg-image text-white" data-image-src="../../assets/img/pattern.png">
<div class="container py-14 py-md-16">
<h2 class="display-5 mb-0 text-center text-white">Content goes here</h2>
</div>
<!-- /.container -->
</section>
<!-- /section -->
</div>
<!--/.card-body -->
<div class="card-footer position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-6">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-6" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;wrapper pattern-wrapper bg-image text-white&quot; data-image-src=&quot;./assets/img/pattern.png&quot;&gt;&lt;/section&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-7" class="wrapper py-16">
<h2 class="mb-5">Video Background</h2>
<div class="card">
<div class="card-body">
<section class="video-wrapper bg-overlay ratio ratio-16x9">
<video poster="../../assets/img/photos/movie.jpg" src="../../assets/media/movie.mp4" autoplay loop playsinline muted></video>
<div class="video-content">
<div class="container text-center">
<h2 class="display-5 mb-0 text-white text-center">Content goes here</h2>
</div>
<!-- /.container -->
</div>
<!-- /.video-content -->
</section>
</div>
<!--/.card-body -->
<div class="card-footer position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-7">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-7" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;section class=&quot;video-wrapper bg-overlay ratio ratio-16x9&quot;&gt;
&lt;video poster=&quot;./assets/img/photos/movie2.jpg&quot; src=&quot;./assets/media/movie2.mp4&quot; autoplay loop playsinline muted&gt;&lt;/video&gt;
&lt;div class=&quot;video-content&quot;&gt;
&lt;div class=&quot;container text-center&quot;&gt;
&lt;h2 class=&quot;display-5 mb-0 text-white text-center&quot;&gt;Content goes here&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/div&gt;
&lt;!-- /.video-content --&gt;
&lt;/section&gt;</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>
sandbox310/dev/docs/elements/badges.html
+720
View File
@@ -0,0 +1,720 @@
<!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">Badges</h1>
<p class="lead px-xxl-10">Use our custom badge styles to add a label compontent on your website. <a href="https://getbootstrap.com/docs/5.1/components/badge/" target="_blank" class="hover more">Bootstrap docs</a></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">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" class="active">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">Colors</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Gradients</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Shapes</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">Colors</h2>
<div class="card">
<div class="card-body">
<span class="badge bg-yellow rounded-pill">Badge</span>
<span class="badge bg-orange rounded-pill">Badge</span>
<span class="badge bg-red rounded-pill">Badge</span>
<span class="badge bg-pink rounded-pill">Badge</span>
<span class="badge bg-violet rounded-pill">Badge</span>
<span class="badge bg-purple rounded-pill">Badge</span>
<span class="badge bg-blue rounded-pill">Badge</span>
<span class="badge bg-aqua rounded-pill">Badge</span>
<span class="badge bg-green rounded-pill">Badge</span>
<span class="badge bg-leaf rounded-pill">Badge</span>
<span class="badge bg-fuchsia rounded-pill">Badge</span>
<span class="badge bg-sky rounded-pill">Badge</span>
<span class="badge bg-grape rounded-pill">Badge</span>
<span class="badge bg-dark rounded-pill">Badge</span>
<span class="badge bg-ash text-white rounded-pill">Badge</span>
<div class="mb-2"></div>
<span class="badge bg-pale-yellow text-yellow rounded-pill">Badge</span>
<span class="badge bg-pale-orange text-orange rounded-pill">Badge</span>
<span class="badge bg-pale-red text-red rounded-pill">Badge</span>
<span class="badge bg-pale-pink text-pink rounded-pill">Badge</span>
<span class="badge bg-pale-violet text-violet rounded-pill">Badge</span>
<span class="badge bg-pale-purple text-purple rounded-pill">Badge</span>
<span class="badge bg-pale-blue text-blue rounded-pill">Badge</span>
<span class="badge bg-pale-aqua text-aqua rounded-pill">Badge</span>
<span class="badge bg-pale-green text-green rounded-pill">Badge</span>
<span class="badge bg-pale-leaf text-leaf rounded-pill">Badge</span>
<span class="badge bg-pale-fuchsia text-fuchsia rounded-pill">Badge</span>
<span class="badge bg-pale-sky text-sky rounded-pill">Badge</span>
<span class="badge bg-pale-grape text-grape rounded-pill">Badge</span>
<span class="badge bg-pale-dark text-dark rounded-pill">Badge</span>
<span class="badge bg-pale-ash text-dark rounded-pill">Badge</span>
</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>&lt;span class=&quot;badge bg-primary rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-yellow rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-orange rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-red rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pink rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-violet rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-purple rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-blue rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-aqua rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-green rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-leaf rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-fuchsia rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-sky rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-grape rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-dark rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-ash text-white rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-white text-dark rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-primary text-primary rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-yellow text-yellow rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-orange text-orange rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-red text-red rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-pink text-pink rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-violet text-violet rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-purple text-purple rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-blue text-blue rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-aqua text-aqua rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-green text-green rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-leaf text-leaf rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-fuchsia text-fuchsia rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-sky text-sky rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-grape text-grape rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-dark text-dark rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-pale-ash text-dark rounded-pill&quot;&gt;Badge&lt;/span&gt;</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">Gradients</h2>
<div class="card">
<div class="card-body">
<span class="badge gradient-1 rounded-pill">Badge</span>
<span class="badge gradient-2 rounded-pill">Badge</span>
<span class="badge gradient-3 rounded-pill">Badge</span>
<span class="badge gradient-4 rounded-pill">Badge</span>
<span class="badge gradient-5 rounded-pill">Badge</span>
<span class="badge gradient-6 rounded-pill">Badge</span>
<span class="badge gradient-7 rounded-pill">Badge</span>
</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>&lt;span class=&quot;badge gradient-1 rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge gradient-2 rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge gradient-3 rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge gradient-4 rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge gradient-5 rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge gradient-6 rounded-pill&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge gradient-7 rounded-pill&quot;&gt;Badge&lt;/span&gt;</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">Shapes</h2>
<div class="card">
<div class="card-body">
<span class="badge bg-primary rounded-0">Square</span>
<span class="badge bg-primary rounded">Rounded</span>
<span class="badge bg-primary rounded-pill">Pill</span>
</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>&lt;span class=&quot;badge bg-primary rounded-0&quot;&gt;Square&lt;/span&gt;
&lt;span class=&quot;badge bg-primary rounded&quot;&gt;Rounded&lt;/span&gt;
&lt;span class=&quot;badge bg-primary rounded-pill&quot;&gt;Pill&lt;/span&gt;</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>
sandbox310/dev/docs/elements/breadcrumb.html
+628
View File
@@ -0,0 +1,628 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
<meta name="author" content="elemis">
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
<link rel="shortcut icon" href="../../assets/img/favicon.png">
<link rel="stylesheet" href="../../assets/css/plugins.css">
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="content-wrapper">
<header class="wrapper bg-soft-primary">
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="../../index.html">
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<ul class="navbar-nav">
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content">
<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">Breadcrumb</h1>
<p class="lead px-xxl-3">Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. <a href="https://getbootstrap.com/docs/5.1/components/breadcrumb/" target="_blank" class="hover more">Bootstrap docs</a></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">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" class="active">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 -->
<div class="col-xl-8 order-xl-2">
<section id="snippet-1" class="wrapper py-16">
<h2 class="mb-5">Examples</h2>
<div class="card">
<div class="card-body">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<nav aria-label="breadcrumb" class="bg-dark p-3 rounded">
<ol class="breadcrumb text-white mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</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>&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
&lt;ol class=&quot;breadcrumb&quot;&gt;
&lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Home&lt;/li&gt;
&lt;/ol&gt;
&lt;/nav&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
&lt;ol class=&quot;breadcrumb&quot;&gt;
&lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Library&lt;/li&gt;
&lt;/ol&gt;
&lt;/nav&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
&lt;ol class=&quot;breadcrumb&quot;&gt;
&lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
&lt;/ol&gt;
&lt;/nav&gt;
&lt;nav aria-label=&quot;breadcrumb&quot;&gt;
&lt;ol class=&quot;breadcrumb text-white&quot;&gt;
&lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;breadcrumb-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;Library&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;breadcrumb-item active&quot; aria-current=&quot;page&quot;&gt;Data&lt;/li&gt;
&lt;/ol&gt;
&lt;/nav&gt;</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>
sandbox310/dev/docs/elements/buttons.html
+1030
View File
File diff suppressed because it is too large Load Diff
sandbox310/dev/docs/elements/card.html
+879
View File
@@ -0,0 +1,879 @@
<!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">Card</h1>
<p class="lead px-xxl-10">Cards provide a flexible and extensible content container with multiple variants and options. For further instructions on Bootstrap cards please visit <a href="https://getbootstrap.com/docs/5.1/components/card/" target="_blank" class="hover more">Bootstrap docs</a></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">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" class="active">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">Basic</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Color</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Border</a></li>
<li><a class="nav-link scroll" href="#snippet-4">Image</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">Basic</h2>
<div class="card">
<div class="card-body">
<div class="row g-6">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Default</h5>
<p class="card-text">Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus augue.</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
<div class="col-lg-6">
<div class="card shadow-lg">
<div class="card-body">
<h5 class="card-title">Shadow</h5>
<p class="card-text">Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus augue.</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</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-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>&lt;div class=&quot;card&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-lg&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;</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">Color</h2>
<div class="card">
<div class="card-body">
<div class="row g-6">
<div class="col-lg-4">
<div class="card shadow-none bg-primary text-white">
<div class="card-body">
<h5 class="card-title text-white">Solid</h5>
<p class="card-text">Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus.</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
<div class="col-lg-4">
<div class="card shadow-none bg-pale-primary">
<div class="card-body">
<h5 class="card-title">Pale</h5>
<p class="card-text">Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus.</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
<div class="col-lg-4">
<div class="card shadow-none bg-soft-primary">
<div class="card-body">
<h5 class="card-title">Soft</h5>
<p class="card-text">Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus.</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</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-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>&lt;div class=&quot;card shadow-none bg-primary text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-primary&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-primary&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-yellow text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-orange text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-red text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pink text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-violet text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-purple text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-blue text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-aqua text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-green text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-leaf text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-fuchsia text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-sky text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-grape text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-navy text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-ash text-white&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-yellow&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-orange&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-red&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-pink&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-violet&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-purple&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-blue&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-aqua&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-green&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-leaf&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-fuchsia&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-sky&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-grape&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-navy&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-pale-ash&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-yellow&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-orange&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-red&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-pink&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-violet&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-purple&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-blue&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-aqua&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-green&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-leaf&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-fuchsia&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-sky&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-grape&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-navy&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;card shadow-none bg-soft-ash&quot;&gt;&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;&lt;/div&gt;</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-3">Border</h2>
<p class="lead">Available options:</p>
<p class="lead mb-8"><code class="code">border-primary</code>, <code class="code">border-aqua</code>, <code class="code">border-green</code>, <code class="code">border-leaf</code>, <code class="code">border-navy</code>, <code class="code">border-orange</code>, <code class="code">border-pink</code>, <code class="code">border-purple</code>, <code class="code">border-red</code>, <code class="code">border-violet</code>, <code class="code">border-yellow</code>, <code class="code">border-fuchsia</code>, <code class="code">border-sky</code>, <code class="code">border-grape</code>, <code class="code">border-soft-primary</code>, <code class="code">border-soft-aqua</code>, <code class="code">border-soft-green</code>, <code class="code">border-soft-leaf</code>, <code class="code">border-soft-navy</code>, <code class="code">border-soft-orange</code>, <code class="code">border-soft-pink</code>, <code class="code">border-soft-purple</code>, <code class="code">border-soft-red</code>, <code class="code">border-soft-violet</code>, <code class="code">border-soft-yellow</code>, <code class="code">border-soft-fuchsia</code>, <code class="code">border-soft-sky</code>, <code class="code">border-soft-grape</code>.</p>
<div class="card">
<div class="card-body">
<div class="row g-6">
<div class="col-lg-6">
<div class="card shadow-lg card-border-start border-soft-blue">
<div class="card-body">
<h5 class="card-title">Start</h5>
<p class="card-text">Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus, nisi erat porttitor ligula, eget lacinia.</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
<div class="col-lg-6">
<div class="card shadow-lg card-border-top border-green">
<div class="card-body">
<h5 class="card-title">Top</h5>
<p class="card-text">Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus, nisi erat porttitor ligula, eget lacinia.</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
<div class="col-lg-6">
<div class="card bg-soft-yellow card-border-bottom border-soft-yellow">
<div class="card-body">
<h5 class="card-title">Bottom</h5>
<p class="card-text">Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus, nisi erat porttitor ligula, eget lacinia.</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
<div class="col-lg-6">
<div class="card bg-soft-red card-border-end border-red">
<div class="card-body">
<h5 class="card-title">End</h5>
<p class="card-text">Sed posuere consectetur est at lobortis. Duis mollis, commodo luctus, nisi erat porttitor ligula, eget lacinia.</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</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>&lt;div class=&quot;card card-border-start border-primary&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card shadow-lg card-border-top border-primary&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card bg-soft-primary card-border-end border-soft-primary&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card bg-soft-primary card-border-bottom border-primary&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;
&lt;/div&gt;</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">Image</h2>
<div class="card">
<div class="card-body">
<div class="row g-6">
<div class="col-lg-6">
<div class="card">
<img class="card-img-top" src="../../assets/img/photos/p1.jpg" srcset="../../assets/img/photos/p1@2x.jpg 2x" alt="" />
<div class="card-body">
<h5 class="card-title">Image Cap Top</h5>
<p class="card-text">Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus augue.</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Image Cap Bottom</h5>
<p class="card-text">Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus augue.</p>
</div>
<!--/.card-body -->
<img class="card-img-bottom" src="../../assets/img/photos/p2.jpg" srcset="../../assets/img/photos/p2@2x.jpg 2x" alt="" />
</div>
<!--/.card -->
</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>&lt;div class=&quot;card&quot;&gt;
&lt;img class=&quot;card-img-top&quot; src=&quot;...&quot; alt=&quot;&quot; /&gt;
&lt;div class=&quot;card-body&quot;&gt;
...
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;div class=&quot;card&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
...
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;img class=&quot;card-img-bottom&quot; src=&quot;...&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;</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>
sandbox310/dev/docs/elements/carousel.html
+1251
View File
File diff suppressed because it is too large Load Diff
sandbox310/dev/docs/elements/dividers.html
+771
View File
@@ -0,0 +1,771 @@
<!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">Dividers</h1>
<p class="lead px-xxl-10">Use our custom dividers to divide sections or elements.</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">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" class="active">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">Borders</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Angles</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Waves</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">Borders</h2>
<div class="card">
<div class="card-body">
<hr class="my-8" />
<hr class="double my-12" />
<div class="divider-icon mt-8 mb-15"><i class="uil uil-heart"></i></div>
</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>&lt;!-- Simple --&gt;
&lt;hr class=&quot;my-8&quot; /&gt;
&lt;!-- Double --&gt;
&lt;hr class=&quot;double my-8&quot; /&gt;
&lt;!-- Icon --&gt;
&lt;div class=&quot;divider-icon my-8&quot;&gt;&lt;i class=&quot;uil uil-heart&quot;&gt;&lt;/i&gt;&lt;/div&gt;
</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">Angles</h2>
<div class="card">
<div class="card-body">
<figure class="position-relative mb-10"><img class="img-fluid" src="../../assets/img/docs/angle-lower-start.jpg" alt=""><span class="display-6 text-navy" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">Lower Start</span></figure>
<figure class="position-relative"><img class="img-fluid" src="../../assets/img/docs/angle-lower-end.jpg" alt=""><span class="display-6 text-navy" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">Lower End</span></figure>
<figure class="position-relative mb-10"><img class="img-fluid" src="../../assets/img/docs/angle-upper-start.jpg" alt=""><span class="display-6 text-navy" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">Upper Start</span></figure>
<figure class="position-relative mb-10"><img class="img-fluid" src="../../assets/img/docs/angle-upper-end.jpg" alt=""><span class="display-6 text-navy" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">Upper End</span></figure>
<figure class="position-relative mb-10"><img class="img-fluid" src="../../assets/img/docs/angle-upper-end-lower-start.jpg" alt=""><span class="display-6 text-navy" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">Upper End & Lower Start</span></figure>
<figure class="position-relative"><img class="img-fluid" src="../../assets/img/docs/angle-upper-start-lower-end.jpg" alt=""><span class="display-6 text-navy" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">Upper Start & Lower End</span></figure>
<figure class="position-relative"><img class="img-fluid" src="../../assets/img/docs/angle-upper-start-lower-start.jpg" alt=""><span class="display-6 text-navy" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">Upper Start & Lower Start</span></figure>
<figure class="position-relative"><img class="img-fluid" src="../../assets/img/docs/angle-upper-end-lower-end.jpg" alt=""><span class="display-6 text-navy" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">Upper End & Lower End</span></figure>
</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>&lt;!-- Lower Start --&gt;
&lt;section class=&quot;wrapper bg-soft-primary angled lower-start&quot;&gt;&lt;/section&gt;
&lt;!-- Lower End --&gt;
&lt;section class=&quot;wrapper bg-soft-primary angled lower-end&quot;&gt;&lt;/section&gt;
&lt;!-- Upper Start --&gt;
&lt;section class=&quot;wrapper bg-soft-primary angled upper-start&quot;&gt;&lt;/section&gt;
&lt;!-- Upper End --&gt;
&lt;section class=&quot;wrapper bg-soft-primary angled upper-end&quot;&gt;&lt;/section&gt;
&lt;!-- Upper End & Lower Start --&gt;
&lt;section class=&quot;wrapper bg-soft-primary angled upper-end lower-start&quot;&gt;&lt;/section&gt;
&lt;!-- Upper Start & Lower End --&gt;
&lt;section class=&quot;wrapper bg-soft-primary angled upper-start lower-end&quot;&gt;&lt;/section&gt;
&lt;!-- Upper Start & Lower Start --&gt;
&lt;section class=&quot;wrapper bg-soft-primary angled upper-start lower-start&quot;&gt;&lt;/section&gt;
&lt;!-- Upper End & Lower End --&gt;
&lt;section class=&quot;wrapper bg-soft-primary angled upper-end lower-end&quot;&gt;&lt;/section&gt;</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">Waves</h2>
<div class="card">
<div class="card-body">
<section class="wrapper bg-soft-primary mb-5">
<div class="container py-5 py-md-7">
<h2 class="h6 text-center mb-0">Wave 1</h2>
</div>
<div class="overflow-hidden">
<div class="divider text-white mx-n2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 70">
<path fill="currentColor" d="M1440,70H0V45.16a5762.49,5762.49,0,0,1,1440,0Z" />
</svg></div>
</div>
</section>
<!-- /section -->
<section class="wrapper bg-soft-primary mb-5">
<div class="container py-5 py-md-7">
<h2 class="h6 text-center mb-0">Wave 2</h2>
</div>
<div class="overflow-hidden">
<div class="divider text-white mx-n2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60">
<path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z" />
</svg></div>
</div>
</section>
<!-- /section -->
<section class="wrapper bg-soft-primary mb-5">
<div class="container py-5 py-md-7">
<h2 class="h6 text-center mb-0">Wave 3</h2>
</div>
<div class="overflow-hidden">
<div class="divider text-white mx-n2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 92.26">
<path fill="currentColor" d="M1206,21.2c-60-5-119-36.92-291-5C772,51.11,768,48.42,708,43.13c-60-5.68-108-29.92-168-30.22-60,.3-147,27.93-207,28.23-60-.3-122-25.94-182-36.91S30,5.93,0,16.2V92.26H1440v-87l-30,5.29C1348.94,22.29,1266,26.19,1206,21.2Z" />
</svg></div>
</div>
</section>
<!-- /section -->
<section class="wrapper bg-soft-primary mb-5">
<div class="container py-5 py-md-7">
<h2 class="h6 text-center mb-0">Wave 4</h2>
</div>
<div class="overflow-hidden">
<div class="divider text-white mx-n2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
<path fill="currentColor" d="M1260,1.65c-60-5.07-119.82,2.47-179.83,10.13s-120,11.48-180,9.57-120-7.66-180-6.42c-60,1.63-120,11.21-180,16a1129.52,1129.52,0,0,1-180,0c-60-4.78-120-14.36-180-19.14S60,7,30,7H0v93H1440V30.89C1380.07,23.2,1319.93,6.15,1260,1.65Z" />
</svg></div>
</div>
</section>
<!-- /section -->
<section class="wrapper bg-soft-primary mb-5">
<div class="container py-5 py-md-7">
<h2 class="h6 text-center mb-0">Wave 5</h2>
</div>
<div class="overflow-hidden">
<div class="divider text-white mx-n2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
<path fill="currentColor" d="M1260.2,37.86c-60-10-120-20.07-180-16.76-60,3.71-120,19.77-180,18.47-60-1.71-120-21.78-180-31.82s-120-10-180-1.7c-60,8.73-120,24.79-180,28.5-60,3.31-120-6.73-180-11.74s-120-5-150-5H0V100H1440V49.63C1380.07,57.9,1320.13,47.88,1260.2,37.86Z" />
</svg></div>
</div>
</section>
<!-- /section -->
</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>&lt;!-- Wave 1 --&gt;
&lt;div class=&quot;overflow-hidden&quot;&gt;
&lt;div class=&quot;divider text-white mx-n2&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 70&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M1440,70H0V45.16a5762.49,5762.49,0,0,1,1440,0Z&quot;/&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.overflow-hidden --&gt;
&lt;!-- Wave 2 --&gt;
&lt;div class=&quot;overflow-hidden&quot;&gt;
&lt;div class=&quot;divider text-white mx-n2&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 60&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M0,0V60H1440V0A5771,5771,0,0,1,0,0Z&quot;/&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.overflow-hidden --&gt;
&lt;!-- Wave 3 --&gt;
&lt;div class=&quot;overflow-hidden&quot;&gt;
&lt;div class=&quot;divider text-white mx-n2&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 92.26&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M1206,21.2c-60-5-119-36.92-291-5C772,51.11,768,48.42,708,43.13c-60-5.68-108-29.92-168-30.22-60,.3-147,27.93-207,28.23-60-.3-122-25.94-182-36.91S30,5.93,0,16.2V92.26H1440v-87l-30,5.29C1348.94,22.29,1266,26.19,1206,21.2Z&quot;/&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.overflow-hidden --&gt;
&lt;!-- Wave 4 --&gt;
&lt;div class=&quot;overflow-hidden&quot;&gt;
&lt;div class=&quot;divider text-white mx-n2&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 100&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M1260,1.65c-60-5.07-119.82,2.47-179.83,10.13s-120,11.48-180,9.57-120-7.66-180-6.42c-60,1.63-120,11.21-180,16a1129.52,1129.52,0,0,1-180,0c-60-4.78-120-14.36-180-19.14S60,7,30,7H0v93H1440V30.89C1380.07,23.2,1319.93,6.15,1260,1.65Z&quot;/&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.overflow-hidden --&gt;
&lt;!-- Wave 5 --&gt;
&lt;div class=&quot;overflow-hidden&quot;&gt;
&lt;div class=&quot;divider text-white mx-n2&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 1440 100&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M1260.2,37.86c-60-10-120-20.07-180-16.76-60,3.71-120,19.77-180,18.47-60-1.71-120-21.78-180-31.82s-120-10-180-1.7c-60,8.73-120,24.79-180,28.5-60,3.31-120-6.73-180-11.74s-120-5-150-5H0V100H1440V49.63C1380.07,57.9,1320.13,47.88,1260.2,37.86Z&quot;/&gt;&lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.overflow-hidden --&gt;</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>
sandbox310/dev/docs/elements/form-elements.html
+787
View File
@@ -0,0 +1,787 @@
<!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">Form Elements</h1>
<p class="lead px-xxl-10">Some examples for form control styles. For more detailed examples and guidelines please visit <a href="https://getbootstrap.com/docs/5.1/forms/overview/" target="_blank" class="hover more">Bootstrap docs</a></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">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" class="active">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">Input</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Textarea</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Checks</a></li>
<li><a class="nav-link scroll" href="#snippet-4">Radios</a></li>
<li><a class="nav-link scroll" href="#snippet-5">Disabled</a></li>
<li><a class="nav-link scroll" href="#snippet-6">Select</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">Input</h2>
<div class="card">
<div class="card-body">
<div class="form-floating">
<input id="textInputExample" type="text" class="form-control" placeholder="Text Input">
<label for="textInputExample">Text Input</label>
</div>
<!-- /.form-floating -->
</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>&lt;div class=&quot;form-floating mb-4&quot;&gt;
&lt;input id=&quot;textInputExample&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Text Input&quot;&gt;
&lt;label for=&quot;textInputExample&quot;&gt;Text Input&lt;/label&gt;
&lt;/div&gt;
&lt;!-- /.form-floating --&gt;</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">Textarea</h2>
<div class="card">
<div class="card-body">
<div class="form-floating">
<textarea id="textareaExample" class="form-control" placeholder="Textarea" style="height: 150px" required></textarea>
<label for="textareaExample">Textarea</label>
</div>
<!-- /.form-floating -->
</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>&lt;div class=&quot;form-floating mb-4&quot;&gt;
&lt;textarea id=&quot;textareaExample&quot; class=&quot;form-control&quot; placeholder=&quot;Textarea&quot; style=&quot;height: 150px&quot; required&gt;&lt;/textarea&gt;
&lt;label for=&quot;textareaExample&quot;&gt;Textarea&lt;/label&gt;
&lt;/div&gt;
&lt;!-- /.form-floating --&gt;</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">Checks</h2>
<div class="card">
<div class="card-body">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault"> Default checkbox </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked"> Checked checkbox </label>
</div>
</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>&lt;div class=&quot;form-check&quot;&gt;
&lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;flexCheckDefault&quot;&gt;
&lt;label class=&quot;form-check-label&quot; for=&quot;flexCheckDefault&quot;&gt; Default checkbox &lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;form-check&quot;&gt;
&lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;flexCheckChecked&quot; checked&gt;
&lt;label class=&quot;form-check-label&quot; for=&quot;flexCheckChecked&quot;&gt; Checked checkbox &lt;/label&gt;
&lt;/div&gt;</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">Radios</h2>
<div class="card">
<div class="card-body">
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1"> Default radio </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label>
</div>
</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>&lt;div class=&quot;form-check&quot;&gt;
&lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;flexRadioDefault&quot; id=&quot;flexRadioDefault1&quot;&gt;
&lt;label class=&quot;form-check-label&quot; for=&quot;flexRadioDefault1&quot;&gt; Default radio &lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;form-check mb-4&quot;&gt;
&lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;flexRadioDefault&quot; id=&quot;flexRadioDefault2&quot; checked&gt;
&lt;label class=&quot;form-check-label&quot; for=&quot;flexRadioDefault2&quot;&gt; Default checked radio &lt;/label&gt;
&lt;/div&gt;</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">Disabled</h2>
<div class="card">
<div class="card-body">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled"> Disabled checkbox </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled"> Disabled radio </label>
</div>
</div>
<!--/.card-body -->
<div class="card-footer position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-5">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-5" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;div class=&quot;form-check&quot;&gt;
&lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;flexCheckDisabled&quot; disabled&gt;
&lt;label class=&quot;form-check-label&quot; for=&quot;flexCheckDisabled&quot;&gt; Disabled checkbox &lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;form-check mb-4&quot;&gt;
&lt;input class=&quot;form-check-input&quot; type=&quot;radio&quot; name=&quot;flexRadioDisabled&quot; id=&quot;flexRadioDisabled&quot; disabled&gt;
&lt;label class=&quot;form-check-label&quot; for=&quot;flexRadioDisabled&quot;&gt; Disabled radio &lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-6" class="wrapper py-16">
<h2 class="mb-5">Select</h2>
<div class="card">
<div class="card-body">
<div class="form-select-wrapper">
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<!--/.card-body -->
<div class="card-footer position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-6">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-6" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;div class=&quot;form-select-wrapper mb-4&quot;&gt;
&lt;select class=&quot;form-select&quot; aria-label=&quot;Default select example&quot;&gt;
&lt;option selected&gt;Open this select menu&lt;/option&gt;
&lt;option value=&quot;1&quot;&gt;One&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;Two&lt;/option&gt;
&lt;option value=&quot;3&quot;&gt;Three&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;</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>
sandbox310/dev/docs/elements/image-hover.html
+862
View File
@@ -0,0 +1,862 @@
<!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">Image Hover</h1>
<p class="lead px-xxl-12">Use our custom hover styles to add hover state to your images and elements.</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">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" class="active">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">Tooltip</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Overlay</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Simple</a></li>
<li><a class="nav-link scroll" href="#snippet-4">Cursor</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">Tooltip</h2>
<div class="card">
<div class="card-body">
<div class="row gy-6">
<div class="item col-md-6 col-lg-4">
<figure class="itooltip itooltip-dark hover-scale rounded" title='<h5 class="mb-1">Some Title</h5><p class="mb-0">Quam Sit Ornare</p>'><a href="#"> <img src="../../assets/img/photos/p1.jpg" srcset="../../assets/img/photos/p1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!--/column -->
<div class="item col-md-6 col-lg-4">
<figure class="itooltip itooltip-light hover-scale rounded" title='<h5 class="mb-1">Some Title</h5><p class="mb-0">Quam Sit Ornare</p>'><a href="#"> <img src="../../assets/img/photos/p2.jpg" srcset="../../assets/img/photos/p2@2x.jpg 2x" alt="" /></a>
</figure>
</div>
<!--/column -->
<div class="item col-md-6 col-lg-4">
<figure class="itooltip itooltip-primary hover-scale rounded" title='<h5 class="mb-1">Some Title</h5><p class="mb-0">Quam Sit Ornare</p>'><a href="#"> <img src="../../assets/img/photos/p3.jpg" srcset="../../assets/img/photos/p3@2x.jpg 2x" alt="" /></a>
</figure>
</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-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>&lt;figure class=&quot;itooltip itooltip-dark hover-scale rounded&quot; title=&apos;&lt;h5 class=&quot;mb-1&quot;&gt;Some Title&lt;/h5&gt;&lt;p class=&quot;mb-0&quot;&gt;Quam Sit Ornare&lt;/p&gt;&apos;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;/figure&gt;
&lt;figure class=&quot;itooltip itooltip-light hover-scale rounded&quot; title=&apos;&lt;h5 class=&quot;mb-1&quot;&gt;Some Title&lt;/h5&gt;&lt;p class=&quot;mb-0&quot;&gt;Quam Sit Ornare&lt;/p&gt;&apos;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;/figure&gt;
&lt;figure class=&quot;itooltip itooltip-primary hover-scale rounded&quot; title=&apos;&lt;h5 class=&quot;mb-1&quot;&gt;Some Title&lt;/h5&gt;&lt;p class=&quot;mb-0&quot;&gt;Quam Sit Ornare&lt;/p&gt;&apos;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;/figure&gt;</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">Overlay</h2>
<div class="card">
<div class="card-body">
<div class="row gy-6">
<div class="item col-md-6 col-lg-4">
<figure class="overlay overlay-1 hover-scale rounded"><a href="#"> <img src="../../assets/img/photos/p4.jpg" srcset="../../assets/img/photos/p4@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Some Title</h5>
</figcaption>
</figure>
</div>
<!--/column -->
<div class="item col-md-6 col-lg-4">
<figure class="overlay overlay-2 hover-scale color rounded"><a href="#"> <img src="../../assets/img/photos/p5.jpg" srcset="../../assets/img/photos/p5@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-1">Some Title</h5>
<p class="from-bottom">Some Description</p>
</figcaption>
</figure>
</div>
<!--/column -->
<div class="item col-md-6 col-lg-4">
<figure class="overlay overlay-3 overlay-gradient-2 hover-scale rounded"><a href="#"> <img src="../../assets/img/photos/p6.jpg" srcset="../../assets/img/photos/p6@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-left mb-1">Some Title</h5>
<p class="from-left mb-0">Some Description</p>
</figcaption>
</figure>
</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-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>&lt;figure class=&quot;overlay overlay-1 hover-scale rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Some Title&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure class=&quot;overlay overlay-2 hover-scale color rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-1&quot;&gt;Some Title&lt;/h5&gt;
&lt;p class=&quot;from-bottom&quot;&gt;Some Description&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure class=&quot;overlay overlay-3 overlay-gradient-1 hover-scale rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-left mb-1&quot;&gt;Some Title&lt;/h5&gt;
&lt;p class=&quot;from-left mb-0&quot;&gt;Some Description&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure class=&quot;overlay overlay-3 overlay-gradient-2 hover-scale rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-left mb-1&quot;&gt;Some Title&lt;/h5&gt;
&lt;p class=&quot;from-left mb-0&quot;&gt;Some Description&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure class=&quot;overlay overlay-3 overlay-gradient-3 hover-scale rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-left mb-1&quot;&gt;Some Title&lt;/h5&gt;
&lt;p class=&quot;from-left mb-0&quot;&gt;Some Description&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure class=&quot;overlay overlay-3 overlay-gradient-4 hover-scale rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-left mb-1&quot;&gt;Some Title&lt;/h5&gt;
&lt;p class=&quot;from-left mb-0&quot;&gt;Some Description&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure class=&quot;overlay overlay-3 overlay-gradient-5 hover-scale rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-left mb-1&quot;&gt;Some Title&lt;/h5&gt;
&lt;p class=&quot;from-left mb-0&quot;&gt;Some Description&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure class=&quot;overlay overlay-3 overlay-gradient-6 hover-scale rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-left mb-1&quot;&gt;Some Title&lt;/h5&gt;
&lt;p class=&quot;from-left mb-0&quot;&gt;Some Description&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure class=&quot;overlay overlay-3 overlay-gradient-7 hover-scale rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-left mb-1&quot;&gt;Some Title&lt;/h5&gt;
&lt;p class=&quot;from-left mb-0&quot;&gt;Some Description&lt;/p&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;</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">Simple</h2>
<div class="card">
<div class="card-body">
<div class="row gy-6">
<div class="item col-md-6 col-lg-4">
<figure class="lift rounded"><a href="#"> <img src="../../assets/img/photos/p6.jpg" srcset="../../assets/img/photos/p6@2x.jpg 2x" alt="" /></a></figure>
</div>
<!--/column -->
<div class="item col-md-6 col-lg-4">
<figure class="hover-scale rounded"><a href="#"> <img src="../../assets/img/photos/p3.jpg" srcset="../../assets/img/photos/p3@2x.jpg 2x" alt="" /></a></figure>
</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>&lt;figure class=&quot;lift rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;/figure&gt;
&lt;figure class=&quot;hover-scale rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;/figure&gt;</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">Cursor</h2>
<div class="card">
<div class="card-body">
<div class="row gy-6">
<div class="item col-md-6 col-lg-4">
<figure class="hover-scale cursor-dark rounded"><a href="#"> <img src="../../assets/img/photos/p1.jpg" srcset="../../assets/img/photos/p1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!--/column -->
<div class="item col-md-6 col-lg-4">
<figure class="hover-scale cursor-light rounded"><a href="#"> <img src="../../assets/img/photos/p2.jpg" srcset="../../assets/img/photos/p2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!--/column -->
<div class="item col-md-6 col-lg-4">
<figure class="hover-scale cursor-primary rounded"><a href="#"> <img src="../../assets/img/photos/p3.jpg" srcset="../../assets/img/photos/p3@2x.jpg 2x" alt="" /></a></figure>
</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>&lt;figure class=&quot;hover-scale cursor-dark rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;/figure&gt;
&lt;figure class=&quot;hover-scale cursor-light rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;/figure&gt;
&lt;figure class=&quot;hover-scale cursor-primary rounded&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;...&quot; srcset=&quot;...@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
&lt;/a&gt;
&lt;/figure&gt;</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>
sandbox310/dev/docs/elements/image-mask.html
+627
View File
@@ -0,0 +1,627 @@
<!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">Image Mask</h1>
<p class="lead px-xxl-10">Apply custom SVG shapes to your images.</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">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" class="active">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">Mask 1</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Mask 2</a></li>
</ul>
</nav>
<!-- /nav -->
</div>
<!-- /.widget -->
</aside>
<!-- /column -->
<div class="col-xl-8 order-xl-2">
<section id="snippet-" class="wrapper pt-16">
<h2 class="mb-5">Mask 1</h2>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-7">
<div class="img-blob blob-1"><img src="../../assets/img/photos/about17.jpg" srcset="../../assets/img/photos/about17@2x.jpg 2x" alt="" /></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-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>&lt;div class=&quot;img-blob blob-1&quot;&gt;&lt;img src=&quot;...&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-2" class="wrapper py-16">
<h2 class="mb-5">Mask 2</h2>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-7">
<div class="img-blob blob-2"><img src="../../assets/img/photos/about17.jpg" srcset="../../assets/img/photos/about17@2x.jpg 2x" alt="" /></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-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>&lt;div class=&quot;img-blob blob-2&quot;&gt;&lt;img src=&quot;...&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;</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>
sandbox310/dev/docs/elements/lightbox.html
+705
View File
@@ -0,0 +1,705 @@
<!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">Lightbox</h1>
<p class="lead px-xxl-10">Examples and instructions on how to add lightbox functionality to your image or video links.</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">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" class="active">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="#instructions">Instructions</a></li>
<li><a class="nav-link scroll" href="#snippet-1">Image & Caption</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Video</a></li>
</ul>
</nav>
<!-- /nav -->
</div>
<!-- /.widget -->
</aside>
<!-- /column -->
<div class="col-xl-8 order-xl-2">
<section id="instructions" class="wrapper pt-16">
<h2 class="mb-5">Instructions</h2>
<div class="card">
<div class="card-body">
<p>Use <code class="code">data-glightbox</code> attribute to enable lightbox functionality on your image and video links.</p>
<p class="mb-0">To group images together, use <code class="code">data-gallery="group-name"</code> attribute. This will enable navigation between images that have the same attribute value.</p>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</section>
<section id="snippet-1" class="wrapper pt-16">
<h2 class="mb-5">Image & Caption</h2>
<div class="card">
<div class="card-body">
<div class="row gy-6">
<div class="item col-md-6 col-lg-4">
<figure class="overlay overlay-1 hover-scale rounded">
<a href="../../assets/img/photos/p6@2x.jpg" data-glightbox data-gallery="gallery-image"><img src="../../assets/img/photos/p6.jpg" srcset="../../assets/img/photos/p6@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Image</h5>
</figcaption>
</figure>
</div>
<!--/column -->
<div class="item col-md-6 col-lg-4">
<figure class="overlay overlay-1 hover-scale rounded">
<a href="../../assets/img/photos/p3@2x.jpg" data-glightbox="title: Title; description: This is the image description" data-gallery="gallery-image"> <img src="../../assets/img/photos/p3.jpg" srcset="../../assets/img/photos/p3@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Simple Caption</h5>
</figcaption>
</figure>
</div>
<!--/column -->
<div class="item col-md-6 col-lg-4">
<figure class="overlay overlay-1 hover-scale rounded">
<a href="../../assets/img/photos/p2@2x.jpg" data-glightbox="title: Title; description: .caption-1" data-gallery="gallery-image"> <img src="../../assets/img/photos/p2.jpg" srcset="../../assets/img/photos/p2@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Advanced Caption</h5>
</figcaption>
</figure>
<div class="glightbox-desc caption-1">
<p class="mb-0">This div will be used as the image description. HTML is supported.</p>
</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-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>// Image
&lt;a href=&quot;#&quot; data-glightbox data-gallery=&quot;g1&quot;&gt;Link&lt;/a&gt;
// Image & Simple Caption
&lt;a href=&quot;#&quot; data-glightbox=&quot;title: Title; description: Description&quot; data-gallery=&quot;g1&quot;&gt;Link&lt;/a&gt;
// Image & Advanced Caption
&lt;a href=&quot;#&quot; data-glightbox=&quot;title: Title; description: .caption1&quot; data-gallery=&quot;g1&quot;&gt;Link&lt;/a&gt;
&lt;div class=&quot;glightbox-desc caption1&quot;&gt;
&lt;p class=&quot;mb-0&quot;&gt;This div will be used as the image description. HTML is supported.&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-2" class="wrapper py-16">
<h2 class="mb-5">Video</h2>
<div class="card">
<div class="card-body">
<div class="row gy-6">
<div class="item col-md-6 col-lg-4">
<figure class="overlay overlay-1 hover-scale rounded">
<a href="https://vimeo.com/90355541" data-glightbox data-gallery="gallery-video"><img src="../../assets/img/photos/p4.jpg" srcset="../../assets/img/photos/p4@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Vimeo</h5>
</figcaption>
</figure>
</div>
<!--/column -->
<div class="item col-md-6 col-lg-4">
<figure class="overlay overlay-1 hover-scale rounded">
<a href="https://www.youtube.com/watch?v=26TbMXXOe0I" data-glightbox data-gallery="gallery-video"> <img src="../../assets/img/photos/p5.jpg" srcset="../../assets/img/photos/p5@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">YouTube</h5>
</figcaption>
</figure>
</div>
<!--/column -->
<div class="item col-md-6 col-lg-4">
<figure class="overlay overlay-1 hover-scale rounded">
<a href="../../assets/media/movie.mp4" data-glightbox data-poster="../../assets/img/photos/movie.jpg" data-gallery="gallery-video"> <img src="../../assets/img/photos/p6.jpg" srcset="../../assets/img/photos/p6@2x.jpg 2x" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">HTML5</h5>
</figcaption>
</figure>
</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-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>// Vimeo
&lt;a href=&quot;Vimeo Link&quot; data-glightbox data-gallery=&quot;g2&quot;&gt;Link&lt;/a&gt;
// YouTube
&lt;a href=&quot;YouTube Link&quot; data-glightbox data-gallery=&quot;g2&quot;&gt;Link&lt;/a&gt;
// HTML5 video
&lt;a href=&quot;.mp4 Link&quot; data-glightbox data-gallery=&quot;g2&quot;&gt;Link&lt;/a&gt;</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>
sandbox310/dev/docs/elements/modal.html
+1007
View File
File diff suppressed because it is too large Load Diff
sandbox310/dev/docs/elements/player.html
+675
View File
@@ -0,0 +1,675 @@
<!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-7 mx-auto">
<h1 class="display-1 mb-3">Media Player</h1>
<p class="lead px-xxl-10">Examples on how to add videos with the included responsive media player. For further instructions on the plugin please visit <a href="https://github.com/sampotts/plyr" target="_blank" class="hover more">Plyr docs</a></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">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" class="active">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">HTML5 Video - plyr</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Vimeo - plyr</a></li>
<li><a class="nav-link scroll" href="#snippet-3">YouTube - plyr</a></li>
<li><a class="nav-link scroll" href="#snippet-4">Embed</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">HTML5 Video - plyr</h2>
<div class="card">
<div class="card-body">
<video poster="../../assets/img/photos/movie.jpg" class="player" playsinline controls preload="none">
<source src="../../assets/media/movie.mp4" type="video/mp4">
</video>
</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>&lt;video poster=&quot;./assets/img/photos/movie.jpg&quot; class=&quot;player&quot; playsinline controls preload=&quot;none&quot;&gt;
&lt;source src=&quot;./assets/media/movie.mp4&quot; type=&quot;video/mp4&quot;&gt;
&lt;/video&gt;</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">Vimeo - plyr</h2>
<div class="card">
<div class="card-body">
<div class="player" data-plyr-provider="vimeo" data-plyr-embed-id="15801179"></div>
</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>&lt;div class=&quot;player&quot; data-plyr-provider=&quot;vimeo&quot; data-plyr-embed-id=&quot;15801179&quot;&gt;&lt;/div&gt;</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">YouTube - plyr</h2>
<div class="card">
<div class="card-body">
<div class="player" data-plyr-provider="youtube" data-plyr-embed-id="j_Y2Gwaj7Gs"></div>
</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>&lt;div class=&quot;player&quot; data-plyr-provider=&quot;youtube&quot; data-plyr-embed-id=&quot;j_Y2Gwaj7Gs&quot;&gt;&lt;/div&gt;</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">Responsive Embed</h2>
<div class="card">
<div class="card-body">
<div class="ratio ratio-16x9">
<iframe class="rounded" src="https://www.youtube.com/embed/j_Y2Gwaj7Gs?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
<!--/.ratio -->
</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>&lt;div class=&quot;ratio ratio-16x9&quot;&gt;
ANY EMBED CODE (IFRAME, EMBED, OBJECT from YOUTUBE, VIMEO ETC.)
&lt;/div&gt;
&lt;!--/.ratio --&gt;</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>
sandbox310/dev/docs/elements/progressbar.html
+704
View File
@@ -0,0 +1,704 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
<meta name="author" content="elemis">
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
<link rel="shortcut icon" href="../../assets/img/favicon.png">
<link rel="stylesheet" href="../../assets/css/plugins.css">
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="content-wrapper">
<header class="wrapper bg-soft-primary">
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="../../index.html">
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<ul class="navbar-nav">
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content">
<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">Progressbar</h1>
<p class="lead px-xxl-11">Examples and instructions on how to add colorful progressbars on your website.</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">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" class="active">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">Line</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Semi Circle</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-3">Line</h2>
<p class="lead">Available color options:</p>
<p class="lead mb-8"><code class="code">primary</code>, <code class="code">aqua</code>, <code class="code">green</code>, <code class="code">leaf</code>, <code class="code">navy</code>, <code class="code">orange</code>, <code class="code">pink</code>, <code class="code">purple</code>, <code class="code">red</code>, <code class="code">violet</code>, <code class="code">yellow</code>, <code class="code">fuchsia</code>, <code class="code">sky</code>, <code class="code">grape</code>, <code class="code">soft-primary</code>, <code class="code">soft-aqua</code>, <code class="code">soft-green</code>, <code class="code">soft-leaf</code>, <code class="code">soft-navy</code>, <code class="code">soft-orange</code>, <code class="code">soft-pink</code>, <code class="code">soft-purple</code>, <code class="code">soft-red</code>, <code class="code">soft-violet</code>, <code class="code">soft-yellow</code>, <code class="code">soft-fuchsia</code>, <code class="code">soft-sky</code>, <code class="code">soft-grape</code></p>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-7">
<ul class="progress-list mb-10">
<li>
<p>Marketing</p>
<div class="progressbar line blue" data-value="100"></div>
</li>
<li>
<p>Strategy</p>
<div class="progressbar line green" data-value="80"></div>
</li>
<li>
<p>Development</p>
<div class="progressbar line red" data-value="85"></div>
</li>
<li>
<p>Stabilization</p>
<div class="progressbar line yellow" data-value="75"></div>
</li>
</ul>
<!-- /.progress-list -->
<ul class="progress-list">
<li>
<p>Marketing</p>
<div class="progressbar line soft-blue" data-value="100"></div>
</li>
<li>
<p>Strategy</p>
<div class="progressbar line soft-green" data-value="80"></div>
</li>
<li>
<p>Development</p>
<div class="progressbar line soft-red" data-value="85"></div>
</li>
<li>
<p>Stabilization</p>
<div class="progressbar line soft-yellow" data-value="75"></div>
</li>
</ul>
<!-- /.progress-list -->
</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-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>&lt;ul class=&quot;progress-list&quot;&gt;
&lt;li&gt;
&lt;p&gt;Marketing&lt;/p&gt;
&lt;div class=&quot;progressbar line blue&quot; data-value=&quot;100&quot;&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Strategy&lt;/p&gt;
&lt;div class=&quot;progressbar line green&quot; data-value=&quot;80&quot;&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Development&lt;/p&gt;
&lt;div class=&quot;progressbar line red&quot; data-value=&quot;85&quot;&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Stabilization&lt;/p&gt;
&lt;div class=&quot;progressbar line yellow&quot; data-value=&quot;75&quot;&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- /.progress-list --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-2" class="wrapper py-16">
<h2 class="mb-3">Semi Circle</h2>
<p class="lead">Available color options:</p>
<p class="lead mb-8"><code class="code">primary</code>, <code class="code">aqua</code>, <code class="code">green</code>, <code class="code">leaf</code>, <code class="code">navy</code>, <code class="code">orange</code>, <code class="code">pink</code>, <code class="code">purple</code>, <code class="code">red</code>, <code class="code">violet</code>, <code class="code">yellow</code>, <code class="code">fuchsia</code>, <code class="code">sky</code>, <code class="code">grape</code>, <code class="code">soft-primary</code>, <code class="code">soft-aqua</code>, <code class="code">soft-green</code>, <code class="code">soft-leaf</code>, <code class="code">soft-navy</code>, <code class="code">soft-orange</code>, <code class="code">soft-pink</code>, <code class="code">soft-purple</code>, <code class="code">soft-red</code>, <code class="code">soft-violet</code>, <code class="code">soft-yellow</code>, <code class="code">soft-fuchsia</code>, <code class="code">soft-sky</code>, <code class="code">soft-grape</code></p>
<div class="card">
<div class="card-body">
<div class="row gy-6 text-center">
<div class="col-md-6 col-lg-3">
<div class="progressbar semi-circle blue" data-value="40"></div>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-3">
<div class="progressbar semi-circle green" data-value="80"></div>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-3">
<div class="progressbar semi-circle soft-red" data-value="65"></div>
</div>
<!-- /column -->
<div class="col-md-6 col-lg-3">
<div class="progressbar semi-circle soft-yellow" data-value="45"></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-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>&lt;div class=&quot;progressbar semi-circle blue&quot; data-value=&quot;40&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;progressbar semi-circle green&quot; data-value=&quot;80&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;progressbar semi-circle soft-red&quot; data-value=&quot;65&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;progressbar semi-circle soft-yellow&quot; data-value=&quot;45&quot;&gt;&lt;/div&gt;</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>
sandbox310/dev/docs/elements/shadows.html
+584
View File
@@ -0,0 +1,584 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
<meta name="author" content="elemis">
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
<link rel="shortcut icon" href="../../assets/img/favicon.png">
<link rel="stylesheet" href="../../assets/css/plugins.css">
<link rel="stylesheet" href="../../assets/css/style.css">
</head>
<body>
<div class="content-wrapper">
<header class="wrapper bg-soft-primary">
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="../../index.html">
<img src="../../assets/img/logo.png" srcset="../../assets/img/logo@2x.png 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header d-lg-none">
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body ms-lg-auto d-flex flex-column h-100">
<ul class="navbar-nav">
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content">
<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">Shadows</h1>
<p class="lead px-xxl-12">Add or remove shadows to elements with box-shadow utilities. <a href="https://getbootstrap.com/docs/5.0/utilities/shadows/" target="_blank" class="hover more">Bootstrap docs</a></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">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" class="active">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 -->
<!-- /column -->
<div class="col-xl-8 order-xl-2">
<section id="snippet-1" class="wrapper pt-16">
<h2 class="mb-5">Examples</h2>
<div class="card">
<div class="card-body bg-light rounded-top">
<div class="shadow-none p-3 bg-gray rounded mb-6">No shadow</div>
<div class="shadow-sm p-3 bg-white rounded mb-6">Small shadow</div>
<div class="shadow p-3 bg-white rounded mb-6">Regular shadow</div>
<div class="shadow-lg p-3 bg-white rounded">Larger shadow</div>
</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>&lt;div class=&quot;shadow-none&quot;&gt;No shadow&lt;/div&gt;
&lt;div class=&quot;shadow-sm&quot;&gt;Small shadow&lt;/div&gt;
&lt;div class=&quot;shadow&quot;&gt;Regular shadow&lt;/div&gt;
&lt;div class=&quot;shadow-lg&quot;&gt;Larger shadow&lt;/div&gt;</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>
sandbox310/dev/docs/elements/shapes.html
+857
View File
@@ -0,0 +1,857 @@
<!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">Shapes</h1>
<p class="lead px-xxl-10">Use our custom shapes to add on your pages.</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">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" class="active">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">Dot</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Line</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Solid</a></li>
<li><a class="nav-link scroll" href="#snippet-4">SVG</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">Dot</h2>
<div class="card">
<div class="card-body">
<div class="row g-6">
<div class="col-lg-3">
<div class="shape bg-dot yellow w-18 h-18"></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape bg-dot blue w-18 h-18"></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape bg-dot red w-18 h-18"></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape bg-dot green w-18 h-18"></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-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>&lt;div class=&quot;shape bg-dot yellow w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot orange w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot red w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot pink w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot violet w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot purple w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot blue w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot aqua w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot green w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot leaf w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot navy w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot fuchsia w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot sky w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot grape w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot ash w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-dot white w-18 h-18&quot;&gt;&lt;/div&gt;</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">Line</h2>
<div class="card">
<div class="card-body">
<div class="row g-6">
<div class="col-lg-3">
<div class="shape bg-line yellow w-19 h-18"></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape bg-line blue w-18 h-18"></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape bg-line rounded-circle red w-18 h-18"></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape bg-line rounded-circle green w-18 h-18"></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-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>&lt;div class=&quot;shape bg-line yellow w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line orange w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line red w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line pink w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line violet w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line purple w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line blue w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line aqua w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line green w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line leaf w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line navy w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line fuchsia w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line sky w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line grape w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line ash w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line white w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line yellow rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line orange rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line red rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line pink rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line violet rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line purple rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line blue rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line aqua rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line green rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line leaf rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line fuchsia rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line sky rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line grape rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line dark rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-line ash rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;</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-3">Solid</h2>
<p class="lead mb-8">All background color options (<a href="../../docs/elements/background.html#snippet-3" class="internal">solid</a>, <a href="../../docs/elements/background.html#snippet-4" class="internal">soft</a>, <a href="../../docs/elements/background.html#snippet-5" class="internal">pale</a>) are available to use.</p>
<div class="card">
<div class="card-body">
<div class="row g-6">
<div class="col-lg-3">
<div class="shape bg-soft-yellow rounded w-18 h-18"></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape bg-soft-blue rounded w-18 h-18"></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape bg-soft-red rounded-circle w-18 h-18"></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape bg-soft-green rounded-circle w-18 h-18"></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>&lt;div class=&quot;shape bg-soft-yellow w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-orange w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-red w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-pink w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-violet w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-purple w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-blue w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-aqua w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-green w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-leaf w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-navy w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-fuchsia w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-sky w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-grape w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-ash w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-white w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-yellow rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-orange rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-red rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-pink rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-violet rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-purple rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-blue rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-aqua rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-green rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-leaf rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-fuchsia rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-sky rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-grape rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-dark rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;shape bg-soft-ash rounded-circle w-18 h-18&quot;&gt;&lt;/div&gt;</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-3">SVG</h2>
<p class="lead">Available color options:</p>
<p class="lead mb-8"><code class="code">primary</code>, <code class="code">aqua</code>, <code class="code">green</code>, <code class="code">leaf</code>, <code class="code">navy</code>, <code class="code">orange</code>, <code class="code">pink</code>, <code class="code">purple</code>, <code class="code">red</code>, <code class="code">violet</code>, <code class="code">yellow</code>, <code class="code">fuchsia</code>, <code class="code">sky</code>, <code class="code">grape</code>, <code class="code">pale-primary</code>, <code class="code">pale-aqua</code>, <code class="code">pale-green</code>, <code class="code">pale-leaf</code>, <code class="code">pale-navy</code>, <code class="code">pale-orange</code>, <code class="code">pale-pink</code>, <code class="code">pale-purple</code>, <code class="code">pale-red</code>, <code class="code">pale-violet</code>, <code class="code">pale-yellow</code>, <code class="code">pale-fuchsia</code>, <code class="code">pale-sky</code>, <code class="code">pale-grape</code>, <code class="code">soft-primary</code>, <code class="code">soft-aqua</code>, <code class="code">soft-green</code>, <code class="code">soft-leaf</code>, <code class="code">soft-navy</code>, <code class="code">soft-orange</code>, <code class="code">soft-pink</code>, <code class="code">soft-purple</code>, <code class="code">soft-red</code>, <code class="code">soft-violet</code>, <code class="code">soft-yellow</code>, <code class="code">soft-fuchsia</code>, <code class="code">soft-sky</code>, <code class="code">soft-grape</code>.</p>
<div class="card">
<div class="card-body">
<div class="row g-6">
<div class="col-lg-3">
<div class="shape green w-18 h-18"><img src="../../assets/img/svg/hex.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape pale-green w-18 h-18"><img src="../../assets/img/svg/hex.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape soft-green w-18 h-18"><img src="../../assets/img/svg/hex.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
</div>
<!-- /column -->
<div class="col-lg-3">
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape primary w-18 h-18"><img src="../../assets/img/svg/tri.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape pale-primary w-18 h-18"><img src="../../assets/img/svg/tri.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape soft-primary w-18 h-18"><img src="../../assets/img/svg/tri.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
</div>
<!-- /column -->
<div class="col-lg-3">
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape red w-18 h-18"><img src="../../assets/img/svg/circle.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape pale-red w-18 h-18"><img src="../../assets/img/svg/circle.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
</div>
<!-- /column -->
<div class="col-lg-3">
<div class="shape soft-red w-18 h-18"><img src="../../assets/img/svg/circle.svg" class="svg-inject icon-svg w-100 h-100" alt="" /></div>
</div>
<!-- /column -->
<div class="col-lg-3">
</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>&lt;div class=&quot;shape primary w-18 h-18&quot;&gt;
&lt;img src=&quot;./assets/img/svg/hex.svg&quot; class=&quot;svg-inject icon-svg w-100 h-100&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;div class=&quot;shape primary w-18 h-18&quot;&gt;
&lt;img src=&quot;./assets/img/svg/tri.svg&quot; class=&quot;svg-inject icon-svg w-100 h-100&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;div class=&quot;shape primary w-18 h-18&quot;&gt;
&lt;img src=&quot;./assets/img/svg/circle.svg&quot; class=&quot;svg-inject icon-svg w-100 h-100&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
</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>
sandbox310/dev/docs/elements/tables.html
+980
View File
@@ -0,0 +1,980 @@
<!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">Tables</h1>
<p class="lead px-xxl-10">Some examples for displaying tables. For more detailed examples and guidelines please visit <a href="https://getbootstrap.com/docs/5.1/content/tables" target="_blank" class="hover more">Bootstrap docs</a></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">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" class="active">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">Simple</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Simple Dark</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Striped</a></li>
<li><a class="nav-link scroll" href="#snippet-4">Bordered</a></li>
<li><a class="nav-link scroll" href="#snippet-5">Borderless</a></li>
<li><a class="nav-link scroll" href="#snippet-6">Hoverable</a></li>
<li><a class="nav-link scroll" href="#snippet-7">Responsive</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">Simple</h2>
<div class="card">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</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>&lt;table class=&quot;table&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th scope=&quot;col&quot;&gt;#&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;First&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Last&lt;/th&gt;
&lt;th scope=&quot;col&quot;&gt;Handle&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;1&lt;/th&gt;
&lt;td&gt;Mark&lt;/td&gt;
&lt;td&gt;Otto&lt;/td&gt;
&lt;td&gt;@mdo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;2&lt;/th&gt;
&lt;td&gt;Jacob&lt;/td&gt;
&lt;td&gt;Thornton&lt;/td&gt;
&lt;td&gt;@fat&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th scope=&quot;row&quot;&gt;3&lt;/th&gt;
&lt;td colspan=&quot;2&quot;&gt;Larry the Bird&lt;/td&gt;
&lt;td&gt;@twitter&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</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">Simple Dark</h2>
<div class="card">
<div class="card-body">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</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>&lt;table class=&quot;table table-dark&quot;&gt;
...
&lt;/table&gt;</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">Striped</h2>
<div class="card">
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</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>&lt;table class=&quot;table table-striped&quot;&gt;
...
&lt;/table&gt;</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">Bordered</h2>
<div class="card">
<div class="card-body">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</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>&lt;table class=&quot;table table-bordered&quot;&gt;
...
&lt;/table&gt;</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">Borderless</h2>
<div class="card">
<div class="card-body">
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!--/.card-body -->
<div class="card-footer position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-5">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-5" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;table class=&quot;table table-borderless&quot;&gt;
...
&lt;/table&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-6" class="wrapper pt-16">
<h2 class="mb-5">Hoverable Rows</h2>
<div class="card">
<div class="card-body">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!--/.card-body -->
<div class="card-footer position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-6">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-6" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;table class=&quot;table table-hover&quot;&gt;
...
&lt;/table&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-7" class="wrapper py-16">
<h2 class="mb-5">Responsive</h2>
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--/.card-body -->
<div class="card-footer position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-7">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-7" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;div class=&quot;table-responsive&quot;&gt;
&lt;table class=&quot;table&quot;&gt;
...
&lt;/table&gt;
&lt;/div&gt;</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>
sandbox310/dev/docs/elements/tabs.html
+815
View File
@@ -0,0 +1,815 @@
<!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">Tabs</h1>
<p class="lead px-xxl-15">Use our custom tabs to add tabbed interfaces on your website. <a href="https://getbootstrap.com/docs/5.1/components/navs-tabs/#javascript-behavior" target="_blank" class="hover more">Bootstrap docs</a></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">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" class="active">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">Basic</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Pills</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Justified</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">Basic</h2>
<div class="card">
<div class="card-body">
<ul class="nav nav-tabs nav-tabs-basic">
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab3-1">Support</a> </li>
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab3-2">Payments</a> </li>
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab3-3">Updates</a> </li>
</ul>
<!-- /.nav-tabs -->
<div class="tab-content mt-0 mt-md-5">
<div class="tab-pane fade show active" id="tab3-1">
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Donec sed odio dui. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.</p>
<ul class="icon-list bullet-bg bullet-soft-primary mb-0">
<li><i class="uil uil-check"></i>Aenean eu leo quam. Pellentesque ornare.</li>
<li><i class="uil uil-check"></i>Nullam quis risus eget urna mollis ornare.</li>
<li><i class="uil uil-check"></i>Donec id elit non mi porta gravida at eget.</li>
<li><i class="uil uil-check"></i>Fusce dapibus, tellus ac cursus commodo.</li>
</ul>
</div>
<!--/.tab-pane -->
<div class="tab-pane fade" id="tab3-2">
<p>Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod.</p>
<p> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor vel scelerisque nisl.</p>
<p class="mb-0">Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.</p>
</div>
<!--/.tab-pane -->
<div class="tab-pane fade" id="tab3-3">
<p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p class="mb-0">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<!--/.tab-pane -->
</div>
<!-- /.tab-content -->
</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>&lt;ul class=&quot;nav nav-tabs nav-tabs-basic&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link active&quot; data-bs-toggle=&quot;tab&quot; href=&quot;#tab3-1&quot;&gt;Tab 1&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; data-bs-toggle=&quot;tab&quot; href=&quot;#tab3-2&quot;&gt;Tab 2&lt;/a&gt; &lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; data-bs-toggle=&quot;tab&quot; href=&quot;#tab3-3&quot;&gt;Tab 3&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;
&lt;!-- /.nav-tabs --&gt;
&lt;div class=&quot;tab-content mt-0 mt-md-5&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;tab3-1&quot;&gt;
...
&lt;/div&gt;
&lt;!--/.tab-pane --&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;tab3-2&quot;&gt;
...
&lt;/div&gt;
&lt;!--/.tab-pane --&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;tab3-3&quot;&gt;
...
&lt;/div&gt;
&lt;!--/.tab-pane --&gt;
&lt;/div&gt;
&lt;!-- /.tab-content --&gt;</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">Pills</h2>
<div class="card">
<div class="card-body">
<ul class="nav nav-tabs nav-pills">
<li class="nav-item"> <a class="nav-link active" data-bs-toggle="tab" href="#tab1-1"><i class="uil uil-phone-volume pe-1"></i><span>Support</span></a> </li>
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab1-2"><i class="uil uil-shield-exclamation pe-1"></i><span>Payments</span></a> </li>
<li class="nav-item"> <a class="nav-link" data-bs-toggle="tab" href="#tab1-3"><i class="uil uil-laptop-cloud pe-1"></i><span>Updates</span></a> </li>
</ul>
<!-- /.nav-tabs -->
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1-1">
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Donec sed odio dui. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.</p>
<ul class="icon-list bullet-bg bullet-soft-primary mb-0">
<li><i class="uil uil-check"></i>Aenean eu leo quam. Pellentesque ornare.</li>
<li><i class="uil uil-check"></i>Nullam quis risus eget urna mollis ornare.</li>
<li><i class="uil uil-check"></i>Donec id elit non mi porta gravida at eget.</li>
<li><i class="uil uil-check"></i>Fusce dapibus, tellus ac cursus commodo.</li>
</ul>
</div>
<!--/.tab-pane -->
<div class="tab-pane fade" id="tab1-2">
<p>Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis euismod.</p>
<p> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor vel scelerisque nisl.</p>
<p class="mb-0">Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus.</p>
</div>
<!--/.tab-pane -->
<div class="tab-pane fade" id="tab1-3">
<p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p class="mb-0">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<!--/.tab-pane -->
</div>
<!-- /.tab-content -->
</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>&lt;ul class=&quot;nav nav-tabs nav-pills&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link active&quot; data-bs-toggle=&quot;tab&quot; href=&quot;#tab1-1&quot;&gt;
&lt;i class=&quot;uil uil-phone-volume pe-1&quot;&gt;&lt;/i&gt;
&lt;span&gt;Tab 1&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; data-bs-toggle=&quot;tab&quot; href=&quot;#tab1-2&quot;&gt;
&lt;i class=&quot;uil uil-shield-exclamation pe-1&quot;&gt;&lt;/i&gt;
&lt;span&gt;Tab 2&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; data-bs-toggle=&quot;tab&quot; href=&quot;#tab1-3&quot;&gt;
&lt;i class=&quot;uil uil-laptop-cloud pe-1&quot;&gt;&lt;/i&gt;
&lt;span&gt;Tab 3&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- /.nav-tabs --&gt;
&lt;div class=&quot;tab-content&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;tab1-1&quot;&gt;
...
&lt;/div&gt;
&lt;!--/.tab-pane --&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;tab1-2&quot;&gt;
...
&lt;/div&gt;
&lt;!--/.tab-pane --&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;tab1-3&quot;&gt;
...
&lt;/div&gt;
&lt;!--/.tab-pane --&gt;
&lt;/div&gt;
&lt;!-- /.tab-content --&gt;</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-3">Justified</h2>
<p class="lead mb-8">Check out a live example: <a href="../../demo9.html" class="external" target="_blank">Demo 9</a>.</p>
<div class="card">
<div class="card-body">
<ul class="nav nav-tabs nav-tabs-bg nav-tabs-shadow-lg d-flex justify-content-between nav-justified flex-lg-row flex-column">
<li class="nav-item"> <a class="nav-link d-flex flex-row active" data-bs-toggle="tab" href="#tab2-1">
<div><img src="../../assets/img/icons/lineal/rocket.svg" class="svg-inject icon-svg icon-svg-md text-yellow me-4" alt="" /></div>
<div>
<h4 class="mb-1">Easy Usage</h4>
<p>Duis mollis commodo luctus cursus commodo tortor mauris.</p>
</div>
</a> </li>
<li class="nav-item"> <a class="nav-link d-flex flex-row" data-bs-toggle="tab" href="#tab2-2">
<div><img src="../../assets/img/icons/lineal/savings.svg" class="svg-inject icon-svg icon-svg-md text-green me-4" alt="" /></div>
<div>
<h4 class="mb-1">Fast Transactions</h4>
<p>Vivamus sagittis lacus augue fusce dapibus tellus nibh.</p>
</div>
</a> </li>
</ul>
<!-- /.nav-tabs -->
<div class="tab-content">
<div class="tab-pane fade show active" id="tab2-1">
<p class="mb-0">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<!--/.tab-pane -->
<div class="tab-pane fade" id="tab2-2">
<p class="mb-0">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
<!--/.tab-pane -->
</div>
<!-- /.tab-content -->
</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>&lt;ul class=&quot;nav nav-tabs nav-tabs-bg nav-tabs-shadow-lg d-flex justify-content-between nav-justified flex-lg-row flex-column&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link d-flex flex-row active&quot; data-bs-toggle=&quot;tab&quot; href=&quot;#tab2-1&quot;&gt;
&lt;div&gt;&lt;img src=&quot;./assets/img/icons/lineal/rocket.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-yellow me-4&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;h4 class=&quot;mb-1&quot;&gt;Tab 1&lt;/h4&gt;
&lt;p&gt;Description&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link d-flex flex-row&quot; data-bs-toggle=&quot;tab&quot; href=&quot;#tab2-2&quot;&gt;
&lt;div&gt;&lt;img src=&quot;./assets/img/icons/lineal/savings.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md text-green me-4&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;h4 class=&quot;mb-1&quot;&gt;Tab 2&lt;/h4&gt;
&lt;p&gt;Description&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- /.nav-tabs --&gt;
&lt;div class=&quot;tab-content&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;tab2-1&quot;&gt;
...
&lt;/div&gt;
&lt;!--/.tab-pane --&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;tab2-2&quot;&gt;
...
&lt;/div&gt;
&lt;!--/.tab-pane --&gt;
&lt;/div&gt;
&lt;!-- /.tab-content --&gt;</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>
sandbox310/dev/docs/elements/text-animations.html
+668
View File
@@ -0,0 +1,668 @@
<!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">Text Animations</h1>
<p class="lead">Add animations to text easily with pure HTML interface. For further plugin documentation please visit <a href="https://steven.codes/typerjs/" target="_blank" class="hover more">Typer.js docs</a> or <a href="https://adrianklimek.github.io/replaceme/" target="_blank" class="hover more">ReplaceMe.js docs</a></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">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" class="active">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">Typer</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Typer with Loop</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Rotator</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">Typer</h2>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-9">
<h2 class="display-1 mb-0">Sandbox is effortless and powerful with <br /><span class="typer text-primary" data-loop="false" data-delay="100" data-words="easy usage,fast transactions,secure payments"></span><span class="cursor text-primary" data-owner="typer"></span></h2>
</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-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>&lt;span class=&quot;typer text-primary&quot;
data-loop=&quot;false&quot;
data-delay=&quot;100&quot;
data-words=&quot;easy usage,fast transactions,secure payments&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;cursor text-primary&quot; data-owner=&quot;typer&quot;&gt;&lt;/span&gt;</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">Typer with Loop</h2>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-9">
<h2 class="display-1 mb-0">Sandbox focuses on <br /><span class="typer text-primary" data-delay="100" data-words="customer satisfaction,business needs,creative ideas"></span><span class="cursor text-primary" data-owner="typer"></span></h2>
</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-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>&lt;span class=&quot;typer text-primary&quot;
data-delay=&quot;100&quot;
data-words=&quot;customer satisfaction,business needs,creative ideas&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;cursor text-primary&quot; data-owner=&quot;typer&quot;&gt;&lt;/span&gt;</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">Rotator</h2>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-9">
<h2 class="display-1 mb-0">Sandbox is effortless and powerful with <span class="rotator-fade text-primary">easy usage,fast transactions,secure payments</span></h2>
</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>&lt;span class=&quot;rotator-fade text-primary&quot;&gt;easy usage,fast transactions,secure payments&lt;/span&gt;
&lt;span class=&quot;rotator-zoom text-primary&quot;&gt;easy usage,fast transactions,secure payments&lt;/span&gt;
</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>
sandbox310/dev/docs/elements/text-highlight.html
+753
View File
@@ -0,0 +1,753 @@
<!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">Text Highlight</h1>
<p class="lead px-xxl-10">Use our custom text highlight styles to mark important text on your website.</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">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" class="active">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">Underline</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Underline 2</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Underline 3</a></li>
<li><a class="nav-link scroll" href="#snippet-4">Mark</a></li>
</ul>
</nav>
<!-- /nav -->
</div>
<!-- /.widget -->
</aside>
<!-- /column -->
<!-- /column -->
<div class="col-xl-8 order-xl-2">
<section id="snippet-1" class="wrapper pt-16">
<h2 class="mb-5">Underline</h2>
<div class="card">
<div class="card-body">
<p class="lead mb-0">Build and manage an <span class="underline">impressive</span> website with Sandbox in no time.</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>&lt;span class=&quot;underline&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline yellow&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline orange&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline red&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline pink&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline violet&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline purple&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline blue&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline aqua&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline green&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline leaf&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline fuchsia&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline sky&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline grape&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline navy&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline ash&quot;&gt;text&lt;/span&gt;</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">Underline 2</h2>
<div class="card">
<div class="card-body">
<h2 class="display-3 lh-xs mb-4">Build and manage an <span class="underline-2 yellow">impressive</span> website with Sandbox in no time.</h2>
<h2 class="display-3 lh-xs mb-0">Build and manage an <span class="underline-2 underline-gradient-2">impressive</span> website with Sandbox in no time.</h2>
</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>&lt;span class=&quot;underline-2 yellow&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 orange&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 red&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 pink&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 violet&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 purple&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 blue&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 aqua&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 green&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 leaf&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 fuchsia&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 sky&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 grape&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 navy&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 ash&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 underline-gradient-1&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 underline-gradient-2&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 underline-gradient-3&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 underline-gradient-4&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 underline-gradient-5&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 underline-gradient-6&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-2 underline-gradient-7&quot;&gt;text&lt;/span&gt;</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">Underline 3</h2>
<div class="card">
<div class="card-body">
<h2 class="display-3 lh-xs mb-4">Build and manage an <span class="underline-3 style-1 red">impressive</span> website with Sandbox in no time.</h2>
<h2 class="display-3 lh-xs mb-4">Build and manage an <span class="underline-3 style-2 yellow">impressive</span> website with Sandbox in no time.</h2>
<h2 class="display-3 lh-xs mb-4">Build and manage an <span class="underline-3 style-3 green">impressive</span> website with Sandbox in no time.</h2>
</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>&lt;span class=&quot;underline-3 style-1 yellow&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 orange&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 red&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 pink&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 violet&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 purple&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 blue&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 aqua&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 green&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 leaf&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 fuchsia&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 sky&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 grape&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 navy&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-1 ash&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 yellow&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 orange&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 red&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 pink&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 violet&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 purple&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 blue&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 aqua&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 green&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 leaf&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 fuchsia&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 sky&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 grape&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 navy&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-2 ash&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 primary&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 yellow&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 orange&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 red&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 pink&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 violet&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 purple&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 blue&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 aqua&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 green&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 leaf&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 fuchsia&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 sky&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 grape&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 navy&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;underline-3 style-3 ash&quot;&gt;text&lt;/span&gt;</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">Mark</h2>
<div class="card">
<div class="card-body">
<h2>We bring rapid <mark>solutions</mark> for your business.</h2>
</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>&lt;mark&gt;text&lt;/mark&gt;</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>
sandbox310/dev/docs/elements/tiles.html
+1163
View File
File diff suppressed because it is too large Load Diff
sandbox310/dev/docs/elements/tooltips-popovers.html
+663
View File
@@ -0,0 +1,663 @@
<!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-7 mx-auto">
<h1 class="display-1 mb-3">Tooltips & Popovers</h1>
<p class="lead px-xxl-13">Use Bootstrap <a href="https://getbootstrap.com/docs/5.1/components/tooltips/" class="hover more" target="_blank">Tooltips</a> and <a href="https://getbootstrap.com/docs/5.1/components/popovers/" class="hover more" target="_blank">Popovers</a> with our custom styles to add tooltips and popovers to any element on your website.</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">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" class="active">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">Tooltips</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Popovers</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">Tooltips</h2>
<div class="card">
<div class="card-body">
<a href="#" class="me-5" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</a>
<a href="#" class="me-5" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</a>
<a href="#" class="me-5" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</a>
<div class="mt-5"></div>
<button type="button" class="btn btn-soft-primary rounded-pill me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"> Tooltip on top </button>
<button type="button" class="btn btn-soft-primary rounded-pill me-2" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right"> Tooltip on right </button>
<button type="button" class="btn btn-soft-primary rounded-pill me-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button>
<button type="button" class="btn btn-soft-primary rounded-pill me-2" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left"> Tooltip on left </button>
</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>&lt;a href=&quot;#&quot; data-bs-toggle=&quot;tooltip&quot; data-bs-placement=&quot;top&quot; title=&quot;Tooltip on top&quot;&gt;Tooltip on top&lt;/a&gt;
&lt;a href=&quot;#&quot; data-bs-toggle=&quot;tooltip&quot; data-bs-placement=&quot;right&quot; title=&quot;Tooltip on right&quot;&gt;Tooltip on right&lt;/a&gt;
&lt;a href=&quot;#&quot; data-bs-toggle=&quot;tooltip&quot; data-bs-placement=&quot;bottom&quot; title=&quot;Tooltip on bottom&quot;&gt;Tooltip on bottom&lt;/a&gt;
&lt;a href=&quot;#&quot; data-bs-toggle=&quot;tooltip&quot; data-bs-placement=&quot;left&quot; title=&quot;Tooltip on left&quot;&gt;Tooltip on left&lt;/a&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-soft-primary rounded-pill&quot; data-bs-toggle=&quot;tooltip&quot; data-bs-placement=&quot;top&quot; title=&quot;Tooltip on top&quot;&gt;
Tooltip on top
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-soft-primary rounded-pill&quot; data-bs-toggle=&quot;tooltip&quot; data-bs-placement=&quot;right&quot; title=&quot;Tooltip on right&quot;&gt;
Tooltip on right
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-soft-primary rounded-pill&quot; data-bs-toggle=&quot;tooltip&quot; data-bs-placement=&quot;bottom&quot; title=&quot;Tooltip on bottom&quot;&gt;
Tooltip on bottom
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-soft-primary rounded-pill&quot; data-bs-toggle=&quot;tooltip&quot; data-bs-placement=&quot;left&quot; title=&quot;Tooltip on left&quot;&gt;
Tooltip on left
&lt;/button&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-2" class="wrapper py-16">
<h2 class="mb-5">Popovers</h2>
<div class="card">
<div class="card-body">
<a class="btn btn-primary rounded-pill me-2" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on top </a>
<a class="btn btn-primary rounded-pill me-2" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on right </a>
<a class="btn btn-primary rounded-pill me-2" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on bottom </a>
<a class="btn btn-primary rounded-pill me-2" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on left </a>
</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>&lt;a class=&quot;btn btn-primary rounded-pill&quot; tabindex=&quot;0&quot; data-bs-toggle=&quot;popover&quot; data-bs-trigger=&quot;focus&quot; data-bs-placement=&quot;top&quot; title=&quot;Sample Title&quot; data-bs-content=&quot;Top popover&quot;&gt;
Popover on top
&lt;/a&gt;
&lt;a class=&quot;btn btn-primary rounded-pill&quot; tabindex=&quot;0&quot; data-bs-toggle=&quot;popover&quot; data-bs-trigger=&quot;focus&quot; data-bs-placement=&quot;right&quot; title=&quot;Sample Title&quot; data-bs-content=&quot;Right popover&quot;&gt;
Popover on right
&lt;/a&gt;
&lt;a class=&quot;btn btn-primary rounded-pill&quot; tabindex=&quot;0&quot; data-bs-toggle=&quot;popover&quot; data-bs-trigger=&quot;focus&quot; data-bs-placement=&quot;bottom&quot; title=&quot;Sample Title&quot; data-bs-content=&quot;Bottom popover&quot;&gt;
Popover on bottom
&lt;/a&gt;
&lt;a class=&quot;btn btn-primary rounded-pill&quot; tabindex=&quot;0&quot; data-bs-toggle=&quot;popover&quot; data-bs-trigger=&quot;focus&quot; data-bs-placement=&quot;left&quot; title=&quot;Sample Title&quot; data-bs-content=&quot;Left popover&quot;&gt;
Popover on left
&lt;/a&gt;</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>
sandbox310/dev/docs/elements/typography.html
+955
View File
@@ -0,0 +1,955 @@
<!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">Typography</h1>
<p class="lead">Use our custom typography examples for your headings, titles and other text. For further typography examples please visit <a href="https://getbootstrap.com/docs/5.1/content/typography/" target="_blank" class="hover more">Bootstrap docs</a></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">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" class="active">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">Headings</a></li>
<li><a class="nav-link scroll" href="#snippet-2">Display Headings</a></li>
<li><a class="nav-link scroll" href="#snippet-3">Tiny Headings</a></li>
<li><a class="nav-link scroll" href="#snippet-4">Lead</a></li>
<li><a class="nav-link scroll" href="#snippet-5">Lists</a></li>
<li><a class="nav-link scroll" href="#snippet-6">Blockquote</a></li>
<li><a class="nav-link scroll" href="#snippet-7">Dropcap</a></li>
<li><a class="nav-link scroll" href="#snippet-8">Links</a></li>
</ul>
</nav>
<!-- /nav -->
</div>
<!-- /.widget -->
</aside>
<!-- /column -->
<div class="col-xl-8 order-xl-2">
<section class="wrapper pt-16 mb-n12">
<div class="alert alert-blue alert-icon" role="alert"><i class="uil uil-exclamation-circle" style="margin-top: 4px;"></i> You can apply any Sandbox color you see <a href="../../docs/styleguide/colors.html#snippet-4" class="internal bg-primary text-white">here</a> to your text.</div>
</section>
<section id="snippet-1" class="wrapper pt-16">
<h2 class="mb-5">Headings</h2>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<h1>h1. heading</h1>
<h2>h2. heading</h2>
<h3>h3. heading</h3>
<h4>h4. heading</h4>
<h5>h5. heading</h5>
<h6 class="mb-0">h6. heading</h6>
</div>
<!-- /column -->
<div class="col-lg-6">
<h1 class="text-uppercase">h1. heading</h1>
<h2 class="text-uppercase">h2. heading</h2>
<h3 class="text-uppercase">h3. heading</h3>
<h4 class="text-uppercase">h4. heading</h4>
<h5 class="text-uppercase">h5. heading</h5>
<h6 class="text-uppercase mb-0">h6. heading</h6>
</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-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>&lt;h1&gt;h1. heading&lt;/h1&gt;
&lt;h2&gt;h2. heading&lt;/h2&gt;
&lt;h3&gt;h3. heading&lt;/h3&gt;
&lt;h4&gt;h4. heading&lt;/h4&gt;
&lt;h5&gt;h5. heading&lt;/h5&gt;
&lt;h6&gt;h6. heading&lt;/h6&gt;
&lt;h1 class=&quot;text-uppercase&quot;&gt;h1. heading&lt;/h1&gt;
&lt;h2 class=&quot;text-uppercase&quot;&gt;h2. heading&lt;/h2&gt;
&lt;h3 class=&quot;text-uppercase&quot;&gt;h3. heading&lt;/h3&gt;
&lt;h4 class=&quot;text-uppercase&quot;&gt;h4. heading&lt;/h4&gt;
&lt;h5 class=&quot;text-uppercase&quot;&gt;h5. heading&lt;/h5&gt;
&lt;h6 class=&quot;text-uppercase&quot;&gt;h6. heading&lt;/h6&gt;</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">Display Headings</h2>
<div class="card">
<div class="card-body">
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6 mb-0">Display 6</h1>
</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>&lt;h1 class=&quot;display-1&quot;&gt;Display 1&lt;/h1&gt;
&lt;h1 class=&quot;display-2&quot;&gt;Display 2&lt;/h1&gt;
&lt;h1 class=&quot;display-3&quot;&gt;Display 3&lt;/h1&gt;
&lt;h1 class=&quot;display-4&quot;&gt;Display 4&lt;/h1&gt;
&lt;h1 class=&quot;display-5&quot;&gt;Display 5&lt;/h1&gt;
&lt;h1 class=&quot;display-6&quot;&gt;Display 6&lt;/h1&gt;</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">Tiny Headings</h2>
<div class="card">
<div class="card-body">
<div class="row gy-6">
<div class="col-md-6">
<h2 class="fs-15 text-uppercase text-navy mb-0">Tiny Heading</h2>
</div>
<!--/column -->
<div class="col-md-6">
<h2 class="fs-15 text-uppercase text-line text-navy mb-0">Tiny Heading with Line</h2>
</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>&lt;h2 class=&quot;fs-15 text-uppercase text-navy&quot;&gt;Tiny heading&lt;/h2&gt;
&lt;h2 class=&quot;fs-15 text-uppercase text-line text-navy&quot;&gt;Tiny heading with line&lt;/h2&gt;</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">Lead</h2>
<div class="card">
<div class="card-body">
<p class="lead">Lead</p>
<p class="lead fs-lg mb-0">Lead Larger</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>&lt;p class=&quot;lead&quot;&gt;Lead&lt;/p&gt;
&lt;p class=&quot;lead fs-lg&quot;&gt;Lead Larger&lt;/p&gt;</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">Lists</h2>
<div class="card">
<div class="card-body">
<div class="row gy-6">
<div class="col-lg-4">
<ul class="unordered-list bullet-primary mb-0">
<li>Aenean eu leo quam.</li>
<li>Nullam quis risus eget.</li>
<li>Donec id elit non mi porta.</li>
<li>Fusce dapibus cursus.</li>
</ul>
</div>
<!-- /column -->
<div class="col-lg-4">
<ul class="icon-list bullet-primary mb-0">
<li><span><i class="uil uil-arrow-right"></i></span><span>Aenean eu leo quam.</span></li>
<li><span><i class="uil uil-arrow-right"></i></span><span>Nullam quis risus eget.</span></li>
<li><span><i class="uil uil-arrow-right"></i></span><span>Donec id elit non mi porta.</span></li>
<li><span><i class="uil uil-arrow-right"></i></span><span>Fusce dapibus cursus.</span></li>
</ul>
</div>
<!-- /column -->
<div class="col-lg-4">
<ul class="icon-list bullet-bg bullet-soft-green mb-0">
<li><span><i class="uil uil-check"></i></span><span>Aenean eu leo quam.</span></li>
<li><span><i class="uil uil-check"></i></span><span>Nullam quis risus eget.</span></li>
<li><span><i class="uil uil-check"></i></span><span>Donec id elit non mi porta.</span></li>
<li><span><i class="uil uil-check"></i></span><span>Fusce dapibus cursus.</span></li>
</ul>
</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-5">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-5" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;ul class=&quot;unordered-list bullet-primary&quot;&gt;
&lt;li&gt;List item.&lt;/li&gt;
&lt;li&gt;List item.&lt;/li&gt;
&lt;li&gt;List item.&lt;/li&gt;
&lt;li&gt;List item.&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class=&quot;icon-list bullet-primary&quot;&gt;
&lt;li&gt;&lt;span&gt;&lt;i class=&quot;uil uil-arrow-right&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;List item.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;i class=&quot;uil uil-arrow-right&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;List item.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;i class=&quot;uil uil-arrow-right&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;List item.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;i class=&quot;uil uil-arrow-right&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;List item.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class=&quot;icon-list bullet-bg bullet-soft-green&quot;&gt;
&lt;li&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;List item.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;List item.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;List item.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;List item.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-6" class="wrapper pt-16">
<h2 class="mb-5">Blockquote</h2>
<div class="card">
<div class="card-body">
<div class="row gy-4 gy-md-0 align-items-center">
<div class="col-md-6">
<figure>
<blockquote class="fs-lg">
<p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula lacinia odio.</p>
</blockquote>
<figcaption class="blockquote-footer">Connor Gibson</figcaption>
</figure>
</div>
<!-- /column -->
<div class="col-md-6">
<div class="card mb-0">
<div class="card-body">
<figure class="mb-0">
<blockquote class="icon fs-lg">
<p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0">Connor Gibson</figcaption>
</figure>
</div>
<!--/.card-body -->
</div>
<!-- /.card -->
</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-6">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-6" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;figure&gt;
&lt;blockquote class=&quot;fs-lg&quot;&gt;
&lt;p&gt;Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula lacinia odio.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;figcaption class=&quot;blockquote-footer&quot;&gt;Connor Gibson&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;div class=&quot;card mb-0&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;
&lt;figure class=&quot; mb-0&quot;&gt;
&lt;blockquote class=&quot;icon fs-lg&quot;&gt;
&lt;p&gt;Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;figcaption class=&quot;blockquote-footer mb-0&quot;&gt;Connor Gibson&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!-- /.card --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-7" class="wrapper pt-16">
<h2 class="mb-5">Dropcap</h2>
<div class="card">
<div class="card-body">
<div class="row gx-lg-8 gx-xl-12">
<div class="col-md-4">
<p><span class="dropcap text-dark">A</span>enean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.</p>
</div>
<!-- /column -->
<div class="col-md-4">
<p><span class="dropcap text-primary">A</span>enean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.</p>
</div>
<!-- /column -->
<div class="col-md-4">
<p><span class="dropcap rounded-circle text-primary bg-pale-primary">A</span>enean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.</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-7">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-7" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;span class=&quot;dropcap text-dark&quot;&gt;A&lt;/span&gt;
&lt;span class=&quot;dropcap text-primary&quot;&gt;A&lt;/span&gt;
&lt;span class=&quot;dropcap rounded-circle text-primary bg-pale-primary&quot;&gt;A&lt;/span&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</section>
<section id="snippet-8" class="wrapper py-16">
<h2 class="mb-3">Links</h2>
<p class="lead">Available options:</p>
<p class="lead mb-8"><code class="code">link-body</code>, <code class="code">link-aqua</code>, <code class="code">link-green</code>, <code class="code">link-leaf</code>, <code class="code">link-navy</code>, <code class="code">link-orange</code>, <code class="code">link-pink</code>, <code class="code">link-purple</code>, <code class="code">link-red</code>, <code class="code">link-violet</code>, <code class="code">link-yellow</code>, <code class="code">link-fuchsia</code>, <code class="code">link-sky</code>, <code class="code">link-grape</code>.</p>
<div class="card">
<div class="card-body">
<a href="#" class="hover link-body me-4 ms-1 mb-5">Link example</a>
<a href="#" class="hover me-4 mb-5">Link example</a>
<a href="#" class="hover more me-4 mb-5">Link example</a>
<br>
<a href="#" class="hover-2 link-body me-4 mb-5">Link example</a>
<a href="#" class="hover-2 me-4 mb-5">Link example</a>
<a href="#" class="hover-2 more me-4 mb-5">Link example</a>
<br>
<a href="#" class="hover-3 link-body me-4">Link example</a>
<a href="#" class="hover-3 me-4">Link example</a>
<a href="#" class="hover-3 more me-4">Link example</a>
</div>
<!--/.card-body -->
<div class="card-footer position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-8">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-8" class="card-footer bg-dark p-0 accordion-collapse collapse">
<div class="code-wrapper">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;hover link-body&quot;&gt;Link example&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;hover&quot;&gt;Link example&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;hover more&quot;&gt;Link example&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;hover-2 link-body&quot;&gt;Link example&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;hover-2&quot;&gt;Link example&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;hover-2 more&quot;&gt;Link example&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;hover-3 link-body&quot;&gt;Link example&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;hover-3&quot;&gt;Link example&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;hover-3 more&quot;&gt;Link example&lt;/a&gt;</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>