?
á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 4 | 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-04 -->
<section class="cubeportfolio ui-block-04" id="work">
<div class="container">
<!-- Heading Area -->
<div class="row text-center padding-bottom">
<div class="col-12 col-md-10 col-lg-8 offset-md-1 offset-lg-2 wow zoomIn heading-area" data-wow-duration="1s" data-wow-delay=".1s">
<p class="sub-heading text-center">Most flexible one page</p>
<h3 class="heading text-center">Our Creative Work</h3>
<p class="text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit augue diam, accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit augue diam, accumsan.</p>
</div>
</div>
<div id="js-grid-mosaic-flat" class="cbp cbp-l-grid-mosaic-flat wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s">
<!-- Item-1 -->
<div class="cbp-item">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-1.jpg" class="cbp-caption cbp-lightbox" data-title="Bolt UI<br>by Tiberiu Neamu" data-cbp-lightbox="work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-1.jpg" alt="">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<div class="title">Latest Work</div>
<div class="cbp-l-caption-desc">See Our Recent Project</div>
</div>
</div>
</div>
</a>
</div>
<!-- Item-2 -->
<div class="cbp-item">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-2.jpg" class="cbp-caption cbp-lightbox" data-title="World Clock<br>by Paul Flavius Nechita" data-cbp-lightbox="work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-2.jpg" alt="">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<div class="title">Latest Work</div>
<div class="cbp-l-caption-desc">See Our Recent Project</div>
</div>
</div>
</div>
</a>
</div>
<!-- Item-4 -->
<div class="cbp-item">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-4.jpg" class="cbp-caption cbp-lightbox" data-title="WhereTO App<br>by Tiberiu Neamu"></a>
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-4.jpg" alt="">
</div>
<div class="cbp-caption-activeWrap text-area">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="portfolio-text main-font">Creativity is everything</div>
<div class="portfolio-para alt-font">Lorem ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum has been the industry’s standard dummy. Lorem Ipsum has been the industry’s standard dummy.</div>
<a href="#." class="btn btn-medium btn-rounded btn-trans link">Get Started</a>
</div>
</div>
</div>
</div>
<!-- Item-3 -->
<div class="cbp-item">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-3.jpg" class="cbp-caption cbp-lightbox" data-title="Seemple* Music<br>by Tiberiu Neamu" data-cbp-lightbox="work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-3.jpg" alt="">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<div class="title">Latest Work</div>
<div class="cbp-l-caption-desc">See Our Recent Project</div>
</div>
</div>
</div>
</a>
</div>
<!-- Item-5 -->
<div class="cbp-item">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-5.jpg" class="cbp-caption cbp-lightbox" data-title="iDevices<br>by Tiberiu Neamu" data-cbp-lightbox="work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-5.jpg" alt="">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<div class="title">Latest Work</div>
<div class="cbp-l-caption-desc">See Our Recent Project</div>
</div>
</div>
</div>
</a>
</div>
<!-- Item-6 -->
<div class="cbp-item">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-6.jpg" class="cbp-caption cbp-lightbox" data-title="Remind~Me Widget<br>by Tiberiu Neamu" data-cbp-lightbox="work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-6.jpg" alt="">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<div class="title">Latest Work</div>
<div class="cbp-l-caption-desc">See Our Recent Project</div>
</div>
</div>
</div>
</a>
</div>
<!-- Item-7 -->
<div class="cbp-item">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-7.jpg" class="cbp-caption cbp-lightbox" data-title="Workout Buddy<br>by Tiberiu Neamu" data-cbp-lightbox="work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-7.jpg" alt="">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<div class="title">Latest Work</div>
<div class="cbp-l-caption-desc">See Our Recent Project</div>
</div>
</div>
</div>
</a>
</div>
<!-- Item-8 -->
<div class="cbp-item">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-8.jpg" class="cbp-caption cbp-lightbox" data-title="Digital Menu<br>by Cosmin Capitanu" data-cbp-lightbox="work">
<div class="cbp-caption-defaultWrap">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-4/portfolio-img-8.jpg" alt="">
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="plus"></div>
<div class="title">Latest Work</div>
<div class="cbp-l-caption-desc">See Our Recent Project</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- End ui-block-04 -->
<!-- Js Files -->
<script src="vendor/js/bundle.min.js"></script>
<script src="vendor/js/wow.min.js"></script>
<script src="vendor/js/jquery.appear.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: 0,
gapVertical: 0,
gridAdjustment: 'responsive',
caption: 'zoom',
// lightbox
lightboxDelegate: '.cbp-lightbox',
lightboxGallery: true,
lightboxTitleSrc: 'data-title',
plugins: {
loadMore: {
element: '#js-loadMore-mosaic-flat',
action: 'click',
loadItems: 3,
}
},
});
</script>
</body>
</html>