Industify | Industry HTML Template

The template includes 35 html files. This template is a flexible layout with max 4 column. All of the information within the main content area is nested within a div with a class of "industify_fn_wrapper_all". You have to open index page in order to change it.

If you would like to edit the color, font, or style of any elements in this template, you could do by using "Inspect Element" on Chrome, Safari, Mozilla and Opera(press right click on browser ).  It is really powerful tool to work with html and css codes

I'm using 9 CSS files in this template. The main file (style.css) contains all of the specific stylings for the page. The file is separated into sections.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Other CSS files:

• base.css
• fontello.css
• justified.css
• lightgallery.css
• magnific-popup.css
• owl-carousel.css
• owl-theme-default.css
• swiper.css

All call actions are run in init.js

Attention : If you romove any of javascripts, please don't forget to remove js code call action that belongs to removed js from init.js . Otherwise your site works inproperly

Other JavaScript files:

• countto.js - used for counters.
• ie8.js - used for Disable Webpage content for ie browser's old versions.
• init.js - includes call actions
• isotope.js - used for Masonry (Portfolio)
• jquery.js - javascript library
• justified.js - Justified Gallery (Portfolio Single Posts)
• kenburnsy.js - slider
• lightgallery.js - popup library
• magnific-popup.js - used for Popup Video (Watch Video Popup).
• modernizr.custom.js - used for IE in order to support HTML5 elements
• owl-carousel.js - used for sliders.
• parallax.js - used for "About" animation.
• swiper.js - used for sliders.
• waypoints.js - used for Countto animation (Skills).

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

• Icons - These Icons by fontello.com. Free for Commercial Use.
• Images - pexels.com images.
• Font - Free Google Font "Rubik"

• Unzip purchased files via winrar
• Copy and paste Industify all files into your folder
• To edit content of template open and edit index.html via Adobe Dreamweaver (or notepad++, notepad and etc.)
• To customize CSS just edit style.css in css folder
• To customize JavaScript just edit init.js in js folder
• To change images replace all images inside img folder with yours

index.html contains header,9 sections and footer:

• Header
• Alpha Slider
• Principles Modern
• About Section
• Service Query
• About with Rating
• Call to action
• Testimonials
• Project Sticky Full
• Blog Section
• Footer

I can not find where can I edit desktop header, mobile header, preloader, sidebar, random services and footer. Where can I find these sections and edit them?

It's because we have included these sections in "includes" folder. Open this folder, open (for example) desktop-header.html file to edit desktop header's content.

Edit desktop-header.html once and you can see, that you have changed it everywhere: index.html, index-1.html, gallery.html and etc.

The same rules apply to the rest of the files in the "includes" folder. It's just like WordPress. This will make it easier for you to work on your site. And you can enjoy the saved time. It's really cool.

What options does the alpha slider have? And how to use them?

Alpha slider's HTML you can find in index.html and it has "industify_slider_alpha" class.

It have next options:

* data-desc-show: yes, no (Description visibility)
* data-category-show: yes, no (Category visibility)
* data-nav-types: square, circle, rounded (Navigation button types)
* data-autoplay-switch: enabled, disabled (Autoplay switcher)
* data-autoplay-time: in milliseconds. 8000 = 8seconds (Autoplay time in millisconds)
* data-effect: fade, coverflow, flip, cube, cards (Swiping effects)
* data-progress: enabled, disabled (Top progress bar switcher)
* data-box-pos: tl, tm, tr, cl, cm, cr, bl, bm, br (Content box position. Available values: tl - top left, tm - top middle, tr - top right, cl - center left, cm - center middle, cr - center right, bl - bottom left, bm - bottom middle, br - bottom right)
* data-img-effect: enabled, disabled (Active effect for image)
* data-text-effect: enabled, disabled (Active effect for text)

What "random services" means? And how can I call random services?

It means that it will call 2 random services by skipping 1_st servie post. Random service function will works with random-service.html file in "includes" folder by JavaScript. Below you can see how to call random services:

<div data-html="includes/random-service.html" data-index="1" data-count="2"></div>

data-index value "1" means that JavaScript will skip 1_st service post.
data-count value "2" means that Javascript will call 2 service posts.