?
á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 1 | 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-01 -->
<section class="ui-block-01 portfolio-sec company-portfolio-section">
<div class="container p-section">
<div class="section-heading">
<div class="row">
<div class="col-lg-6 wow fadeInUp text-center text-lg-left" data-wow-delay="300ms">
<h4 class="heading">OUR <span>AMAZING PORTFOLIO</span></h4>
</div>
<div class="col-md-12 pt-5">
<div id="js-filters-mosaic" class="cbp-l-filters-button wow fadeInUp text-center text-lg-left" data-wow-delay="350ms">
<div data-filter="*" class="cbp-filter-item-active cbp-filter-item"> ALL</div>
<div data-filter=".web" class="cbp-filter-item">WEB DESIGN</div>
<div data-filter=".logo" class="cbp-filter-item">LOGO DESIGN</div>
<div data-filter=".mobile" class="cbp-filter-item">MOBILE APP</div>
<div data-filter=".development" class="cbp-filter-item">DEVELOPMENT</div>
</div>
<div id="js-grid-mosaic" class="cbp cbp-l-grid-mosaic">
<div class="cbp-item web logo">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-1/ui-block-01-portfolio-1.jpg" class="cbp-caption cbp-lightbox" data-title="Workout Buddy<br>by Tiberiu Neamu">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-1/ui-block-01-portfolio-1.jpg" alt="img">
</div>
<div class="cbp-caption-activeWrap portfolio-hover-effect d-flex align-items-end">
<div class="portfolio-inner-content">
<span></span>
<span></span>
</div>
<div class="hover-text">
<h4 class="p-hover-title">Creative</h4>
<p class="p-hover-des">35 WP Anniversary</p>
</div>
</div>
</a>
</div>
<div class="cbp-item mobile web">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-1/ui-block-01-portfolio-2.jpg" class="cbp-caption cbp-lightbox" data-title="Workout Buddy<br>by Tiberiu Neamu">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-1/ui-block-01-portfolio-2.jpg" alt="img">
</div>
<div class="cbp-caption-activeWrap portfolio-hover-effect d-flex align-items-end">
<div class="portfolio-inner-content">
<span></span>
<span></span>
</div>
<div class="hover-text">
<h4 class="p-hover-title">Web Design</h4>
<p class="p-hover-des">35 WP Anniversary</p>
</div>
</div>
</a>
</div>
<div class="cbp-item print logo development web mobile">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-1/ui-block-01-portfolio-3.jpg" class="cbp-caption cbp-lightbox" data-title="Workout Buddy<br>by Tiberiu Neamu">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-1/ui-block-01-portfolio-3.jpg" alt="img">
</div>
<div class="cbp-caption-activeWrap portfolio-hover-effect d-flex align-items-end">
<div class="portfolio-inner-content">
<span></span>
<span></span>
</div>
<div class="hover-text">
<h4 class="p-hover-title">Logo Design</h4>
<p class="p-hover-des">35 WP Anniversary</p>
</div>
</div>
</a>
</div>
<div class="cbp-item logo development">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-1/ui-block-01-portfolio-4.jpg" class="cbp-caption cbp-lightbox" data-title="Workout Buddy<br>by Tiberiu Neamu">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-1/ui-block-01-portfolio-4.jpg" alt="img">
</div>
<div class="cbp-caption-activeWrap portfolio-hover-effect d-flex align-items-end">
<div class="portfolio-inner-content">
<span></span>
<span></span>
</div>
<div class="hover-text">
<h4 class="p-hover-title">Development</h4>
<p class="p-hover-des">35 WP Anniversary</p>
</div>
</div>
</a>
</div>
</div>
<div id="js-loadMore-lightbox-gallery" class="cbp-l-loadMore-button text-data wow fadeInUp" data-wow-delay="650ms">
<div class="row portfolio-foot-detail text-data-inner">
<div class="col-7 col-lg-4 offset-lg-6 text-left pl-4">
<span class="p-text">We've Completed More Then</span>
<h4 class="p-num">530</h4>
<span class="p-text">Projects for Our amazing Clients</span>
</div>
<div class="col-5 col-lg-2 d-flex justify-content-end align-items-center"><button class="btn green-btn rounded-pill">VIEW ALL<span></span><span></span><span></span><span></span></button> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-01 -->
<!-- Js Files -->
<script src="vendor/js/bundle.min.js"></script>
<script src="vendor/js/jquery.appear.js"></script>
<script src="vendor/js/jquery.cubeportfolio.min.js"></script>
<script>
$('#js-grid-mosaic').cubeportfolio({
filters: '#js-filters-mosaic',
layoutMode: 'grid',
sortByDimension: true,
mediaQueries: [{
width: 1500,
cols: 2,
}, {
width: 1100,
cols: 2,
}, {
width: 768,
cols: 1,
}, {
width: 480,
cols: 1,
options: {
gapHorizontal: 60
}
}],
defaultFilter: '*',
animationType: 'fadeOut',
gapHorizontal: 50,
gapVertical: 50,
gridAdjustment: 'responsive',
caption: 'zoom',
// lightbox
lightboxDelegate: '.cbp-lightbox',
lightboxGallery: true,
lightboxTitleSrc: 'data-title',
lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
plugins: {
loadMore: {
element: "#js-loadMore-lightbox-gallery",
action: "click",
loadItems: 5,
}
}
})
.on('initComplete.cbp', function () {
// your functionality
var $this = $(this);
if ($(".cbp-filter-item-active").attr("data-filter") === "*") {
$("#js-loadMore-lightbox-gallery").addClass("active");
} else {
$("#js-loadMore-lightbox-gallery").removeClass("active");
}
$this.find(".cbp-wrapper").find(".cbp-item:not(.cbp-item-off)").each(function (index) {
$(this).removeClass("even");
console.log();
var val = index + 1;
if ($(this).css('left') !== "0px") {
$(this).addClass("even");
}
});
})
.on('onAfterLoadMore.cbp', function () {
// your functionality
var $this = $(this);
$("#js-loadMore-lightbox-gallery a").addClass("d-none");
$("#js-loadMore-lightbox-gallery").addClass("active-outer");
$this.find(".cbp-wrapper").find(".cbp-item:not(.cbp-item-off)").each(function (index) {
$(this).removeClass("even");
console.log();
var val = index + 1;
if ($(this).css('left') !== "0px") {
$(this).addClass("even");
}
});
})
.on('filterComplete.cbp', function () {
// your functionality
var $this = $(this);
if ($(".cbp-filter-item-active").attr("data-filter") === "*") {
$("#js-loadMore-lightbox-gallery").addClass("active");
$("#js-loadMore-lightbox-gallery").removeClass("d-none");
} else {
$("#js-loadMore-lightbox-gallery").removeClass("active");
$("#js-loadMore-lightbox-gallery").addClass("d-none");
}
$this.find(".cbp-wrapper").find(".cbp-item:not(.cbp-item-off)").each(function (index) {
$(this).removeClass("even");
var val = index + 1;
if ($(this).css('left') !== "0px") {
$(this).addClass("even");
}
});
});
</script>
</body>
</html>