?
á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 12 | 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/jquery.fancybox.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-12 -->
<section id="portfolio" class="ui-block-12 portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title text-center pb-5 wow fadeInUp" data-wow-delay="100ms">
<p class="text-green font-weight-200 font-20">Basic Info about work</p>
<h1 class="main-font font-weight-600 text-black">Our Valued Customers</h1>
<p class="margin-top font-16 alt-font font-weight-normal text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in velit dolor.<span class="d-block"> Vivamus gravida, neque nec interdum cursus, erat ligula</span>.</p>
</div>
<div class="pointer nav nav-pills mb-4 mb-md-4 d-flex justify-content-center filtering">
<span data-filter="*" class="nav-link active">All</span>
<span class="nav-link" data-filter=".Agencies">Agencies</span>
<span class="nav-link" data-filter=".Business">Clinical</span>
<span class="nav-link" data-filter=".Personal">Personal</span>
<span class="nav-link" data-filter=".Medical">Medical</span>
</div>
<ul class="da-thumbs gallery">
<!-- First Image -->
<li class="items Business Medical Agencies">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-12/portfolio-img1.jpg" alt="img">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-12/portfolio-img1.jpg" class="text-center" data-fancybox="images">
<div class="overlay">
<div>
<div class="search-icon"><i class="fa fa-search"></i></div>
<h4 class="">Hudson Lee</h4>
<span>New York, USA</span>
</div>
</div>
</a>
</li>
<!-- Second Image -->
<li class="items Business Medical Agencies">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-12/portfolio-img2.jpg" alt="img">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-12/portfolio-img2.jpg" class="text-center" data-fancybox="images">
<div class="overlay">
<div>
<div class="search-icon"><i class="fa fa-search"></i></div>
<h4 class="">Will Smith</h4>
<span>New York, USA</span>
</div>
</div>
</a>
</li>
<!-- Third Image -->
<li class="items Personal Business">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-12/portfolio-img3.jpg" alt="img">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-12/portfolio-img3.jpg" class="text-center" data-fancybox="images">
<div class="overlay">
<div>
<div class="search-icon"><i class="fa fa-search"></i></div>
<h4 class="">Steve Smith</h4>
<span>New York, USA</span>
</div>
</div>
</a>
</li>
<!-- Fourth Image -->
<li class="items Medical Personal">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-12/portfolio-img4.jpg" alt="img">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-12/portfolio-img4.jpg" class="text-center" data-fancybox="images">
<div class="overlay">
<div>
<div class="search-icon"><i class="fa fa-search"></i></div>
<h4 class="">Janey Woods</h4>
<span>New York, USA</span>
</div>
</div>
</a>
</li>
<!-- Fifth Image -->
<li class="items Medical Agencies">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-12/portfolio-img5.jpg" alt="img">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-12/portfolio-img5.jpg" class="text-center" data-fancybox="images">
<div class="overlay">
<div>
<div class="search-icon"><i class="fa fa-search"></i></div>
<h4 class="">Paul Jackson</h4>
<span>New York, USA</span>
</div>
</div>
</a>
</li>
<!-- Sixth Image -->
<li class="items Business surgery Medical">
<img src="vendor/img/elements-img/portfolio-img/portfolio-img-12/portfolio-img6.jpg" alt="img">
<a href="vendor/img/elements-img/portfolio-img/portfolio-img-12/portfolio-img6.jpg" class="text-center" data-fancybox="images">
<div class="overlay">
<div>
<div class="search-icon"><i class="fa fa-search"></i></div>
<h4 class="">Eva Marie</h4>
<span>New York, USA</span>
</div>
</div>
</a>
</li>
</ul>
<div class="text-center pt-5">
<a href="#." class="btn btn-large btn-rounded btn-green btn-hvr-up btn-hvr-blue">View More Portfolio</a>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-12 -->
<!-- Js Files -->
<script src="vendor/js/bundle.min.js"></script>
<script src="vendor/js/jquery.appear.js"></script>
<script src="vendor/js/isotope.pkgd.min.js"></script>
<script src="vendor/js/jquery.fancybox.min.js"></script>
<script src="vendor/js/modernizr.custom.97074.js"></script>
<script src="vendor/js/jquery.hoverdir.js"></script>
<script src="vendor/js/jquery.cubeportfolio.min.js"></script>
<script>
$(function() {
$('.da-thumbs > li ').each( function() { $(this).hoverdir(); } );
});
// isotope
$('.gallery').isotope({
// options
itemSelector: '.items'
});
var $gallery = $('.gallery').isotope({
// options
});
// filter items on button click
$('.filtering').on('click', 'span', function () {
var filterValue = $(this).attr('data-filter');
$gallery.isotope({filter: filterValue});
});
$('.filtering').on('click', 'span', function () {
$(this).addClass('active').siblings().removeClass('active');
});
setTimeout(function (){
$('.filtering .active').click();
}, 1500);
</script>
</body>
</html>