Image

Financer Documentation

We made another html template documentation with ♥ by themezinho

Image

Financer is all kind of business purpose HTML template for Business Startups. Responsive design based on Bootstrap framework. All files and code has been well organized and nicely commented for easy to customize.

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!

Markup Markup customization and highlights

This theme is a builted on bootstrap framework with four columns. All of the information within the main content area is nested within a 'section'.

General Markup

The general template structure is the same throughout the template. Here is the general structure.

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Financer | Business Consultations Template</title>
<meta name="author" content="Themezinho">
<meta name="description" content="Financer | Business Consultations Template">
<meta name="keywords" content="business, corporate, page, html, template, carousel, parallax, agency, html5">

<!-- SOCIAL MEDIA META -->
<meta property="og:description" content="Financer | Business Consultations Template">
<meta property="og:image" content="http://www.themezinho.net/financer/preview.png">
<meta property="og:site_name" content="Financer">
<meta property="og:title" content="Financer">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.themezinho.net/financer">

<!-- TWITTER META -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Financer">
<meta name="twitter:creator" content="@Financer">
<meta name="twitter:title" content="Financer">
<meta name="twitter:description" content="Financer | Business Consultations Template">
<meta name="twitter:image" content="http://www.themezinho.net/financer/preview.png">

<!-- FAVICON FILES -->
<link href="ico/apple-touch-icon-144-precomposed.png" rel="apple-touch-icon" sizes="144x144">
<link href="ico/apple-touch-icon-114-precomposed.png" rel="apple-touch-icon" sizes="114x114">
<link href="ico/apple-touch-icon-72-precomposed.png" rel="apple-touch-icon" sizes="72x72">
<link href="ico/apple-touch-icon-57-precomposed.png" rel="apple-touch-icon">
<link href="ico/favicon.png" rel="shortcut icon">

<!-- CSS FILES -->
<link href="revolution/css/settings.css" rel="stylesheet">
<link href="css/flaticon.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/jquery.fancybox.css" rel="stylesheet">
<link href="css/odometer.min.css" rel="stylesheet">
<link href="css/owl.carousel.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/base.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
content goes here
</body>
</html>

How to edit link hover color

It is very easy to change main color of ghost link

