Chiefsoft/WrenchCoinWebsite
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Files
8c711e77bb0756a840cf09772f9f16e04db311fc
WrenchCoinWebsite/sandbox310/dev/index.html
T
dev-chiefworks b085356c99 first commit
2022-09-25 15:25:10 -04:00

1539 lines
98 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
<meta name="author" content="elemis">
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
<link rel="shortcut icon" href="./assets/img/favicon.png">
<link rel="stylesheet" href="./assets/css/plugins.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/colors/purple.css">
<link rel="preload" href="./assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
</head>
<body>
<div class="content-wrapper">
<header class="wrapper bg-soft-primary">
<div class="alert bg-primary text-white fade show rounded-0 mb-0 text-center" role="alert">
<div class="container">
<div class="alert-inner p-0">
<span class="badge badge-lg bg-white text-primary text-uppercase rounded me-2">Update 3.1.0</span>Now with Shop pages!
</div>
<!-- /.alert-inner -->
</div>
<!-- /.container -->
</div>
<!-- /.alert -->
<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-purple.png" srcset="./assets/img/logo-purple@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 d-none d-md-block">
<a href="https://1.envato.market/NKGrx2" class="btn btn-primary rounded-pill" target="_blank">Purchase Now</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-gradient-primary">
<div class="container pt-10 pt-md-14">
<div class="row gx-2 gy-10 align-items-center">
<div class="col-md-10 offset-md-1 offset-lg-0 col-lg-5 text-center text-lg-start order-2 order-lg-0" data-cues="slideInDown" data-group="page-title" data-delay="600">
<h1 class="display-1 mb-5 mx-md-10 mx-lg-0">Create a powerful but effortless website for <br /><span class="typer text-primary text-nowrap" data-delay="100" data-words="your business.,your portfolio.,your startup.,digital marketing."></span><span class="cursor text-primary" data-owner="typer"></span></h1>
<p class="lead fs-23 mb-7">Build your website in minutes with the help of countless amazing features of Sandbox.</p>
<div class="d-flex justify-content-center justify-content-lg-start mb-4" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
<span><a class="btn btn-lg btn-primary rounded-pill me-2 scroll" href="#demos">Check Demos</a></span>
</div>
</div>
<!-- /column -->
<div class="col-lg-6 ms-auto position-relative">
<div class="row g-4">
<div class="col-4 d-flex flex-column ms-auto" data-cues="fadeIn" data-group="col-start" data-delay="900">
<div class="ms-auto mt-6"><img class="img-fluid rounded shadow-lg" src="./assets/img/demos/vc1.jpg" srcset="./assets/img/demos/vc1@2x.jpg 2x" alt="" /></div>
<div class="ms-auto mt-4"><img class="img-fluid rounded shadow-lg" src="./assets/img/demos/vc2.jpg" srcset="./assets/img/demos/vc2@2x.jpg 2x" alt="" /></div>
<div class="ms-auto mt-4"><img class="img-fluid rounded shadow-lg" src="./assets/img/demos/vc3.jpg" srcset="./assets/img/demos/vc3@2x.jpg 2x" alt="" /></div>
</div>
<!-- /column -->
<div class="col-4" data-cues="fadeIn" data-group="col-middle">
<div><img class="w-100 img-fluid rounded shadow-lg" src="./assets/img/demos/vc4.jpg" srcset="./assets/img/demos/vc4@2x.jpg 2x" alt="" /></div>
<div><img class="w-100 img-fluid rounded shadow-lg mt-4" src="./assets/img/demos/vc5.jpg" srcset="./assets/img/demos/vc5@2x.jpg 2x" alt="" /></div>
<div><img class="w-100 img-fluid rounded shadow-lg mt-4" src="./assets/img/demos/vc6.jpg" srcset="./assets/img/demos/vc6@2x.jpg 2x" alt="" /></div>
</div>
<!-- /column -->
<div class="col-4 d-flex flex-column" data-cues="fadeIn" data-group="col-end" data-delay="900">
<div class="mt-8"><img class="img-fluid rounded shadow-lg" src="./assets/img/demos/vc7.jpg" srcset="./assets/img/demos/vc7@2x.jpg 2x" alt="" /></div>
<div class="mt-4 mb-10"><img class="img-fluid rounded shadow-lg" src="./assets/img/demos/vc8.jpg" srcset="./assets/img/demos/vc8@2x.jpg 2x" alt="" /></div>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="position-relative mt-n20 mb-20" data-cue="fadeIn" data-delay="1800">
<div class="btn btn-circle btn-fuchsia disabled ripple position-absolute counter-wrapper flex-column d-none d-md-flex" style="bottom: 0; right: -8%; width: 120px; height: 120px;">
<h3 class="fs-26 text-white mt-n1 mb-0">NO</h3>
<p>jQuery</p>
</div>
</div>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light" id="demos">
<div class="container py-14 py-md-18 pb-md-19">
<div class="row mb-10">
<div class="col-md-9 col-lg-7 col-xl-6 col-xxl-5 mx-auto">
<div class="counter-wrapper">
<h3 class="fs-70 mb-3 text-primary text-center counter">21</h3>
</div>
<h2 class="display-3 mb-3 text-center mb-0">Functional, impressive and rich demos to start with</h2>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="demos-wrapper">
<h2 class="fs-16 text-uppercase text-muted mb-6 text-center">New Demos</h2>
<div class="demo mb-10">
<div class="card bg-soft-grape">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-grape mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo18.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d18-1.jpg" srcset="./assets/img/demos/d18-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-grape" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo18.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d18-2.jpg" srcset="./assets/img/demos/d18-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout XVIII</h2>
<ul class="icon-list bullet-grape row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Network, Marketing</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>SVG icons</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>3D illustrations</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Gradient image</span></li>
</ul>
<a href="./demo18.html" target="_blank" class="btn btn-sm btn-grape rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-fuchsia">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-fuchsia mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo19.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d19-1.jpg" srcset="./assets/img/demos/d19-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-fuchsia" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo19.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d19-2.jpg" srcset="./assets/img/demos/d19-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout XIX</h2>
<ul class="icon-list bullet-fuchsia row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Agency, Startup</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Gradient image</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>SVG icons</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Colorful design</span></li>
</ul>
<a href="./demo19.html" target="_blank" class="btn btn-sm btn-fuchsia rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-purple">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-purple mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo20.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d20-1.jpg" srcset="./assets/img/demos/d20-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-purple" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo20.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d20-2.jpg" srcset="./assets/img/demos/d20-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout XX</h2>
<ul class="icon-list bullet-purple row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Agency, Startup</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Framed layout</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Illustrations</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Video background</span></li>
</ul>
<a href="./demo20.html" target="_blank" class="btn btn-sm btn-purple rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-sky">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-sky mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo21.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d21-1.jpg" srcset="./assets/img/demos/d21-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-sky" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo21.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d21-2.jpg" srcset="./assets/img/demos/d21-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout XXI</h2>
<ul class="icon-list bullet-sky row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Studio, Startup</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Illustrations</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Wave dividers</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Colorful design</span></li>
</ul>
<a href="./demo21.html" target="_blank" class="btn btn-sm btn-sky rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<h2 class="fs-16 text-uppercase text-muted pt-8 mb-6 text-center">Previous Demos</h2>
<div class="demo mb-10">
<div class="card bg-soft-yellow">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-yellow mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo1.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d1-1.jpg" srcset="./assets/img/demos/d1-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-yellow" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo1.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d1-2.jpg" srcset="./assets/img/demos/d1-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout I</h2>
<ul class="icon-list bullet-yellow row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>SEO, Marketing</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Colorful design</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Illustrations</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Pricing table</span></li>
</ul>
<a href="./demo1.html" target="_blank" class="btn btn-sm btn-yellow rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-blue">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-blue mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo2.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d2-1.jpg" srcset="./assets/img/demos/d2-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-blue" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo2.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d2-2.jpg" srcset="./assets/img/demos/d2-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout II</h2>
<ul class="icon-list bullet-blue row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Business, Marketing</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Serif headings</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Solid colors</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Video lightbox</span></li>
</ul>
<a href="./demo2.html" target="_blank" class="btn btn-sm btn-blue rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-aqua">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-aqua mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo3.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d3-1.jpg" srcset="./assets/img/demos/d3-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-aqua" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo3.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d3-2.jpg" srcset="./assets/img/demos/d3-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout III</h2>
<ul class="icon-list bullet-aqua row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Service, Marketing</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Angled sections</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Soft colors</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Animations</span></li>
</ul>
<a href="./demo3.html" target="_blank" class="btn btn-sm btn-aqua rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-violet">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-violet mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo4.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d4-1.jpg" srcset="./assets/img/demos/d4-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-violet" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo4.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d4-2.jpg" srcset="./assets/img/demos/d4-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout IV</h2>
<ul class="icon-list bullet-violet row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Corporate, Startup</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Serif headings</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Tiled images</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Video lightbox</span></li>
</ul>
<a href="./demo4.html" target="_blank" class="btn btn-sm btn-violet rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-blue">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-blue mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo5.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d5-1.jpg" srcset="./assets/img/demos/d5-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-blue" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo5.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d5-2.jpg" srcset="./assets/img/demos/d5-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout V</h2>
<ul class="icon-list bullet-blue row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>SaaS, Software</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Tiled images</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Animations</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Pricing table</span></li>
</ul>
<a href="./demo5.html" target="_blank" class="btn btn-sm btn-blue rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-aqua">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-aqua mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo6.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d6-1.jpg" srcset="./assets/img/demos/d6-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-aqua" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo6.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d6-2.jpg" srcset="./assets/img/demos/d6-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout VI</h2>
<ul class="icon-list bullet-aqua row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Landing, Product</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>SVG icons</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Animations</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Soft colors</span></li>
</ul>
<a href="./demo6.html" target="_blank" class="btn btn-sm btn-aqua rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-purple">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-purple mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo7.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d7-1.jpg" srcset="./assets/img/demos/d7-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-purple" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo7.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d7-2.jpg" srcset="./assets/img/demos/d7-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout VII</h2>
<ul class="icon-list bullet-purple row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Agency, Startup</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Illustrations</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Soft colors</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Project display</span></li>
</ul>
<a href="./demo7.html" target="_blank" class="btn btn-sm btn-purple rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-aqua">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-aqua mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo8.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d8-1.jpg" srcset="./assets/img/demos/d8-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-aqua" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo8.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d8-2.jpg" srcset="./assets/img/demos/d8-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout VIII</h2>
<ul class="icon-list bullet-aqua row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Corporate, Business</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Animated header</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>SVG icons</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Soft colors</span></li>
</ul>
<a href="./demo8.html" target="_blank" class="btn btn-sm btn-aqua rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-blue">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-blue mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo9.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d9-1.jpg" srcset="./assets/img/demos/d9-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-blue" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo9.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d9-2.jpg" srcset="./assets/img/demos/d9-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout IX</h2>
<ul class="icon-list bullet-blue row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>SaaS, Software</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>SVG icons</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Serif headings</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Testimonials</span></li>
</ul>
<a href="./demo9.html" target="_blank" class="btn btn-sm btn-blue rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-orange">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-orange mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo10.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d10-1.jpg" srcset="./assets/img/demos/d10-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-orange" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo10.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d10-2.jpg" srcset="./assets/img/demos/d10-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout X</h2>
<ul class="icon-list bullet-orange row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Business, Marketing</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Animations</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Simple testimonials</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Tiled images</span></li>
</ul>
<a href="./demo10.html" target="_blank" class="btn btn-sm btn-orange rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-purple">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-purple mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo11.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d11-1.jpg" srcset="./assets/img/demos/d11-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-purple" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo11.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d11-2.jpg" srcset="./assets/img/demos/d11-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout XI</h2>
<ul class="icon-list bullet-purple row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Marketing, Service</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Animated header</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Tiled images</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Soft colors</span></li>
</ul>
<a href="./demo11.html" target="_blank" class="btn btn-sm btn-purple rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-orange">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-orange mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo12.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d12-1.jpg" srcset="./assets/img/demos/d12-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-orange" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo12.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d12-2.jpg" srcset="./assets/img/demos/d12-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout XII</h2>
<ul class="icon-list bullet-orange row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Agency, Studio</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>SVG icons</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Masonry portfolio</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Soft colors</span></li>
</ul>
<a href="./demo12.html" target="_blank" class="btn btn-sm btn-orange rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-purple">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-purple mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo13.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d13-1.jpg" srcset="./assets/img/demos/d13-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-purple" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo13.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d13-2.jpg" srcset="./assets/img/demos/d13-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout XIII</h2>
<ul class="icon-list bullet-purple row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Agency, Startup</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Animations</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Parallax testimonials</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Angled sections</span></li>
</ul>
<a href="./demo13.html" target="_blank" class="btn btn-sm btn-purple rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-violet">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-violet mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo14.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d14-1.jpg" srcset="./assets/img/demos/d14-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-violet" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo14.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d14-2.jpg" srcset="./assets/img/demos/d14-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout XIV</h2>
<ul class="icon-list bullet-violet row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Startup, Creative</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Image section</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Background shapes</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Detailed footer</span></li>
</ul>
<a href="./demo14.html" target="_blank" class="btn btn-sm btn-violet rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-blue">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-blue mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo15.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d15-1.jpg" srcset="./assets/img/demos/d15-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-blue" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo15.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d15-2.jpg" srcset="./assets/img/demos/d15-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout XV</h2>
<ul class="icon-list bullet-blue row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Business, Service</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Video lightbox</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Background shapes</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Newsletter</span></li>
</ul>
<a href="./demo15.html" target="_blank" class="btn btn-sm btn-blue rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="demo mb-10">
<div class="card bg-soft-pink">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-pink mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo16.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d16-1.jpg" srcset="./assets/img/demos/d16-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-pink" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo16.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d16-2.jpg" srcset="./assets/img/demos/d16-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout XVI</h2>
<ul class="icon-list bullet-pink row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Personal, Portfolio</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Shape mask</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Detailed portfolio</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Contact form</span></li>
</ul>
<a href="./demo16.html" target="_blank" class="btn btn-sm btn-pink rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
<div class="project">
<div class="card bg-soft-navy">
<div class="card-body px-4 px-md-8 ps-xl-12 py-0 overflow-hidden">
<div class="row gx-md-8 gx-xl-12 d-flex align-items-center">
<div class="col-lg-7">
<div class="row gx-4 gx-md-7">
<div class="col-6">
<figure class="itooltip itooltip-navy mt-9" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo17.html" target="_blank"><img class="shadow-lg rounded-top" src="./assets/img/demos/d17-1.jpg" srcset="./assets/img/demos/d17-1@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure class="itooltip itooltip-navy" title='<h5 class="mb-0">Click to see the demo</h5>'><a href="./demo17.html" target="_blank"><img class="shadow-lg rounded-bottom" src="./assets/img/demos/d17-2.jpg" srcset="./assets/img/demos/d17-2@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /column -->
<div class="col-lg-5 d-none d-lg-block">
<h2 class="post-title fs-30 mb-4">Demo Layout XVII</h2>
<ul class="icon-list bullet-navy row ms-0 gy-2">
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Business, Corporate</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Soft colors</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Animated header</span></li>
<li class="col-md-6"><span><i class="uil uil-check"></i></span><span>Content in box</span></li>
</ul>
<a href="./demo17.html" target="_blank" class="btn btn-sm btn-navy rounded-pill mt-1">See Demo</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.project -->
</div>
<!-- /.demos-wrapper -->
</div>
<!-- /.container -->
<div class="overflow-hidden">
<div class="divider text-soft-primary 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>
<!-- /.overflow-hidden -->
</section>
<!-- /section -->
<section class="wrapper bg-gradient-primary">
<div class="container pt-7 pt-md-10 pb-14 pb-md-17">
<div class="row mb-8 text-center">
<div class="col-md-11 col-lg-10 col-xl-8 col-xxl-7 mx-auto">
<img src="./assets/img/demos/icon.png" srcset="./assets/img/demos/icon@2x.png 2x" alt="" />
<h2 class="display-3 mt-3 mb-3 mb-0 px-lg-10 px-xl-0">Save your time and money by choosing Sandbox for your website.</h2>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-xl-8 col-xxl-7 mx-auto">
<div class="row align-items-center counter-wrapper gy-6 text-center">
<div class="col-md-4">
<h3 class="counter fs-50 text-primary mb-1">250+</h3>
<p class="fs-18 mb-0">UI elements</p>
</div>
<!--/column -->
<div class="col-md-4">
<h3 class="counter fs-50 text-primary mb-1">130+</h3>
<p class="fs-18 mb-0">Pre-made blocks</p>
</div>
<!--/column -->
<div class="col-md-4">
<h3 class="counter fs-50 text-primary mb-1">100+</h3>
<p class="fs-18 mb-0">Neatly coded pages</p>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light">
<div class="container pb-11 pb-md-14">
<div class="row gx-lg-8 gx-xl-0 gy-10 align-items-center mb-14 mb-md-16">
<div class="col-lg-6 position-relative">
<div class="shape rounded bg-soft-primary rellax d-block" data-rellax-speed="0" style="top: 50%; left: 50%; width: 50%; height: 60%; transform: translate(-50%,-50%);z-index:0"></div>
<div class="row gx-md-5 gy-5 position-relative">
<div class="col-6">
<img class="img-fluid rounded shadow-lg mb-5" data-cue="fadeIn" data-delay="300" src="./assets/img/demos/fe1.jpg" srcset="./assets/img/demos/fe1@2x.jpg 2x" alt="" />
<img class="img-fluid rounded shadow-lg d-flex col-10 ms-auto" data-cue="fadeIn" data-delay="600" src="./assets/img/demos/fe2.jpg" srcset="./assets/img/demos/fe2@2x.jpg 2x" alt="" />
</div>
<!-- /column -->
<div class="col-6">
<img class="img-fluid rounded shadow-lg my-5" data-cue="fadeIn" data-delay="900" src="./assets/img/demos/fe3.jpg" srcset="./assets/img/demos/fe3@2x.jpg 2x" alt="" />
<img class="img-fluid rounded shadow-lg d-flex col-10" data-cue="fadeIn" data-delay="1200" src="./assets/img/demos/fe4.jpg" srcset="./assets/img/demos/fe4@2x.jpg 2x" alt="" />
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/column -->
<div class="col-lg-6 col-xl-5 col-xxl-4 offset-xl-1" data-cues="slideInRight" data-delay="1500" data-group="features-1">
<div class="d-flex flex-row mb-7">
<div>
<div class="icon btn btn-circle disabled btn-soft-primary mt-1 me-4"> <i class="uil uil-images"></i> </div>
</div>
<div>
<h4 class="mb-1">Modern Portfolio Layouts</h4>
<p class="mb-0">Build and manage an eye-catching and impressive portfolio fast and without effort.</p>
</div>
</div>
<div class="d-flex flex-row mb-7">
<div>
<div class="icon btn btn-circle disabled btn-soft-primary mt-1 me-4"> <i class="uil uil-calendar-alt"></i> </div>
</div>
<div>
<h4 class="mb-1">Useful Blog Layouts</h4>
<p class="mb-0">Create an attractive and stunning journal to tell the world your wonderful stories.</p>
</div>
</div>
<div class="d-flex flex-row">
<div>
<div class="icon btn btn-circle disabled btn-soft-primary mt-1 me-4"> <i class="uil uil-star"></i> </div>
</div>
<div>
<h4 class="mb-1">Cool Features & Elements</h4>
<p class="mb-0">Sandbox includes amazing features and elements to create rich and attractive pages.</p>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row gx-lg-8 gx-xl-0 gy-10 align-items-center mb-16 mb-md-22">
<div class="col-lg-6 offset-xl-1 position-relative order-lg-2">
<div class="shape rounded bg-soft-primary rellax d-block" data-rellax-speed="0" style="top: 50%; left: 50%; width: 50%; height: 60%; transform: translate(-50%,-50%);z-index:0"></div>
<div class="row gx-md-5 gy-5 position-relative">
<div class="col-5">
<img class="img-fluid rounded shadow-lg my-5 d-flex ms-auto" data-cue="fadeIn" data-delay="300" src="./assets/img/demos/fe5.jpg" srcset="./assets/img/demos/fe5@2x.jpg 2x" alt="" />
<img class="img-fluid rounded shadow-lg d-flex col-10 ms-auto" data-cue="fadeIn" data-delay="600" src="./assets/img/demos/fe6.jpg" srcset="./assets/img/demos/fe6@2x.jpg 2x" alt="" />
</div>
<!-- /column -->
<div class="col-7">
<img class="img-fluid rounded shadow-lg mb-5" data-cue="fadeIn" data-delay="900" src="./assets/img/demos/fe7.jpg" srcset="./assets/img/demos/fe7@2x.jpg 2x" alt="" />
<img class="img-fluid rounded shadow-lg d-flex col-11" data-cue="fadeIn" data-delay="1200" src="./assets/img/demos/fe8.jpg" srcset="./assets/img/demos/fe8@2x.jpg 2x" alt="" />
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/column -->
<div class="col-lg-6 col-xl-5 col-xxl-4 offset-xxl-1" data-cues="slideInLeft" data-delay="1500" data-group="features-2">
<div class="d-flex flex-row mb-7">
<div>
<div class="icon btn btn-circle disabled btn-soft-primary mt-1 me-4"> <i class="uil uil-web-grid-alt"></i> </div>
</div>
<div>
<h4 class="mb-1">13 Headers & 5 Footers</h4>
<p class="mb-0">Choose from various gorgeous header and footer styles to serve you best for your needs.</p>
</div>
</div>
<div class="d-flex flex-row mb-7">
<div>
<div class="icon btn btn-circle disabled btn-soft-primary mt-1 me-4"> <i class="uil uil-palette"></i> </div>
</div>
<div>
<h4 class="mb-1">Color & Font Options</h4>
<p class="mb-0">You can either use the included color and fonts or easily add your own choices.</p>
</div>
</div>
<div class="d-flex flex-row">
<div>
<div class="icon btn btn-circle disabled btn-soft-primary mt-1 me-4"> <i class="uil uil-tablet"></i> </div>
</div>
<div>
<h4 class="mb-1">Fully Responsive Layout</h4>
<p class="mb-0">Sandbox adapts to different screen sizes therefore it is compatible with any device.</p>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="overflow-hidden">
<div class="divider text-soft-primary 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>
<!-- /.overflow-hidden -->
</section>
<!-- /section -->
<section class="wrapper bg-gradient-primary">
<div class="container pb-14 pb-md-16">
<div class="row gx-0 mb-14 mb-md-16">
<div class="col-9 col-sm-10 col-lg-9 mx-auto mt-n15 mt-md-n23" data-cues data-group="images">
<img class="img-fluid mx-auto rounded shadow-lg" data-cue="fadeIn" src="./assets/img/demos/de1.jpg" srcset="./assets/img/demos/de1@2x.jpg 2x" alt="" />
<img class="position-absolute rounded shadow-lg" data-cue="slideInRight" src="./assets/img/demos/de2.jpg" srcset="./assets/img/demos/de2@2x.jpg 2x" style="top: 25%; right:-12%; max-width:30%; height: auto;" alt="" />
<img class="position-absolute rounded shadow-lg" data-cue="slideInLeft" src="./assets/img/demos/de3.jpg" srcset="./assets/img/demos/de3@2x.jpg 2x" style="top: 15%; left:-15%; max-width:30%; height: auto;" alt="" />
<img class="position-absolute rounded shadow-lg" data-cue="slideInLeft" src="./assets/img/demos/de4.jpg" srcset="./assets/img/demos/de4@2x.jpg 2x" style="bottom: 15%; left:-13%; max-width:30%; height: auto;" alt="" />
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-5 gx-md-8 gy-10 text-center justify-content-center" data-cues="slideInDown" data-group="features-3">
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi1.png" srcset="./assets/img/demos/fi1@2x.png 2x" alt="" />
<h4>Built with Sass <br> & Bootstrap 5</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi2.png" srcset="./assets/img/demos/fi2@2x.png 2x" alt="" />
<h4>SEO-friendly <br> Coding</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi3.png" srcset="./assets/img/demos/fi3@2x.png 2x" alt="" />
<h4>Valid W3C <br> HTML5 & CSS3</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi4.png" srcset="./assets/img/demos/fi4@2x.png 2x" alt="" />
<h4>Retina-ready <br> Graphics</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi5.png" srcset="./assets/img/demos/fi5@2x.png 2x" alt="" />
<h4>One-page <br> Layout Option</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi6.png" srcset="./assets/img/demos/fi6@2x.png 2x" alt="" />
<h4>Isotope <br> Filterable Gallery</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi7.png" srcset="./assets/img/demos/fi7@2x.png 2x" alt="" />
<h4>Mailchimp <br> Compatible </h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi8.png" srcset="./assets/img/demos/fi8@2x.png 2x" alt="" />
<h4>Contact Form <br> w/o Page Refresh</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi9.png" srcset="./assets/img/demos/fi9@2x.png 2x" alt="" />
<h4>Animations <br> on Page Scroll</h4>
</div>
<!--/column -->
<div class="col">
<img class="mb-4" src="./assets/img/demos/fi10.png" srcset="./assets/img/demos/fi10@2x.png 2x" alt="" />
<h4>Top-Notch Support <br> & Free Updates</h4>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-gradient-reverse-primary">
<div class="container pt-xl-10 text-center">
<div class="row">
<div class="col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
<img src="./assets/img/demos/icon.png" srcset="./assets/img/demos/icon@2x.png 2x" alt="" />
<h2 class="display-3 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-primary 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" data-cue="fadeIn" alt="" />
</div>
<!-- /.container -->
</section>
<!-- /section -->
</div>
<!-- /.content-wrapper -->
<div class="progress-wrap">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="./assets/js/plugins.js"></script>
<script src="./assets/js/theme.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink