“Travela HTML Template” Documentation by “del-code” v1.0

“Travela HTML Template Documentation”

Created: 20/1/2017
By: del-code
Email: delcode92@gmail.com

For Future Updates Follow Me @themeforest

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much! Don’t forget to rate it

Table of Contents

  1. HTML Structure
    1. General HTML Structure
    2. Destination Page Structure
    3. Discount Page Structure
    4. About Page Structure
    5. Blog Page Structure
    6. Contact Page Structure
  2. CSS Files and Structure
  3. JavaScript
  4. How To
    1. How to change header image ?
    2. How to change animate effect ?
    3. How to change image gallery ?
  5. Sources and Credits

1) HTML Structure - top

This HTML template is a responsive layout with three columns. All page in this theme composed with five HTML structures. Those are will explain below.

1.1) General HTML Structure - top

All pages in this template use a main HTML structure like this.

general HTML Structure

as you can see in that picture above, all main section in a page is inside div#page. All pages in this template using the same structure

1.2) Destination Page Structure - top

Destination page has html structure like this.

Destination HTML Structure

The main content in this page is inside div#fh5co-services.

1.3) Discount Page Structure - top

Dscount page has html structure like this.

Discount HTML Structure

The main content in this page is inside div#fh5co-project.

1.4) About Page Structure - top

About page has html structure like this.

About HTML Structure

The main content in this page is inside div#fh5co-about and div#fh5co-team.

1.5) Blog Page Structure - top

Blog page has html structure like this.

Blog HTML Structure

The main content in this page is inside div#fh5co-blog.

1.6) Contact Page Structure - top

Contact page has html structure like this.

Contact HTML Structure

The main content in this page is inside div#fh5co-contact.

2) CSS File And Structure - top

I'm using these CSS files in this template:

Those CSS files located inside CSS folder in this template directory. The main CSS file for this template is style.css and CSS file for mobile display is media-query.css


style.css

style.css has CSS table of content inside it, so you can easily find the content what you want to edit. The file is separated into sections using:

/* =======================================================
* 	Navbar 
* ======================================================= */

some code

/* =======================================================
* 	Header 
* ======================================================= */

some code

/* =======================================================
* 	Header 
* ======================================================= */

some code

etc, etc.

media-query.css

media-query.css is styling for mobile display. it separate from style.css so it ease to add more new code or edit the old code. media-query.css has structure like this:

@media screen and (max-width: 768px) {
	
	/* some code here */

}

animate.css

animate.css is for some animation styling, like fade-in, fade-out, bounce, flip, etc . I'm not own this CSS, it's an opensource. So you can see for more detail documentation here http://daneden.me/animate or here in github https://github.com/daneden/animate.css


bootstrap.css

bootstrap.css is a CSS framework, it's very helpful to reduce my work. I used it for divide the column in this template, responsive display, etc. You can see full detail documentation here http://getbootstrap.com/css/


icomoon.css

I used this CSS for display some icons like social media icon, phone, mail, etc. You can see full detail documentation here https://icomoon.io/#docs


magnific-popup.css

This CSS is for pop-up effect, when you click the image. I'm not own this css. you can see full documentation here http://dimsemenov.com/plugins/magnific-popup/documentation.html

3) JavaScript - top

This template imports these Javascript files. All these files are inside js folder.


main.js

This js file is main JavaScript code for this template. Inside this file has some JavaScript function for mobile navbar, animate box when scrolling, go to top, and loading effect. Those function are:

(function () {
	
	var burgerMenu = function() { /* some code */ }
	
	var mobileMenuOutsideClick = function() { /* some code */ }
	
	var offcanvasMenu = function() { /* some code */ }
	
	var contentWayPoint = function() { /* some code */ }
	
	var dropdown = function() { /* some code */ }
	
	var goToTop = function() { /* some code */ }
	
	var loaderPage = function() { /* some code */ }
	
}());

jquery.min.js

jQuery is a Javascript library that greatly reduces the amount of code that you must write. You can see the documentation here http://api.jquery.com/


jquery.waypoints.min.js

Waypoints is a library that makes it easy to execute a function whenever you scroll to an element. I used this library in main.js file. So when you scroll the page and it will make fade-in effect.

waypoint

If you want to know how to used it and full documentation about it, you can see in their official website: http://imakewebthings.com/waypoints/


jquery.magnific-popup.min.js and magnific-popup-options.js

I used magnific-popup library to give popup effect when some image clicked. It will display large display for that image. You can see full documentation about magnific-popup in their official website here http://dimsemenov.com/plugins/magnific-popup/documentation.html


jquery.easing.1.3.js

jQuery easing is a jQuery plugin from GSGD to give advanced easing options. It has many option for easing like easeInQuad, easeOutCubic, easeInQuint and many others. For more info you can see here http://gsgd.co.uk/sandbox/jquery/easing/


bootstrap.min.js

bootstrap.min.js is one of javascript framework that i used in this template to reduce my work for writing complicated code. you can see more detail about bootstrap.min.js here http://getbootstrap.com/javascript/


modernizr-2.6.2.min.js

Modernizr is a small JavaScript Library that detects the availability of native implementations for next-generation web technologies. More info about modernizr here https://modernizr.com/docs


respond.min.js

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. More info about respond.min.js here on Github https://github.com/scottjehl/Respond

4) How to - top

Here are some general questions how to edit or change this template.

4.1) How to change header image ? - top

First open html file that you want to edit. example: "index.html". Then go to header section. As you can see there is some code like this below:

change header image

and then change the style attribute value to your image location path.

4.2) How to change animate effect ? - top

If you want to change some animate effects in this template like fadeIn, fadeInLeft, fadeInRight, etc. First of all you must find data-animate-effect tag then change the data-animate-effect tag value to animate class name.

change animate

you can see animate class name here or directly you can open animate.css file in this template directory and choose the class you want to use.

4.3) How to change image gallery ? - top

You can change image gallery same as image header. First open file or page you want to change. example asian-dest.html then find background-image inside div.dest-place

change gallery image

and then change background-image value to your image path you want to display

5) Sources and Credits - top

I've used the following images, icons or other files as listed.

Once again, thank you so much for purchasing this template.

del-code

Go To Table of Contents