/* LINKS */
a{color:#1d1d1d;}
a{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
a:hover{text-decoration:underline;}
a:focus{text-decoration:none;}

Change Main Title

Here is the css style for site general title typography.

.intro h6{ text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: 0.4px; color: #3d404e; position: relative; padding-bottom: 30px; color: #9193a4;}
.intro h6:after{content: ''; width: 30px; height: 3px; background: #ffbb3f; position: absolute; left: 50%; bottom: 0; margin-left: -15px;}
.intro h2{ font-family: "Playfair Display"; padding: 0 10%; font-size: 40px; line-height: 60px; margin-bottom: 50px;}

Edit loading and page transition

Here is the css style for loading elements and classes.

        /* PRELOAD */
.preloader{position: fixed; left: 0px;top: 0px;width: 100%;height: 100%; z-index: 9999; background:#fff; }
/* Loader animation */       
.spinner{ position: absolute;top: 50%;left: 50%;margin: -33px 0 0 -33px;width: 32px;height: 32px;-webkit-animation: rotator 1.4s linear infinite;animation: rotator 1.4s linear infinite;}

@-webkit-keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
}

@keyframes rotator {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
}
.path {stroke-dasharray: 187;stroke-dashoffset: 0;-webkit-transform-origin: center;-ms-transform-origin: center;transform-origin: center;-webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite; animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors {
  0% {
    stroke: #ddd;
  }
  25% {
    stroke: #ddd;
  }
  50% {
    stroke: #ddd;
  }
  75% {
    stroke: #ddd;
  }
  100% {
    stroke: #ddd;
  }
}

@keyframes colors {
  0% {
    stroke: #ddd;
  }
  25% {
    stroke: #ddd;
  }
  50% {
    stroke: #ddd;
  }
  75% {
    stroke: #ddd;
  }
  100% {
    stroke: #ddd;
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
            transform: rotate(450deg);
  }
}

Styles Styles customization and highlights

Stylesheets

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

File Name Description
animate.css For other animations and progress bar
bootstrap-slider.css Bootstrap price range scroll
bootstrap.css Detault bootstrap css file
bootstrap.min.css Detault bootstrap min css file
ionicons.css ION font icons
jquery.fancybox.css Litebox plug-in css
main.css All the css files included here
owl.carousel.css OWL Carousel plug-in css
settings.css Customized Rev Slider css
style.css Template main css

Table of contents

The second file contains all of the specific stylings for the page. The file is separated into sections using:

===== TABLE OF CONTENTS =====

	1. FONTS
	2. BODY
	3. HTML ELEMENTS
	4. LINKS
	5. FORM ELEMENTS
	6. MIDDLE ALIGN
	7. CUSTOMIZED ALERTS
	8. LABELS
	9. CUSTOMIZED TAB
	10. PANEL GROUP 
	11. PROGRESS BAR
	12. TABLE
	13. CUSTOMIZED ODOMETER
	14. CUSTOMIZED FANCYBOX
	15. OWL CAROUSEL
	16. PRELOAD
	17. NAVBAR
	18. SEARCH BOX
	19. HEADER
	20. INT HEADER
	21. BREADCRUMB BAR
	22. SLIDER DOTS
	23. INTRO
	24. VIDEO INTRO
	25. HIGHLIGHTS
	26. FEATURES SERVICES
	27. SERVICES
	28. FEATURED SOLUTIONS
	29. QUOTE
	30. FEATURED PROJECTS
	31. PROJECTS
	32. FAQ
	33. LEFT SIDE CONTENT
	34. RIGHT SIDE CONTENT
	35. OUR SKILLS
	36. OUR PROGRESS
	37. ELEMENTS
	38. PRICING
	39. TESTIMONIALS
	40. MAIN PARTNERS
	41. PARTNERS
	42. FUN FACTS
	43. WORK PROCESS
	44. WORK US
	45. TEAM
	46. LATEST NEWS
	47. OUR OFFICES
	48. CAREER
	49. SUPPORT
	50. ON PRESS
	51. NEWS
	52. GALLERY
	53. ERROR PAGES
	54. CONTACT
	55. GET QUOTE
	56. SUPPORT BAR
	57. FOOTER 
	58. RESPONSIVE TABLET
	59. RESPONSIVE MOBILE

JavaScript JavaScript customization and highlights

JavaScript Files

This is the list of all the jquery files are we used for our theme.

Tag Description
bootstrap-slider.js Price range plug-in
bootstrap.js Bootstrap main framework
bootstrap-min.js Bootstrap min
contact-form.js Ajax - php contact form
counter.js Counting numbers plug-in
google-maps.js Styled Google Maps
isotope.min.js Portfolio filter
jquery.form.js Default jquery form plugin
jquery.min.js jQuery library
jquery.stellar.js Parallax backgrounds - elements
jquery.themepunch.revolution.min.js Revolution Slider plug-in
jquery.themepunch.tools.min.js Revolution Slider tools plug-in
jquery.validate.min.js Jquery validation plug-in
masonry.js Masonry grid plug-in
npm.js Bootstrap extention plug-in
owl.carousel.js OWL Carousel jquery
qty-increase.js Cart quantity increase plug-in
scripts.js All the plug-ins initializing
settings.js Revolution Slider setting jquery
waypoints.min.js Scrolling to top jquery
wow.js Scroll animation load plug-in

Main typewriter effect

If you want to change the texts of header typewriter animation, open up the file scripts.js and change the following code: 

	// Counter for coming soon
		$("#countdown").countdown({
			date: "8 September 2020 09:00:00", // Change this to your desired date to countdown to
			format: "on"
		});
        
	// Counter script
		$('.counter').counterUp({
            delay: 10,
            time: 1000
        });

	// Page transition
		$('.transition').on('click', function(e) {
		$('.transition-overlay').toggleClass("show");
		});
			
			
		// Transition delay
		$('.transition').click(function (e) {
			e.preventDefault();                  
			var goTo = this.getAttribute("href"); 
			 
	
		setTimeout(function(){
			window.location = goTo;
			},1000);       
			});

Ajax contact form Contact form customization and highlights

About contact form

ajax contact form is very easy to setup , open up the file process.php and change the your@domain.com part.

< ?php

    $to = "your@domain.com";
    $from = $_REQUEST['email'];
    $name = $_REQUEST['name'];
	$subject = $_REQUEST['subject'];
    $headers = "From: $from";
    

    $fields = array();
    $fields{"name"} = "Name";
    $fields{"email"} = "E-mail";
    $fields{"subject"} = "Subject";
    $fields{"message"} = "Message";

    $body = "Here is the message from conceito:\n\n"; foreach($fields as $a => $b){   $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }

    $send = mail($to, $subject, $body, $headers);

? >

Error messages

Also it is easy to change contact form messages.

<div id="success">

         <p>Your message was sent successfully! We will be in touch as soon as we can.</p>
       </div>
        <div id="error">
          <p>Something went wrong, try refreshing and submitting the form again.</p>
        </div>

Photoshop Files Photoshop customization and highlights

There is no included psd file with this item:

Credits Files Some of your credits and sources

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

JavaScript

  1. Revolution Slider
  2. Bootstrap
  3. Isotope
  4. Fancybox
  5. Counter Up
  6. OWL Carousel
  7. Reveal Animations WOW

Images

  1. http://thestocks.im/ — Some of images we used from here
  2. http://www.shutterstock.com/ — Some of images we used from here

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.