Mobili
Documentation and HELP
Last Updated: 17 October 2018
Current Version: 1.0
Thank you for purchasing our item. If you have any questions that are beyond the scope of this help file, please feel free to email via our profile page
Contact Us1 Introduction
Mobili is an HTML mobile template created for a mobile website, web app, and integrated with solutions like phonegap, for a real native app. It is build using an original design concept, some amazing animations for elements and a perfect responsive code.
1.A Package files content. - top ^
The package you downloaded from themeforest include the following structure:
The main HTML files of the template are found inside the "Mobili" folder. The HELP folder includes the documentation.
Inside the "Mobili" folder you will see the following structure:
There are 3 main design colors of the template available.
The "preview.html" file and "preview" folder are only used for preview. When using the template on your server you can delete those 2, and upload just the files from 1 of the 3 designs folders.
When you will open a design folder, like "main" the files will be like in the following structure.
The main file of your template and the one you will use as your main mobile home page is index.html
1.B HTML/CSS templates, definition and usage. - top ^
A HTML/CSS Template is a pre-designed layout that will help you build a final website. HTML ( HyperText Markup Language) is the basic coding to create web pages. CSS stands for Cascading Style Sheets and it's used to define and style the HTML elements.
To install a HTML/CSS template requires just to copy the template files on your webserver. This can be done using your hosting provider custom interface or a FTP (File Transfer Protocol) software. Our recommandation is FileZilla.
A regular HTML/CSS template does NOT include a CMS (Content Management System) to edit/add content of the pages. All content is edited using a HTML editor. HTML editors can be found as free and paid editors. Some modern HTML editors have included a DESIGN view mode of the code, making it easier for templates to be edited. Regular ones will let you edit the content only from the code mode, meaning you will need to have a basic HTML coding knowledge.
2 Different usage of this mobile template - top ^
This mobile template can be used to create a mobile website, a web app, and a native app. Depending on your needs you can use this layout to create the desired final product. Below we will try to describe each one of the final product you can create.
2.ACreating a mobile website, redirecting from your desktop website to the mobile one. - top ^
You can use this template to create a mobile version of your website. Considering that you main desktop website is not responsive or you want to have a separate mobile version of it, this template is a perfect solution to do that.
To createa a separate mobile version of your website using this template will require to create a subdomain or a subfolder of your domain (mobile.yourwebsite.com or m.yourwebsite.com) where the main files will be copied.
To redirect users to your new created mobile website you will need to use a redirection code. First you need to add a mobile detection code, and then redirect mobile users to the mobile url.
For more information about mobile detection and redirection check THIS WEBSITE.
2.BCreating a web app, difference between web app and native app. - top ^
You can use this template to create a web app. Web apps are simple web applications than run from a web server. Web apps are visible through a web browser and function just like a normal website.
This template offers the feel of a web app because of his Ajax and jQuery effects and navigation.
The difference between web and native apps is that native apps are developed essentially for one particular mobile device and is installed directly onto the device itself. And are available only on app stores. Web apps can be used on any mobile device, and do not need to be downloaded first, they will run normally like any website.
Below you can see how your web app icon will look saved on iPhone home screen. Saving it like this will give an option to open it directly in full screen mode.
To modify the icon and loading screen images see the code in the header section of index.html file
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link href="images/apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<link href="images/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">>
Images are located inside images folder.
2.CConverting it into a native app. - top ^
To convert this template into a native app you will need to use solutions like phonegap or cordova.
"Easily create apps using the web technologies you know and love: HTML, CSS, and JavaScript .
PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. "
More about phonegap on their WEBSITE
3 Editing this template - top ^
EDITING THIS TEMPLATE REQUIRES BASIC HTML/CSS AND JAVASCRIPT KNOWLEDGE. IF YOU DON'T HAVE A BASIC KNOWLEDGE OF THIS WE RECOMMEND HIRE A WEBDESIGNER OR LOOK FOR A FREELANCER ON ENVATO STUDIO.
EDITING THIS MOBILE TEMPLATE DO NOT REQUIRE A SERVER. YOU CAN EDIT IT USING A LOCAL HTML EDITOR SOFTWARE. ONLY TESTING IT, WILL REQUIRE TO BE UPLOADED TO A SERVER. THE BEST WAY TO TEST THE TEMPLATE IS WITH YOUR MOBILE.
To edit this HTML template you will need a HTML editor. Even Notepad will do the job, but a dedicated HTML editor will work better in arranging the code structure. HTML editors are softwares that allow code editing. Some HTML editors have included a DESIGN mode, which will allow you to see the interface of the page you are editing. Editors can be found FREE or PREMIUM on the WEB.
TESTING THIS TEMPLATE MAY REQUIRE TO UPLOAD THE FILES TO A WEB SERVER. THE NEW FEATURES OF THIS TEMPLATE ARE MADE ONLY FOR THE LATEST MOBILE PHONES
3.A Home page structure - top ^
The main page of this template is index.html file. This is the home page of your website, the first page the browser will open when users will access your website.
Home page HTML structure starts with LEFT and RIGHT panels.
The LEFT panel contains the MAIN NAVIGATION MENU.
The HTML structure of the LEFT PANEL and the MENU is:
<div class="panel panel-left panel-reveal">
<div class="view view-subnav"> <div class="pages"> <div data-page="panel-leftmenu" class="page pagepanel"> <div class="page-content"><nav class="main_nav_underline">
<ul>
<li><a href="index.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/home.png" alt="" title="" /><span>Home</span></a></li>
<li><a href="about.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/mobile.png" alt="" title="" /><span>About</span></a></li>
<li><a href="features.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/features.png" alt="" title="" /><span>Features</span></a></li>
<li><a href="#" data-popup=".popup-login" class="open-popup close-panel"><img src="images/icons/white/lock.png" alt="" title="" /><span>Login</span></a></li>
<li><a href="team.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/users.png" alt="" title="" /><span>Team</span></a></li>
<li><a href="blog.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/blog.png" alt="" title="" /><span>Blog</span></a></li><li><a href="photos.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/photos.png" alt="" title="" /><span>Photos</span></a></li>
</div> </div> </div> </div> </div>
<li><a href="videos.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/video.png" alt="" title="" /><span>Videos</span></a></li>
<li><a href="music.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/music.png" alt="" title="" /><span>Music</span></a></li>
<li><a href="shop.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/shop.png" alt="" title="" /><span>Shop</span></a></li>
<li class="subnav"><a href="categories.html"><img src="images/icons/white/categories.png" alt="" title="" /><span>Sub level menu</span></a></li>
<li><a href="cart.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/cart.png" alt="" title="" /><span>Cart</span></a></li>
<li><a href="tables.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/tables.png" alt="" title="" /><span>Tables</span></a></li>
<li><a href="chat.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/message.png" alt="" title="" /><span>Chat messages</span></a></li>
<li><a href="form.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/form.png" alt="" title="" /><span>Custom Form</span></a></li>
<li><a href="tel:012345678" class="close-panel external" data-view=".view-main"><img src="images/icons/white/phone.png" alt="" title="" /><span>Call now!</span></a></li>
<li><a href="contact.html" class="close-panel" data-view=".view-main"><img src="images/icons/white/contact.png" alt="" title="" /><span>Contact</span></a></li>
</ul>
</nav>
The RIGHT panel is the user account page. Here you can create your users profiles, and user menu.
The HTML structure of the RIGHT panel is:
<div class="panel panel-right panel-reveal">
<div class="user_login_info">
<div class="user_thumb">
<img src="images/page_photo.jpg" alt="" title="" />
<div class="user_details">
<p>Welcome, <span>John Doe</span></p>
</div>
<div class="user_avatar"><img src="images/avatar.jpg" alt="" title="" /></div>
</div>
<nav class="user-nav">
<ul>
<li><a href="features.html" class="close-panel"><img src="images/icons/black/settings.png" alt="" title="" /><span>Account Settings</span></a></li>
<li><a href="features.html" class="close-panel"><img src="images/icons/black/briefcase.png" alt="" title="" /><span>My Account</span></a></li>
<li><a href="features.html" class="close-panel"><img src="images/icons/black/message.png" alt="" title="" /><span>Messages</span><strong>12</strong></a></li>
<li><a href="features.html" class="close-panel"><img src="images/icons/black/love.png" alt="" title="" /><span>Favorites</span><strong>5</strong></a></li>
<li><a href="index.html" class="close-panel"><img src="images/icons/black/lock.png" alt="" title="" /><span>Logout</span></a></li>
</ul>
</nav>
</div>
</div>
To open one of this panels you need to setup your link or button like:
<a href="#" data-panel="left" class="open-panel"></a>
<a href="#" data-panel="right" class="open-panel"></a>
The home page HTML structure continues with the main page. On main page we have included the HEADER, the SLIDER, and in some demos the BOTTOM TOOLBAR
The structure of the HEADER is:
<div class="navbarpages">
<div class="navbar_left">
<div class="logo_text"><a href="index.html">Mobili</a></div>
</div>
<div class="navbar_right navbar_right_menu">
<a href="#" data-panel="left" class="open-panel"><img src="images/icons/white/menu.png" alt="" title="" /></a>
</div>
<div class="navbar_right">
<a href="#" data-panel="right" class="open-panel"><img src="images/icons/white/user.png" alt="" title="" /></a>
</div>
<div class="navbar_right">
<a href="cart.html" data-view=".view-main"><img src="images/icons/white/cart.png" alt="" title="" /><span>3</span></a>
</div>
</div>
The slider HTML layout is:
<div class="swiper-container swiper-init" data-effect="slide" data-parallax="true" data-pagination=".swiper-pagination" data-paginationClickable="true">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(images/slide1.jpg);">
<div class="slider_trans">
<div class="slider-caption">
<h2 data-swiper-parallax="-100%">THE CREATIVE</h2>
<span class="subtitle" data-swiper-parallax="-60%">MOBILE APP SOLUTION</span>
<p data-swiper-parallax="-30%">You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.</p>
</div>
</div>
</div>
<div class="swiper-slide" style="background-image:url(images/slide2.jpg);">
<div class="slider_trans">
<div class="slider-caption">
<h2 data-swiper-parallax="-100%">WITH BEAUTIFUL</h2>
<span class="subtitle" data-swiper-parallax="-60%">MULTIPURPOSE DESIGNS</span>
<p data-swiper-parallax="-30%">You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.</p>
</div>
</div>
</div>
<div class="swiper-slide" style="background-image:url(images/slide3.jpg);">
<div class="slider_trans">
<div class="slider-caption">
<h2 data-swiper-parallax="-100%">READY FOR APPS</h2>
<span class="subtitle" data-swiper-parallax="-60%">WEB AND NATIVE</span>
<p data-swiper-parallax="-30%">You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.</p>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
To add a new slide, just add a new DIV " class="swiper-slide"..."
In the home page code there is also included some popups. User login/register/forgot password popups, and social icons/shop categories popups.
The HTML code for one popup looks like:
<div class="popup popup-login">
<div class="content-block">
<h4>LOGIN</h4>
<div class="loginform">
<form id="LoginForm" method="post">
<input type="text" name="Username" value="" class="form_input required" placeholder="username" />
<input type="password" name="Password" value="" class="form_input required" placeholder="password" />
<div class="forgot_pass"><a href="#" data-popup=".popup-forgot" class="open-popup">Forgot Password?</a></div>
<input type="submit" name="submit" class="form_submit" id="submit" value="SIGN IN" />
</form>
<div class="signup_bottom">
<p>Don't have an account?</p>
<a href="#" data-popup=".popup-signup" class="open-popup">SIGN UP</a>
</div>
</div>
<div class="close_popup_button">
<a href="#" class="close-popup"><img src="images/icons/black/menu_close.png" alt="" title="" /></a>
</div>
</div>
</div>
3.B Secondary pages - top ^
The structure of the secondary pages is different from the home page. In the secondary pages the layout starts with div class="pages". The rest of the header HTML elements are missing. Styles, javascript code is only added on home page.
First element on a secondary page is the header. All pages have the same header.
You can modify your header, and add the icons and links you want.
<div class="navbarpages navbarpagesbg">
<div class="navbar_left">
<div class="logo_text"><a href="index.html">Mobili</a></div>
</div>
<div class="navbar_right navbar_right_menu">
<a href="#" data-panel="left" class="open-panel"><img src="images/icons/white/menu.png" alt="" title="" /></a>
</div>
<div class="navbar_right">
<a href="#" data-panel="right" class="open-panel"><img src="images/icons/white/user.png" alt="" title="" /></a>
</div>
<div class="navbar_right">
<a href="cart.html" data-view=".view-main"><img src="images/icons/white/cart.png" alt="" title="" /><span>3</span></a>
</div>
</div>
All the content of one secondary page is added inside the DIV "pages_maincontent"
<div id="pages_maincontent"> </div>
IMPORTANT: All the styles and custom javascript/jquery function you want to use on secondary pages must be added on home page, or in my-app.js file (for the custom js functions)
2.C Blog section - top ^
The Blog section is a static news page. All posts in this section must be manually added. To create this news section dinamically will require some programming code and a database. There is also a details page included blog-single.html which is the single blog page of one post.
The HTML code of a blog post:
<li class="swipeout">
<div class="swipeout-content item-content">
<div class="post_entry">
<div class="post_thumb"><img src="images/photos/photo8.jpg" alt="" title="" /></div>
<div class="post_details">
<div class="post_category"><a href="blog.html">DESIGN</a></div>
<h2><a href="blog-single.html">Design is not just what it looks like and feels like.</a></h2>
</div>
<div class="post_swipe"><img src="images/swipe_more.png" alt="" title="" /></div>
</div>
</div>
<div class="swipeout-actions-right">
<a href="blog-single.html" class="action1"><img src="images/icons/black/message.png" alt="" title="" /></a>
<a href="#" class="action1 open-popup" data-popup=".popup-social"><img src="images/icons/black/like.png" alt="" title="" /></a>
<a href="#" class="action1 open-popup" data-popup=".popup-social"><img src="images/icons/black/contact.png" alt="" title="" /></a>
</div>
</li>
At the bottom of all posts list is a button which clicked will load more posts.
<div id="loadMore">LOAD MORE</div>
<div id="showLess">END</div>
To edit the number os posts to show see the javascript file inside the "js" folder, called my-app.js. And the code to edit is x=4; from this function:
$(".posts li").hide();
size_li = $(".posts li").size();
x=5;
$('.posts li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+1 <= size_li) ? x+1 : size_li;
$('.posts li:lt('+x+')').show();
if(x == size_li){
$('#loadMore').hide();
$('#showLess').show();
}
});
3.D Photo Gallery - top ^
Using this template you can create a photo gallery web app.
The gallery page starts with the switching icons. Using this icons you can switch the gallery view mode. From 1/3 photos on a row to 1/2 and full width.
<div class="gallery_switch">
<a href="#" id="view13" class="switcher active"><img src="images/switch_13_active.png" alt="Grid"></a>
<a href="#" id="view12" class="switcher"><img src="images/switch_12.png" alt="Grid"></a>
<a href="#" id="view11" class="switcher"><img src="images/switch_11.png" alt="List"></a>
</div>
The photos pages code continues with the filters categories
<div class="photo-categories">
<a href="#tab1p" class="tab-link active category-link">Lanscapes</a>
<a href="#tab2p" class="tab-link category-link">People</a>
<a href="#tab3p" class="tab-link category-link">Flowers</a>
</div>
And each filter/category will select the current photos from a tab system.
<ul id="photoslist" class="photo_gallery_13">
<li><a rel="gallery-3" href="images/photos/photo1.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo1.jpg" alt="image"/><span>Mountain</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo2.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo2.jpg" alt="image"/><span>Bike</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo3.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo3.jpg" alt="image"/><span>Tulips</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo4.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo4.jpg" alt="image"/><span>Landscape</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo5.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo5.jpg" alt="image"/><span>Lake</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo6.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo6.jpg" alt="image"/><span>Road</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo7.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo7.jpg" alt="image"/><span>Car</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo8.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo8.jpg" alt="image"/><span>Beach</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo9.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo9.jpg" alt="image"/><span>Airplane</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo10.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo10.jpg" alt="image"/><span>Railroad</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo11.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo11.jpg" alt="image"/><span>Aerial View</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo12.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo12.jpg" alt="image"/><span>Mountains</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo13.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo13.jpg" alt="image"/><span>Palm Tree</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo14.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo14.jpg" alt="image"/><span>Eagle</span></a></li>
<li><a rel="gallery-3" href="images/photos/photo15.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo15.jpg" alt="image"/><span>Birds</span></a></li>
<div class="clearleft"></div>
</ul>
To add a new photo just add a new line of
<li><a rel="gallery-3" href="images/photos/photo9.jpg" title="Photo title" class="swipebox"><img src="images/photos/photo9.jpg" alt="image"/></a></li>
3.E Shop page - top ^
This template contains SHOP design pages. All pages are HTML coded, with no database and real shop functionality. In order to do that you will need to integrate the HTML code into a e-commerce CMS.
The shop page contains a list of items. Each item have a title, a quantity select input, a price and an ADD TO CART button.
The code of one item is:
<li>
<div class="shop_thumb"><a href="shop-item.html"><img src="images/shop_thumb1.jpg" alt="" title="" /></a></div>
<div class="shop_item_details">
<h4><a href="shop-item.html">Blue Bike</a></h4>
<div class="shop_item_price">$100</div>
<div class="item_qnty_shop">
<form id="myform" method="POST" action="#">
<input type="button" value="-" class="qntyminusshop" field="quantity" />
<input type="text" name="quantity" value="1" class="qntyshop" />
<input type="button" value="+" class="qntyplusshop" field="quantity" />
</form>
</div>
<a href="#" data-panel="left" id="addtocart" class="open-panel">ADD TO CART</a>
<a href="#" data-popup=".popup-social" class="open-popup shopfav"><img src="images/icons/blue/love.png" alt="" title="" /></a>
</div>
</li>
3.F Contact page - top ^
The template includes a functional contact form.
The HTML code of the form is:
<div class="contactform">
<form class="cmxform" id="ContactForm" method="post" action="">
<div class="form_row">
<div class="form_row_icon"><img src="images/icons/blue/user.png" alt="" title="" /></div>
<input type="text" name="ContactName" id="ContactName" value="" class="form_input required" placeholder="name"/>
</div>
<div class="form_row">
<div class="form_row_icon"><img src="images/icons/blue/contact.png" alt="" title="" /></div>
<input type="text" name="ContactEmail" id="ContactEmail" value="" class="form_input required email" placeholder="email"/>
</div>
<div class="form_row">
<div class="form_row_icon"><img src="images/icons/blue/message.png" alt="" title="" /></div>
<textarea name="ContactComment" id="ContactComment" class="form_textarea textarea required" rows="" cols="">your message here</textarea>
</div>
<input type="submit" name="submit" class="form_submit" id="submit" value="SEND" />
<input class="" type="hidden" name="to" value="youremail@yourwebsite.com" />
<input class="" type="hidden" name="subject" value="Contacf form message" />
<label id="loader" style="display:none;"><img src="images/loader.gif" alt="Loading..." id="LoadingGraphic" /></label>
</form>
</div>
To edit the email you want to receive the messages just edit the line:
<input class="" type="hidden" name="to" value="youremail@yourwebsite.com" />
4 CSS Files - top ^
The template is using for each design 3 main CSS files.
1. The general css file is style.css loaded in each index file
<link type="text/css" rel="stylesheet" href="css/style.css"/>
At the top of the style.css file there is a "Table of Contents" list that will guide through the CSS code.
1. RESET
2. GENERAL
3. H TITLES
4. HEADER AND HEADER NAVIGATION
5. CUSTOM BUTTONS
6. LEFT AND RIGHT SLIDE PANELS
6-1. USER ACCOUNT SIDEBAR RIGHT
6-2. MAIN NAVIGATION SIDEBAR LEFT
7. PAGES LAYOUT GENERAL
7-1. SWIPE SLIDER
7-2. FEATURED LISTS
7-3. TEAM DESIGN LAYOUT
7-4. MUSIC LIST DESIGN LAYOUT
8. POPUPS
9. SHOP LAYOUT
9-1. SHOP ITEM PAGE
9-2. SHOPPING CART - CECKOUT
9-3. SUCCESS PAGE
10. PHOTO GALLERY
11. BLOG LAYOUT
12. FORMS
12.1 LOGIN FORM
12.2 CONTACT FORM
13. TABS / ACCORDION / TABLES
14. MEDIA QUERIES
2. The template uses a custom google web font.
In style.css the font is defined in the body section
body {
font-family: 'Source Sans Pro', sans-serif;
}
And loaded in the header section of the main index.html file
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700,900' rel='stylesheet' type='text/css'>
5 JavaScript Files - top ^
The template includes 8 javascript files which are loaded at the end of index file
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.validate.min.js" ></script>
<script src="js/swiper.min.js"></script>
<script src="js/jquery.custom.js"></script>
1.<script src="js/jquery-3.3.1.min.js"></script>
jQuery general code. Version 3.3.1
2.<script src="js/jquery.validate.min.js" type="text/javascript"></script>
The code that validates the forms
3.<script src="js/jquery.custom.js"></script>
The custom functions of the template.
All pages custom functions are added here. For example tabs, toogles and the rest of the custom code needed on a secondary page.
6 Sources and Credits - top ^
- jQuery - from http://jquery.com/
- Free icons - https://linearicons.com/free
- Demo photos - unsplash.com
- Music player - http://kolber.github.io/audiojs/
- Sounds used in music demo page - http://dig.ccmixter.org/free