Thank you for your purchasing this template. If you have any questions that are beyond the scope of this help file, please feel free to email us via ...
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zfolio | MultiPurpose One Page HTML And Sass Template</title>
<link rel="shortcut icon" href="assets/img/ficon.png">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
</head>
<header> <!-- nav --> <nav id="mainNav" class="navbar navbar-inverse navbar-default navbar-fixed-top"> </nav> <!-- /nav --> <!-- search-popup --> <div class="modal fade bs-example-modal-lg search-bg popup1" tabindex="-1" role="dialog"> </div> <!-- /search-popup --> <!-- .menu --> <div class="modal fade bs-example-modal-lg search-bg menu-popup" tabindex="-1" role="dialog"> </div> <!-- /.menu --> <div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel"> <!-- .home-slider --> <!-- /.home-slider --> </div> </header> <!-- about --> <section id="about"> </section> <!-- /about --> <!-- services --> <section id="services"> </section> <!-- / services --> <!-- px-bg --> <div class="px-bg-counter"> </div> <!-- /px-bg --> <!-- galler --> <section id="work" class="galler baguetteBoxThree"> </section> <!-- / galler --> <!-- news --> <section id="blog"> </section> <!-- /news --> <!-- /faq --> <section id="contact"> </section> <!-- /faq --> <footer> <div class="footer"> </div> <div class="copy-right"> </div> </footer>
This template uses CSS for stylesheets.
CSS files are located in the assets/css directory.
This template imports several JS files.
The Javascript files are loaded in the footer to increase the site speed and rendering.
The Javascript files used in this template are the following:
You just need to add attribute data-[plugin Name] to any place where you want to initialize plugin.
We use owl carousel for all sliders and carousels in this template.
We can make responsive image carousel using Owl Carousel. http://owlgraphic.com/owlcarousel
<div id="owl-demo" class="owl-carousel">
<div class="item">
<div class="imghover" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">
<img src="assets/img/gallery/gallery1.jpg" alt="Owl Image"/>
<a href="#" class="link-img"><i class="fa fa-expand"></i></a>
</div>
</div>
</div>
The filter is driven by the Filterizr script - http://www.jqueryrain.com/2016/02/filterizr-jquery-stunning-filterable-gallery/
Here's an example of usage:
<!-- Grid control--> <ul> <li data-filter="all"> All </li> <li data-filter="1"> Green </li> <li data-filter="2"> Orange </li> <li data-filter="3"> Purple </li> <li data-filter="4"> Mix </li> </ul>
<!-- Grid content--> <div class="filtr-container"> <div class="filtr-item" data-category="1" data-sort="value"> <img src="img/sample.jpg" alt="sample"> </div> <div class="filtr-item" data-category="2, 1" data-sort="value"> <img src="img/sample.jpg" alt="sample"> </div> <div class="filtr-item" data-category="1, 3" data-sort="value"> <img src="img/sample.jpg" alt="sample"> </div> </div>
Any Images or logos used in previews are not included in this item or final purchase and you need to contact authors to get permission in case you want to use them in your commercial or non-commercial projects.
We used http://placehold.it/ for placeholders.