?
á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 | 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/megamenu.css" rel="stylesheet">
<!-- Style Sheet -->
<link href="vendor/css/elements.css" rel="stylesheet">
</head>
<!-- Js Files -->
<script src="vendor/js/bundle.min.js"></script>
<script src="vendor/js/jquery.appear.js"></script>
<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"> 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">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 Elements Boxes -->
<section class="elements-boxes">
<div class="container">
<div class="row">
<!-- Box-1 -->
<div class="col-lg-4 col-md-6 col-12">
<a href="elements-info.html" target="_blank">
<div class="about-box mb-5 mb-lg-0 mx-auto bg-white">
<span class="pro-step d-inline-block color-white"><i class="fa fa-rocket" aria-hidden="true"></i></span>
<h5 class="font-weight-500 color-white mt-25px mb-15px text-capitalize">ABOUT BLOCKS</h5>
<p class="font-weight-light color-white">Check all our latest about blocks which are included in the latest version.</p>
</div>
</a>
</div>
<!-- Box-2 -->
<div class="col-lg-4 col-md-6 col-12">
<a href="elements-team.html" target="_blank">
<div class="about-box mb-5 mb-lg-0 mx-auto bg-white">
<span class="pro-step d-inline-block color-white"><i class="fa fa-users" aria-hidden="true"></i></span>
<h5 class="font-weight-500 color-white mt-25px mb-15px">TEAM BLOCKS</h5>
<p class="font-weight-light color-white">Check all our latest team blocks which are included in the latest version.</p>
</div>
</a>
</div>
<!-- Box-3 -->
<div class="col-lg-4 col-md-12 col-12">
<a href="elements-quote.html" target="_blank">
<div class="about-box mb-0 mx-auto bg-white">
<span class="pro-step d-inline-block color-white"><i class="fa fa-quote-right" aria-hidden="true"></i></span>
<h5 class="font-weight-500 color-white mt-25px mb-15px text-capitalize">QUOTE BLOCKS</h5>
<p class="font-weight-light color-white">Check all our latest quote blocks which are included in the latest version.</p>
</div>
</a>
</div>
</div>
<div class="row padding-half">
<!-- Box-4 -->
<div class="col-lg-4 col-md-6 col-12">
<a href="elements-blog.html" target="_blank">
<div class="about-box mb-5 mb-lg-0 mx-auto bg-white">
<span class="pro-step d-inline-block color-white"><i class="fa fa-book-open" aria-hidden="true"></i></span>
<h5 class="font-weight-500 color-white mt-25px mb-15px text-capitalize">BLOG BLOCKS</h5>
<p class="font-weight-light color-white">Check all our latest blog blocks which are included in the latest version.</p>
</div>
</a>
</div>
<!-- Box-5 -->
<div class="col-lg-4 col-md-6 col-12">
<a href="elements-counter.html" target="_blank">
<div class="about-box mb-5 mb-lg-0 mx-auto bg-white">
<span class="pro-step d-inline-block color-white"><i class="fa fa-sort-numeric-up" aria-hidden="true"></i></span>
<h5 class="font-weight-500 color-white mt-25px mb-15px">COUNTER BLOCKS</h5>
<p class="font-weight-light color-white">Check all our latest counter blocks which are included in the latest version.</p>
</div>
</a>
</div>
<!-- Box-6 -->
<div class="col-lg-4 col-md-12 col-12">
<a href="elements-pricing.html" target="_blank">
<div class="about-box mb-0 mx-auto bg-white">
<span class="pro-step d-inline-block color-white"><i class="fa fa-dollar-sign" aria-hidden="true"></i></span>
<h5 class="font-weight-500 color-white mt-25px mb-15px text-capitalize">PRICING BLOCKS</h5>
<p class="font-weight-light color-white">Check all our latest pricing blocks which are included in the latest version.</p>
</div>
</a>
</div>
</div>
<div class="row">
<!-- Box-7 -->
<div class="col-lg-4 col-md-6 col-12">
<a href="elements-testimonials.html" target="_blank">
<div class="about-box mb-5 mb-lg-0 mx-auto bg-white">
<span class="pro-step d-inline-block color-white"><i class="fa fa-smile-beam" aria-hidden="true"></i></span>
<h5 class="font-weight-500 color-white mt-25px mb-15px text-capitalize">TESTIMONIAL BLOCKS</h5>
<p class="font-weight-light color-white">Check all our latest testimonial blocks which are included in the latest version.</p>
</div>
</a>
</div>
<!-- Box-8 -->
<div class="col-lg-4 col-md-6 col-12">
<a href="elements-footer.html" target="_blank">
<div class="about-box mb-5 mb-lg-0 mx-auto bg-white">
<span class="pro-step d-inline-block color-white"><i class="fa fa-clone" aria-hidden="true"></i></span>
<h5 class="font-weight-500 color-white mt-25px mb-15px">FOOTER BLOCKS</h5>
<p class="font-weight-light color-white">Check all our latest footer blocks which are included in the latest version.</p>
</div>
</a>
</div>
<!-- Box-9 -->
<div class="col-lg-4 col-md-12 col-12">
<a href="elements-button.html" target="_blank">
<div class="about-box mb-0 mx-auto bg-white">
<span class="pro-step d-inline-block color-white"><i class="fa fa-check" aria-hidden="true"></i></span>
<h5 class="font-weight-500 color-white mt-25px mb-15px text-capitalize">BUTTON BLOCKS</h5>
<p class="font-weight-light color-white">Check all our latest button blocks which are included in the latest version.</p>
</div>
</a>
</div>
</div>
<div class="row padding-half">
<!-- Box-10 -->
<div class="col-lg-4 col-md-6 col-12">
<a href="index-elements-portfolio.html" target="_blank">
<div class="about-box mb-5 mb-lg-0 mx-auto bg-white">
<span class="pro-step d-inline-block color-white"><i class="fa fa-portrait" aria-hidden="true"></i></span>
<h5 class="font-weight-500 color-white mt-25px mb-15px text-capitalize">PORTFOLIO BLOCKS</h5>
<p class="font-weight-light color-white">Check all our latest portfolio blocks which are included in the latest version.</p>
</div>
</a>
</div>
<!-- Box-11 -->
<div class="col-lg-4 col-md-6 col-12">
<a href="elements-typography.html" target="_blank">
<div class="about-box mb-5 mb-lg-0 mx-auto bg-white">
<span class="pro-step d-inline-block color-white"><i class="fa fa-font" aria-hidden="true"></i></span>
<h5 class="font-weight-500 color-white mt-25px mb-15px text-capitalize">TYPOGRAPHY BLOCKS</h5>
<p class="font-weight-light color-white">Check all our latest typography blocks which are included in the latest version.</p>
</div>
</a>
</div>
<!-- Box-12 -->
<div class="col-lg-4 col-md-12 col-12">
<a href="#.">
<div class="about-box coming-soon-box mb-0 mx-auto bg-white">
<span class="pro-step d-inline-block color-white"><i class="las la-plus" aria-hidden="true"></i></span>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- End Elements Boxes -->
<!-- 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 elements?</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 following css stylesheet link tag before your style.css file. <span class="d-block">(Please adjust the css file path according to your folder structure).</span></p>
<pre><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 blog"><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>If a block has html script then just copy all the script tags of that block section and paste it before the ending body tag at the bottom of your html file. For example: </p>
<pre><script src="vendor/js/parallaxie.min.js"></script><br><script> <br>if ($(window).width() > 992) { <br>$(".ui-block-02.quote.parallax").parallaxie({ speed: 0.55, offset: 0,}); }<br></script></pre>
<span class="pt-5"><b>That's It, You are done.</b></span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Elements Steps -->
<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>