Kite Documentation

A Complete Guide of Kite Multi Page HTML Template - Document Version 1.0

Support Item Page Live Demo

General Informations - top

First of all, we want to say thanks you! We are very grateful that you have chosen our template for your website. We will do everything we can to provide you the best support possible. Feel free asking us if you need more help.

This document covers the Kite structure, set up, and use of this template and provides answers and solutions to common problems and issues - we encourage you to read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to ask support. (Support)


Folder Structure - top

How To? - top

How to Change Menu?

In html file you see top menu.

<nav id="menuzord" class="menuzord red">
	<a href="javascript:void(0)" class="menuzord-brand"><img src="images/logo.png" alt=""></a>
	<ul class="menuzord-menu">
		<li class="active"><a href="#" data-scroll-nav="0">Home</a></li>
		<li><a href="#" data-scroll-nav="1">Feature</a></li>
		<li><a href="#" data-scroll-nav="2">feature2</a></li>
		<li><a href="#" data-scroll-nav="3">screenshot</a></li>
		<li><a href="#" data-scroll-nav="4">Pricing</a></li>
		<li><a href="#" data-scroll-nav="5">Blog</a></li>
		<li><a href="#" data-scroll-nav="6">Contact</a></li>
		<li><a class="phix_button phix_button_color buy-btn" href="#">Get App Now</a></li>
	</ul>
</nav>

/* ========================================
===   Left Side Drop Down Menu Fade And Animation  ====
=========================================== */

$("#menuzord").menuzord({
align: "right"
});


In html file you see Bootstrap carousel

<div class="carousel slide" data-ride="carousel" id="quote-carousel" data-interval="false">
	<!-- Bottom Carousel Indicators -->
	<div class="row">
		<ol class="carousel-indicators">
			<li data-target="#quote-carousel" data-slide-to="0"   class="active">
				<div class="image">
					<img class="img-responsive " src="images/testimonial1.png" alt="">
				</div>
				<div class="content">
					<h4>Adele Simmons</h4>
					<span>Customer</span>
				</div>
			</li>
			<li data-target="#quote-carousel" data-slide-to="1">
				<div class="image">
					<img class="img-responsive " src="images/testimonial3.png" alt="">
				</div>
				<div class="content">
					<h4>Max Zimmerman</h4>
					<span>Customer</span>
				</div>
			</li>
			<li data-target="#quote-carousel" data-slide-to="2">
				<div class="image">
					<img class="img-responsive " src="images/testimonial1.png" alt="">
				</div>
				<div class="content">
					<h4>Bill Walters</h4>
					<span>Customer</span>
				</div>
			</li>
		</ol>
	</div>
	<!-- Carousel Slides / Quotes -->
	<div class="carousel-inner text-center">
		<!-- Quote 1 -->
		<div class="item active">
			<blockquote>
				<div class="row">
					<div class="col-sm-12">
						<div class="author">
							<span>Fantastic app</span>
							<ul>
								<li><a href="#"><i class="fa fa-star"></i></a></li>
								<li><a href="#"><i class="fa fa-star"></i></a></li>
								<li><a href="#"><i class="fa fa-star"></i></a></li>
								<li><a href="#"><i class="fa fa-star-o"></i></a></li>
								<li><a href="#"><i class="fa fa-star-o"></i></a></li>
							</ul>
						</div>
						<p>We use it in our terminal for customers to leave reviews after they've taken their helicopter tour. It's simple, inexpensive, fun and was exactly what we were looking for</p>
					</div>
				</div>
			</blockquote>
		</div>
		<!-- Quote 2 -->
		<div class="item">
			<blockquote>
				<div class="row">
					<div class="col-sm-12">
						<div class="author">
							<span>Fantastic app</span>
							<ul>
								<li><a href="#"><i class="fa fa-star"></i></a></li>
								<li><a href="#"><i class="fa fa-star"></i></a></li>
								<li><a href="#"><i class="fa fa-star"></i></a></li>
								<li><a href="#"><i class="fa fa-star-o"></i></a></li>
								<li><a href="#"><i class="fa fa-star-o"></i></a></li>
							</ul>
						</div>
						<p>We use it in our terminal for customers to leave reviews after they've taken their helicopter tour. It's simple, inexpensive, fun and was exactly what we were looking for</p>
					</div>
				</div>
			</blockquote>
		</div>
		<!-- Quote 3 -->
		<div class="item">
			<blockquote>
				<div class="row">
					<div class="col-sm-12">
						<div class="author">
							<span>Fantastic app</span>
							<ul>
								<li><a href="#"><i class="fa fa-star"></i></a></li>
								<li><a href="#"><i class="fa fa-star"></i></a></li>
								<li><a href="#"><i class="fa fa-star"></i></a></li>
								<li><a href="#"><i class="fa fa-star-o"></i></a></li>
								<li><a href="#"><i class="fa fa-star-o"></i></a></li>
							</ul>
						</div>
						<p>We use it in our terminal for customers to leave reviews after they've taken their helicopter tour. It's simple, inexpensive, fun and was exactly what we were looking for</p>
					</div>
				</div>
			</blockquote>
		</div>
		<div class="divider"></div>
	</div>
