Introduction

Thank you for purchasing Insurance template!

This documentation will give you an understanding of how Insurance is structured and guide you in performing common functions.

If you need custom customization, please contact us from here: https://themeforest.net/user/smilethemes

Thank you so much!

AU CREATIVE

Getting Started

What's Included

Once you have download the package you will see the following folder structure in " template" Folder

css- Main Stylesheet Files
img- Images Files
js- Javacripts Folder
includes- PHP Folder (Contact form etc)
vendor- Vendor Files (jquery, bootstrap etc)

In order to use in your website, you need to upload template files ( inside the folder www) to your web server with the help of one of the FTP-clients (for example, WinSCP or Total Commander etc).

HTML Structure

INSURANCE template is based on Bootstrap Framework ( http://getbootstrap.com/) Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Below is a sample coding structure:

<!DOCTYPE html>

<html lang="en-US">

<head>

</head>

<body>

    
    

        ...

    
    

    
    
            

                ...

            
    
    

    
    
        
            

                ...

            
        
        
            

                ...

            
        
    
    


  </body>

</html>

Logo Settings

Default site logo is placed insideheader container.

Changing Fonts

By default INSURANCE Template uses One fonts from google library:Open Sans Google Fonts Library

If you wish to add/change the site fonts, please take a look in thehead part of the website and you will find this tag:

To include new font you can simply add another line like this:

Or add an| seperator and pasteLato:400,300,800,700,600 after default website fonts link.

Sliders

INSURANCE includes 3 different sliders that gives you all the options they need.

Revolution Slider: is an awesome animated slider that creates eye-catching sliders.
Owl Slider: Is an touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
Insurance Owl Slider: is an elegant slider perfect for large images and subtle animated titles and captions.

Revolution Slider

Please find the full online documentation of Revolution Slider here

Owl Slider

This excellent carousel slider can be controled usuing HTML5 data attirbutes, see the full list below:

data-col-lg - The columns in large desktop screen size, default value is 1 columns
data-col-md - The columns in laptop screen size, default value is 1 columns
data-col-sm - The columns in tablet screen size, default value is 1 columns
data-col-xs - The columns in mobile screen size, default value is 1 columns
data-items - Set size items for slider
data-dots - Add dots container class for custom dots
data-center - Center slider, default value "false"

Advanced customization of fileowl-custom.js

The full documentation of OWl Slider can be found here

Helpers

INSURANCE helper css classes allow you to build your custom layout without touching any CSS code

These classes are generic helper classes predifined in the CSS of pages, here is quick view what they can do

Class
`.show`	display: block !important;
`.hidden`	display: none !important;
`.hidden-desktop-up`	display: none; on destop up
`.hidden-lg-tablet`	display: none; on large tablet
`.hidden-md-tablet`	display: none; on medium tablet
`.hidden-sm-tablet`	display: none; on small tablet
`.hidden-md-phone`	display: none; on medium phone
`.hidden-sm-phone`	display: none; on small phone

Contact form

You need to modify email address on contact-form.php in includes folder, line 5

$to = "info@yourdomain.com";

with your or company contact email address.

Note: Your server must support php sendmail()function to make contact form work properly

Google Maps

You can create unlimited contact maps in your website. Simply by using HTML5 data attirbutes, follow list below:

data-map-x - Add location number x
data-map-y - Add location number y
data-scrollwhell default false
data-draggable default false
data-pin We have created six markers for your website. If you wish your custom image marker you can do that, just by placing your custom marker url indata-pin

An example, how to create Google Maps inside your website:

Note:You need always to include Google map sensor link in your pagehead or before your placed map. you can set thesensor parameter totrue orfalse to detect the user's location.

Note:You can custom location of map in filejs/ins-place.jsfor section map atcontact-5.html

Grid

Bootstrap grid 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

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

You must start withrow
There are pre-define classes of columns starting from 1 to 12, examplecol-md-1 tocol-md-12
Each of these value represent a percentage of the screen, 1 being the smallest and 12 being 100%
You can create different grid pattern that finally forms 12

For more information about Bootstrap, visit: http://getbootstrap.com/

example :


    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1



    .col-md-8
    .col-md-4



    .col-md-4
    .col-md-4
    .col-md-4



    .col-md-6
    .col-md-6

NoteBootstrap includes different grids for different screen sizes, "col-md" md stands for medium screen, the following table explains:

Extra small devices Phones ( <768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px) Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints Container width None (auto) 750px 970px 1170px Class prefix .col-xs- .col-sm- .col-md- .col-lg- # of columns 12 Column width Auto ~62px ~81px ~97px Gutter width 30px (15px on each side of a column) Nestable Yes Offsets Yes Column ordering Yes

Browser Support

INSURANCE is built keeping mind to support a wide range of browsers and devices. We all major browers Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and Above

	Chrome	Firefox	Internet Explorer	Opera	Safari
Android	Supported	Supported	N/A	Not Supported	N/A
iOS	Supported	N/A		Not Supported	Supported
Mac OS X	Supported	Supported		Supported	Supported
Windows	Supported	Supported	Supported	Supported	Not Supported

Source & Credits

All images are only for demonstration purpose, however you can re-download them in sites below. Almost all (not including overclothing.com, Daniel Zenda, Freepik etc...) images are released free of copyrights under Creative Commons CC0.