nabnabilahhp
/
SMAMUGAPAY
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
SMAMUGAPAY/assets/template/docs/blocks/portfolio.html

2640 lines
163 KiB
HTML
Raw Permalink 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 mega-menu-scroll">
<ul class="row row-cols-1 row-cols-lg-6 gx-0 gx-lg-4 gy-lg-2 list-unstyled">
<li class="col">
<a class="dropdown-item" href="../../demo1.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi1.jpg" srcset="../../assets/img/demos/mi1@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 1</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo2.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi2.jpg" srcset="../../assets/img/demos/mi2@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 2</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo3.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi3.jpg" srcset="../../assets/img/demos/mi3@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 3</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo4.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi4.jpg" srcset="../../assets/img/demos/mi4@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 4</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo5.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi5.jpg" srcset="../../assets/img/demos/mi5@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 5</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo6.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi6.jpg" srcset="../../assets/img/demos/mi6@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 6</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo7.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi7.jpg" srcset="../../assets/img/demos/mi7@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 7</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo8.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi8.jpg" srcset="../../assets/img/demos/mi8@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 8</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo9.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi9.jpg" srcset="../../assets/img/demos/mi9@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 9</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo10.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi10.jpg" srcset="../../assets/img/demos/mi10@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 10</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo11.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi11.jpg" srcset="../../assets/img/demos/mi11@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 11</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo12.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi12.jpg" srcset="../../assets/img/demos/mi12@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 12</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo13.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi13.jpg" srcset="../../assets/img/demos/mi13@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 13</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo14.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi14.jpg" srcset="../../assets/img/demos/mi14@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 14</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo15.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi15.jpg" srcset="../../assets/img/demos/mi15@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 15</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo16.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi16.jpg" srcset="../../assets/img/demos/mi16@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 16</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo17.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi17.jpg" srcset="../../assets/img/demos/mi17@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 17</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo18.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi18.jpg" srcset="../../assets/img/demos/mi18@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 18</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo19.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi19.jpg" srcset="../../assets/img/demos/mi19@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 19</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo20.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi20.jpg" srcset="../../assets/img/demos/mi20@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 20</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo21.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi21.jpg" srcset="../../assets/img/demos/mi21@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 21</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo22.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi22.jpg" srcset="../../assets/img/demos/mi22@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 22</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo23.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi23.jpg" srcset="../../assets/img/demos/mi23@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 23</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo24.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi24.jpg" srcset="../../assets/img/demos/mi24@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 24</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo25.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi25.jpg" srcset="../../assets/img/demos/mi25@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 25</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo26.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi26.jpg" srcset="../../assets/img/demos/mi26@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 26</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo27.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi27.jpg" srcset="../../assets/img/demos/mi27@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 27</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo28.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi28.jpg" srcset="../../assets/img/demos/mi28@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 28</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo29.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi29.jpg" srcset="../../assets/img/demos/mi29@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 29</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo30.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi30.jpg" srcset="../../assets/img/demos/mi30@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 30</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo31.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi31.jpg" srcset="../../assets/img/demos/mi31@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 31</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo32.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi32.jpg" srcset="../../assets/img/demos/mi32@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 32</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo33.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi33.jpg" srcset="../../assets/img/demos/mi33@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 33</span>
</a>
</li>
<li class="col">
<a class="dropdown-item" href="../../demo34.html">
<figure class="rounded lift d-none d-lg-block"><img src="../../assets/img/demos/mi34.jpg" srcset="../../assets/img/demos/mi34@2x.jpg 2x" alt=""></figure>
<span class="d-lg-none">Demo 34</span>
</a>
</li>
</ul>
<!--/.row -->
<span class="d-none d-lg-flex"><i class="uil uil-direction"></i><strong>Scroll to view more</strong></span>
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="../../services.html">Services I</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../services2.html">Services II</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="../../about.html">About I</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../about2.html">About II</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="../../shop.html">Shop I</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../shop2.html">Shop II</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../shop-product.html">Product Page</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../shop-cart.html">Shopping Cart</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../shop-checkout.html">Checkout</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="../../contact.html">Contact I</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../contact2.html">Contact II</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../contact3.html">Contact III</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="../../career.html">Job Listing I</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../career2.html">Job Listing II</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../career-job.html">Job Description</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="../../404.html">404 Not Found</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../page-loader.html">Page Loader</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../signin.html">Sign In I</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../signin2.html">Sign In II</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../signup.html">Sign Up I</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../signup2.html">Sign Up II</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../terms.html">Terms</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="../../pricing.html">Pricing</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../onepage.html">One Page</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header">Project Pages</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="../../projects.html">Projects I</a></li>
<li><a class="dropdown-item" href="../../projects2.html">Projects II</a></li>
<li><a class="dropdown-item" href="../../projects3.html">Projects III</a></li>
<li><a class="dropdown-item" href="../../projects4.html">Projects IV</a></li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header">Single Projects</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="../../single-project.html">Single Project I</a></li>
<li><a class="dropdown-item" href="../../single-project2.html">Single Project II</a></li>
<li><a class="dropdown-item" href="../../single-project3.html">Single Project III</a></li>
<li><a class="dropdown-item" href="../../single-project4.html">Single Project IV</a></li>
</ul>
</div>
<!-- /.column -->
</div>
<!-- /auto-column -->
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="../../blog.html">Blog without Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../blog2.html">Blog with Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../blog3.html">Blog with Left Sidebar</a></li>
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="../../blog-post.html">Post without Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../blog-post2.html">Post with Sidebar</a></li>
<li class="nav-item"><a class="dropdown-item" href="../../blog-post3.html">Post with Left Sidebar</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
<li class="mega-menu-content">
<ul class="row row-cols-1 row-cols-lg-6 gx-0 gx-lg-6 gy-lg-4 list-unstyled">
<li class="col"><a class="dropdown-item" href="../../docs/blocks/about.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block1.svg" alt=""></div>
<span>About</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/blog.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block2.svg" alt=""></div>
<span>Blog</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/call-to-action.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block3.svg" alt=""></div>
<span>Call to Action</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/clients.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block4.svg" alt=""></div>
<span>Clients</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/contact.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block5.svg" alt=""></div>
<span>Contact</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/facts.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block6.svg" alt=""></div>
<span>Facts</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/faq.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block7.svg" alt=""></div>
<span>FAQ</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/features.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block8.svg" alt=""></div>
<span>Features</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/footer.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block9.svg" alt=""></div>
<span>Footer</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/hero.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block10.svg" alt=""></div>
<span>Hero</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/misc.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block17.svg" alt=""></div>
<span>Misc</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/navbar.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block11.svg" alt=""></div>
<span>Navbar</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/portfolio.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block12.svg" alt=""></div>
<span>Portfolio</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/pricing.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block13.svg" alt=""></div>
<span>Pricing</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/process.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block14.svg" alt=""></div>
<span>Process</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/team.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block15.svg" alt=""></div>
<span>Team</span>
</a>
</li>
<li class="col"><a class="dropdown-item" href="../../docs/blocks/testimonials.html">
<div class="rounded img-svg d-none d-lg-block p-4 mb-lg-2"><img class="rounded-0" src="../../assets/img/demos/block16.svg" alt=""></div>
<span>Testimonials</span>
</a>
</li>
</ul>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item dropdown dropdown-mega">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-4">
<h6 class="dropdown-header">Usage</h6>
<ul class="list-unstyled cc-2 pb-lg-1">
<li><a class="dropdown-item" href="../../docs/index.html">Get Started</a></li>
<li><a class="dropdown-item" href="../../docs/forms.html">Forms</a></li>
<li><a class="dropdown-item" href="../../docs/faq.html">FAQ</a></li>
<li><a class="dropdown-item" href="../../docs/changelog.html">Changelog</a></li>
<li><a class="dropdown-item" href="../../docs/credits.html">Credits</a></li>
</ul>
<h6 class="dropdown-header mt-lg-6">Styleguide</h6>
<ul class="list-unstyled cc-2">
<li><a class="dropdown-item" href="../../docs/styleguide/colors.html">Colors</a></li>
<li><a class="dropdown-item" href="../../docs/styleguide/fonts.html">Fonts</a></li>
<li><a class="dropdown-item" href="../../docs/styleguide/icons-svg.html">SVG Icons</a></li>
<li><a class="dropdown-item" href="../../docs/styleguide/icons-font.html">Font Icons</a></li>
<li><a class="dropdown-item" href="../../docs/styleguide/illustrations.html">Illustrations</a></li>
<li><a class="dropdown-item" href="../../docs/styleguide/backgrounds.html">Backgrounds</a></li>
<li><a class="dropdown-item" href="../../docs/styleguide/misc.html">Misc</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-8">
<h6 class="dropdown-header">Elements</h6>
<ul class="list-unstyled cc-3">
<li><a class="dropdown-item" href="../../docs/elements/accordion.html">Accordion</a></li>
<li><a class="dropdown-item" href="../../docs/elements/alerts.html">Alerts</a></li>
<li><a class="dropdown-item" href="../../docs/elements/animations.html">Animations</a></li>
<li><a class="dropdown-item" href="../../docs/elements/avatars.html">Avatars</a></li>
<li><a class="dropdown-item" href="../../docs/elements/background.html">Background</a></li>
<li><a class="dropdown-item" href="../../docs/elements/badges.html">Badges</a></li>
<li><a class="dropdown-item" href="../../docs/elements/buttons.html">Buttons</a></li>
<li><a class="dropdown-item" href="../../docs/elements/card.html">Card</a></li>
<li><a class="dropdown-item" href="../../docs/elements/carousel.html">Carousel</a></li>
<li><a class="dropdown-item" href="../../docs/elements/dividers.html">Dividers</a></li>
<li><a class="dropdown-item" href="../../docs/elements/form-elements.html">Form Elements</a></li>
<li><a class="dropdown-item" href="../../docs/elements/image-hover.html">Image Hover</a></li>
<li><a class="dropdown-item" href="../../docs/elements/image-mask.html">Image Mask</a></li>
<li><a class="dropdown-item" href="../../docs/elements/lightbox.html">Lightbox</a></li>
<li><a class="dropdown-item" href="../../docs/elements/player.html">Media Player</a></li>
<li><a class="dropdown-item" href="../../docs/elements/modal.html">Modal</a></li>
<li><a class="dropdown-item" href="../../docs/elements/pagination.html">Pagination</a></li>
<li><a class="dropdown-item" href="../../docs/elements/progressbar.html">Progressbar</a></li>
<li><a class="dropdown-item" href="../../docs/elements/shadows.html">Shadows</a></li>
<li><a class="dropdown-item" href="../../docs/elements/shapes.html">Shapes</a></li>
<li><a class="dropdown-item" href="../../docs/elements/tables.html">Tables</a></li>
<li><a class="dropdown-item" href="../../docs/elements/tabs.html">Tabs</a></li>
<li><a class="dropdown-item" href="../../docs/elements/text-animations.html">Text Animations</a></li>
<li><a class="dropdown-item" href="../../docs/elements/text-highlight.html">Text Highlight</a></li>
<li><a class="dropdown-item" href="../../docs/elements/tiles.html">Tiles</a></li>
<li><a class="dropdown-item" href="../../docs/elements/tooltips-popovers.html">Tooltips & Popovers</a></li>
<li><a class="dropdown-item" href="../../docs/elements/typography.html">Typography</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
</ul>
<!-- /.navbar-nav -->
<div class="offcanvas-footer d-lg-none">
<div>
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
<br /> 00 (123) 456 78 90 <br />
<nav class="nav social social-white mt-4">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
</div>
<!-- /.offcanvas-footer -->
</div>
<!-- /.offcanvas-body -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto">
<li class="nav-item 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 - Portfolio</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 ">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 text-primary pe-none">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 align-items-center mb-7">
<div class="col-md-8 col-lg-8 col-xl-7 col-xxl-6 pe-lg-17">
<h2 class="display-4 mb-3">Recent Projects</h2>
<p class="lead fs-lg">We love to turn ideas into beautiful things.</p>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="projects-tiles">
<div class="project grid grid-view">
<div class="row gx-md-8 gx-xl-12 gy-10 gy-md-12 isotope">
<div class="item col-md-5">
<figure class="lift rounded mb-6"><a href="../../single-project3.html"> <img src="../../assets/img/photos/rp1.jpg" srcset="../../assets/img/photos/rp1@2x.jpg 2x" alt="" /></a></figure>
<div class="post-category mb-3 text-purple">Stationary</div>
<h3 class="post-title">Ipsum Ultricies Cursus</h3>
</div>
<!-- /.item -->
<div class="item col-md-7 mt-md-17">
<figure class="lift rounded mb-6"><a href="../../single-project2.html"> <img src="../../assets/img/photos/rp2.jpg" srcset="../../assets/img/photos/rp2@2x.jpg 2x" alt="" /></a></figure>
<div class="post-category mb-3 text-orange">Invitation</div>
<h3 class="post-title">Mollis Ipsum Mattis</h3>
</div>
<!-- /.item -->
<div class="item col-md-5">
<figure class="lift rounded mb-6"><a href="../../single-project.html"> <img src="../../assets/img/photos/rp3.jpg" srcset="../../assets/img/photos/rp3@2x.jpg 2x" alt="" /></a></figure>
<div class="post-category mb-3 text-red">Notebook</div>
<h3 class="post-title">Magna Tristique Inceptos</h3>
</div>
<!-- /.item -->
</div>
<!-- /.row -->
</div>
<!-- /.project -->
</div>
<!-- /.projects-tiles -->
</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 align-items-center mb-7&quot;&gt;
&lt;div class=&quot;col-md-8 col-lg-8 col-xl-7 col-xxl-6 pe-lg-17&quot;&gt;
&lt;h2 class=&quot;display-4 mb-3&quot;&gt;Recent Projects&lt;/h2&gt;
&lt;p class=&quot;lead fs-lg&quot;&gt;We love to turn ideas into beautiful things.&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;div class=&quot;projects-tiles&quot;&gt;
&lt;div class=&quot;project grid grid-view&quot;&gt;
&lt;div class=&quot;row gx-md-8 gx-xl-12 gy-10 gy-md-12 isotope&quot;&gt;
&lt;div class=&quot;item col-md-5&quot;&gt;
&lt;figure class=&quot;lift rounded mb-6&quot;&gt;&lt;a href=&quot;./single-project3.html&quot;&gt; &lt;img src=&quot;./assets/img/photos/rp1.jpg&quot; srcset=&quot;./assets/img/photos/rp1@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;post-category mb-3 text-purple&quot;&gt;Stationary&lt;/div&gt;
&lt;h3 class=&quot;post-title&quot;&gt;Ipsum Ultricies Cursus&lt;/h3&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;div class=&quot;item col-md-7 mt-md-17&quot;&gt;
&lt;figure class=&quot;lift rounded mb-6&quot;&gt;&lt;a href=&quot;./single-project2.html&quot;&gt; &lt;img src=&quot;./assets/img/photos/rp2.jpg&quot; srcset=&quot;./assets/img/photos/rp2@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;post-category mb-3 text-orange&quot;&gt;Invitation&lt;/div&gt;
&lt;h3 class=&quot;post-title&quot;&gt;Mollis Ipsum Mattis&lt;/h3&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;div class=&quot;item col-md-5&quot;&gt;
&lt;figure class=&quot;lift rounded mb-6&quot;&gt;&lt;a href=&quot;./single-project.html&quot;&gt; &lt;img src=&quot;./assets/img/photos/rp3.jpg&quot; srcset=&quot;./assets/img/photos/rp3@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;post-category mb-3 text-red&quot;&gt;Notebook&lt;/div&gt;
&lt;h3 class=&quot;post-title&quot;&gt;Magna Tristique Inceptos&lt;/h3&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;/div&gt;
&lt;!-- /.projects-tiles --&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">
<div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
<h2 class="fs-15 text-uppercase text-muted mb-3">Latest Projects</h2>
<h3 class="display-4 mb-10">Check out some of our awesome projects with <span class="underline-3 style-2 yellow">creative</span> ideas and great design.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="swiper-container grid-view mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="rounded mb-6"><img src="../../assets/img/photos/pd7.jpg" srcset="../../assets/img/photos/pd7@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3"><a href="../../single-project.html" class="link-dark">Cras Fermentum Sem</a></h2>
<div class="post-category text-ash">Stationary</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded mb-6"><img src="../../assets/img/photos/pd8.jpg" srcset="../../assets/img/photos/pd8@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3"><a href="../../single-project2.html" class="link-dark">Mollis Ipsum Mattis</a></h2>
<div class="post-category text-ash">Magazine, Book</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded mb-6"><img src="../../assets/img/photos/pd9.jpg" srcset="../../assets/img/photos/pd9@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3"><a href="../../single-project3.html" class="link-dark">Ipsum Ultricies Cursus</a></h2>
<div class="post-category text-ash">Packaging</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded mb-6"><img src="../../assets/img/photos/pd10.jpg" srcset="../../assets/img/photos/pd10@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3"><a href="../../single-project.html" class="link-dark">Inceptos Euismod Egestas</a></h2>
<div class="post-category text-ash">Stationary, Branding</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded mb-6"><img src="../../assets/img/photos/pd11.jpg" srcset="../../assets/img/photos/pd11@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3"><a href="../../single-project2.html" class="link-dark">Ipsum Mollis Vulputate</a></h2>
<div class="post-category text-ash">Packaging</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded mb-6"><img src="../../assets/img/photos/pd12.jpg" srcset="../../assets/img/photos/pd12@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3"><a href="../../single-project3.html" class="link-dark">Porta Ornare Cras</a></h2>
<div class="post-category text-ash">Branding</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</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&quot;&gt;
&lt;div class=&quot;col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center&quot;&gt;
&lt;h2 class=&quot;fs-15 text-uppercase text-muted mb-3&quot;&gt;Latest Projects&lt;/h2&gt;
&lt;h3 class=&quot;display-4 mb-10&quot;&gt;Check out some of our awesome projects with &lt;span class=&quot;underline-3 style-2 yellow&quot;&gt;creative&lt;/span&gt; ideas and great design.&lt;/h3&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;swiper-container grid-view mb-6&quot; data-margin=&quot;30&quot; data-dots=&quot;true&quot; data-items-xl=&quot;3&quot; data-items-md=&quot;2&quot; data-items-xs=&quot;1&quot;&gt;
&lt;div class=&quot;swiper&quot;&gt;
&lt;div class=&quot;swiper-wrapper&quot;&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded mb-6&quot;&gt;&lt;img src=&quot;./assets/img/photos/pd7.jpg&quot; srcset=&quot;./assets/img/photos/pd7@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/pd7-full.jpg&quot; data-glightbox data-gallery=&quot;projects-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;&lt;a href=&quot;./single-project.html&quot; class=&quot;link-dark&quot;&gt;Cras Fermentum Sem&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Stationary&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded mb-6&quot;&gt;&lt;img src=&quot;./assets/img/photos/pd8.jpg&quot; srcset=&quot;./assets/img/photos/pd8@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/pd8-full.jpg&quot; data-glightbox data-gallery=&quot;projects-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;&lt;a href=&quot;./single-project2.html&quot; class=&quot;link-dark&quot;&gt;Mollis Ipsum Mattis&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Magazine, Book&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded mb-6&quot;&gt;&lt;img src=&quot;./assets/img/photos/pd9.jpg&quot; srcset=&quot;./assets/img/photos/pd9@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/pd9-full.jpg&quot; data-glightbox data-gallery=&quot;projects-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;&lt;a href=&quot;./single-project3.html&quot; class=&quot;link-dark&quot;&gt;Ipsum Ultricies Cursus&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Packaging&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded mb-6&quot;&gt;&lt;img src=&quot;./assets/img/photos/pd10.jpg&quot; srcset=&quot;./assets/img/photos/pd10@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/pd10-full.jpg&quot; data-glightbox data-gallery=&quot;projects-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;&lt;a href=&quot;./single-project.html&quot; class=&quot;link-dark&quot;&gt;Inceptos Euismod Egestas&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Stationary, Branding&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded mb-6&quot;&gt;&lt;img src=&quot;./assets/img/photos/pd11.jpg&quot; srcset=&quot;./assets/img/photos/pd11@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/pd11-full.jpg&quot; data-glightbox data-gallery=&quot;projects-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;&lt;a href=&quot;./single-project2.html&quot; class=&quot;link-dark&quot;&gt;Ipsum Mollis Vulputate&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Packaging&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded mb-6&quot;&gt;&lt;img src=&quot;./assets/img/photos/pd12.jpg&quot; srcset=&quot;./assets/img/photos/pd12@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/pd12-full.jpg&quot; data-glightbox data-gallery=&quot;projects-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;&lt;a href=&quot;./single-project3.html&quot; class=&quot;link-dark&quot;&gt;Porta Ornare Cras&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Branding&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;/div&gt;
&lt;!--/.swiper-wrapper --&gt;
&lt;/div&gt;
&lt;!-- /.swiper --&gt;
&lt;/div&gt;
&lt;!-- /.swiper-container --&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">
<div class="projects-tiles">
<div class="project grid grid-view">
<div class="row gx-md-8 gx-xl-12 gy-10 gy-md-12 isotope">
<div class="item col-md-6 mt-md-7 mt-lg-15">
<div class="project-details d-flex justify-content-center align-self-end flex-column ps-0 pb-0">
<div class="post-header">
<h2 class="display-4 mb-4 pe-xxl-15">Check out some of our recent projects below.</h2>
<p class="lead fs-lg mb-0">We love to turn ideas into beautiful things.</p>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.item -->
<div class="item col-md-6">
<figure class="lift rounded mb-6"><a href="../../single-project3.html"> <img src="../../assets/img/photos/rp1.jpg" srcset="../../assets/img/photos/rp1@2x.jpg 2x" alt="" /></a></figure>
<div class="post-category text-line mb-3 text-violet">Stationary</div>
<h2 class="post-title h3">Ipsum Ultricies Cursus</h2>
</div>
<!-- /.item -->
<div class="item col-md-6">
<figure class="lift rounded mb-6"><a href="../../single-project2.html"> <img src="../../assets/img/photos/rp2.jpg" srcset="../../assets/img/photos/rp2@2x.jpg 2x" alt="" /></a></figure>
<div class="post-category text-line mb-3 text-leaf">Invitation</div>
<h2 class="post-title h3">Mollis Ipsum Mattis</h2>
</div>
<!-- /.item -->
<div class="item col-md-6">
<figure class="lift rounded mb-6"><a href="../../single-project.html"> <img src="../../assets/img/photos/rp3.jpg" srcset="../../assets/img/photos/rp3@2x.jpg 2x" alt="" /></a></figure>
<div class="post-category text-line mb-3 text-purple">Notebook</div>
<h2 class="post-title h3">Magna Tristique Inceptos</h2>
</div>
<!-- /.item -->
</div>
<!-- /.row -->
</div>
<!-- /.project -->
</div>
<!-- /.projects-tiles -->
</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 py-md-16&quot;&gt;
&lt;div class=&quot;projects-tiles&quot;&gt;
&lt;div class=&quot;project grid grid-view&quot;&gt;
&lt;div class=&quot;row gx-md-8 gx-xl-12 gy-10 gy-md-12 isotope&quot;&gt;
&lt;div class=&quot;item col-md-6 mt-md-7 mt-lg-15&quot;&gt;
&lt;div class=&quot;project-details d-flex justify-content-center align-self-end flex-column ps-0 pb-0&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;display-4 mb-4 pe-xxl-15&quot;&gt;Check out some of our recent projects below.&lt;/h2&gt;
&lt;p class=&quot;lead fs-lg mb-0&quot;&gt;We love to turn ideas into beautiful things.&lt;/p&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;div class=&quot;item col-md-6&quot;&gt;
&lt;figure class=&quot;lift rounded mb-6&quot;&gt;&lt;a href=&quot;./single-project3.html&quot;&gt; &lt;img src=&quot;./assets/img/photos/rp1.jpg&quot; srcset=&quot;./assets/img/photos/rp1@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;post-category text-line mb-3 text-violet&quot;&gt;Stationary&lt;/div&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;Ipsum Ultricies Cursus&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;div class=&quot;item col-md-6&quot;&gt;
&lt;figure class=&quot;lift rounded mb-6&quot;&gt;&lt;a href=&quot;./single-project2.html&quot;&gt; &lt;img src=&quot;./assets/img/photos/rp2.jpg&quot; srcset=&quot;./assets/img/photos/rp2@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;post-category text-line mb-3 text-leaf&quot;&gt;Invitation&lt;/div&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;Mollis Ipsum Mattis&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;div class=&quot;item col-md-6&quot;&gt;
&lt;figure class=&quot;lift rounded mb-6&quot;&gt;&lt;a href=&quot;./single-project.html&quot;&gt; &lt;img src=&quot;./assets/img/photos/rp3.jpg&quot; srcset=&quot;./assets/img/photos/rp3@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;post-category text-line mb-3 text-purple&quot;&gt;Notebook&lt;/div&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;Magna Tristique Inceptos&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;/div&gt;
&lt;!-- /.projects-tiles --&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">
<div class="row">
<div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center">
<h2 class="fs-15 text-uppercase text-muted mb-3">Latest Projects</h2>
<h3 class="display-4 mb-10">Check out some of our awesome projects with creative ideas and great design.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container-fluid px-md-6">
<div class="swiper-container blog grid-view mb-14 mb-md-16" data-margin="30" data-nav="true" data-dots="true" data-items-xxl="3" data-items-md="2" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="rounded"><img src="../../assets/img/photos/pp10.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded"><img src="../../assets/img/photos/pp11.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded"><img src="../../assets/img/photos/pp12.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded"><img src="../../assets/img/photos/pp13.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded"><img src="../../assets/img/photos/pp14.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded"><img src="../../assets/img/photos/pp15.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded"><img src="../../assets/img/photos/pp16.jpg" alt="" /></figure>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.container-fluid -->
<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 pt-14 pt-md-16&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-9 col-xl-8 col-xxl-7 mx-auto text-center&quot;&gt;
&lt;h2 class=&quot;fs-15 text-uppercase text-muted mb-3&quot;&gt;Latest Projects&lt;/h2&gt;
&lt;h3 class=&quot;display-4 mb-10&quot;&gt;Check out some of our awesome projects with creative ideas and great design.&lt;/h3&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;div class=&quot;container-fluid px-md-6&quot;&gt;
&lt;div class=&quot;swiper-container blog grid-view mb-17 mb-md-19&quot; data-margin=&quot;30&quot; data-nav=&quot;true&quot; data-dots=&quot;true&quot; data-items-xxl=&quot;3&quot; data-items-md=&quot;2&quot; data-items-xs=&quot;1&quot;&gt;
&lt;div class=&quot;swiper&quot;&gt;
&lt;div class=&quot;swiper-wrapper&quot;&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/pp10.jpg&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/pp11.jpg&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/pp12.jpg&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/pp13.jpg&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/pp14.jpg&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/pp15.jpg&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded&quot;&gt;&lt;img src=&quot;./assets/img/photos/pp16.jpg&quot; alt=&quot;&quot; /&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;/div&gt;
&lt;!--/.swiper-wrapper --&gt;
&lt;/div&gt;
&lt;!-- /.swiper --&gt;
&lt;/div&gt;
&lt;!-- /.swiper-container --&gt;
&lt;/div&gt;
&lt;!-- /.container-fluid --&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">
<div class="col-lg-9 col-xl-8 col-xxl-7 mx-auto mb-8">
<h2 class="fs-15 text-uppercase text-muted text-center mb-3">Our Projects</h2>
<h3 class="display-4 text-center">Check out some of our awesome projects with creative ideas and great design.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="grid grid-view projects-masonry">
<div class="row gx-md-8 gy-10 gy-md-13 isotope">
<div class="project item col-md-6 col-xl-4 product">
<figure class="lift rounded mb-6"><a href="../../single-project.html"> <img src="../../assets/img/photos/cs16.jpg" alt="" /></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<div class="post-category text-line mb-3 text-purple">Cosmetic</div>
<h2 class="post-title h3">Cras Fermentum Sem</h2>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 workshop">
<figure class="lift rounded mb-6"><a href="../../single-project2.html"> <img src="../../assets/img/photos/cs17.jpg" alt="" /></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<div class="post-category text-line mb-3 text-leaf">Coffee</div>
<h2 class="post-title h3">Mollis Ipsum Mattis</h2>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 still-life">
<figure class="lift rounded mb-6"><a href="../../single-project3.html"> <img src="../../assets/img/photos/cs18.jpg" alt="" /></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<div class="post-category text-line mb-3 text-violet">Still Life</div>
<h2 class="post-title h3">Ipsum Ultricies Cursus</h2>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 product">
<figure class="lift rounded mb-6"><a href="../../single-project2.html"> <img src="../../assets/img/photos/cs20.jpg" alt="" /></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<div class="post-category text-line mb-3 text-orange">Product</div>
<h2 class="post-title h3">Inceptos Euismod Egestas</h2>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 product">
<figure class="lift rounded mb-6"><a href="../../single-project.html"> <img src="../../assets/img/photos/cs19.jpg" alt="" /></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<div class="post-category text-line mb-3 text-yellow">Product</div>
<h2 class="post-title h3">Sollicitudin Ornare Porta</h2>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 workshop">
<figure class="lift rounded mb-6"><a href="../../single-project3.html"> <img src="../../assets/img/photos/cs21.jpg" alt="" /></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<div class="post-category text-line mb-3 text-green">Workshop</div>
<h2 class="post-title h3">Ipsum Mollis Vulputate</h2>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.project -->
</div>
<!-- /.row -->
</div>
<!-- /.grid -->
</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&quot;&gt;
&lt;div class=&quot;col-lg-9 col-xl-8 col-xxl-7 mx-auto mb-8&quot;&gt;
&lt;h2 class=&quot;fs-15 text-uppercase text-muted text-center mb-3&quot;&gt;Our Projects&lt;/h2&gt;
&lt;h3 class=&quot;display-4 text-center&quot;&gt;Check out some of our awesome projects with creative ideas and great design.&lt;/h3&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;grid grid-view projects-masonry&quot;&gt;
&lt;div class=&quot;row gx-md-8 gy-10 gy-md-13 isotope&quot;&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 product&quot;&gt;
&lt;figure class=&quot;lift rounded mb-6&quot;&gt;&lt;a href=&quot;./single-project.html&quot;&gt; &lt;img src=&quot;./assets/img/photos/cs16.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;div class=&quot;post-category text-line mb-3 text-purple&quot;&gt;Cosmetic&lt;/div&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;Cras Fermentum Sem&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 workshop&quot;&gt;
&lt;figure class=&quot;lift rounded mb-6&quot;&gt;&lt;a href=&quot;./single-project2.html&quot;&gt; &lt;img src=&quot;./assets/img/photos/cs17.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;div class=&quot;post-category text-line mb-3 text-leaf&quot;&gt;Coffee&lt;/div&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;Mollis Ipsum Mattis&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 still-life&quot;&gt;
&lt;figure class=&quot;lift rounded mb-6&quot;&gt;&lt;a href=&quot;./single-project3.html&quot;&gt; &lt;img src=&quot;./assets/img/photos/cs18.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;div class=&quot;post-category text-line mb-3 text-violet&quot;&gt;Still Life&lt;/div&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;Ipsum Ultricies Cursus&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 product&quot;&gt;
&lt;figure class=&quot;lift rounded mb-6&quot;&gt;&lt;a href=&quot;./single-project2.html&quot;&gt; &lt;img src=&quot;./assets/img/photos/cs20.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;div class=&quot;post-category text-line mb-3 text-orange&quot;&gt;Product&lt;/div&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;Inceptos Euismod Egestas&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 product&quot;&gt;
&lt;figure class=&quot;lift rounded mb-6&quot;&gt;&lt;a href=&quot;./single-project.html&quot;&gt; &lt;img src=&quot;./assets/img/photos/cs19.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;div class=&quot;post-category text-line mb-3 text-yellow&quot;&gt;Product&lt;/div&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;Sollicitudin Ornare Porta&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 workshop&quot;&gt;
&lt;figure class=&quot;lift rounded mb-6&quot;&gt;&lt;a href=&quot;./single-project3.html&quot;&gt; &lt;img src=&quot;./assets/img/photos/cs21.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;div class=&quot;post-category text-line mb-3 text-green&quot;&gt;Workshop&lt;/div&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;Ipsum Mollis Vulputate&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.grid --&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 align-items-center mb-10">
<div class="col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20">
<h2 class="display-4 mb-3">Latest Projects</h2>
<p class="lead fs-20 mb-0">Check out some of my latest projects with creative ideas.</p>
</div>
<!--/column -->
<div class="col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0">
<a href="#" class="btn btn-primary rounded-pill mb-0">See All Projects</a>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="card bg-soft-violet mb-10">
<div class="card-body p-12 pb-0">
<div class="row">
<div class="col-lg-4 pb-12 align-self-center">
<div class="post-category mb-3 text-violet">Web Design</div>
<h3 class="h1 post-title mb-3">Snowlake Theme</h3>
<p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>
<a href="#" class="more hover link-violet">See Project</a>
</div>
<!-- /column -->
<div class="col-lg-7 offset-lg-1 align-self-end">
<figure><img class="img-fluid" src="../../assets/img/photos/f1.png" srcset="../../assets/img/photos/f1@2x.png 2x" alt="" /></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
<div class="card bg-soft-blue mb-10">
<div class="card-body p-12">
<div class="row gy-10 align-items-center">
<div class="col-lg-4 order-lg-2 offset-lg-1">
<div class="post-category mb-3 text-blue">Mobile Design</div>
<h3 class="h1 post-title mb-3">Budget App</h3>
<p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>
<a href="#" class="more hover link-blue">See Project</a>
</div>
<!-- /column -->
<div class="col-lg-7">
<figure><img class="img-fluid" src="../../assets/img/photos/f2.png" srcset="../../assets/img/photos/f2@2x.png 2x" alt="" /></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!--/.card-body -->
</div>
<!--/.card -->
<div class="row gx-md-8 gx-xl-10">
<div class="col-lg-6">
<div class="card bg-soft-leaf mb-10 mb-lg-0">
<div class="card-body p-12 pb-0">
<div class="post-category mb-3 text-leaf">Web Design</div>
<h3 class="h1 post-title mb-3">Missio Theme</h3>
<p>Maecenas faucibus mollis interdum sed posuere porta consectetur cursus porta lobortis. Scelerisque id ligula felis.</p>
<a href="#" class="more hover link-leaf mb-8">See Project</a>
</div>
<!--/.card-body -->
<img class="card-img-bottom" src="../../assets/img/photos/f3.png" srcset="../../assets/img/photos/f3@2x.png 2x" alt="" />
</div>
<!--/.card -->
</div>
<!-- /column -->
<div class="col-lg-6">
<div class="card bg-soft-pink mb-lg-0">
<div class="card-body p-12 pb-0">
<div class="post-category mb-3 text-pink">Mobile Design</div>
<h3 class="h1 post-title mb-3">Storage App</h3>
<p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper.</p>
<a href="#" class="more hover link-pink mb-8">See Project</a>
</div>
<!--/.card-body -->
<img class="card-img-bottom" src="../../assets/img/photos/f4.png" srcset="../../assets/img/photos/f4@2x.png 2x" alt="" />
</div>
<!--/.card -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<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 pt-md-16&quot;&gt;
&lt;div class=&quot;row align-items-center mb-10&quot;&gt;
&lt;div class=&quot;col-md-8 col-lg-9 col-xl-8 col-xxl-7 pe-xl-20&quot;&gt;
&lt;h2 class=&quot;display-4 mb-3&quot;&gt;Latest Projects&lt;/h2&gt;
&lt;p class=&quot;lead fs-20 mb-0&quot;&gt;Check out some of my latest projects with creative ideas.&lt;/p&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;col-md-4 col-lg-3 ms-md-auto text-md-end mt-5 mt-md-0&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary rounded-pill mb-0&quot;&gt;See All Projects&lt;/a&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
&lt;!--/.row --&gt;
&lt;div class=&quot;card bg-soft-violet mb-10&quot;&gt;
&lt;div class=&quot;card-body p-12 pb-0&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-4 pb-12 align-self-center&quot;&gt;
&lt;div class=&quot;post-category mb-3 text-violet&quot;&gt;Web Design&lt;/div&gt;
&lt;h3 class=&quot;h1 post-title mb-3&quot;&gt;Snowlake Theme&lt;/h3&gt;
&lt;p&gt;Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover link-violet&quot;&gt;See Project&lt;/a&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-lg-7 offset-lg-1 align-self-end&quot;&gt;
&lt;figure&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;./assets/img/photos/f1.png&quot; srcset=&quot;./assets/img/photos/f1@2x.png 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;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;div class=&quot;card bg-soft-blue mb-10&quot;&gt;
&lt;div class=&quot;card-body p-12&quot;&gt;
&lt;div class=&quot;row gy-10 align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-4 order-lg-2 offset-lg-1&quot;&gt;
&lt;div class=&quot;post-category mb-3 text-blue&quot;&gt;Mobile Design&lt;/div&gt;
&lt;h3 class=&quot;h1 post-title mb-3&quot;&gt;Budget App&lt;/h3&gt;
&lt;p&gt;Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover link-blue&quot;&gt;See Project&lt;/a&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-lg-7&quot;&gt;
&lt;figure&gt;&lt;img class=&quot;img-fluid&quot; src=&quot;./assets/img/photos/f2.png&quot; srcset=&quot;./assets/img/photos/f2@2x.png 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;!--/.card-body --&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;div class=&quot;row gx-md-8 gx-xl-10&quot;&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;div class=&quot;card bg-soft-leaf mb-10&quot;&gt;
&lt;div class=&quot;card-body p-12 pb-0&quot;&gt;
&lt;div class=&quot;post-category mb-3 text-leaf&quot;&gt;Web Design&lt;/div&gt;
&lt;h3 class=&quot;h1 post-title mb-3&quot;&gt;Missio Theme&lt;/h3&gt;
&lt;p&gt;Maecenas faucibus mollis interdum sed posuere porta consectetur cursus porta lobortis. Scelerisque id ligula felis.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover link-leaf mb-8&quot;&gt;See Project&lt;/a&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;img class=&quot;card-img-bottom&quot; src=&quot;./assets/img/photos/f3.png&quot; srcset=&quot;./assets/img/photos/f3@2x.png 2x&quot; alt=&quot;&quot; /&gt;
&lt;/div&gt;
&lt;!--/.card --&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-lg-6&quot;&gt;
&lt;div class=&quot;card bg-soft-pink&quot;&gt;
&lt;div class=&quot;card-body p-12 pb-0&quot;&gt;
&lt;div class=&quot;post-category mb-3 text-pink&quot;&gt;Mobile Design&lt;/div&gt;
&lt;h3 class=&quot;h1 post-title mb-3&quot;&gt;Storage App&lt;/h3&gt;
&lt;p&gt;Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;more hover link-pink mb-8&quot;&gt;See Project&lt;/a&gt;
&lt;/div&gt;
&lt;!--/.card-body --&gt;
&lt;img class=&quot;card-img-bottom&quot; src=&quot;./assets/img/photos/f4.png&quot; srcset=&quot;./assets/img/photos/f4@2x.png 2x&quot; alt=&quot;&quot; /&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-7" class="wrapper bg-light wrapper-border">
<div class="overflow-hidden">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row">
<div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center">
<h2 class="fs-16 text-uppercase text-primary mb-3">Latest Projects</h2>
<h3 class="display-3 mb-10">Check out some of our awesome projects with creative ideas and great design.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="swiper-container grid-view nav-bottom nav-color mb-14" data-margin="30" data-dots="false" data-nav="true" data-items-md="2" data-items-xs="1">
<div class="swiper overflow-visible">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="rounded mb-7"><a href="../../single-project.html"><img src="../../assets/img/photos/sp1.jpg" srcset="../../assets/img/photos/sp1@2x.jpg 2x" alt="" /></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3"><a href="../../single-project.html" class="link-dark">Cras Fermentum Sem</a></h2>
<div class="post-category text-ash">Mobile Design</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded mb-7"><a href="../../single-project.html"><img src="../../assets/img/photos/sp2.jpg" srcset="../../assets/img/photos/sp2@2x.jpg 2x" alt="" /></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3"><a href="../../single-project.html" class="link-dark">Venenatis Euismod Vehicula</a></h2>
<div class="post-category text-ash">Web Design</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded mb-7"><a href="../../single-project.html"><img src="../../assets/img/photos/sp3.jpg" srcset="../../assets/img/photos/sp3@2x.jpg 2x" alt="" /></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3"><a href="../../single-project.html" class="link-dark">Tortor Tellus Cursus</a></h2>
<div class="post-category text-ash">Stationary</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded mb-7"><a href="../../single-project.html"><img src="../../assets/img/photos/sp4.jpg" srcset="../../assets/img/photos/sp4@2x.jpg 2x" alt="" /></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3"><a href="../../single-project.html" class="link-dark">Ridiculus Sem Parturient</a></h2>
<div class="post-category text-ash">Web Application</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded mb-7"><a href="../../single-project.html"><img src="../../assets/img/photos/sp5.jpg" srcset="../../assets/img/photos/sp5@2x.jpg 2x" alt="" /></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3"><a href="../../single-project.html" class="link-dark">Cursus Sollicitudin Adipiscing</a></h2>
<div class="post-category text-ash">Web Design</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure class="rounded mb-7"><a href="../../single-project.html"><img src="../../assets/img/photos/sp6.jpg" srcset="../../assets/img/photos/sp6@2x.jpg 2x" alt="" /></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3"><a href="../../single-project.html" class="link-dark">Fringilla Quam Vulputate</a></h2>
<div class="post-category text-ash">Stationary</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.container -->
</div>
<!-- /.overflow-hidden -->
<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;overflow-hidden&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center&quot;&gt;
&lt;h2 class=&quot;fs-16 text-uppercase text-primary mb-3&quot;&gt;Latest Projects&lt;/h2&gt;
&lt;h3 class=&quot;display-3 mb-10&quot;&gt;Check out some of our awesome projects with creative ideas and great design.&lt;/h3&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;swiper-container grid-view nav-bottom nav-color mb-14&quot; data-margin=&quot;30&quot; data-dots=&quot;false&quot; data-nav=&quot;true&quot; data-items-md=&quot;2&quot; data-items-xs=&quot;1&quot;&gt;
&lt;div class=&quot;swiper overflow-visible&quot;&gt;
&lt;div class=&quot;swiper-wrapper&quot;&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded mb-7&quot;&gt;&lt;a href=&quot;./single-project.html&quot;&gt;&lt;img src=&quot;./assets/img/photos/sp1.jpg&quot; srcset=&quot;./assets/img/photos/sp1@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;&lt;a href=&quot;./single-project.html&quot; class=&quot;link-dark&quot;&gt;Cras Fermentum Sem&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Mobile Design&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded mb-7&quot;&gt;&lt;a href=&quot;./single-project.html&quot;&gt;&lt;img src=&quot;./assets/img/photos/sp2.jpg&quot; srcset=&quot;./assets/img/photos/sp2@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;&lt;a href=&quot;./single-project.html&quot; class=&quot;link-dark&quot;&gt;Venenatis Euismod Vehicula&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Web Design&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded mb-7&quot;&gt;&lt;a href=&quot;./single-project.html&quot;&gt;&lt;img src=&quot;./assets/img/photos/sp3.jpg&quot; srcset=&quot;./assets/img/photos/sp3@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;&lt;a href=&quot;./single-project.html&quot; class=&quot;link-dark&quot;&gt;Tortor Tellus Cursus&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Stationary&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded mb-7&quot;&gt;&lt;a href=&quot;./single-project.html&quot;&gt;&lt;img src=&quot;./assets/img/photos/sp4.jpg&quot; srcset=&quot;./assets/img/photos/sp4@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;&lt;a href=&quot;./single-project.html&quot; class=&quot;link-dark&quot;&gt;Ridiculus Sem Parturient&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Web Application&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded mb-7&quot;&gt;&lt;a href=&quot;./single-project.html&quot;&gt;&lt;img src=&quot;./assets/img/photos/sp5.jpg&quot; srcset=&quot;./assets/img/photos/sp5@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;&lt;a href=&quot;./single-project.html&quot; class=&quot;link-dark&quot;&gt;Cursus Sollicitudin Adipiscing&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Web Design&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;div class=&quot;swiper-slide&quot;&gt;
&lt;figure class=&quot;rounded mb-7&quot;&gt;&lt;a href=&quot;./single-project.html&quot;&gt;&lt;img src=&quot;./assets/img/photos/sp6.jpg&quot; srcset=&quot;./assets/img/photos/sp6@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3&quot;&gt;&lt;a href=&quot;./single-project.html&quot; class=&quot;link-dark&quot;&gt;Fringilla Quam Vulputate&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Stationary&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!--/.swiper-slide --&gt;
&lt;/div&gt;
&lt;!--/.swiper-wrapper --&gt;
&lt;/div&gt;
&lt;!-- /.swiper --&gt;
&lt;/div&gt;
&lt;!-- /.swiper-container --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/div&gt;
&lt;!-- /.overflow-hidden --&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">
<div class="col-lg-11 col-xl-10 mx-auto mb-10">
<h2 class="fs-16 text-uppercase text-muted text-center mb-3">Our Projects</h2>
<h3 class="display-3 text-center px-lg-5 px-xl-10 px-xxl-16 mb-0">Check out some of our awesome projects with creative ideas and great design.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="grid grid-view projects-masonry">
<div class="row gx-md-8 gy-10 gy-md-13 isotope">
<div class="project item col-md-6 col-xl-4">
<figure class="rounded mb-6"><img src="../../assets/img/photos/pd7.jpg" srcset="../../assets/img/photos/pd7@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3 fs-22"><a href="../../single-project.html" class="link-dark">Cras Fermentum Sem</a></h2>
<div class="post-category text-ash">Stationary</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.item -->
<div class="project item col-md-6 col-xl-4">
<figure class="rounded mb-6"><img src="../../assets/img/photos/pd8.jpg" srcset="../../assets/img/photos/pd8@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3 fs-22"><a href="../../single-project2.html" class="link-dark">Mollis Ipsum Mattis</a></h2>
<div class="post-category text-ash">Magazine, Book</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.item -->
<div class="project item col-md-6 col-xl-4">
<figure class="rounded mb-6"><img src="../../assets/img/photos/pd9.jpg" srcset="../../assets/img/photos/pd9@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3 fs-22"><a href="../../single-project3.html" class="link-dark">Ipsum Ultricies Cursus</a></h2>
<div class="post-category text-ash">Packaging</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.item -->
<div class="project item col-md-6 col-xl-4">
<figure class="rounded mb-6"><img src="../../assets/img/photos/pd10.jpg" srcset="../../assets/img/photos/pd10@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3 fs-22"><a href="../../single-project.html" class="link-dark">Inceptos Euismod Egestas</a></h2>
<div class="post-category text-ash">Stationary, Branding</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.item -->
<div class="project item col-md-6 col-xl-4">
<figure class="rounded mb-6"><img src="../../assets/img/photos/pd11.jpg" srcset="../../assets/img/photos/pd11@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3 fs-22"><a href="../../single-project2.html" class="link-dark">Ipsum Mollis Vulputate</a></h2>
<div class="post-category text-ash">Packaging</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.item -->
<div class="project item col-md-6 col-xl-4">
<figure class="rounded mb-6"><img src="../../assets/img/photos/pd12.jpg" srcset="../../assets/img/photos/pd12@2x.jpg 2x" alt="" /><a class="item-link" href="../../assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add"></i></a></figure>
<div class="project-details d-flex justify-content-center flex-column">
<div class="post-header">
<h2 class="post-title h3 fs-22"><a href="../../single-project3.html" class="link-dark">Porta Ornare Cras</a></h2>
<div class="post-category text-ash">Branding</div>
</div>
<!-- /.post-header -->
</div>
<!-- /.project-details -->
</div>
<!-- /.item -->
</div>
<!-- /.row -->
</div>
<!-- /.grid -->
<div class="text-center mt-10">
<a href="#" class="btn btn-lg btn-primary rounded-pill">Start a Project</a>
</div>
</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&quot;&gt;
&lt;div class=&quot;col-lg-11 col-xl-10 mx-auto mb-10&quot;&gt;
&lt;h2 class=&quot;fs-16 text-uppercase text-muted text-center mb-3&quot;&gt;Our Projects&lt;/h2&gt;
&lt;h3 class=&quot;display-3 text-center px-lg-5 px-xl-10 px-xxl-16 mb-0&quot;&gt;Check out some of our awesome projects with creative ideas and great design.&lt;/h3&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;grid grid-view projects-masonry&quot;&gt;
&lt;div class=&quot;row gx-md-8 gy-10 gy-md-13 isotope&quot;&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4&quot;&gt;
&lt;figure class=&quot;rounded mb-6&quot;&gt;&lt;img src=&quot;./assets/img/photos/pd7.jpg&quot; srcset=&quot;./assets/img/photos/pd7@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/pd7-full.jpg&quot; data-glightbox data-gallery=&quot;projects-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3 fs-22&quot;&gt;&lt;a href=&quot;./single-project.html&quot; class=&quot;link-dark&quot;&gt;Cras Fermentum Sem&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Stationary&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4&quot;&gt;
&lt;figure class=&quot;rounded mb-6&quot;&gt;&lt;img src=&quot;./assets/img/photos/pd8.jpg&quot; srcset=&quot;./assets/img/photos/pd8@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/pd8-full.jpg&quot; data-glightbox data-gallery=&quot;projects-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3 fs-22&quot;&gt;&lt;a href=&quot;./single-project2.html&quot; class=&quot;link-dark&quot;&gt;Mollis Ipsum Mattis&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Magazine, Book&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4&quot;&gt;
&lt;figure class=&quot;rounded mb-6&quot;&gt;&lt;img src=&quot;./assets/img/photos/pd9.jpg&quot; srcset=&quot;./assets/img/photos/pd9@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/pd9-full.jpg&quot; data-glightbox data-gallery=&quot;projects-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3 fs-22&quot;&gt;&lt;a href=&quot;./single-project3.html&quot; class=&quot;link-dark&quot;&gt;Ipsum Ultricies Cursus&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Packaging&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4&quot;&gt;
&lt;figure class=&quot;rounded mb-6&quot;&gt;&lt;img src=&quot;./assets/img/photos/pd10.jpg&quot; srcset=&quot;./assets/img/photos/pd10@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/pd10-full.jpg&quot; data-glightbox data-gallery=&quot;projects-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3 fs-22&quot;&gt;&lt;a href=&quot;./single-project.html&quot; class=&quot;link-dark&quot;&gt;Inceptos Euismod Egestas&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Stationary, Branding&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4&quot;&gt;
&lt;figure class=&quot;rounded mb-6&quot;&gt;&lt;img src=&quot;./assets/img/photos/pd11.jpg&quot; srcset=&quot;./assets/img/photos/pd11@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/pd11-full.jpg&quot; data-glightbox data-gallery=&quot;projects-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3 fs-22&quot;&gt;&lt;a href=&quot;./single-project2.html&quot; class=&quot;link-dark&quot;&gt;Ipsum Mollis Vulputate&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Packaging&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4&quot;&gt;
&lt;figure class=&quot;rounded mb-6&quot;&gt;&lt;img src=&quot;./assets/img/photos/pd12.jpg&quot; srcset=&quot;./assets/img/photos/pd12@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;a class=&quot;item-link&quot; href=&quot;./assets/img/photos/pd12-full.jpg&quot; data-glightbox data-gallery=&quot;projects-group&quot;&gt;&lt;i class=&quot;uil uil-focus-add&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;div class=&quot;project-details d-flex justify-content-center flex-column&quot;&gt;
&lt;div class=&quot;post-header&quot;&gt;
&lt;h2 class=&quot;post-title h3 fs-22&quot;&gt;&lt;a href=&quot;./single-project3.html&quot; class=&quot;link-dark&quot;&gt;Porta Ornare Cras&lt;/a&gt;&lt;/h2&gt;
&lt;div class=&quot;post-category text-ash&quot;&gt;Branding&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.post-header --&gt;
&lt;/div&gt;
&lt;!-- /.project-details --&gt;
&lt;/div&gt;
&lt;!-- /.item --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.grid --&gt;
&lt;div class=&quot;text-center mt-10&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-lg btn-primary rounded-pill&quot;&gt;Start a Project&lt;/a&gt;
&lt;/div&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 pt-15 pt-md-17 pb-13 pb-md-15 text-center">
<div class="row">
<div class="col-lg-10 col-xl-8 col-xxl-7 mx-auto mb-8">
<h2 class="display-5 mb-3">My Selected Shots</h2>
<p class="lead fs-lg">Photography is my passion and I love to turn ideas into beautiful things.</p>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="grid grid-view projects-masonry">
<div class="isotope-filter filter mb-10">
<ul>
<li><a class="filter-item active" data-filter="*">All</a></li>
<li><a class="filter-item" data-filter=".foods">Foods</a></li>
<li><a class="filter-item" data-filter=".drinks">Drinks</a></li>
<li><a class="filter-item" data-filter=".events">Events</a></li>
<li><a class="filter-item" data-filter=".pastries">Pastries</a></li>
</ul>
</div>
<div class="row gx-md-6 gy-6 isotope">
<div class="project item col-md-6 col-xl-4 drinks events">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf1-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf1.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Fringilla Nullam</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 events">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf2-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf2.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Ridiculus Parturient</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 drinks foods">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf3-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf3.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Ornare Ipsum</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 events">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf4-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf4.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Nullam Mollis</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 pastries events">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf5-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf5.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Euismod Risus</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 foods">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf6-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf6.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Ridiculus Tristique</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 foods drinks">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf7-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf7.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Sollicitudin Pharetra</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 pastries">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf8-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf8.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Tristique Venenatis</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 events">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf9-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf9.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Cursus Fusce</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 foods">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf10-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf10.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Consectetur Malesuada</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 drinks">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf11-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf11.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Ultricies Aenean</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 foods">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf12-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf12.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Pellentesque Commodo</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
<div class="project item col-md-6 col-xl-4 drinks">
<figure class="overlay overlay-1 rounded"><a href="../../assets/img/photos/pf13-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf13.jpg" alt="" /></a>
<figcaption>
<h5 class="from-top mb-0">Ultricies Aenean</h5>
</figcaption>
</figure>
</div>
<!-- /.project -->
</div>
<!-- /.row -->
</div>
<!-- /.grid -->
</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 text-center&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-lg-10 col-xl-8 col-xxl-7 mx-auto mb-8&quot;&gt;
&lt;h2 class=&quot;display-5 mb-3&quot;&gt;My Selected Shots&lt;/h2&gt;
&lt;p class=&quot;lead fs-lg&quot;&gt;Photography is my passion and I love to turn ideas into beautiful things.&lt;/p&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;grid grid-view projects-masonry&quot;&gt;
&lt;div class=&quot;isotope-filter filter mb-10&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a class=&quot;filter-item active&quot; data-filter=&quot;*&quot;&gt;All&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;filter-item&quot; data-filter=&quot;.foods&quot;&gt;Foods&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;filter-item&quot; data-filter=&quot;.drinks&quot;&gt;Drinks&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;filter-item&quot; data-filter=&quot;.events&quot;&gt;Events&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&quot;filter-item&quot; data-filter=&quot;.pastries&quot;&gt;Pastries&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;row gx-md-6 gy-6 isotope&quot;&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 drinks events&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf1-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf1.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Fringilla Nullam&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 events&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf2-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf2.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Ridiculus Parturient&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 drinks foods&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf3-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf3.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Ornare Ipsum&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 events&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf4-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf4.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Nullam Mollis&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 pastries events&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf5-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf5.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Euismod Risus&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 foods&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf6-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf6.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Ridiculus Tristique&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 foods drinks&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf7-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf7.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Sollicitudin Pharetra&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 pastries&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf8-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf8.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Tristique Venenatis&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 events&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf9-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf9.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Cursus Fusce&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 foods&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf10-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf10.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Consectetur Malesuada&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 drinks&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf11-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf11.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Ultricies Aenean&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 foods&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf12-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf12.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Pellentesque Commodo&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;div class=&quot;project item col-md-6 col-xl-4 drinks&quot;&gt;
&lt;figure class=&quot;overlay overlay-1 rounded&quot;&gt;&lt;a href=&quot;./assets/img/photos/pf13-full.jpg&quot; data-glightbox data-gallery=&quot;shots-group&quot;&gt; &lt;img src=&quot;./assets/img/photos/pf13.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
&lt;figcaption&gt;
&lt;h5 class=&quot;from-top mb-0&quot;&gt;Ultricies Aenean&lt;/h5&gt;
&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /.project --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.grid --&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-10" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row text-center">
<div class="col-lg-10 col-xxl-8 mx-auto mb-12">
<h2 class="fs-16 text-uppercase text-muted mb-3">Latest Projects</h2>
<h3 class="display-2 ls-sm">Check out some of our <span class="underline-3 style-1 primary"><em>awesome</em></span> projects with creative ideas and great design.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row gy-10 align-items-center mb-15 mb-md-17">
<div class="col-lg-7">
<div class="card bg-soft-grape">
<div class="card-body px-9 py-0 overflow-hidden">
<div class="row gx-4 gx-md-9">
<div class="col-6">
<figure class="mt-9"><a href="#"><img class="shadow-lg rounded-top" src="../../assets/img/demos/d18.jpg" srcset="../../assets/img/demos/d18@2x.jpg 2x" alt="" /></a></figure>
</div>
<!-- /column -->
<div class="col-6">
<figure><a href="#"><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>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
<div class="col-lg-4 ms-auto">
<h3 class="h1 post-title ls-sm mb-2">Wiretree Network Company</h3>
<div class="post-category text-muted mb-4">
<span>Dashboard</span>, <span>Web Development</span>
</div>
<p class="mb-6">Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus. Donec sed odio dui. Vivamus sagittis lacus vel.</p>
<a href="#" class="btn btn-grape rounded">See Project</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row gy-10 align-items-center">
<div class="col-lg-7 order-lg-2">
<div class="card bg-soft-primary">
<div class="card-body p-11 overflow-hidden">
<figure><a href="#"><img src="../../assets/img/photos/f2.png" srcset="../../assets/img/photos/f2@2x.png 2x" alt="" /></a></figure>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
<div class="col-lg-4 me-auto">
<h3 class="h1 post-title ls-sm mb-2">Alphine Finance</h3>
<div class="post-category text-muted mb-4">
<span>Branding</span>, <span>Web Design</span>
</div>
<p class="mb-6">Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus. Donec sed odio dui. Vivamus sagittis lacus vel.</p>
<a href="#" class="btn btn-primary rounded">See Project</a>
</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-10">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-10" 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&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row text-center&quot;&gt;
&lt;div class=&quot;col-lg-10 col-xxl-8 mx-auto mb-12&quot;&gt;
&lt;h2 class=&quot;fs-16 text-uppercase text-muted mb-3&quot;&gt;Latest Projects&lt;/h2&gt;
&lt;h3 class=&quot;display-2 ls-sm&quot;&gt;Check out some of our &lt;span class=&quot;underline-3 style-1 primary&quot;&gt;&lt;em&gt;awesome&lt;/em&gt;&lt;/span&gt; projects with creative ideas and great design.&lt;/h3&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;row gy-10 align-items-center mb-15 mb-md-17&quot;&gt;
&lt;div class=&quot;col-lg-7&quot;&gt;
&lt;div class=&quot;card bg-soft-grape&quot;&gt;
&lt;div class=&quot;card-body px-9 py-0 overflow-hidden&quot;&gt;
&lt;div class=&quot;row gx-4 gx-md-9&quot;&gt;
&lt;div class=&quot;col-6&quot;&gt;
&lt;figure class=&quot;mt-9&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img class=&quot;shadow-lg rounded-top&quot; src=&quot;./assets/img/demos/d18.jpg&quot; srcset=&quot;./assets/img/demos/d18@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-6&quot;&gt;
&lt;figure&gt;&lt;a href=&quot;#&quot;&gt;&lt;img class=&quot;shadow-lg rounded-bottom&quot; src=&quot;./assets/img/demos/d18-2.jpg&quot; srcset=&quot;./assets/img/demos/d18-2@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&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 class=&quot;col-lg-4 ms-auto&quot;&gt;
&lt;h3 class=&quot;h1 post-title ls-sm mb-2&quot;&gt;Wiretree Network Company&lt;/h3&gt;
&lt;div class=&quot;post-category text-muted mb-4&quot;&gt;
&lt;span&gt;Dashboard&lt;/span&gt;,
&lt;span&gt;Web Development&lt;/span&gt;
&lt;/div&gt;
&lt;p class=&quot;mb-6&quot;&gt;Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus. Donec sed odio dui. Vivamus sagittis lacus vel.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-grape rounded&quot;&gt;See Project&lt;/a&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;row gy-10 align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-7 order-lg-2&quot;&gt;
&lt;div class=&quot;card bg-soft-primary&quot;&gt;
&lt;div class=&quot;card-body p-11 overflow-hidden&quot;&gt;
&lt;figure&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;./assets/img/photos/f2.png&quot; srcset=&quot;./assets/img/photos/f2@2x.png 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&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-4 me-auto&quot;&gt;
&lt;h3 class=&quot;h1 post-title ls-sm mb-2&quot;&gt;Alphine Finance&lt;/h3&gt;
&lt;div class=&quot;post-category text-muted mb-4&quot;&gt;
&lt;span&gt;Branding&lt;/span&gt;,
&lt;span&gt;Web Design&lt;/span&gt;
&lt;/div&gt;
&lt;p class=&quot;mb-6&quot;&gt;Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus. Donec sed odio dui. Vivamus sagittis lacus vel.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary rounded&quot;&gt;See Project&lt;/a&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-11" class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<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">
<div class="project mb-10">
<div class="card bg-soft-grape">
<div class="card-body 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-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.jpg" srcset="../../assets/img/demos/d18@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="project">
<div class="card bg-soft-fuchsia">
<div class="card-body 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-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="text-center mt-12"><a href="#" class="btn btn-primary rounded-pill">See All Demos</a></div>
</div>
<!-- /.demos-wrapper -->
</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-11">View example's code</a>
</div>
<!--/.card-footer -->
<div id="collapse-snippet-11" 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&quot;&gt;
&lt;div class=&quot;container py-14 py-md-16&quot;&gt;
&lt;div class=&quot;row mb-10&quot;&gt;
&lt;div class=&quot;col-md-9 col-lg-7 col-xl-6 col-xxl-5 mx-auto&quot;&gt;
&lt;div class=&quot;counter-wrapper&quot;&gt;
&lt;h3 class=&quot;fs-70 mb-3 text-primary text-center counter&quot;&gt;21&lt;/h3&gt;
&lt;/div&gt;
&lt;h2 class=&quot;display-3 mb-3 text-center mb-0&quot;&gt;Functional, impressive and rich demos to start with&lt;/h2&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;div class=&quot;demos-wrapper&quot;&gt;
&lt;div class=&quot;project mb-10&quot;&gt;
&lt;div class=&quot;card bg-soft-grape&quot;&gt;
&lt;div class=&quot;card-body ps-xl-12 py-0 overflow-hidden&quot;&gt;
&lt;div class=&quot;row gx-md-8 gx-xl-12 d-flex align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-7&quot;&gt;
&lt;div class=&quot;row gx-7&quot;&gt;
&lt;div class=&quot;col-6&quot;&gt;
&lt;figure class=&quot;itooltip itooltip-grape mt-9&quot; title=&apos;&lt;h5 class=&quot;mb-0&quot;&gt;Click to see the demo&lt;/h5&gt;&apos;&gt;&lt;a href=&quot;./demo18.html&quot; target=&quot;_blank&quot;&gt;&lt;img class=&quot;shadow-lg rounded-top&quot; src=&quot;./assets/img/demos/d18.jpg&quot; srcset=&quot;./assets/img/demos/d18@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-6&quot;&gt;
&lt;figure class=&quot;itooltip itooltip-grape&quot; title=&apos;&lt;h5 class=&quot;mb-0&quot;&gt;Click to see the demo&lt;/h5&gt;&apos;&gt;&lt;a href=&quot;./demo18.html&quot; target=&quot;_blank&quot;&gt;&lt;img class=&quot;shadow-lg rounded-bottom&quot; src=&quot;./assets/img/demos/d18-2.jpg&quot; srcset=&quot;./assets/img/demos/d18-2@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&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-5 d-none d-lg-block&quot;&gt;
&lt;h2 class=&quot;post-title fs-30 mb-4&quot;&gt;Demo Layout XVIII&lt;/h2&gt;
&lt;ul class=&quot;icon-list bullet-grape row ms-0 gy-2&quot;&gt;
&lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Network, Marketing&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;SVG icons&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;3D illustrations&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Gradient image&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;a href=&quot;./demo18.html&quot; target=&quot;_blank&quot; class=&quot;btn btn-sm btn-grape rounded-pill mt-1&quot;&gt;See Demo&lt;/a&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;!-- /.project --&gt;
&lt;div class=&quot;project&quot;&gt;
&lt;div class=&quot;card bg-soft-fuchsia&quot;&gt;
&lt;div class=&quot;card-body ps-xl-12 py-0 overflow-hidden&quot;&gt;
&lt;div class=&quot;row gx-md-8 gx-xl-12 d-flex align-items-center&quot;&gt;
&lt;div class=&quot;col-lg-7&quot;&gt;
&lt;div class=&quot;row gx-7&quot;&gt;
&lt;div class=&quot;col-6&quot;&gt;
&lt;figure class=&quot;itooltip itooltip-fuchsia mt-9&quot; title=&apos;&lt;h5 class=&quot;mb-0&quot;&gt;Click to see the demo&lt;/h5&gt;&apos;&gt;&lt;a href=&quot;./demo19.html&quot; target=&quot;_blank&quot;&gt;&lt;img class=&quot;shadow-lg rounded-top&quot; src=&quot;./assets/img/demos/d19-1.jpg&quot; srcset=&quot;./assets/img/demos/d19-1@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;&lt;/figure&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;div class=&quot;col-6&quot;&gt;
&lt;figure class=&quot;itooltip itooltip-fuchsia&quot; title=&apos;&lt;h5 class=&quot;mb-0&quot;&gt;Click to see the demo&lt;/h5&gt;&apos;&gt;&lt;a href=&quot;./demo19.html&quot; target=&quot;_blank&quot;&gt;&lt;img class=&quot;shadow-lg rounded-bottom&quot; src=&quot;./assets/img/demos/d19-2.jpg&quot; srcset=&quot;./assets/img/demos/d19-2@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;&lt;/a&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-5 d-none d-lg-block&quot;&gt;
&lt;h2 class=&quot;post-title fs-30 mb-4&quot;&gt;Demo Layout XIX&lt;/h2&gt;
&lt;ul class=&quot;icon-list bullet-fuchsia row ms-0 gy-2&quot;&gt;
&lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Agency, Startup&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Gradient image&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;SVG icons&lt;/span&gt;&lt;/li&gt;
&lt;li class=&quot;col-md-6&quot;&gt;&lt;span&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span&gt;Colorful design&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;a href=&quot;./demo19.html&quot; target=&quot;_blank&quot; class=&quot;btn btn-sm btn-fuchsia rounded-pill mt-1&quot;&gt;See Demo&lt;/a&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;!-- /.project --&gt;
&lt;div class=&quot;text-center mt-12&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-primary rounded-pill&quot;&gt;See All Demos&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- /.demos-wrapper --&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