</div>
			

How to Change blog carousel?

In blog.html file you see carousel

<div class="home-two-sereenshot">
	<div class="">
		<div class="single-screen">
			<img src="images/home2/3.jpg" class="img-responsive" alt="" />
		</div>
	</div>
	<div class="">
		<div class="single-screen">
			<img src="images/home2/4.jpg" class="img-responsive" alt="" />
		</div>
	</div>
	<div class="">
		<div class="single-screen">
			<img src="images/home2/5.jpg" class="img-responsive" alt="" />
		</div>
	</div>
	<div class="">
		<div class="single-screen">
			<img src="images/home2/3.jpg" class="img-responsive" alt="" />
		</div>
	</div>
	<div class="">
		<div class="single-screen">
			<img src="images/home2/4.jpg" class="img-responsive" alt="" />
		</div>
	</div>
</div>
			
$('.home-two-sereenshot').owlCarousel({
    autoPlay:false,
    pagination:false,
    navigation:true,
    items:3,
    navigationText:[
        "<i class='ion-android-arrow-back'></i>",
        "<i class='ion-android-arrow-forward'></i>"
    ]
})


HTML Structure - top

The template is build on Bootstrap 3.3.6 the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web..

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Create a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding, then create .row and add columns with appropriate device name (xs, sm, md, lg) and grid number (2, 4, 6, 12).

For full documentation, please visit Bootstrap 3 site: http://getbootstrap.com/css/

  • css/bootstrap.css
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">

</head>

<div class="container">
	<div class="row">
		<div class="col-md-6">
			...
		</div>

		<div class="col-md-6">
			...
		</div>
	</div>
</div>

CSS Structure - top

CSS folder and files struture Well organized.
These are the CSS file you're be using in the template:

  • css
bootstrap.css (Bootstrap Original file of v3.3.6 Don't touch this file)
style.css (All custom elements in this file)
	

Java Script - top

jQuery - is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit http://www.jquery.com/

The initialization of the elements, libs and features is made by the file scripts.js, in the js folder. Take a look at the "build" function to see what it does.

  • js/custom.js
<!-- Custom Functions -->
<script src="js/custom.js" ></script>
	


Icons - top

In Kite we used FontAwesome icons. Which is more user friendly and 350+ icons avaiable.

You can find all icon classes here : FontAwesome.

Use of icons :

<i class="fa fa-star"><i>

In Kite we used Ion icons. Which is more user friendly and 700+ icons avaiable.

You can find all icon classes here : Ion icons.

Use of icons :

<i class="ion-flash"><i>


Sources and Credits - top
I've used the following plugins as listed.

Free fonts:


All images have been used for demonstration purposes only and are not included in the template.


Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating this template. No guarantees, but I'll do my best to assist. If you have any suggestions on how to improve our templates or documentation please share them!