?
á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>Elements-Portfolio | 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">
<link href="vendor/css/megamenu.css" rel="stylesheet">
<!-- Style Sheet -->
<link href="vendor/css/elements.css" rel="stylesheet">
</head>
<body>
<!-- Start Element Heading -->
<section id="elements" class="ui-element bg-light-gray">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-title wow fadeIn" data-wow-delay="300ms">
<div class="main-title-opacity-text"> <h1 class="d-flex justify-content-center">Elements </h1> </div>
<h1 class="color-purple heading-tooltip-number position-relative d-inline-block">Elements </h1>
<h2 class="color-black"> Portfolio UI Blocks </h2>
<p class="color-black font-weight-500 text-uppercase">Power up your pages with these elements. Each element comes with a variety of options for your choice.</p>
</div>
</div>
</div>
</div>
</section>
<!-- End Element Heading -->
<!-- Start Header -->
<header class="megamenu mega-elements pt-5">
<nav class="navbar navbar-top-default navbar-expand-lg static-nav transparent-bg fixed-menu">
<div class="container container-width">
<div id="menu" class="collapse navbar-collapse d-none d-lg-block mod-menu">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item"> <a href="elements-info.html" target="_blank" class="nav-link link">Info Blocks</a></li>
<li class="nav-item"> <a href="elements-team.html" target="_blank" class="nav-link link">Team Blocks</a></li>
<li class="nav-item"> <a href="index-elements-portfolio.html" target="_blank" class="nav-link link active">Portfolio Blocks</a></li>
<li class="nav-item"> <a href="elements-pricing.html" target="_blank" class="nav-link link">Pricing Blocks</a></li>
<li class="nav-item mega-menu active"> <a href="javascript:void(0)" class="nav-link dropdown-arrow">Others <i class="fas fa-angle-down"></i></a>
<ul class="hide-cursor bg-white text-left">
<li class="p-0">
<ul>
<li> <a class="dropdown-items" target="_blank" href="elements-counter.html">Counter Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-quote.html">Quote Blocks</a> </li>
</ul>
</li>
<li class="p-0">
<ul>
<li> <a class="dropdown-items" target="_blank" href="elements-footer.html">Footer Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-button.html">Button Blocks</a> </li>
</ul>
</li>
<li class="p-0">
<ul>
<li> <a class="dropdown-items" target="_blank" href="elements-testimonials.html">Testimonial Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-typography.html">Typography Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-blog.html">Blog Blocks</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- side menu open button -->
<a class="menu_bars d-inline-block d-lg-none menu-bars-setting" id="sidemenu_toggle">
<div class="menu-lines">
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</nav>
<!-- Side Menu -->
<div class="side-menu d-none">
<div class="inner-wrapper nav-icon">
<span class="btn-close link" id="btn_sideNavClose"></span>
<nav class="side-nav w-100">
<div class="position-relative">
<!-- Main Menu -->
<div class="navbar-nav side-main-menu">
<a class="nav-link" href="elements-info.html">Info Blocks</a>
<a class="nav-link" href="elements-team.html">Team Blocks</a>
<a class="nav-link" href="elements-quote.html">Portfolio Blocks</a>
<a class="nav-link" href="elements-quote.html">Pricing Blocks</a>
<a class="nav-link active sidenav-arrow multi-item1" href="javascript:void(0)">Others <i class="fas fa-angle-right"></i></a>
</div>
<!-- Home Section Sub Menu -->
<div class="navbar-nav sub-multi-item1">
<a class="nav-link sidenav-arrow item1" href="javascript:void(0)">Demos 1 <i class="fas fa-arrow-right"></i></a>
<a class="nav-link sidenav-arrow item2" href="javascript:void(0)">Demos 2 <i class="fas fa-arrow-right"></i></a>
<a class="nav-link sidenav-arrow item3" href="javascript:void(0)">Demos 3 <i class="fas fa-arrow-right"></i></a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
</div>
<!-- Home Section Inner Menu -->
<div class="navbar-nav inner-multi-item1 item1">
<a class="nav-link" target="_blank" href="elements-blog.html">Testimonial Blocks</a>
<a class="nav-link" target="_blank" href="elements-counter.html">Typography Blocks</a>
<a class="nav-link" target="_blank" href="elements-button.html">Blog Blocks</a>
<a class="nav-link arrow-back back" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)">Back To Main</a>
</div>
<div class="navbar-nav inner-multi-item1 item2">
<a class="nav-link" target="_blank" href="elements-testimonials.html">Footer Blocks</a>
<a class="nav-link" target="_blank" href="elements-footer.html">Button Blocks</a>
<a class="nav-link link arrow-back back" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)">Back To Main</a>
</div>
<div class="navbar-nav inner-multi-item1 item3">
<a class="nav-link" target="_blank" href="index-elements-portfolio.html">Counter Blocks</a>
<a class="nav-link" target="_blank" href="elements-typography.html">Quote Blocks</a>
<a class="nav-link arrow-back back" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)">Back To Main</a>
</div>
</div>
</nav>
<div class="side-footer text-white w-100">
<ul class="social-icons-simple">
<li class="side-menu-icons animated-wrap pb-0"><a class="animated-element" href="javascript:void(0)"><i class="ti ti-facebook color-white"></i> </a> </li>
<li class="side-menu-icons animated-wrap pb-0"><a class="animated-element" href="javascript:void(0)"><i class="ti ti-instagram color-white"></i> </a> </li>
<li class="side-menu-icons animated-wrap pb-0"><a class="animated-element" href="javascript:void(0)"><i class="ti ti-twitter color-white"></i> </a> </li>
</ul>
<p class="text-white">© 2021 MegaOne. Made With Love by Themesindustry</p>
</div>
</div>
</div>
<a id="close_side_menu" href="javascript:void(0);"></a>
<!-- Side Menu -->
</header>
<!-- End Header -->
<!-- Start Portfolio Index -->
<section class="shop main-page">
<div class="container demo-container-width">
<div class="row">
<div class="col-lg-12 col-md-12">
<div id="js-grid-blog-posts" class="demo-setting cbp no-transition">
<!-- Portfolio-1 -->
<div class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap owl-theme owl-demos owl-carousel">
<div class="item">
<a href="elements-portfolio-1.html" target="_blank"><img src="vendor/img/elements-img/portfolio-img/portfolio-img/portfolio-img-1.jpg" alt=""></a>
</div>
</div>
</div>
<a href="elements-portfolio-1.html" target="_blank" class="cbp-l-grid-blog-title">Portfolio 1</a>
</div>
<!-- Portfolio-2 -->
<div class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap owl-theme owl-demos owl-carousel">
<div class="item">
<a href="elements-portfolio-2.html" target="_blank"><img src="vendor/img/elements-img/portfolio-img/portfolio-img/portfolio-img-2.jpg" alt=""></a>
</div>
</div>
</div>
<a href="elements-portfolio-2.html" target="_blank" class="cbp-l-grid-blog-title">Portfolio 2</a>
</div>
<!-- Portfolio-3 -->
<div class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap owl-theme owl-demos owl-carousel">
<div class="item">
<a href="elements-portfolio-3.html" target="_blank"><img src="vendor/img/elements-img/portfolio-img/portfolio-img/portfolio-img-3.jpg" alt=""></a>
</div>
</div>
</div>
<a href="elements-portfolio-3.html" target="_blank" class="cbp-l-grid-blog-title">Portfolio 3</a>
</div>
<!-- Portfolio-4 -->
<div class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap owl-theme owl-demos owl-carousel">
<div class="item">
<a href="elements-portfolio-4.html" target="_blank"><img src="vendor/img/elements-img/portfolio-img/portfolio-img/portfolio-img-4.jpg" alt=""></a>
</div>
</div>
</div>
<a href="elements-portfolio-4.html" target="_blank" class="cbp-l-grid-blog-title">Portfolio 4</a>
</div>
<!-- Portfolio-5 -->
<div class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap owl-theme owl-demos owl-carousel">
<div class="item">
<a href="elements-portfolio-5.html" target="_blank"><img src="vendor/img/elements-img/portfolio-img/portfolio-img/portfolio-img-5.jpg" alt=""></a>
</div>
</div>
</div>
<a href="elements-portfolio-5.html" target="_blank" class="cbp-l-grid-blog-title">Portfolio 5</a>
</div>
<!-- Portfolio-6 -->
<div class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap owl-theme owl-demos owl-carousel">
<div class="item">
<a href="elements-portfolio-6.html" target="_blank"><img src="vendor/img/elements-img/portfolio-img/portfolio-img/portfolio-img-6.jpg" alt=""></a>
</div>
</div>
</div>
<a href="elements-portfolio-6.html" target="_blank" class="cbp-l-grid-blog-title">Portfolio 6</a>
</div>
<!-- Portfolio-7 -->
<div class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap owl-theme owl-demos owl-carousel">
<div class="item">
<a href="elements-portfolio-7.html" target="_blank"><img src="vendor/img/elements-img/portfolio-img/portfolio-img/portfolio-img-7.jpg" alt=""></a>
</div>
</div>
</div>
<a href="elements-portfolio-7.html" target="_blank" class="cbp-l-grid-blog-title">Portfolio 7</a>
</div>
<!-- Portfolio-8 -->
<div class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap owl-theme owl-demos owl-carousel">
<div class="item">
<a href="elements-portfolio-8.html" target="_blank"><img src="vendor/img/elements-img/portfolio-img/portfolio-img/portfolio-img-8.jpg" alt=""></a>
</div>
</div>
</div>
<a href="elements-portfolio-8.html" target="_blank" class="cbp-l-grid-blog-title">Portfolio 8</a>
</div>
<!-- Portfolio-9 -->
<div class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap owl-theme owl-demos owl-carousel">
<div class="item">
<a href="elements-portfolio-9.html" target="_blank"><img src="vendor/img/elements-img/portfolio-img/portfolio-img/portfolio-img-9.jpg" alt=""></a>
</div>
</div>
</div>
<a href="elements-portfolio-9.html" target="_blank" class="cbp-l-grid-blog-title">Portfolio 9</a>
</div>
<!-- Portfolio-10 -->
<div class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap owl-theme owl-demos owl-carousel">
<div class="item">
<a href="elements-portfolio-10.html" target="_blank"><img src="vendor/img/elements-img/portfolio-img/portfolio-img/portfolio-img-10.jpg" alt=""></a>
</div>
</div>
</div>
<a href="elements-portfolio-10.html" target="_blank" class="cbp-l-grid-blog-title">Portfolio 10</a>
</div>
<!-- Portfolio-11 -->
<div class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap owl-theme owl-demos owl-carousel">
<div class="item">
<a href="elements-portfolio-11.html" target="_blank"><img src="vendor/img/elements-img/portfolio-img/portfolio-img/portfolio-img-11.jpg" alt=""></a>
</div>
</div>
</div>
<a href="elements-portfolio-11.html" target="_blank" class="cbp-l-grid-blog-title">Portfolio 11</a>
</div>
<!-- Portfolio-12 -->
<div class="cbp-item">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap owl-theme owl-demos owl-carousel">
<div class="item">
<a href="elements-portfolio-12.html" target="_blank"><img src="vendor/img/elements-img/portfolio-img/portfolio-img/portfolio-img-12.jpg" alt=""></a>
</div>
</div>
</div>
<a href="elements-portfolio-12.html" target="_blank" class="cbp-l-grid-blog-title">Portfolio 12</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Portfolio Index -->
<!-- Start Elements Steps -->
<section class="bg-light-gray elements-steps">
<div class="container">
<div class="row">
<div class="col-12 col-md-8 offset-md-2">
<div class="main-title wow fadeIn" data-wow-delay="300ms">
<h2 class="text-center">How to add these portfolio blocks?</h2>
<p class="text-center pb-5">Follow the instructions below to add blocks into your templates</p>
<div class="elements-instruction">
<b>Step 1 : </b><p>Please add the all css stylesheet link tags of that specific block. For example:<span class="d-block">(Please adjust the css file path according to your folder structure).</span></p>
<pre><link href="vendor/css/bundle.min.css" rel="stylesheet"><br><link href="vendor/css/cubeportfolio.min.css" rel="stylesheet"><br><link href="vendor/css/elements.css" rel="stylesheet"></pre>
<br/>
<b>Step 2 : </b><p>Please copy block html code from starting block comment to the ending block comment of required block and paste it in your template at your desired location. For example:</p>
<pre><!-- UI-Block-02 start --><br><section class="half-section p-0 bg-change bg-yellow ui-block-02 portfolio"><br><h2 class="d-none">heading</h2><br> <div class="container-fluid"><br> <div class="row align-items-center"><br> <div class="col-lg-6 col-md-12 p-0">.....</div><br> </div><br> </div><br></section><br><!-- UI-Block-02 End --></pre>
<br/>
<b>Step 3 : </b><p>Please add the all js script tags of that specific block and paste it before the ending body tag at the bottom of your html file. For example:</p>
<pre><script src="vendor/js/bundle.min.js" rel="stylesheet"><br><script src="vendor/js/appear.js" rel="stylesheet"><br><script src="vendor/js/cubeportfolio.min.js" rel="stylesheet"></pre>
<br>
<span class="pt-5"><b>That's It, You are done.</b></span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Elements Steps -->
<!-- Js Files -->
<script src="vendor/js/bundle.min.js"></script>
<script src="vendor/js/jquery.appear.js"></script>
<script src="vendor/js/jquery.fancybox.min.js"></script>
<script src="vendor/js/jquery.cubeportfolio.min.js"></script>
<script>
(function ($, window, document, undefined) {
$('#js-grid-blog-posts').cubeportfolio({
filters: '#js-filters-mosaic-flat',
search: '#js-search-blog-posts',
defaultFilter: '*',
layoutMode: 'mosanary',
animationType: "scaleSides",
gapVertical: 40,
gapHorizontal: 40,
sortByDimension: true,
gridAdjustment: 'responsive',
mediaQueries: [
{
width: 1800,
cols: 4
},
{
width: 1500,
cols: 3
}, {
width: 1100,
cols: 3
}, {
width: 600,
cols: 2
}, {
width: 320,
cols: 1
}],
caption: 'none',
displayType: 'fadeIn',
displayTypeSpeed: 400,
});
})(jQuery, window, document);
</script>
<script src="vendor/js/megamenu.js"></script>
<script>
$ = jQuery.noConflict();
jQuery(window).on("load", function () {
"use strict";
$('.side-menu').removeClass('d-none');
});
jQuery(function ($) {
"use strict";
var $window = $(window);
var windowsize = $(window).width();
$(".scroll").on("click", function(event){
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - 40}, 1100);
});
if ($("#sidemenu_toggle").length) {
$("#sidemenu_toggle").on("click", function () {
$(".pushwrap").toggleClass("active");
$(".side-menu").addClass("side-menu-active"), $("#close_side_menu").fadeIn(700)
}), $("#close_side_menu").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $(this).fadeOut(200), $(".pushwrap").removeClass("active")
}), $(".side-nav .navbar-nav .nav-link").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $("#close_side_menu").fadeOut(200), $(".pushwrap").removeClass("active")
}), $("#btn_sideNavClose").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $("#close_side_menu").fadeOut(200), $(".pushwrap").removeClass("active")
})
}
});
</script>
</body>
</html>