Finance Corp is a responsive HTML Template Financial Services and Business Consulting Services. This is powerful HTML template with full of customization options and features.
Finance Corp 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 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!
• 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-static.html
• about-us.html
• about-us-alter.html - v1.0.1
• news.html
• news-details.html
• contact.html
• contact-extend.html - v1.0.1
• service.html
• service-alter.html
• service-single.html
• service-single-alter.html
• faqs.html
• teams.html
• teams-alter.html - v1.0.1
• testimonial.html
• typography.html
• shortcode.html - v1.0.1
• gallery.html - v1.1
• portfolio.html - v1.1
• portfolio-single.html - v1.1
• shortcode-carousel.html - v1.1
• shortcode-banner.html - v1.1.1
<body> <!-- Header --> <header class="site-header"> <div class="navbar navbar-primary"> </div> <div class="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="cta-content"> </div> <!-- End Section --> <!-- Project Section --> <div class="section-projects"> </div> <!-- End projects --> <!-- Testimonials --> <div class="section-quotes"> </div> <!-- End quote --> <!-- Latest News --> <div class="section-news"> </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.css
02. bootstrap.min.css
03. font-awesome.min.css
04. owl.carousel.css
---
Used Files
01. vendor.bundle.css
02. style.css
---
Pre-Built color preset (use only one stylesheet)
01. style-blue.css
02. style-azure.css
03. style-violet.css
04. style-green.css
05. style-red.css
06. style-orange.css
/**
Template Name: FinanceCorp - HTML Template
Author: Softnio
Version: 1.0.0
Update: 09.09.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 - Responsive
* 18.0 - Version Wise
* 19.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: 'Roboto';
src: url("../fonts/roboto/roboto-bold-webfont.eot");
src: url("../fonts/roboto/roboto-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/roboto-bold-webfont.woff2") format("woff2"), url("../fonts/roboto/roboto-bold-webfont.woff") format("woff"), url("../fonts/roboto/roboto-bold-webfont.ttf") format("truetype");
font-weight: 700; }
@font-face {
font-family: 'Roboto';
src: url("../fonts/roboto/roboto-light-webfont.eot");
src: url("../fonts/roboto/roboto-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/roboto-light-webfont.woff2") format("woff2"), url("../fonts/roboto/roboto-light-webfont.woff") format("woff"), url("../fonts/oroboto/roboto-light-webfont.ttf") format("truetype");
font-weight: 300; }
@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; }
@font-face {
font-family: 'Poppins';
src: url("../fonts/poppins/poppins-regular-webfont.eot");
src: url("../fonts/poppins/poppins-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-regular-webfont.woff2") format("woff2"), url("../fonts/poppins/poppins-regular-webfont.woff") format("woff"), url("../fonts/poppins/poppins-regular-webfont.ttf") format("truetype");
font-weight: 400; }
@font-face {
font-family: 'Poppins';
src: url("../fonts/poppins/poppins-semibold-webfont.eot");
src: url("../fonts/poppins/poppins-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-semibold-webfont.woff2") format("woff2"), url("../fonts/poppins/poppins-semibold-webfont.woff") format("woff"), url("../fonts/poppins/poppins-semibold-webfont.ttf") format("truetype");
font-weight: 600; }
@font-face {
font-family: 'Poppins';
src: url("../fonts/poppins/poppins-bold-webfont.eot");
src: url("../fonts/poppins/poppins-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-bold-webfont.woff2") format("woff2"), url("../fonts/poppins/poppins-bold-webfont.woff") format("woff"), url("../fonts/poppins/poppins-bold-webfont.ttf") format("truetype");
font-weight: 700; }
/* ===============================
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.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
02. 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' });
}
//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
Poppins :- Poppins
Roboto :- Roboto
Icons :- FontAwesome
Few More feature and more pages added.
New File and code changes:
+ shortcode-banner.html
! *.html - add new page link in navigation.
!+ minor stylesheet update for banner.
For updating your previous template, you need to update main style sheet (style.css).
Few More feature and more pages added.
New File and code changes:
+ gallery.html
+ portfolio.html
+ portfolio-single.html
+ shortcode-carousel.html
+ image/arrow-{next/prev}-{w/g}.png
! *.html - add new page link in navigation.
!+ js/jquery.bundle.js - for lightbox and filter
!+ js/script.js - for lightbox and filter
!+ css/vendor.bundle.css - for lightbox
!+ stylesheet (all) update regarding new feature.
For updating your template, you need to update javascript (jquery.bundle.js, script.js) and vendor style sheet (vendor.bundle.css) as well as main style sheet (style.css).
New more pages added to cover more option in template.
In this version those we have made changes given bellow.
New File and code changes:
+ about-us-alter.html
+ teams-alter.html
+ shortcode.html
+ contact-extend.html
! *.html - add new page link in navigation.
! Minor change in stylesheet
Initial Released Template
Caution:
If you have order version, you can upgrade to newer version. Must aware upgrade process overwrite your custom code if you have already. So must keep backup before any process.