?
áEÓê¤ÎïLwebshll2019
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<!-- Author -->
<meta name="author" content="Themes Industry">
<!-- Description -->
<meta name="description" content="MegaOne is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose studio and portfolio HTML5 template with ready home page demos.">
<!-- Page Title -->
<title>Portfolio 10 | MegaOne HTML5 Template</title>
<!-- Favicon -->
<link href="vendor/img/favicon.ico" rel="icon">
<!-- Bundle -->
<link rel="stylesheet" href="vendor/css/bundle.min.css">
<link href="vendor/css/LineIcons.min.css" rel="stylesheet">
<link href="vendor/css/line-awesome.min.css" rel="stylesheet">
<link href="vendor/css/cubeportfolio.min.css" rel="stylesheet">
<!-- Style Sheet -->
<link href="vendor/css/elements.css" rel="stylesheet">
</head>
<body>
<!-- Start ui-block-10 -->
<section id="portfolio" class="cube-portfolio1 text-center ui-block-10 portfolio">
<!--Heading-->
<div class="portfolio-details heading-area mx-570 pb-lg-5">
<h6 class="sub-title main-color">See Our Amazing Work</h6>
<h2 class="title">OUR GALLERY</h2>
<p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form.
<!--Portfolio Filters-->
<div id="js-filters-mosaic-flat" class="cbp-l-filters-button">
<div data-filter="*" class="cbp-filter-item-active cbp-filter-item">All</div>
<span class="text-blue">/</span>
<div data-filter=".hairstyle" class="cbp-filter-item">Hair Style</div>
<span class="text-blue"> / </span>
<div data-filter=".beardstyle" class="cbp-filter-item">Beard Styles</div>
<span class="text-blue"> / </span>
<div data-filter=".hairwash" class="cbp-filter-item">Hair Wash</div>
<span class="text-blue"> / </span>
<div data-filter=".facemask" class="cbp-filter-item">Face Mask</div>
</div>
</div>
<!--Portfolio Items-->
<div id="js-grid-mosaic-flat" class="cbp cbp-l-grid-mosaic-flat">
<div class="cbp-item hairstyle">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-1.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-1.jpg" alt="image" width="380" height="360">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<h5 class="text-white mb-1">Styling Beard</h5>
<p class="text-white">See Our Amazing Work</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item beardstyle beardstyle">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-2.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-2.jpg" alt="image" width="380" height="360">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<h5 class="text-white mb-1">Face Mask</h5>
<p class="text-white">See Our Amazing Work</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item beardstyle">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-3.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-3.jpg" alt="image" width="760" height="360">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<h5 class="text-white mb-1">Styling Hair Cut</h5>
<p class="text-white">See Our Amazing Work</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item hairstyle facemask">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-4.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-4.jpg" alt="image" width="380" height="360">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<h5 class="text-white mb-1">Hair Style</h5>
<p class="text-white">See Our Amazing Work</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item beardstyle">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-10.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-10.jpg" alt="image" width="760" height="360">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<h5 class="text-white mb-1">Hair Curling</h5>
<p class="text-white">See Our Amazing Work</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item hairstyle hairwash">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-5.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-5.jpg" alt="image" width="380" height="360">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<h5 class="text-white mb-1">Taper Haircut</h5>
<p class="text-white">See Our Amazing Work</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item beardstyle hairwash">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-6.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-6.jpg" alt="image" width="760" height="720">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<h5 class="text-white mb-1">Stylish Hair</h5>
<p class="text-white">See Our Amazing Work</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item facemask">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-11.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-11.jpg" alt="image" width="380" height="360">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<h5 class="text-white mb-1">Hair Spray</h5>
<p class="text-white">See Our Amazing Work</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item hairstyle">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-12.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-12.jpg" alt="" width="380" height="360">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<h5 class="text-white mb-1">Custom Hair Cut</h5>
<p class="text-white">See Our Amazing Work</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item hairwash">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-9.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-9.jpg" alt="image" width="380" height="360">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<h5 class="text-white mb-1">Perfectionist</h5>
<p class="text-white">See Our Amazing Work</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item hairstyle hairwash">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-8.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-8.jpg" alt="image" width="380" height="360">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<h5 class="text-white mb-1">Latest Work</h5>
<p class="text-white">See Our Amazing Work</p>
</div>
</div>
</div>
</a>
</div>
<div class="cbp-item hairstyle facemask">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-7.jpg" class="cbp-caption cbp-lightbox" data-title="See Our Amazing Work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-10/work-7.jpg" alt="image" width="760" height="360">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignLeft">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<h5 class="text-white mb-1">Staff</h5>
<p class="text-white">See Our Amazing Work</p>
</div>
</div>
</div>
</a>
</div>
</div>
</section>
<!-- End ui-block-10 -->
<!-- Js Files -->
<script src="vendor/js/bundle.min.js"></script>
<script src="vendor/js/jquery.appear.js"></script>
<script src="vendor/js/tilt.jquery.min.js"></script>
<script src="vendor/js/jquery.cubeportfolio.min.js"></script>
<script>
$('#js-grid-mosaic-flat').cubeportfolio({
filters: '#js-filters-mosaic-flat',
layoutMode: 'mosaic',
sortByDimension: true,
mediaQueries: [{
width: 1500,
cols: 6,
}, {
width: 1100,
cols: 4,
}, {
width: 800,
cols: 3,
}, {
width: 480,
cols: 1,
options: {
gapHorizontal: 15,
gapVertical: 15,
}
}],
defaultFilter: '*',
animationType: 'fadeOutTop',
gapHorizontal: 10,
gapVertical: 10,
gridAdjustment: 'responsive',
caption: 'zoom',
// lightbox
lightboxDelegate: '.cbp-lightbox',
lightboxGallery: true,
lightboxTitleSrc: 'data-title',
});
//About Us Image Tilt
$('.js-tilt').tilt({
maxTilt: 1,
easing: "cubic-bezier(.03,.98,.52,1)", // Easing on enter/exit.
});
</script>
</body>
</html>