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

1593 lines
94 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">
</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">Blocks - About</h1>
<p class="lead px-xxl-10">Copy any custom block snippet below and paste it on your page to build your website easily.</p>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper bg-light wrapper-border">
<div class="container py-11">
<h2 class="h5">Filter Blocks:</h2>
<ul class="list-inline mb-0">
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/about.html" class="btn btn-soft-ash btn-sm rounded text-primary pe-none">About</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/blog.html" class="btn btn-soft-ash btn-sm rounded ">Blog</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/call-to-action.html" class="btn btn-soft-ash btn-sm rounded ">Call to Action</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/clients.html" class="btn btn-soft-ash btn-sm rounded ">Clients</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/contact.html" class="btn btn-soft-ash btn-sm rounded ">Contact</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/facts.html" class="btn btn-soft-ash btn-sm rounded ">Facts</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/faq.html" class="btn btn-soft-ash btn-sm rounded ">FAQ</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/features.html" class="btn btn-soft-ash btn-sm rounded ">Features</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/footer.html" class="btn btn-soft-ash btn-sm rounded ">Footer</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/hero.html" class="btn btn-soft-ash btn-sm rounded ">Hero</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/misc.html" class="btn btn-soft-ash btn-sm rounded ">Misc</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/navbar.html" class="btn btn-soft-ash btn-sm rounded ">Navbar</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/portfolio.html" class="btn btn-soft-ash btn-sm rounded ">Portfolio</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/pricing.html" class="btn btn-soft-ash btn-sm rounded ">Pricing</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/process.html" class="btn btn-soft-ash btn-sm rounded ">Process</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/team.html" class="btn btn-soft-ash btn-sm rounded ">Team</a></li>
<li class="list-inline-item me-1 mb-2"><a href="../../docs/blocks/testimonials.html" class="btn btn-soft-ash btn-sm rounded ">Testimonials</a></li>
</ul>
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-1" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-md-8 col-lg-6 col-xl-5 order-lg-2 position-relative">
<div class="shape bg-soft-primary rounded-circle rellax w-20 h-20" data-rellax-speed="1" style="top: -2rem; right: -1.9rem;"></div>
<figure class="rounded"><img src="../../assets/img/photos/about7.jpg" srcset="../../assets/img/photos/about7@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-lg-6">
<h2 class="display-4 mb-3">Who Are We?</h2>
<p class="lead fs-lg">We are a digital and branding company that believes in the power of creative strategy and along with great design.</p>
<p class="mb-6">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<div class="row gx-xl-10 gy-6">
<div class="col-md-6">
<div class="d-flex flex-row">
<div>
<img src="../../assets/img/icons/lineal/target.svg" class="svg-inject icon-svg icon-svg-sm me-4" alt="" />
</div>
<div>
<h4 class="mb-1">Our Mission</h4>
<p class="mb-0">Dapibus eu leo quam ornare curabitur blandit tempus.</p>
</div>
</div>
</div>
<!--/column -->
<div class="col-md-6">
<div class="d-flex flex-row">
<div>
<img src="../../assets/img/icons/lineal/award-2.svg" class="svg-inject icon-svg icon-svg-sm me-4" alt="" />
</div>
<div>
<h4 class="mb-1">Our Values</h4>
<p class="mb-0">Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-1">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-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-light&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-10 align-items-center&quot;&gt;
&lt;div class=&quot;col-md-8 col-lg-6 col-xl-5 order-lg-2 position-relative&quot;&gt;
&lt;div class=&quot;shape bg-soft-primary rounded-circle rellax w-20 h-20&quot; data-rellax-speed=&quot;1&quot; style=&quot;top: -2rem; right: -1.9rem;&quot;&gt;&lt;/div&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/about7.jpg&quot; srcset=&quot;./assets/img/photos/about7@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;h2 class=&quot;display-4 mb-3&quot;&gt;Who Are We?&lt;/h2&gt;
&lt;p class=&quot;lead fs-lg&quot;&gt;We are a digital and branding company that believes in the power of creative strategy and along with great design.&lt;/p&gt;
&lt;p class=&quot;mb-6&quot;&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.&lt;/p&gt;
&lt;div class=&quot;row gx-xl-10 gy-6&quot;&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;div class=&quot;d-flex flex-row&quot;&gt;
&lt;div&gt;
&lt;img src=&quot;./assets/img/icons/lineal/target.svg&quot; class=&quot;svg-inject icon-svg icon-svg-sm me-4&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h4 class=&quot;mb-1&quot;&gt;Our Mission&lt;/h4&gt;
&lt;p class=&quot;mb-0&quot;&gt;Dapibus eu leo quam ornare curabitur blandit tempus.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;div class=&quot;d-flex flex-row&quot;&gt;
&lt;div&gt;
&lt;img src=&quot;./assets/img/icons/lineal/award-2.svg&quot; class=&quot;svg-inject icon-svg icon-svg-sm me-4&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h4 class=&quot;mb-1&quot;&gt;Our Values&lt;/h4&gt;
&lt;p class=&quot;mb-0&quot;&gt;Aenean lacinia bibendum nulla sed consectetur.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-2" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gx-lg-8 gx-xl-12 gy-12 align-items-center">
<div class="col-lg-6 position-relative">
<div class="btn btn-circle btn-primary disabled position-absolute counter-wrapper flex-column d-none d-md-flex" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 170px; height: 170px;">
<h3 class="text-white mb-1 mt-n2"><span class="counter counter-lg">20+</span></h3>
<p>Year Experience</p>
</div>
<div class="row gx-md-5 gy-5 align-items-center">
<div class="col-md-6">
<div class="row gx-md-5 gy-5">
<div class="col-md-10 offset-md-2">
<figure class="rounded"><img src="../../assets/img/photos/ab1.jpg" srcset="../../assets/img/photos/ab1@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-12">
<figure class="rounded"><img src="../../assets/img/photos/ab2.jpg" srcset="../../assets/img/photos/ab2@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-md-6">
<figure class="rounded"><img src="../../assets/img/photos/ab3.jpg" srcset="../../assets/img/photos/ab3@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-6">
<img src="../../assets/img/icons/lineal/handshake.svg" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
<h3 class="display-5 mb-5">We are a creative company that focuses on establishing long-term relationships with customers.</h3>
<p class="mb-7">Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula.</p>
<div class="row counter-wrapper gy-6">
<div class="col-md-4">
<h3 class="counter text-primary">7518</h3>
<p>Completed Projects</p>
</div>
<!--/column -->
<div class="col-md-4">
<h3 class="counter text-primary">3472</h3>
<p>Satisfied Customers</p>
</div>
<!--/column -->
<div class="col-md-4">
<h3 class="counter text-primary">2184</h3>
<p>Expert Employees</p>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-2">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-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 bg-light&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-12 align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-6 position-relative&quot;&gt;
&lt;div class=&quot;btn btn-circle btn-primary disabled position-absolute counter-wrapper flex-column d-none d-md-flex&quot; style=&quot;top: 50%; left: 50%; transform: translate(-50%, -50%); width: 170px; height: 170px;&quot;&gt;
&lt;h3 class=&quot;text-white mb-1 mt-n2&quot;&gt;&lt;span class=&quot;counter counter-lg&quot;&gt;20+&lt;/span&gt;&lt;/h3&gt;
&lt;p&gt;Year Experience&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;row gx-md-5 gy-5 align-items-center&quot;&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;div class=&quot;row gx-md-5 gy-5&quot;&gt;
&lt;div class=&quot;col-md-10 offset-md-2&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/ab1.jpg&quot; srcset=&quot;./assets/img/photos/ab1@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-md-12&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/ab2.jpg&quot; srcset=&quot;./assets/img/photos/ab2@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/ab3.jpg&quot; srcset=&quot;./assets/img/photos/ab3@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;img src=&quot;./assets/img/icons/lineal/handshake.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md mb-4&quot; alt=&quot;&quot; /&gt;
&lt;h3 class=&quot;display-5 mb-5&quot;&gt;We are a creative company that focuses on establishing long-term relationships with customers.&lt;/h3&gt;
&lt;p class=&quot;mb-7&quot;&gt;Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula.&lt;/p&gt;
&lt;div class=&quot;row counter-wrapper gy-6&quot;&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
&lt;h3 class=&quot;counter text-primary&quot;&gt;7518&lt;/h3&gt;
&lt;p&gt;Completed Projects&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
&lt;h3 class=&quot;counter text-primary&quot;&gt;3472&lt;/h3&gt;
&lt;p&gt;Satisfied Customers&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-md-4&quot;&gt;
&lt;h3 class=&quot;counter text-primary&quot;&gt;2184&lt;/h3&gt;
&lt;p&gt;Expert Employees&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-3" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15 pb-lg-2">
<figure class="rounded"><img src="../../assets/img/photos/about5.jpg" srcset="../../assets/img/photos/about5@2x.jpg 2x" alt="" /></figure>
<div class="row">
<div class="col-xl-10 mx-auto">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 text-white mt-n5 mt-lg-0 mt-lg-n50p mb-lg-n50p border-radius-lg-top" data-image-src="../../assets/img/photos/bg3.jpg">
<div class="card-body p-9 p-xl-10">
<div class="row align-items-center counter-wrapper gy-4 text-center">
<div class="col-6 col-lg-3">
<h3 class="counter counter-lg text-white">7518</h3>
<p>Completed Projects</p>
</div>
<!--/column -->
<div class="col-6 col-lg-3">
<h3 class="counter counter-lg text-white">3472</h3>
<p>Satisfied Customers</p>
</div>
<!--/column -->
<div class="col-6 col-lg-3">
<h3 class="counter counter-lg text-white">2184</h3>
<p>Expert Employees</p>
</div>
<!--/column -->
<div class="col-6 col-lg-3">
<h3 class="counter counter-lg text-white">4523</h3>
<p>Awards Won</p>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-3">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-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-light&quot;&gt;
&lt;div class=&quot;container py-14 pt-md-16 pb-md-9&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/about5.jpg&quot; srcset=&quot;./assets/img/photos/about5@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-xl-10 mx-auto&quot;&gt;
&lt;div class=&quot;card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 text-white mt-n5 mt-lg-0 mt-lg-n50p mb-lg-n50p border-radius-lg-top&quot; data-image-src=&quot;./assets/img/photos/bg3.jpg&quot;&gt;
&lt;div class=&quot;card-body p-9 p-xl-10&quot;&gt;
&lt;div class=&quot;row align-items-center counter-wrapper gy-4 text-center&quot;&gt;
&lt;div class=&quot;col-6 col-lg-3&quot;&gt;
&lt;h3 class=&quot;counter counter-lg text-white&quot;&gt;7518&lt;/h3&gt;
&lt;p&gt;Completed Projects&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-6 col-lg-3&quot;&gt;
&lt;h3 class=&quot;counter counter-lg text-white&quot;&gt;3472&lt;/h3&gt;
&lt;p&gt;Satisfied Customers&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-6 col-lg-3&quot;&gt;
&lt;h3 class=&quot;counter counter-lg text-white&quot;&gt;2184&lt;/h3&gt;
&lt;p&gt;Expert Employees&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-6 col-lg-3&quot;&gt;
&lt;h3 class=&quot;counter counter-lg text-white&quot;&gt;4523&lt;/h3&gt;
&lt;p&gt;Awards Won&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-4" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-lg-6 position-relative order-lg-2">
<div class="shape bg-dot primary rellax w-16 h-20" data-rellax-speed="1" style="top: 3rem; left: 5.5rem"></div>
<div class="overlap-grid overlap-grid-2">
<div class="item">
<figure class="rounded shadow"><img src="../../assets/img/photos/about2.jpg" srcset="../../assets/img/photos/about2@2x.jpg 2x" alt=""></figure>
</div>
<div class="item">
<figure class="rounded shadow"><img src="../../assets/img/photos/about3.jpg" srcset="../../assets/img/photos/about3@2x.jpg 2x" alt=""></figure>
</div>
</div>
</div>
<!--/column -->
<div class="col-lg-6">
<img src="../../assets/img/icons/lineal/megaphone.svg" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
<h2 class="display-4 mb-3">Who Are We?</h2>
<p class="lead fs-lg">We are a digital and branding company that believes in the power of creative strategy and along with great design.</p>
<p class="mb-6">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<div class="row gy-3 gx-xl-8">
<div class="col-xl-6">
<ul class="icon-list bullet-bg bullet-soft-primary mb-0">
<li><span><i class="uil uil-check"></i></span><span>Aenean eu leo quam ornare curabitur blandit tempus.</span></li>
<li class="mt-3"><span><i class="uil uil-check"></i></span><span>Nullam quis risus eget urna mollis ornare donec elit.</span></li>
</ul>
</div>
<!--/column -->
<div class="col-xl-6">
<ul class="icon-list bullet-bg bullet-soft-primary mb-0">
<li><span><i class="uil uil-check"></i></span><span>Etiam porta sem malesuada magna mollis euismod.</span></li>
<li class="mt-3"><span><i class="uil uil-check"></i></span><span>Fermentum massa vivamus faucibus amet euismod.</span></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-4">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-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-light&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-10 align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-6 position-relative order-lg-2&quot;&gt;
&lt;div class=&quot;shape bg-dot primary rellax w-16 h-20&quot; data-rellax-speed=&quot;1&quot; style=&quot;top: 3rem; left: 5.5rem&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;overlap-grid overlap-grid-2&quot;&gt;
&lt;div class=&quot;item&quot;&gt;
&lt;figure class=&quot;rounded shadow&quot;&gt;&lt;img src=&quot;./assets/img/photos/about2.jpg&quot; srcset=&quot;./assets/img/photos/about2@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;div class=&quot;item&quot;&gt;
&lt;figure class=&quot;rounded shadow&quot;&gt;&lt;img src=&quot;./assets/img/photos/about3.jpg&quot; srcset=&quot;./assets/img/photos/about3@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;img src=&quot;./assets/img/icons/lineal/megaphone.svg&quot; class=&quot;svg-inject icon-svg icon-svg-md mb-4&quot; alt=&quot;&quot; /&gt;
&lt;h2 class=&quot;display-4 mb-3&quot;&gt;Who Are We?&lt;/h2&gt;
&lt;p class=&quot;lead fs-lg&quot;&gt;We are a digital and branding company that believes in the power of creative strategy and along with great design.&lt;/p&gt;
&lt;p class=&quot;mb-6&quot;&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.&lt;/p&gt;
&lt;div class=&quot;row gy-3 gx-xl-8&quot;&gt;
&lt;div class=&quot;col-xl-6&quot;&gt;
&lt;ul class=&quot;icon-list bullet-bg bullet-soft-primary mb-0&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;Aenean eu leo quam ornare curabitur blandit tempus.&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;mt-3&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Nullam quis risus eget urna mollis ornare donec elit.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-xl-6&quot;&gt;
&lt;ul class=&quot;icon-list bullet-bg bullet-soft-primary mb-0&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;Etiam porta sem malesuada magna mollis euismod.&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;mt-3&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Fermentum massa vivamus faucibus amet euismod.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-5" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-lg-7 order-lg-2">
<figure><img class="w-auto" src="../../assets/img/illustrations/i2.png" srcset="../../assets/img/illustrations/i2@2x.png 2x" alt="" /></figure>
</div>
<!--/column -->
<div class="col-lg-5">
<h2 class="fs-15 text-uppercase text-line text-primary mb-3">Why Choose Us?</h2>
<h3 class="display-5 mb-7">A few reasons why our valued customers choose us.</h3>
<div class="accordion accordion-wrapper" id="accordionExample">
<div class="card plain 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.</p>
</div>
<!--/.card-body -->
</div>
<!--/.accordion-collapse -->
</div>
<!--/.accordion-item -->
<div class="card plain 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.</p>
</div>
<!--/.card-body -->
</div>
<!--/.accordion-collapse -->
</div>
<!--/.accordion-item -->
<div class="card plain 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.</p>
</div>
<!--/.card-body -->
</div>
<!--/.accordion-collapse -->
</div>
<!--/.accordion-item -->
</div>
<!--/.accordion -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-5">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-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-light&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-10 align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-7 order-lg-2&quot;&gt;
&lt;figure&gt;&lt;img class=&quot;w-auto&quot; src=&quot;./assets/img/illustrations/i2.png&quot; srcset=&quot;./assets/img/illustrations/i2@2x.png 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-lg-5&quot;&gt;
&lt;h2 class=&quot;fs-15 text-uppercase text-line text-primary mb-3&quot;&gt;Why Choose Us?&lt;/h2&gt;
&lt;h3 class=&quot;display-5 mb-7&quot;&gt;A few reasons why our valued customers choose us.&lt;/h3&gt;
&lt;div class=&quot;accordion accordion-wrapper&quot; id=&quot;accordionExample&quot;&gt;
&lt;div class=&quot;card plain 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.&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;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.&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;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.&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;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-6" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-lg-7">
<figure><img class="w-auto" src="../../assets/img/illustrations/i8.png" srcset="../../assets/img/illustrations/i8@2x.png 2x" alt="" /></figure>
</div>
<!--/column -->
<div class="col-lg-5">
<h3 class="display-4 mb-6 pe-xxl-6">We bring rapid solutions to make the life of our customers easier.</h3>
<ul class="progress-list mt-3">
<li>
<p>Marketing</p>
<div class="progressbar line blue" data-value="100"></div>
</li>
<li>
<p>Strategy</p>
<div class="progressbar line yellow" data-value="80"></div>
</li>
<li>
<p>Development</p>
<div class="progressbar line orange" data-value="85"></div>
</li>
<li>
<p>Data Analysis</p>
<div class="progressbar line green" data-value="90"></div>
</li>
</ul>
<!-- /.progress-list -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-6">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-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 bg-light&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row gx-lg-8 gx-xl-12 gy-10 align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-7&quot;&gt;
&lt;figure&gt;&lt;img class=&quot;w-auto&quot; src=&quot;./assets/img/illustrations/i8.png&quot; srcset=&quot;./assets/img/illustrations/i8@2x.png 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-lg-5&quot;&gt;
&lt;h3 class=&quot;display-4 mb-6 pe-xxl-6&quot;&gt;We bring rapid solutions to make the life of our customers easier.&lt;/h3&gt;
&lt;ul class=&quot;progress-list mt-3&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 yellow&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 orange&quot; data-value=&quot;85&quot;&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Data Analysis&lt;/p&gt;
&lt;div class=&quot;progressbar line green&quot; data-value=&quot;90&quot;&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- /.progress-list --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-7" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gy-10 gy-sm-13 gx-lg-3 align-items-center">
<div class="col-md-8 col-lg-6 position-relative">
<a href="../../assets/media/movie.mp4" class="btn btn-circle btn-primary btn-play ripple mx-auto mb-5 position-absolute" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right"></i></a>
<div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
<figure class="rounded"><img src="../../assets/img/photos/about12.jpg" srcset="../../assets/img/photos/about12@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-lg-5 col-xl-4 offset-lg-1">
<h3 class="display-4 mb-3">Sandbox Brings Awesomeness</h3>
<p class="lead fs-lg mb-6">We have considered our solutions to <span class="underline">support every stage</span> of your growth.</p>
<ul class="progress-list">
<li>
<p>Marketing</p>
<div class="progressbar line primary" data-value="100"></div>
</li>
<li>
<p>Strategy</p>
<div class="progressbar line primary" data-value="80"></div>
</li>
<li>
<p>Development</p>
<div class="progressbar line primary" data-value="85"></div>
</li>
<li>
</ul>
<!-- /.progress-list -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-7">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-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;wrapper bg-light&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row gy-10 gy-sm-13 gx-lg-3 align-items-center&quot;&gt;
&lt;div class=&quot;col-md-8 col-lg-6 position-relative&quot;&gt;
&lt;a href=&quot;./assets/media/movie.mp4&quot; class=&quot;btn btn-circle btn-primary btn-play ripple mx-auto mb-5 position-absolute&quot; style=&quot;top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;&quot; data-glightbox&gt;&lt;i class=&quot;icn-caret-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;div class=&quot;shape rounded bg-soft-primary rellax d-md-block&quot; data-rellax-speed=&quot;0&quot; style=&quot;bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; &quot;&gt;&lt;/div&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/about12.jpg&quot; srcset=&quot;./assets/img/photos/about12@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-lg-5 col-xl-4 offset-lg-1&quot;&gt;
&lt;h3 class=&quot;display-4 mb-3&quot;&gt;Sandbox Brings Awesomeness&lt;/h3&gt;
&lt;p class=&quot;lead fs-lg mb-6&quot;&gt;We have considered our solutions to &lt;span class=&quot;underline&quot;&gt;support every stage&lt;/span&gt; of your growth.&lt;/p&gt;
&lt;ul class=&quot;progress-list&quot;&gt;
&lt;li&gt;
&lt;p&gt;Marketing&lt;/p&gt;
&lt;div class=&quot;progressbar line primary&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 primary&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 primary&quot; data-value=&quot;85&quot;&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;/ul&gt;
&lt;!-- /.progress-list --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-8" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gy-10 gy-sm-13 gx-md-8 gx-xl-12 align-items-center">
<div class="col-lg-6">
<div class="row gx-md-5 gy-5">
<div class="col-12">
<figure class="rounded mx-md-5"><img src="../../assets/img/photos/g8.jpg" srcset="../../assets/img/photos/g8@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6">
<figure class="rounded"><img src="../../assets/img/photos/g9.jpg" srcset="../../assets/img/photos/g9@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6">
<figure class="rounded"><img src="../../assets/img/photos/g10.jpg" srcset="../../assets/img/photos/g10@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-6">
<h2 class="fs-16 text-uppercase text-muted mb-3">What Makes Us Different?</h2>
<h3 class="display-3 mb-10">We bring <span class="underline-3 style-2 yellow">solutions</span> to make life easier for our customers.</h3>
<div class="row gy-8">
<div class="col-md-6">
<div class="d-flex flex-row">
<div>
<img src="../../assets/img/icons/solid/lamp.svg" class="svg-inject icon-svg icon-svg-xs solid-mono text-fuchsia me-4" alt="" />
</div>
<div>
<h4 class="mb-1">Creativity</h4>
<p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
</div>
</div>
</div>
<!--/column -->
<div class="col-md-6">
<div class="d-flex flex-row">
<div>
<img src="../../assets/img/icons/solid/bulb.svg" class="svg-inject icon-svg icon-svg-xs solid-mono text-violet me-4" alt="" />
</div>
<div>
<h4 class="mb-1">Innovative Thinking</h4>
<p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
</div>
</div>
</div>
<!--/column -->
<div class="col-md-6">
<div class="d-flex flex-row">
<div>
<img src="../../assets/img/icons/solid/puzzle.svg" class="svg-inject icon-svg icon-svg-xs solid-mono text-orange me-4" alt="" />
</div>
<div>
<h4 class="mb-1">Rapid Solutions</h4>
<p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
</div>
</div>
</div>
<!--/column -->
<div class="col-md-6">
<div class="d-flex flex-row">
<div>
<img src="../../assets/img/icons/solid/headphone.svg" class="svg-inject icon-svg icon-svg-xs solid-mono text-green me-4" alt="" />
</div>
<div>
<h4 class="mb-1">Top-Notch Support</h4>
<p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-8">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-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;section class=&quot;wrapper bg-light&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row gy-10 gy-sm-13 gx-md-8 gx-xl-12 align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;div class=&quot;row gx-md-5 gy-5&quot;&gt;
&lt;div class=&quot;col-12&quot;&gt;
&lt;figure class=&quot;rounded mx-5&quot;&gt;&lt;img src=&quot;./assets/img/photos/g8.jpg&quot; srcset=&quot;./assets/img/photos/g8@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/g9.jpg&quot; srcset=&quot;./assets/img/photos/g9@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/g10.jpg&quot; srcset=&quot;./assets/img/photos/g10@2x.jpg 2x&quot; alt=&quot;&quot;&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;h2 class=&quot;fs-16 text-uppercase text-muted mb-3&quot;&gt;What Makes Us Different?&lt;/h2&gt;
&lt;h3 class=&quot;display-3 mb-10&quot;&gt;We bring &lt;span class=&quot;underline-3 style-2 yellow&quot;&gt;solutions&lt;/span&gt; to make life easier for our customers.&lt;/h3&gt;
&lt;div class=&quot;row gy-8&quot;&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;div class=&quot;d-flex flex-row&quot;&gt;
&lt;div&gt;
&lt;img src=&quot;./assets/img/icons/solid/lamp.svg&quot; class=&quot;svg-inject icon-svg icon-svg-xs solid-mono text-fuchsia me-4&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h4 class=&quot;mb-1&quot;&gt;Creativity&lt;/h4&gt;
&lt;p class=&quot;mb-0&quot;&gt;Curabitur blandit lacus porttitor ridiculus mus.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;div class=&quot;d-flex flex-row&quot;&gt;
&lt;div&gt;
&lt;img src=&quot;./assets/img/icons/solid/bulb.svg&quot; class=&quot;svg-inject icon-svg icon-svg-xs solid-mono text-violet me-4&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h4 class=&quot;mb-1&quot;&gt;Innovative Thinking&lt;/h4&gt;
&lt;p class=&quot;mb-0&quot;&gt;Curabitur blandit lacus porttitor ridiculus mus.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;div class=&quot;d-flex flex-row&quot;&gt;
&lt;div&gt;
&lt;img src=&quot;./assets/img/icons/solid/puzzle.svg&quot; class=&quot;svg-inject icon-svg icon-svg-xs solid-mono text-orange me-4&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h4 class=&quot;mb-1&quot;&gt;Rapid Solutions&lt;/h4&gt;
&lt;p class=&quot;mb-0&quot;&gt;Curabitur blandit lacus porttitor ridiculus mus.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-md-6&quot;&gt;
&lt;div class=&quot;d-flex flex-row&quot;&gt;
&lt;div&gt;
&lt;img src=&quot;./assets/img/icons/solid/headphone.svg&quot; class=&quot;svg-inject icon-svg icon-svg-xs solid-mono text-green me-4&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h4 class=&quot;mb-1&quot;&gt;Top-Notch Support&lt;/h4&gt;
&lt;p class=&quot;mb-0&quot;&gt;Curabitur blandit lacus porttitor ridiculus mus.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-9" class="wrapper bg-light wrapper-border">
<div class="container py-14 py-md-16">
<div class="row gx-md-8 gy-10 align-items-center">
<div class="col-lg-6 offset-lg-1 order-lg-2 position-relative">
<figure class="rounded"><img class="img-fluid" src="../../assets/img/photos/about27.jpg" srcset="../../assets/img/photos/about27@2x.jpg 2x" alt="" /></figure>
<div class="card shadow-lg position-absolute d-none d-md-block" style="top: 15%; left: -7%">
<div class="card-body py-4 px-5">
<div class="d-flex flex-row align-items-center">
<div>
<img src="../../assets/img/icons/solid/cloud-group.svg" class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia me-3" alt="" />
</div>
<div>
<h3 class="fs-25 counter mb-0 text-nowrap">25000+</h3>
<p class="fs-16 lh-sm mb-0 text-nowrap">Happy Clients</p>
</div>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
<div class="card shadow-lg position-absolute text-center d-none d-md-block" style="bottom: 10%; left: -10%;">
<div class="card-body p-6">
<div class="progressbar semi-circle fuchsia mb-3" data-value="80"></div>
<h4 class="mb-0">Time Saved</h4>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div class="col-lg-5">
<h2 class="fs-16 text-uppercase text-gradient gradient-1 mb-3">What Makes Us Different?</h2>
<h3 class="display-4 mb-4 me-lg-n5">We make spending stress free so you have the perfect control.</h3>
<p class="mb-6">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. Integer posuere erat a ante venenatis dapibus posuere velit.</p>
<ul class="icon-list bullet-bg bullet-soft-primary">
<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>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
<div class="container pb-15 pb-md-17">
<div class="card">
<div class="card-footer border-0 position-relative">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-9">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-9" 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-light&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row gx-md-8 gy-10 align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-6 offset-lg-1 order-lg-2 position-relative&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;./assets/img/photos/about27.jpg&quot; srcset=&quot;./assets/img/photos/about27@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;div class=&quot;card shadow-lg position-absolute d-none d-md-block&quot; style=&quot;top: 15%; left: -7%&quot;&gt;
&lt;div class=&quot;card-body py-4 px-5&quot;&gt;
&lt;div class=&quot;d-flex flex-row align-items-center&quot;&gt;
&lt;div&gt;
&lt;img src=&quot;./assets/img/icons/solid/cloud-group.svg&quot; class=&quot;svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia me-3&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h3 class=&quot;fs-25 counter mb-0 text-nowrap&quot;&gt;25000+&lt;/h3&gt;
&lt;p class=&quot;fs-16 lh-sm mb-0 text-nowrap&quot;&gt;Happy Clients&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;div class=&quot;card shadow-lg position-absolute text-center d-none d-md-block&quot; style=&quot;bottom: 10%; left: -10%;&quot;&gt;
&lt;div class=&quot;card-body p-6&quot;&gt;
&lt;div class=&quot;progressbar semi-circle fuchsia mb-3&quot; data-value=&quot;80&quot;&gt;&lt;/div&gt;
&lt;h4 class=&quot;mb-0&quot;&gt;Time Saved&lt;/h4&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-lg-5&quot;&gt;
&lt;h2 class=&quot;fs-16 text-uppercase text-gradient gradient-1 mb-3&quot;&gt;What Makes Us Different?&lt;/h2&gt;
&lt;h3 class=&quot;display-4 mb-4 me-lg-n5&quot;&gt;We make spending stress free so you have the perfect control.&lt;/h3&gt;
&lt;p class=&quot;mb-6&quot;&gt;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. Integer posuere erat a ante venenatis dapibus posuere velit.&lt;/p&gt;
&lt;ul class=&quot;icon-list bullet-bg bullet-soft-primary&quot;&gt;
&lt;li&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;Aenean eu leo quam. Pellentesque ornare.&lt;/li&gt;
&lt;li&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;Nullam quis risus eget urna mollis ornare.&lt;/li&gt;
&lt;li&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;Donec id elit non mi porta gravida at eget.&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
</div>
<!-- /.content-wrapper -->
<section class="wrapper bg-dark text-white">
<div class="container pt-14 pt-md-16 text-center">
<div class="row">
<div class="col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
<h2 class="display-3 text-white mt-3 mb-3 px-lg-8">Think unique and be creative. Make a difference with Sandbox.</h2>
<p class="lead fs-lg mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
<a href="https://1.envato.market/NKGrx2" target="_blank" class="btn btn-lg btn-white rounded-pill mb-10">Buy Sandbox</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<img class="img-fluid" src="../../assets/img/demos/f1.png" srcset="../../assets/img/demos/f1@2x.png 2x" alt="" />
</div>
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
<script src="../../assets/js/theme.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink