| Server IP : 172.67.201.108 / Your IP : 216.73.216.68 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/cgny/public_html/familyfun/Package-HTML/Canvas 7 Files/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=PT+Serif:ital@0;1&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Blocks | Canvas</title>
<style>
@media (min-width: 768px) {
html,
body {
height: 100%;
width: 100%;
overflow-y: auto;
}
.blocks-panel {
position: -webkit-sticky !important;
position: sticky !important;
height: 100%;
top: 0;
max-height: 100vh;
overflow-y: auto;
}
}
.blocks-grid .grid-inner {
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.blocks-grid .active-filter > .grid-inner {
background-color: rgba(255, 255, 255, 0.08);
border-bottom-color: transparent;
}
.blocks-grid .sub-grid-inner {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.blocks-grid .sub-grid-inner h3 {
font-size: 0.925rem;
opacity: .8;
}
.bg-dark {
background-color: #222228 !important;
}
.bg-overlay-bg {
background-color: rgba(0,0,0,0.7);
}
.grid-inner-count {
--size: 30px;
font-family: poppins;
font-weight: 400;
background-color: rgba(255, 255, 255, 0.1);
color: #DDD;
width: var(--size);
height: var(--size);
line-height: calc(var(--size) + 2px) !important;
text-align: center;
border-radius: 50%;
font-size: 80%;
}
.blocks-grid .grid-inner-count,
.blocks-grid .sub-grid-inner .grid-inner-count {
position: relative;
--size: 24px;
}
.dark .search-form .input-group-text,
.dark .search-form .form-control:not(.not-dark) {
background-color: rgba(0,0,0,0.25);
border-color: rgba(255,255,255,0.15) !important;
border-radius: 23px 0 0 23px;
}
.dark .search-form .form-control:not(.not-dark) {
color: #FFF;
border-radius: 0 23px 23px 0;
}
.portfolio-item { padding-top: 5px; }
.portfolio-item .badge {
position: absolute;
z-index: 6;
top: 0;
right: 15px;
border-radius: 2px;
font-weight: 600;
}
.blocks-grid .updated .grid-inner-count::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
background: var(--bs-danger);
right: 0px;
top: 0px;
border-radius: 50%;
box-shadow: 0 0 0 2px #26262c;
}
[data-filter=".cb-new"] .grid-inner-count {
background-color: var(--bs-danger);
}
</style>
</head>
<body class="stretched">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap py-0 overflow-visible">
<div class="row g-0">
<div class="blocks-panel bg-dark dark shadow col-lg-3 col-md-4">
<div class="blocks-panel-inner">
<h1 class="fw-semibold text-center px-4 mt-5 mb-3">canvas<span class="nocolor fw-light">blocks</span></h1>
<p class="text-center fw-light mb-5 px-4 op-07">Get Started with Canvas quickly by using these Pre-Built Blocks.</p>
<nav class="navbar navbar-expand-md p-0 m-0 w-100">
<button class="navbar-toggler btn w-100 py-3 d-flex text-white d-md-none align-items-center justify-content-center rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: #333">
<i class="bi-list icon-fw me-2"></i> Show Blocks Filter
</button>
<ul class="blocks-grid custom-filter row list-unstyled g-0 collapse navbar-collapse mb-0" id="navbarNav" data-container="#blocks" data-active-class="active-filter">
<li class="col-12">
<form class="search-form input-group input-group-lg my-5 mt-md-0 px-4">
<span class="input-group-text border-end-0 me-0"><i class="uil uil-search"></i></span>
<input class="form-control border-start-0 ps-0 block-search" type="text" placeholder="Search.." aria-label="Search">
</form>
</li>
<li class="col-12 active-filter">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4" data-filter="*">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><rect x="48" y="48" width="64" height="64" stroke-width="12" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><rect x="144" y="48" width="64" height="64" stroke-width="12" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><rect x="48" y="144" width="64" height="64" stroke-width="12" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><rect x="144" y="144" width="64" height="64" stroke-width="12" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect></svg>
<h3 class="h6 fw-normal mb-0 me-1">Show All</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4 updated" data-filter=".cb-new">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><path d="M45.12859,196.01674a8.01266,8.01266,0,0,0,9.97356,5.86223,273.90053,273.90053,0,0,1,145.746-.0138,8.01268,8.01268,0,0,0,9.97132-5.85941l25.48872-108.3169a8,8,0,0,0-11.03641-9.143L174.688,101.02754a8,8,0,0,1-10.24237-3.42535l-29.4524-53.01433a8,8,0,0,0-13.98652,0L91.55434,97.60219A8,8,0,0,1,81.312,101.02754L30.72054,78.54246a8,8,0,0,0-11.03717,9.13973Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><path d="M95.99993,161.6787a305.83767,305.83767,0,0,1,64.00009,0" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="h6 fw-normal mb-0 me-1">New</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4" data-filter=".cb-hero">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><rect x="32.00781" y="80.00005" width="160" height="128" rx="8" stroke-width="12" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><path d="M64.00781,48.00005h152a8,8,0,0,1,8,8V176" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="h6 fw-normal mb-0 me-1">Hero</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4" data-filter=".cb-nav">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="128" r="96" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle><circle cx="128" cy="128" r="10"></circle><circle cx="80" cy="128" r="10"></circle><circle cx="176" cy="128" r="10"></circle></svg>
<h3 class="h6 fw-normal mb-0 me-1">Navigation</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
<ul>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4 updated" data-filter=".cb-menu">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#ffffff" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="128" r="10"></circle><circle cx="64" cy="128" r="10"></circle><circle cx="192" cy="128" r="10"></circle></svg>
<h3 class="fw-normal mb-0 me-1">Menu</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-menu-layout">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#ffffff" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><rect x="32.00781" y="48.00005" width="192" height="160" rx="8" stroke-width="12" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><line x1="32" y1="96" x2="224" y2="96" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line></svg>
<h3 class="fw-normal mb-0 me-1">Layout</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-megamenu">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#ffffff" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><path d="M32.0002,56H223.9998a0,0,0,0,1,0,0V192a8,8,0,0,1-8,8H40.0002a8,8,0,0,1-8-8V56A0,0,0,0,1,32.0002,56Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><line x1="32" y1="104" x2="224" y2="104" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="32" y1="152" x2="224" y2="152" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="88.00008" y1="104" x2="88.00008" y2="200" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line></svg>
<h3 class="fw-normal mb-0 me-1">Mega Menu</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
</ul>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4" data-filter=".cb-portfolio">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><rect x="32.00781" y="72.00005" width="192" height="144" rx="8" stroke-width="12" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><path d="M168,72V56a16,16,0,0,0-16-16H104A16,16,0,0,0,88,56V72" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><path d="M224.00806,126.30915A191.11647,191.11647,0,0,1,128,152a191.11667,191.11667,0,0,1-95.99345-25.68239" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><line x1="116" y1="120" x2="140" y2="120" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line></svg>
<h3 class="h6 fw-normal mb-0 me-1">Portfolio</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4" data-filter=".cb-blog">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><path d="M128,88a32,32,0,0,1,32-32h64a8,8,0,0,1,8,8V192a8,8,0,0,1-8,8H160a32,32,0,0,0-32,32" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><path d="M24,192a8,8,0,0,0,8,8H96a32,32,0,0,1,32,32V88A32,32,0,0,0,96,56H32a8,8,0,0,0-8,8Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="h6 fw-normal mb-0 me-1">Blog</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4" data-filter=".cb-shop">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><path d="M192,184H68.49479a8,8,0,0,1-7.871-6.56892L33.92162,30.56892A8,8,0,0,0,26.05066,24H8" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><circle cx="72" cy="204" r="20" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle><circle cx="192" cy="204" r="20" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle><path d="M40,64H214.4143a8,8,0,0,1,7.871,9.43108l-13.09091,72A8,8,0,0,1,201.32339,152H56" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="h6 fw-normal mb-0 me-1">Shop</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4" data-filter=".cb-event">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><line x1="96" y1="56" x2="96" y2="200" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><path d="M24,167.19024a7.98836,7.98836,0,0,1,6.39917-7.83019,32.00785,32.00785,0,0,0,0-62.7201A7.98836,7.98836,0,0,1,24,88.80976V64a8,8,0,0,1,8-8H224a8,8,0,0,1,8,8V88.80976A7.98836,7.98836,0,0,1,225.60083,96.64a32.00785,32.00785,0,0,0,0,62.7201A7.98836,7.98836,0,0,1,232,167.19024V192a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="h6 fw-normal mb-0 me-1">Event</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4" data-filter=".cb-slider">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><line x1="127.99902" y1="108" x2="127.99915" y2="216" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="127.99915" y1="40" x2="127.99902" y2="68" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><circle cx="127.99902" cy="88" r="20" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle><line x1="199.99902" y1="188" x2="199.99986" y2="216" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="199.99986" y1="40" x2="199.99902" y2="148" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><circle cx="199.99902" cy="168" r="20" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle><line x1="55.99902" y1="156" x2="55.99844" y2="216" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="55.99844" y1="40" x2="55.99902" y2="116" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><circle cx="55.99902" cy="136" r="20" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle></svg>
<h3 class="h6 fw-normal mb-0 me-1">Slider/Carousel</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4 updated" data-filter=".cb-contact">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><rect x="88" y="24" width="80" height="40" stroke-width="12" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><path d="M168,40h32a8,8,0,0,1,8,8V216a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H88" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><line x1="96" y1="152" x2="160" y2="152" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="96" y1="120" x2="160" y2="120" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line></svg>
<h3 class="h6 fw-normal mb-0 me-1">Contact</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4 updated" data-filter=".cb-footer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><line x1="128" y1="23.99627" x2="128" y2="183.99627" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><polyline points="56 111.996 128 183.996 200 111.996" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polyline><line x1="48" y1="215.99627" x2="208" y2="215.99627" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line></svg>
<h3 class="h6 fw-normal mb-0 me-1">Footer</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4" data-filter=".cb-content">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><path d="M200,112v88.88889A7.11111,7.11111,0,0,1,192.88889,208H40a8,8,0,0,1-8-8V88a8,8,0,0,1,8-8H85.33333a8,8,0,0,1,4.8,1.6l27.73334,20.8a8,8,0,0,0,4.8,1.6H192A8,8,0,0,1,200,112Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><path d="M64,80V56a8,8,0,0,1,8-8h45.33333a8,8,0,0,1,4.8,1.6l27.73334,20.8a8,8,0,0,0,4.8,1.6H224a8,8,0,0,1,8,8v88.88889A7.11111,7.11111,0,0,1,224.88889,176H200" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="h6 fw-normal mb-0 me-1">Content</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
<ul>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-alert">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><line x1="128" y1="96" x2="128" y2="144" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><path d="M114.15243,39.98472,26.17616,191.977a16.00005,16.00005,0,0,0,13.84762,24.01535H215.97625A16,16,0,0,0,229.82386,191.977L141.84757,39.98472A16,16,0,0,0,114.15243,39.98472Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><circle cx="128" cy="180" r="10"></circle></svg>
<h3 class="fw-normal mb-0 me-1">Alerts</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-buttons">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><path d="M122.34315,71.43146l19.799-19.799a44,44,0,1,1,62.22539,62.22539l-28.28427,28.28428a44,44,0,0,1-62.2254,0" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><path d="M133.65685,184.56854l-19.799,19.799a44,44,0,1,1-62.22539-62.22539l28.28427-28.28428a44,44,0,0,1,62.2254,0" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="fw-normal mb-0 me-1">Buttons</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-cards">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><line x1="152" y1="112" x2="192" y2="112" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="152" y1="144" x2="192" y2="144" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><circle cx="92.10043" cy="120" r="24" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle><path d="M61.10869,167.99952a32.01032,32.01032,0,0,1,61.98292-.00215" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><rect x="32" y="48.00005" width="192" height="160" rx="8" stroke-width="12" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect></svg>
<h3 class="fw-normal mb-0 me-1">Cards</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-counters">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><line x1="104" y1="128" x2="215.99902" y2="128" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="104" y1="64" x2="215.99902" y2="64" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="103.99902" y1="192" x2="215.99902" y2="192" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><polyline points="40 60 56 52 56 107.994" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polyline><path d="M41.10018,152.55059A14.00226,14.00226,0,1,1,65.609,165.82752L40,200H68" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="fw-normal mb-0 me-1">Counters</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-countdown">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><line x1="152.24871" y1="126.00466" x2="120" y2="180.00001" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><rect x="40" y="40" width="176" height="176" rx="8" stroke-width="12" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><circle cx="128" cy="112" r="28" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle></svg>
<h3 class="fw-normal mb-0 me-1">Countdowns</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-faqs">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><circle cx="128.00098" cy="128" r="96" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle><path d="M128.001,152v-8a32,32,0,1,0-32-32" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><circle cx="128" cy="184" r="10"></circle></svg>
<h3 class="fw-normal mb-0 me-1">FAQs</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4 updated" data-filter=".cb-featured-box">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><ellipse cx="128" cy="80" rx="88" ry="48" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></ellipse><path d="M40,80v48c0,26.50967,39.39894,48,88,48s88-21.49033,88-48V80" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><path d="M40,128v48c0,26.50967,39.39894,48,88,48s88-21.49033,88-48V128" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="fw-normal mb-0 me-1">Featured Boxes</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-filters">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><path d="M42.08441,48H213.91559a8,8,0,0,1,5.91952,13.38138l-65.75463,72.33009A8,8,0,0,0,152,139.09285v56.62568a8,8,0,0,1-3.5624,6.6564l-32,21.33334A8,8,0,0,1,104,217.05186v-77.959a8,8,0,0,0-2.08048-5.38138L36.16489,61.38138A8,8,0,0,1,42.08441,48Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="fw-normal mb-0 me-1">Filters</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-popups">
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><path d="M132.41106,190.73266l50.43543,31.95385c6.44693,4.08451,14.45124-1.99032,12.53819-9.51579l-14.57192-57.32241a8.75742,8.75742,0,0,1,2.83756-8.87589l45.2273-37.64345c5.94268-4.9462,2.87542-14.80876-4.75965-15.30428l-59.06388-3.83326a8.41836,8.41836,0,0,1-7.24792-5.3506l-22.02834-55.473a8.31887,8.31887,0,0,0-15.55566,0L98.19383,84.84083a8.41836,8.41836,0,0,1-7.24792,5.3506L31.882,94.02469c-7.63507.49552-10.70233,10.35808-4.75965,15.30428l45.2273,37.64345a8.75742,8.75742,0,0,1,2.83756,8.87589L61.6734,209.00846c-2.29566,9.03056,7.30952,16.32036,15.04583,11.41895l46.86971-29.69475A8.21431,8.21431,0,0,1,132.41106,190.73266Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg> -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#ffffff" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><polyline points="215.993 183.995 215.993 39.994 71.986 39.994" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polyline><rect x="39.98633" y="71.99512" width="144.00586" height="144" stroke-width="12" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect></svg>
<h3 class="fw-normal mb-0 me-1">Popups</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-gallery">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><rect x="32" y="48" width="192" height="160" rx="8" stroke-width="12" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><path d="M32,167.99982l50.343-50.343a8,8,0,0,1,11.31371,0l44.68629,44.6863a8,8,0,0,0,11.31371,0l20.68629-20.6863a8,8,0,0,1,11.31371,0L223.99982,184" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><circle cx="156" cy="100" r="10"></circle></svg>
<h3 class="fw-normal mb-0 me-1">Gallery</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4 updated" data-filter=".cb-promo-box">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><path d="M43.99951,143.27273V52a8,8,0,0,1,8-8h152a8,8,0,0,1,8,8V204a8,8,0,0,1-8,8h-68.3641" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><polyline points="128 152 64 216 32 184" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polyline></svg>
<h3 class="fw-normal mb-0 me-1">Promo Boxes</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-pricing">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><line x1="128" y1="24" x2="128" y2="232" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><path d="M184,88a40,40,0,0,0-40-40H108a40,40,0,0,0,0,80h44a40,40,0,0,1,0,80H104a40,40,0,0,1-40-40" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="fw-normal mb-0 me-1">Pricing Table</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-process-steps">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><polyline points="176 152 224 104 176 56" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polyline><polyline points="128 152 176 104 128 56" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></polyline><path d="M32,200a96,96,0,0,1,96-96h48" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="fw-normal mb-0 me-1">Process Steps</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-social-icons">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="128" r="96" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle><path d="M168,88.00094H152a24,24,0,0,0-24,24v112" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path><line x1="96" y1="144.00094" x2="160" y2="144.00094" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line></svg>
<h3 class="fw-normal mb-0 me-1">Social Icons</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-tabs">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><rect x="40" y="144" width="176" height="64" rx="8" stroke-width="12" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><rect x="40" y="48" width="176" height="64" rx="8" stroke-width="12" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><circle cx="180" cy="80" r="10"></circle><circle cx="180" cy="176" r="10"></circle></svg>
<h3 class="fw-normal mb-0 me-1">Tabs</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-team">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="120" r="40" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></circle><rect x="32" y="48" width="192" height="160" rx="8" stroke-width="12" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><path d="M60.09854,207.99545a72.02945,72.02945,0,0,1,135.80292,0" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="fw-normal mb-0 me-1">Team</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li>
<a href="#" class="grid-inner sub-grid-inner d-flex align-items-center ps-5 pe-4" data-filter=".cb-testimonials">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><path d="M132.41106,190.73266l50.43543,31.95385c6.44693,4.08451,14.45124-1.99032,12.53819-9.51579l-14.57192-57.32241a8.75742,8.75742,0,0,1,2.83756-8.87589l45.2273-37.64345c5.94268-4.9462,2.87542-14.80876-4.75965-15.30428l-59.06388-3.83326a8.41836,8.41836,0,0,1-7.24792-5.3506l-22.02834-55.473a8.31887,8.31887,0,0,0-15.55566,0L98.19383,84.84083a8.41836,8.41836,0,0,1-7.24792,5.3506L31.882,94.02469c-7.63507.49552-10.70233,10.35808-4.75965,15.30428l45.2273,37.64345a8.75742,8.75742,0,0,1,2.83756,8.87589L61.6734,209.00846c-2.29566,9.03056,7.30952,16.32036,15.04583,11.41895l46.86971-29.69475A8.21431,8.21431,0,0,1,132.41106,190.73266Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></path></svg>
<h3 class="fw-normal mb-0 me-1">Testimonials</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
</ul>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4 updated" data-filter=".cb-forms">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><rect x="24" y="56" width="208" height="144" rx="8.48528" stroke-width="12" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" fill="none"></rect><line x1="56" y1="128" x2="200" y2="128" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="56" y1="96" x2="200" y2="96" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="56" y1="160" x2="64" y2="160" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="96" y1="160" x2="160" y2="160" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="192" y1="160" x2="200" y2="160" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line></svg>
<h3 class="h6 fw-normal mb-0 me-1">Forms</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
<li class="col-12">
<a href="#" class="grid-inner d-flex align-items-center py-3 px-4 border-bottom-0 updated" data-filter=".cb-misc">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#FFFFFF" viewBox="0 0 256 256" class="m-0 me-3"><rect width="256" height="256" fill="none"></rect><line x1="43.63636" y1="96" x2="224" y2="96" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="176" y1="40" x2="144" y2="216" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="112" y1="40" x2="80" y2="216" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line><line x1="32" y1="160" x2="212.36376" y2="160" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"></line></svg>
<h3 class="h6 fw-normal mb-0 me-1">Misc</h3>
<p class="mb-0 ms-auto grid-inner-count"></p>
</a>
</li>
</ul>
</nav>
<div class="text-center text-smaller mt-5 mb-4 px-4 op-07 d-none d-md-block">
Copyrights © 2023 All Rights Reserved by SemiColonWeb.<br>
<div class="copyright-links mt-2"><a target="_blank" href="https://1.envato.market/c/1309643/480739/4415?u=https%3A%2F%2Fthemeforest.net%2Fcart%2Fconfigure_before_adding%2F9228123">Buy Canvas</a> / <a href="index.html">Main Demos</a></div>
</div>
</div>
</div>
<!-- Portfolio Items
============================================= -->
<div class="col-md p-5 p-md-6" style="background-color: #080708;">
<div id="blocks" class="row portfolio grid-container gutter-40">
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 1</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 4</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-5.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 5</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-6.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-6.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 6</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-7.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-7.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 7</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-8.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-8.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 8</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-slider">
<a href="block-hero-9.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-9.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 9</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-10.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-10.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 10</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-11.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-11.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 11</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-12.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-12.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 12</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-13.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-13.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 13</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-slider">
<a href="block-hero-14.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-14.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 14</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-forms">
<a href="block-hero-15.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-15.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 15</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-forms">
<a href="block-hero-16.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-16.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 16</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-slider">
<a href="block-hero-17.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-17.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 17</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-18.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-split.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 18 - Split</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-19.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-19.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 19</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-forms cb-cards cb-contact">
<a href="block-hero-20.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-20.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 20</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-featured-box cb-counters">
<a href="block-hero-21.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-21.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 21</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-featured-box">
<a href="block-hero-22.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-22.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 22</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-featured-box">
<a href="block-hero-23.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-23.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 23</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero">
<a href="block-hero-24.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-24.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 24</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-featured-box cb-gallery">
<a href="block-hero-25.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-25.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 25</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-featured-box cb-slider">
<a href="block-hero-26.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-26.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 26</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-counters">
<a href="block-hero-27.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-27.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 27</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-buttons">
<a href="block-hero-28.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-28.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 28</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-clients">
<a href="block-hero-29.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-29.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 29</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-header cb-menu">
<a href="block-navigation-subheader.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/with-sub-menu.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Header With Submenu</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-header cb-menu">
<a href="block-navigation-subheader-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/with-sub-menu-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Header With Submenu 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-gallery">
<a href="block-hero-30.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-30.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero 30</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-hero cb-clients">
<a href="block-content-gallery-parallax.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gallery-parallax.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gallery Parallax</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-slider cb-content">
<a href="block-slider-8.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/sticky-scroll.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Sticky Scroll</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-shop cb-content">
<a href="block-shop-single-wireframe.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/shop-single-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Sticky Scroll</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc cb-featured-box">
<a href="block-misc-sticky-cards.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/sticky-cards.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Sticky cards</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc cb-featured-box cb-forms">
<a href="block-misc-checklists.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/checklists.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Checklist</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-slider cb-content">
<a href="block-slider-parallax.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/slider-parallax.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Slider Parallax</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-hero cb-card cb-misc cb-featured-box">
<a href="block-hero-instructor.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/hero-instructor.jpg?dgdfg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Hero Instructor</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc">
<a href="block-misc-custom-scroll.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/custom-scroll.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Custom Scroll</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-blog">
<a href="block-blog-single-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/blog-single.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Blog Single Layout 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-blog">
<a href="block-blog-single-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/blog-single-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Blog Single Layout 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-blog">
<a href="block-blog-single-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/blog-single-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Blog Single Layout 4</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-blog">
<a href="block-blog-single-5.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/blog-single-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Blog Single Layout 5</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-blog">
<a href="block-blog-single-6.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/blog-single-6.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Blog Single Layout 6</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-blog">
<a href="block-blog-list-hover.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/blog-list-hover.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Blog List Hover</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-event cb-tabs">
<a href="block-event-schedule.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/event-schedule.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Event Schedule</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-shop cb-content">
<a href="block-shop-single.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/shop-single.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Shop Single</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-event">
<a href="block-event-schedule-scroll.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/event-schedule-scroll.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Event Schedule on sticky</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-blog">
<a href="block-blog-grid-hover.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/blog-grid-hover.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Blog Grid Hover</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-featured-box cb-content cb-hero">
<a href="block-content-featured-images-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/featured-images-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Featured Images</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-featured-box cb-content">
<a href="block-content-featured-boxes-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/featured-boxes-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Featured Boxes 1</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-featured-box cb-content">
<a href="block-content-featured-boxes-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/featured-boxes-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Featured Boxes 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-featured-box cb-content">
<a href="block-content-featured-boxes-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/featured-boxes-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Featured Boxes 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-featured-box cb-content">
<a href="block-content-featured-boxes-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/featured-boxes-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Featured Boxes 4</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-featured-box cb-content">
<a href="block-content-featured-boxes-5.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/featured-boxes-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Featured Boxes 5</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-featured-box cb-content">
<a href="block-content-featured-boxes-6.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/featured-boxes-6.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Featured Boxes 6</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-featured-box cb-content">
<a href="block-content-featured-boxes-7.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/featured-boxes-7.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Featured Boxes 7</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-featured-box cb-content">
<a href="block-content-featured-boxes-8.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/featured-boxes-8.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Featured Boxes 8</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-cards cb-content">
<a href="block-content-cards.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/cards-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Cards 1</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-cards cb-content">
<a href="block-content-cards-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/cards-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Cards 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-cards cb-content">
<a href="block-content-cards-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/cards-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Cards 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-cards cb-content">
<a href="block-content-cards-switch.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/cards-switch.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Cards 4 - Switch</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-cards cb-content cb-blog">
<a href="block-content-cards-6.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/cards-6.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Blog Cards</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-blog cb-content cb-cards">
<a href="block-blog-grid-hover-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/blog-grid-hover-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Blog Cards 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-cards cb-content cb-shop">
<a href="block-content-cards-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/cards-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Product Cards</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-cards cb-content cb-event">
<a href="block-content-cards-5.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/cards-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Event Cards</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-cards cb-content cb-team">
<a href="block-content-cards-7.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/cards-7.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Team Cards</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-cards cb-content cb-team">
<a href="block-content-cards-8.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/cards-8.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Team Cards 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-cards cb-content cb-team">
<a href="block-content-cards-9.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/cards-9.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Cards Kenburn</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-cards cb-content cb-shop">
<a href="block-content-cards-10.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/cards-10.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Card Car Rent</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-promo-box cb-content">
<a href="block-content-promo-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/promo-box-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Promo Boxes</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-promo-box cb-content">
<a href="block-content-promo-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/promo-box-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Promo Boxes</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-promo-box cb-content">
<a href="block-content-promo-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/promo-box-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Promo Boxes</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-promo-box cb-content">
<a href="block-content-promo-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/promo-box-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Promo Boxes 4</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-promo-box cb-content">
<a href="block-content-promo-5.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/promo-box-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Promo Boxes 5</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-promo-box cb-content">
<a href="block-content-promo-6.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/promo-box-6.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Promo Boxes 6</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-promo-box cb-content">
<a href="block-content-promo-7.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/promo-box-7.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Promo Boxes 7</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-promo-box cb-content cb-misc">
<a href="block-content-promo.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/promo.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Promo Boxes</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-promo-box cb-content cb-team">
<a href="block-content-promo-8.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/promo-8.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Promo Boxes 8</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-team cb-content">
<a href="block-content-team-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/team-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Team Lists</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-team cb-content">
<a href="block-content-team-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/team-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Team 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-faqs cb-content">
<a href="block-content-faqs-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/faqs-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">FAQs w/ Filter</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-filters cb-gallery cb-content">
<a href="block-content-filter-dropdown.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/filter-dropdown.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Filter Dropdown</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-faqs cb-content">
<a href="block-content-faqs-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/faqs-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">FAQs w/ Side Filter</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-faqs cb-content">
<a href="block-content-faqs-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/faqs-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">FAQs w/ Scroll</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-social-icons cb-content">
<a href="block-content-social-share-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/share-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Social Share</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-social-icons cb-content">
<a href="block-content-social-follow-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/follow-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Social Follow</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-social-icons cb-content">
<a href="block-content-social-follow-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/follow-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Follow with Subscribe</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-process-steps cb-featured-box cb-content">
<a href="block-content-steps-horizontal.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/steps-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Steps Horizontal</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-process-steps cb-featured-box cb-content">
<a href="block-content-steps-horizontal-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/steps-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Steps Horizontal Background</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-process-steps cb-featured-box cb-content">
<a href="block-content-steps-horizontal-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/steps-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Steps Horizontal buttons</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-process-steps cb-featured-box cb-content">
<a href="block-content-steps-vertical-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/vertical-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Vertical 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-process-steps cb-featured-box cb-content cb-misc cb-shop">
<a href="block-content-steps-order-tracking.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/order-tracking.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Order Tracking</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-process-steps cb-featured-box cb-content">
<a href="block-content-steps-vertical.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/steps-vertical.jpg?kdshfdks" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Steps Vertical</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-slider cb-misc cb-content">
<a href="block-slider-cursor.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/slider-custom-cursor.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Steps Vertical</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-testimonials cb-content">
<a href="block-content-testimonials.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/testimonials-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Testimonials 1</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-testimonials cb-content">
<a href="block-content-testimonials-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/testimonials-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Testimonials 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-testimonials cb-content cb-slider">
<a href="block-content-testimonials-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/testimonials-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Testimonials 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-testimonials cb-content cb-slider">
<a href="block-content-testimonials-slide.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/testimonials-slide.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Testimonials Sticky</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-countdown cb-content">
<a href="block-content-countdown.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/countdown.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Countdown</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-countdown cb-content">
<a href="block-content-countdown-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/countdown-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Countdown 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-tabs cb-content">
<a href="block-content-tab-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/tab-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Tab 1</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-tabs cb-content">
<a href="block-content-tab-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/tab-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Tab 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-tabs cb-content">
<a href="block-content-tab-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/tab-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Tab 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-tabs cb-content">
<a href="block-content-tab-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/tabs-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Tab 4</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-content">
<a href="block-content-gallery.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gallery-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gallery 1</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-content">
<a href="block-content-gallery-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gallery-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gallery 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-content">
<a href="block-content-gallery-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gallery-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gallery 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-content">
<a href="block-content-gallery-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gallery-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gallery 4</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-content">
<a href="block-content-gallery-5.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gallery-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gallery 5</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-content">
<a href="block-content-gallery-6.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gallery-6.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gallery 6</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-content">
<a href="block-content-gallery-7.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gallery-7.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gallery 7</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-content">
<a href="block-content-gallery-8.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gallery-8.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gallery 8</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-content cb-blog cb-portfolio">
<a href="block-content-gallery-9.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gallery-9.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gallery 9</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-content cb-blog cb-portfolio">
<a href="block-content-gallery-10.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gallery-10.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gallery 10</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-content cb-blog cb-portfolio">
<a href="block-content-gallery-instagram.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gallery-instagram.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gallery Instagram</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-counters cb-content">
<a href="block-content-counter-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/counter-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Counter 1</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-counters cb-content">
<a href="block-content-counter-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/counter-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Counter 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-counters cb-content">
<a href="block-content-counter-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/counter-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Counter 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-counters cb-content">
<a href="block-content-counter-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/counter-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Counter 4</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-counters cb-content">
<a href="block-content-counter-5.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/counter-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Counter 5</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-filters cb-content">
<a href="block-content-filters.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/filters-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Filter</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-pricing cb-content">
<a href="block-content-pricing-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/pricing-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Pricing 1</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-pricing cb-content">
<a href="block-content-pricing-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/pricing-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Pricing 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-pricing cb-content">
<a href="block-content-pricing-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/pricing-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Pricing 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-pricing cb-content">
<a href="block-content-pricing-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/pricing-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Pricing 4</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-pricing cb-content">
<a href="block-content-pricing-5.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/pricing-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Pricing 5</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-pricing cb-content">
<a href="block-content-pricing-6.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/pricing-6.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Pricing 6</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-pricing cb-content">
<a href="block-content-pricing-7.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/pricing-7.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Pricing 7</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-pricing cb-content">
<a href="block-content-pricing-8.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/pricing-8.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Pricing 8</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-pricing cb-content">
<a href="block-content-pricing-9.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/pricing-9.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Pricing 9 - Sticky Header</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-pricing cb-content">
<a href="block-content-pricing-10.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/pricing-10.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Pricing 10</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-pricing cb-content">
<a href="block-content-pricing-11.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/pricing-11.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Pricing 11</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-menu">
<a href="block-navigation-menu.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/nav-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Nav 1</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-megamenu">
<a href="block-navigation-mega-menu.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/mega-menu.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Mega Menu</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-megamenu">
<a href="block-navigation-mega-menu-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/mega-menu-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Mega Menu 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-featured-box cb-megamenu">
<a href="block-navigation-mega-menu-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/mega-menu-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Mega Menu 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-megamenu">
<a href="block-navigation-mega-menu-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/mega-menu-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Mega Menu 4</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-megamenu">
<a href="block-navigation-mega-menu-5.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/mega-menu-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Mega Menu 5</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-megamenu">
<a href="block-navigation-opacity-on-hover.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/opacity-on-hover.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Menu Opacity On-hover</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-menu">
<a href="block-navigation-menu-full.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/overlay-menu.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Overlay Menu</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-menu-layout">
<a href="block-navigation-header.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/header.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Header Layout</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-menu-layout">
<a href="block-navigation-header-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/header-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Header Layout 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-menu-layout">
<a href="block-navigation-header-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/header-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Header Layout 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-menu-layout">
<a href="block-navigation-header-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/header-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Header Layout 4</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-menu-layout cb-shop cb-megamenu cb-menu">
<a href="block-navigation-header-5.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy"src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/header-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Header Layout 5</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-menu-layout cb-misc cb-menu">
<a href="block-navigation-page-scroll.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy"src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/onepage-dots.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">One Page - Dots</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc">
<a href="block-misc-crypto.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy"src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/crypto.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Crypto Parallax</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-slider cb-shop cb-header">
<a href="block-slider-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/slider-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Slider 1</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc cb-shop">
<a href="block-content-shop-cart-quantity.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/shop-quatity.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Shop Prouduct Quantity</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-slider cb-shop">
<a href="block-slider-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/slider-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Slider 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-slider">
<a href="block-slider-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/slider-scrollbar.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Slider 3 Scrollbar</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-slider cb-hero">
<a href="block-slider-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/slider-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Carousel</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-slider cb-hero cb-gallery cb-content">
<a href="block-content-gallery-instagram-carousel.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/carousel-instagram.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Carousel Instagram</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-slider">
<a href="block-slider-6.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/slider-6.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Slider Pagination Bar</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-slider">
<a href="block-slider-7.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/slider-7.jpg?sdfsf" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Slider Pagination Bullet</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc">
<a href="block-misc-bg-patterns.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/svg_background.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">SVG Backgrounds</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc cb-blog">
<a href="block-misc-gototop.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/gototop.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">GotoTop Animation on scroll</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc">
<a href="block-misc-copy-to-clipboard.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/clipboard.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Copy to Clipboard</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc cb-slider">
<a href="block-misc-ticker.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/ticker.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Ticker</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-alert">
<a href="block-content-alert.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/alert-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Alerts Default</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-alert">
<a href="block-content-alert-sticky.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/alert-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Alert Sticky</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-alert">
<a href="block-content-alert-float.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/alert-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Alert Float</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-alert">
<a href="block-content-alert-top.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/alert-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Alert Top</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-alert">
<a href="block-content-alert-bottom-fixed.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/alert-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Alert Bottom</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-alert">
<a href="block-content-alert-custom-width.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/alert-custom-width.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Alert Custom Width</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-footer">
<a href="block-footer-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/footer-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Footer 1</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-footer">
<a href="block-footer-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/footer-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Footer 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-footer">
<a href="block-footer-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/footer-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Footer 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-footer cb-hero cb-menu">
<a href="block-footer-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/footer-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Footer/Section with Video Background</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-footer cb-hero cb-contact cb-social-icons">
<a href="block-footer-5.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/footer-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Footer 5</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-footer cb-hero cb-social-icons cb-new">
<div class="badge bg-danger">New</div>
<a href="block-footer-8.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/footer-8.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Footer 8</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc">
<a href="block-misc-rotate-text.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/rotate-onscroll.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Rotate Text On Scroll</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc">
<a href="block-misc-rotating-text.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/rotating-text.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Rotating Text</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc">
<a href="block-misc-tooltip.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/misc-tooltip.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Inline Tooltip</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc cb-header cb-nav">
<a href="block-misc-search.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/misc-search.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Dropdown Search</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-header cb-menu cb-megamenu">
<a href="block-navigation-header-menu-inline.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/header-inline.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Header Dropdown Inline</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-buttons">
<a href="block-content-buttons.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/buttons.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Buttons</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-popups">
<a href="block-content-popup-spa.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/popup-spa.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Spa Popup Banner</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-popups">
<a href="block-content-popup-gym.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/popup-gym.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Gym Popup Banner</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-popups cb-shop">
<a href="block-content-popup-food.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/popup-food.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Food Popup Banner</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-popups cb-shop">
<a href="block-content-popup-shop-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/popup-shop-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Shop Popup Banner</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-popups cb-shop">
<a href="block-content-popup-furniture.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/popup-furniture.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Furniture Popup Banner</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-buttons cb-popups">
<a href="block-content-floating-button.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/floating-button.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Floating Button</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-buttons cb-misc">
<a href="block-misc-link-hovers.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/misc-link.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Link Hovers</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-social-icons">
<a href="block-content-social-icons-sidebar.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/social-icons-sidebar.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Social Icons Sidebar</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-social-icons">
<a href="block-content-social-icons-hover.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/social-icons.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Social Icons Shadows</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-social-icons">
<a href="block-content-social-icons-toggle.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/social-icons-toggle.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Social Icons Toggle</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-portfolio">
<a href="block-portfolio-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/portfolio-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Portfolio</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-portfolio cb-gallery cb-social-icons">
<a href="block-portfolio-single-grid.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/portfolio-single-grid.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Portfolio Single Grid Sticky</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-portfolio cb-gallery cb-social-icons">
<a href="block-portfolio-single.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/portfolio-single.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Portfolio Single Sticky</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-portfolio cb-slider cb-social-icons">
<a href="block-portfolio-single-full.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/portfolio-single-full.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Portfolio Single Full</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc">
<a href="block-misc-sticky-section.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/sticky-page.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Sticky Page Section</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-shop cb-tabs cb-slider">
<a href="block-shop-select.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/shop-select.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Shop Select</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc cb-cards">
<a href="block-misc-expanding-cards.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/misc-card-expand.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Expand Cards</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-forms">
<a href="block-form-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/form-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Animated Label</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-forms">
<a href="block-form-otp.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/otp-form.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">OTP Form</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-forms">
<a href="block-form-password.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/form-show-password.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Show/Hide Password</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc">
<a href="block-misc-skeleton-loading.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/misc-skeleton.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Skeleton Loading</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc">
<a href="block-misc-cursor.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/misc-custom-cursor.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Custom Cursor</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-popups cb-forms">
<a href="block-content-popup-request.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/popup-request.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Popup Request</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-popups cb-slider">
<a href="block-content-whats-new.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/popup-whats-new.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">What's New Tour</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-popups cb-contact cb-forms">
<a href="block-content-popup-contact.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/popup-contact.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Popup Contact</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-contact cb-forms">
<a href="block-contact-1.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/contact-1.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Contact Form</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-forms cb-process-steps">
<a href="block-form-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/form-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Form Steps</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-forms">
<a href="block-form-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/form-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Form</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-forms">
<a href="block-form-4.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/form-4.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Form</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-promo-box cb-forms cb-new">
<div class="badge bg-danger">New</div>
<a href="block-form-5.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/form-5.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Form Layout 5</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-forms cb-new">
<div class="badge bg-danger">New</div>
<a href="block-form-6.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/form-6.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Form Layout 6</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-forms cb-featured-box cb-new">
<div class="badge bg-danger">New</div>
<a href="block-form-7.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/form-7.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Form Layout 7</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-forms cb-contact cb-new">
<div class="badge bg-danger">New</div>
<a href="block-form-8.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/form-8.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Form Layout 8</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-forms cb-new">
<div class="badge bg-danger">New</div>
<a href="block-form-9.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/form-9.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Form Layout 9</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-forms cb-featured-box cb-new">
<div class="badge bg-danger">New</div>
<a href="block-form-10.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/form-10.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Form Layout 10</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-header cb-menu cb-misc cb-new">
<div class="badge bg-danger">New</div>
<a href="block-navigation-morph.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/morph-menu.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Morph Menu</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-misc cb-new">
<div class="badge bg-danger">New</div>
<a href="block-currency-converter.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/currency-converter.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Currency Converter</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-portfolio cb-new">
<div class="badge bg-danger">New</div>
<a href="block-video-gallery.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/video-gallery.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Video Gallery</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-portfolio cb-new">
<div class="badge bg-danger">New</div>
<a href="block-video-section.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/video-section.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Video Section</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-portfolio cb-new">
<div class="badge bg-danger">New</div>
<a href="block-video-sound-event.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/sound-event.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Video Sound Event</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-portfolio cb-new">
<div class="badge bg-danger">New</div>
<a href="block-video-gallery-onhover.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/video-onhover.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Video On-Hover</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-gallery cb-portfolio cb-new">
<div class="badge bg-danger">New</div>
<a href="block-video-gallery-onhover-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/video-onhover-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Video On-Hover 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-featured-box cb-contact cb-new">
<div class="badge bg-danger">New</div>
<a href="block-contact-2.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/contact-2.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Contact 2</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-slider cb-tabs cb-new">
<div class="badge bg-danger">New</div>
<a href="block-carousel-tabs.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/carousel-tab.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Carousel Tab - Light/Dark</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-nav cb-header cb-menu cb-new">
<div class="badge bg-danger">New</div>
<a href="block-navigation-expand.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/navigation-expand.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Expand Navigation</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-form cb-new">
<div class="badge bg-danger">New</div>
<a href="block-form-profile.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/form-profile.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Form Profile Page</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-form cb-contact cb-new">
<div class="badge bg-danger">New</div>
<a href="block-contact-3.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/contact-3.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Contact 3</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-popups cb-countdown">
<a href="block-content-popup-coupon.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/popup-coupon.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Popup Coupon</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-popups cb-forms">
<a href="block-content-popup-recovery-email.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/popup-recovery-email.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Popup Recovery Email</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-popups cb-event">
<a href="block-content-popup-ticket.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/popup-ticket.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Popup Ticket</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
<article class="portfolio-item text-center col-6 col-lg-4 cb-content cb-popups cb-shop">
<a href="block-content-popup-sale.html" target="_blank" class="grid-inner">
<div class="portfolio-image border border-dark">
<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3C/svg%3E" width="640" height="360" data-src="images/blocks/intro/popup-sale.jpg" alt="Block Image">
<div class="bg-overlay">
<div class="bg-overlay-content">
<h3 class="h5 mb-0 text-white" data-hover-animate="fadeInDownSmall" data-hover-animate-out="fadeOutUpSmall">Popup Sale</h3>
</div>
<div class="bg-overlay-bg" data-hover-animate="fadeIn" data-hover-animate-out="fadeOut"></div>
</div>
</div>
</a>
</article>
</div><!-- #portfolio end -->
</div>
</div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="bg-dark dark border-0 d-block d-md-none">
<!-- Copyrights
============================================= -->
<div id="copyrights" class="bg-transparent">
<div class="container">
<div class="row">
<div class="col-12 text-center">
Copyrights © 2023 All Rights Reserved by SemiColonWeb.<br>
<div class="copyright-links"><a href="https://1.envato.market/c/1309643/480739/4415?u=https%3A%2F%2Fthemeforest.net%2Fcart%2Fconfigure_before_adding%2F9228123">Buy Canvas</a> / <a href="http://themes.semicolonweb.com/html/canvas/intro.html">Main Demos</a></div>
</div>
</div>
</div>
</div> <!-- #copyrights end -->
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up"></div>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/functions.js"></script>
<script>
jQuery(document).ready( function($){
jQuery(window).on( 'pluginIsotopeReady', function(){
jQuery('.blocks-grid').find('li:not(.custom-filter-reset)').each( function(){
var element = jQuery(this),
elementFilter = element.children().attr('data-filter'),
elementFilterContainer = element.parents('.blocks-grid').attr('data-container');
elementFilterCount = Number( jQuery(elementFilterContainer).find( '.portfolio-item' ).filter( elementFilter ).length );
element.find('.grid-inner-count').text(elementFilterCount);
});
jQuery('.grid-container').on( 'layoutComplete', function() {
if( jQuery('body').hasClass('device-xs') || jQuery('body').hasClass('device-sm') ) {
jQuery('#navbarNav').collapse('hide');
}
});
// quick search regex
var qsRegex;
// init Isotope
var $grid = jQuery('.grid-container').isotope({
filter: function() {
return qsRegex ? jQuery(this).text().match( qsRegex ) : true;
}
});
// use value of search field to filter
var $blockSearch = jQuery('.block-search').keyup( debounce( function() {
qsRegex = new RegExp( $blockSearch.val(), 'gi' );
$grid.isotope();
}, 500 ) );
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
});
});
</script>
</body>
</html>