Insurify is a responsive HTML Template for any Insurance Agency. This is powerful HTML template with full of customization options and features.
Insurify is based on Bootstrap 1170px grid system. All files are clearly organised we believe it will be easy to use and edit them. The design is very clean, elegant and modern. Any one can customize this template as his wishes
Thank you for purchasing our html template.
If you have any questions that are beyond the scope of this help file, please feel free to drop an email at info@softnio.com or via softnio user page contact form here. Thanks you so much!
• 1170 px bootstrap grid.
• Easy to customize.
• sass files included.
• Fully Responsive.
• Modern and unique design.
• index.html
• index-v2.html
• index-v3.html
• index-v4.html
• index-v5.html
• index-v6.html
• index-v7.html (v1.1)
• about.html
• about-alter.html
• claims.html
• client-resource.html
• testimonial.html
• teams.html
• teams-alter.html
• faqs.html
• shortcode.html
• typography.html
• insurance-services.html
• insurance-auto.html
• insurance-commercial.html
• insurance-homeowner.html
• insurance-life.html
• insurance-personal.html
• insurance-renters.html
• service.html
• service-alter.html
• service-single.html
• service-single-alter.html
• news.html
• news-details.html
• contact.html
• contact-extend.html
• get-a-quote.html
<body> <!-- Header --> <header class="site-header"> <div class="topbar"> </div> <div class="navbar navbar-primary"> </div> <div class="banner banner-slider"> </div> </header> <!-- End Header --> <!-- Service --> <div class="section-services"> </div> <!-- End Service --> <!-- content --> <div class="section-about"> </div> <!-- End content --> <!-- CTA-Parallax --> <div class="call-action"> </div> <!-- End Section --> <!-- Testimonials --> <div class="section-quotes"> </div> <!-- End quote --> <!-- Latest News --> <div class="section-blog"> </div> <!-- End Section --> <!-- Client logo --> <div class="section-logos"> </div> <!-- End Section --> <!-- call-action --> <div class="call-action"> </div> <!-- call-action --> <!-- footer widget--> <div class="footer-widget"> </div> <!-- End footer widget --> <!-- Copyright --> <div class="copyright"> </div> <!-- End copyright --> </body>
All CSS are located in the "css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:
Third-Party Vendor
01. animate.min.css
02. bootstrap.min.css
03. font-awesome.min.css
04. owl.carousel.css
---
Pre-Built color preset (use only one stylesheet)
01. style.css (default)
02. style-blue.css
03. style-green.css
04. style-red.css
05. style-maroon.css
06. style-navy.css
07. style-orange.css
08. style-royal.css
---
Used Files
01. vendor.bundle.css (combain into one file for speed)
02. style.css
/**
Template Name: Template Name: InsurancePro - HTML Template
Author: Softnio
Version: 1.0.0
Update: 10.31.2017
*/
/**
* Table of Contents
* 1.0 - Fonts
* 2.0 - Resets
* 2.1 - General
* 3.0 - Header/Navbar
* 4.0 - Banner/Slider
* 5.0 - Call-Action
* 6.0 - Page Content
* 7.0 - Forms
* 8.0 - Stats
* 9.0 - Testimonials
* 10.0 - Clients Logo
* 11.0 - Widgets
* 12.0 - Footer / Copyright
* 13.0 - Blog/News
* 14.0 - FAQs
* 15.0 - Feature Box
* 16.0 - Teams Member
* 17.0 - Gallery with Filter
* 18.0 - Products
* 19.0 - Responsive
* 20.0 - Version Wise
* 21.0 - Extra/Additional
*/
/* ===============================
1.0 FONTS
=============================== */
@font-face {
font-family: 'Roboto';
src: url("../fonts/roboto/roboto-regular-webfont.eot");
src: url("../fonts/roboto/roboto-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/roboto-regular-webfont.woff2") format("woff2"), url("../fonts/roboto/roboto-regular-webfont.woff") format("woff"), url("../fonts/roboto/roboto-regular-webfont.ttf") format("truetype");
font-weight: 400; }
.......
@font-face {
font-family: 'Poppins';
src: url("../fonts/poppins/poppins-light-webfont.eot");
src: url("../fonts/poppins/poppins-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-light-webfont.woff2") format("woff2"), url("../fonts/poppins/poppins-light-webfont.woff") format("woff"), url("../fonts/poppins/poppins-light-webfont.ttf") format("truetype");
font-weight: 300; }
......
/* ===============================
2.0 Resets
=============================== */
body {
font-family: "Roboto", sans-serif;
color: #373638;
font-size: 16px;
line-height: 1.65;
font-weight: 400; }
html, body {
overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 {
font-family: "Poppins", sans-serif;
line-height: 1.15;
font-weight: 600; }
h1.color-secondary, h2.color-secondary, h3.color-secondary, h4.color-secondary, h5.color-secondary, h6.color-secondary {
color: #e83338; }
h1.color-primary, h2.color-primary, h3.color-primary, h4.color-primary, h5.color-primary, h6.color-primary {
color: #005aab; }
h1, .h1, .heading-lg, .heading-lg-lead {
font-size: 2.25em;
color: #005aab; }
h2, .h2 {
font-size: 1.875em;
color: #005aab; }
h3, .h3, h4, .h4, .heading-md, .heading-md-lead {
font-size: 1.5em;
font-weight: 600;
color: #6a686c; }
h4, .h4 {
font-size: 1.25em;
color: #6a686c; }
h5, .h5 {
font-size: 1.125em;
font-weight: 700;
color: #6a686c; }
h6, .h6, .heading-sm, .heading-sm-lead {
font-size: .875em;
color: #6a686c;
font-weight: 700; }
ul, ol {
padding: 0px;
margin: 0px; }
ul li, ol li {
list-style: none; }
h1, h2, h3, h4, h5, h6, p, ul, ol, table {
margin: 0 0 18px; }
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, table:last-child {
margin-bottom: 0; }
/* ==========================================================================
2.1 General / Common
========================================================================== */
.content-section {
margin-top: 45px; }
.content-section:first-child {
margin-top: 0px; }
.content .list-style li {
position: relative;
padding-left: 18px;
margin-left: 0;
margin-bottom: 12px; }
/* ==========================================================================
3.0 Header/Navbar
========================================================================== */
.site-header {
position: relative; }
.site-header .navbar {
border-radius: 0;
border: 0 none;
min-width: 300px;
padding: 12px 0;
color: #5c5c5c;
background: #fff;
margin: 0; }
All javascript are located in the "js" folder of the template
Third-Party Vendor
01. bootstrap.min.js
02. form.plugins.js
03. gmaps.js
04. jquery.min.js
05. owl.carousel.min.js
06. parallaxie.js
---
Used Files
01. jquery.bundle.js (combain into one file for speed)
02. gmaps.js (only on contact page)
03. script.js
All javascript code are located in script.js file
;(function($){
'use strict';
// Sticky
var $is_sticky = $('.is-sticky');
if ($is_sticky.length > 0 ) {
var $win = $(window), $navm = $('#mainnav').offset();
$win.scroll(function(){
var $scroll = $win.scrollTop();
if ($win.width() > 991) {
if($scroll > $navm.top+4 ){
if(!$is_sticky.hasClass('has-fixed')) $is_sticky.addClass('has-fixed');
} else {
if($is_sticky.hasClass('has-fixed')) $is_sticky.removeClass('has-fixed');
}
} else {
if($is_sticky.hasClass('has-fixed')) $is_sticky.removeClass('has-fixed');
}
});
}
// Slider
var $slider = $('#slider');
if ($slider.length > 0 ) {
$slider.carousel({ interval:6000, pause: 'null' });
}
// LogoCarousel
var $logo_carousel = $('.logo-carousel');
if ($logo_carousel.length > 0 ) {
$logo_carousel.owlCarousel({
items: 5, loop: true, margin: 30, nav: true, responsive:{0:{ items:3 }, 379:{ items:4 }, 720:{ items:5 }, 1280:{ items:6 } }
});
}
// Parallax
var $parallax = $('.has-parallax');
if ($parallax.length > 0 ) {
$parallax.each(function() {
$(this).parallaxie({ speed: 0.3, offset: 0 });
});
}
// Google map initialize
var $mapholder = $('.map-holder');
if ($mapholder.length > 0) {
var map = new GMaps({
div: '#gmap',
lat: -12.043333,
lng: -77.028333
});
$mapholder.on('click', function () { $(this).children().css("pointer-events", "auto"); });
$mapholder.on('mouseleave', function() { $(this).children().css("pointer-events", "none"); });
}
//Carousel
var $has_carousel = $('.has-carousel');
if ($has_carousel.length > 0 ) {
$has_carousel.each(function(){
var $self = $(this);
var c_item = ($self.data('items')) ? $self.data('items') : 4;
var c_item_t = (c_item >= 3) ? 3 : c_item;
var c_item_m = (c_item_t >= 2) ? 2 : c_item_t;
var c_delay =($self.data('delay')) ? $self.data('delay') : 6000;
var c_auto =($self.data('auto')) ? true : false;
var c_loop =($self.data('loop')) ? true : false;
var c_dots = ($self.data('dots')) ? true : false;
var c_navs = ($self.data('navs')) ? true : false;
$self.owlCarousel({
navText: ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
items: c_item, loop: c_loop, nav: c_navs, dots: c_dots, margin: 30,
autoplay: c_auto, autoplayTimeout: c_delay, autoplaySpeed: 700,
responsive:{ 0:{ items:1 }, 480:{ items: c_item_m }, 768:{ items: c_item_t }, 1170:{ items: c_item } }
});
});
}
})(jQuery);
.
First open the php file located into form folder. Files are 'contact.php', 'quote-request.php', 'subscribe.php'. On each file you will saw bellow code. Just update your sitename, your email and name. If you want to add multiple email then just duplicate the line '$emailTO[] = array...' and add another email
// Enter Your Sitename $sitename = 'your site'; // Enter your email addresses: @required $emailTO[] = array( 'email' => 'your mail', 'name' => 'your name' );
If you want to add BCC / CC email address then just enable below line and update same way as email too.
//$emailBCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' ); //$emailCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' );
In this template have 6 defferent prebuilt stylesheet which is helps you to use different color on your site. So you just need to update stylesheet link from each html head section.
Example as bellow.
<link rel="stylesheet" type="text/css" href="css/style.css"> to <link rel="stylesheet" type="text/css" href="css/style-blue.css">
This template support 3 different header style such as header transparent, dark or white background. So you can control this by change class name. Example as bellow.
Default Header
<header class="site-header header-s1">
Switch to Dark Header (theme accent color)
In header class add or remove the class name [header-dark]. Shown bellow.
<header class="site-header header-s1 header-dark">
Enable/Disable Sticky
In header class add or remove the class name [is-sticky]. Shown bellow.
<header class="site-header header-s1 is-sticky">
Enable/Disable Transparent
In header class add or remove the class name [is-transparent]. Shown bellow.
<header class="site-header header-s1 is-transparent">
Parallaxie :- https://github.com/TheUltrasoft/Parallaxie
GMaps :-https://hpneo.github.io/gmaps/
Preloader :- https://www.niklausgerber.com/projects/preloadme-a-lightweight-jquery-website-preloader/
jQuery Form :- http://malsup.com/jquery/form/
jQuery Validation :- http://jqueryvalidation.org/
PHPMailer :- https://github.com/PHPMailer/PHPMailer/
Pixabay :- https://pixabay.com/
DepositPhotos :- https://depositphotos.com/