Consulin - Consultant Finance HTML Template
- Version: 1.0
- Last Updated: 11/07/2017
- Author: Niche_Theme
Template features:
- HTML5 & CSS3
- Responsive Template
- Free icons used
- Pixel Perfect
- Clean & Unique Design
- Easy to customize
- Retina Ready
- Unlimited Colors
- Boxed or Wide layout
- Ajax Contact Form
- Ajax Appoinment Form
- 3 Portfolio page
- Portfolio Masonry
- Portfolio grid alt
- Four types of header
- One page
- 2 Blog Page
- Parallax Effect
- & much more...
HTML Structure
Consulin - Consultant Finance HTML Template is a clean and trendy HTML Template designed with Grid-Based Approach. Can be used for a lot of type of websites, like modern corporative pages, Studio, Business, Freelancer, Designer, Portfolio, Photography, Law Firm, Interior Design, Architecture, Video, Magazine, Blogs, Shops, and trendy personal pages. Consulin is a multipurpose creative template that will jump start your business. Impress your users with unique and complementing aesthetics, pixel-perfect layouts, pleasing color schemes and much more. You can customize it very easy to fit your business needs. If you like my HTML, please rate it 5 stars. It’s very useful for me.
Below is Specialist basic structure:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Consulin - Consultant Finance HTML Template</title>
<!-- Mobile Specific Metas -->
<!-- Bootstrap -->
<!-- Template Style -->
<!-- Responsive -->
<!-- colors -->
<!-- Animation Style -->
<!-- Favicon and touch icons -->
</head>
<body>
<!-- Header -->
<!-- Slider -->
<!-- Section -->
<section class="flat-row"> </section>
<!-- Footer -->
<footer class="footer"> </footer>
<!-- Bottom -->
<div class="bottom"> </bottom>
<!-- Go Top -->
<a class="go-top">
<i class="fa fa-chevron-up"></a>
</a>
<!-- Javascript -->
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.js"></script>
<script type="text/javascript" src="javascript/jquery.isotope.min.js"></script>
<script type="text/javascript" src="javascript/imagesloaded.min.js"></script>
<script type="text/javascript" src="javascript/owl.carousel.js"></script>
<script type="text/javascript" src="javascript/jquery-waypoints.js"></script>
<script type="text/javascript" src="javascript/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="javascript/jquery-countTo.js"></script>
<script type="text/javascript" src="javascript/jquery.cookie.js"></script>
<script type="text/javascript" src="javascript/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="javascript/parallax.js"></script>
<script type="text/javascript" src="javascript/smoothscroll.js"></script>
<script type="text/javascript" src="javascript/jquery-validate.js"></script>
<script type="text/javascript" src="javascript/jquery.countdown.js"></script>
<script type="text/javascript" src="javascript/switcher.js"></script>
<script type="text/javascript" src="javascript/main.js"></script>
</body>
</html>
CSS System
- Template style
- Shortcodes style
- Responsive style
- Javascript - Fonts - Animation - Bootstrap style
Style.css ( Template style )
/**
* Reset
* Repeatable Patterns
* Top
* Social-links
* Header
* Mobile navigation
* Page title
* Breadcrumbs
* Blog
* Blog Single
* Pagination
* Gird for page single
* Sidebar
* GoTop Button
* Footer
* Footer widget
* Page About
* Bottom
* Revolution Slider
* Preload
* Parallax
* Switcher
* Boxed
* Site-off-canvas
* Porfolio Detail
*/
Shortcodes.css ( Shortcodes - Elements style )
You can easily use the shortcodes to create your own page.
/**
* Flat button
* Row
* Title-section
* Grid
* Empy space
* Requestform
* IconBox
* Flat-iconbox-carosuel
* Blog-carosuel
* Images hover
* Flat-qoute
* More-info
* Flat portfolio
* Flat map
* Flat-testimonials-slider
* Flat-client
* flat-team
* Testimonial
* Flat-list
* flat-accordion
* Flat-Tabs v1
* Contact Form
* Flat-contact-info
*/
Javascript - Fonts - Animation - Bootstrap style
/**
* font-awesome.css
* simple-line-icons.css
* magnific-popup.css
* owl.carousel.css
* flexslider.css
* justifiedGallery.css
* animate.css
* shortcodes.css
* bootstrap.css
* revolution-slider.css
*/
Javascript Custom
Main.js ( javascript/main.js )
/**
* isMobile
* responsiveMenu
* headerFixed
* topSearch
* flatTestimonials_1
* flatTestimonials_2
* flatTestimonials_3
* flatTestimonials_4
* flatClient
* flatAccordion
* responsiveVideo
* goTop
* retinaLogos
* parallax
* removePreloader
*/
Shortcodes System
You can easily use the shortcodes to create your own page.
/**
* Flat button
* Row
* Title-section
* Grid
* Empy space
* Requestform
* IconBox
* Flat-iconbox-carosuel
* Blog-carosuel
* Images hover
* Flat-qoute
* More-info
* Flat portfolio
* Flat map
* Flat-testimonials-slider
* Flat-client
* flat-team
* Testimonial
* Flat-list
* flat-accordion
* Flat-Tabs v1
* Contact Form
* Flat-contact-info
*/
Contact Form
To edit the contact form to send mails to your email box, you can look for the config.php. You need to edit yourname@yourdomain.com to your email.
contact-process.php ( contact/contact-process.php )
$address = "sales@cloodo.com";
Example Edit Template
1. Example of how to edit the logo template
You change the logo image in the folder of project "Images" of your logo images, the same name as the original (logo.png)
Project Specialist:-> images -> logo.png
2. Example of how to edit the "iconbox" template
Two column: add class "item-two-column"
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Specialist | Multipurpose Business & Financial, Consulting, Accounting, Broker HTML Templates</title>
</head>
<body>
<!-- Section -->
<section class="flat-row">
<div class="flat-iconbox-style">
<div class="flat-item item-two-column">
...
</div>
</div>
</section>
</body>
</html>
Three column: add class "item-three-column"
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Specialist | Multipurpose Business & Financial, Consulting, Accounting, Broker HTML Templates</title>
</head>
<body>
<!-- Section -->
<section class="flat-row">
<div class="flat-iconbox-style">
<div class="flat-item item-three-column">
...
</div>
</div>
</section>
</body>
</html>
Four column: add class "item-four-column"
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Specialist | Multipurpose Business & Financial, Consulting, Accounting, Broker HTML Templates</title>
</head>
<body>
<!-- Section -->
<section class="flat-row">
<div class="flat-iconbox-style">
<div class="flat-item item-four-column">
...
</div>
</div>
</section>
</body>
</html>
Credits
-
Photos
- All images are just used for preview purpose only and NOT included in the final purchase files.
-
Fonts & Icons
- Font-Awesome
- Simple line icons
- Source Sans Pro is available for free on Google fonts.
- Poppins is available for free on Google fonts.
-
Javascript
- jQuery (http://jquery.com/)
- Bootstrap (http://getbootstrap.com)
- Easing (http://gsgd.co.uk/sandbox/jquery/easing/)
- WayPoints (http://imakewebthings.com/jquery-waypoints/)
- Flexslider (http://flexslider.woothemes.com)
- owl.carousel (http://owlgraphic.com/owlcarousel/)
- Parallax (http://www.ianlunn.co.uk/plugins/jquery-parallax/)
- Cookie (https://github.com/carhartl/jquery-cookie)
- Validate (https://github.com/jzaefferer/jquery-validation)
- Isotope (http://isotope.metafizzy.co/)
- Imagesloaded (http://imagesloaded.desandro.com/)
- Countdown (http://hilios.github.io/jQuery.countdown/)
- Switcher (https://github.com/djanix/jquery.switcher/)
- Smoothscroll (https://gist.github.com/galambalazs/6477177)
- Magnific Popup (https://github.com/dimsemenov/Magnific-Popup)
- Gmap3 (http://gmap3.net)