Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to ask via item's comments. Also please don't forget to give item ratings! Thanks so much! :)

Basics

HTML Structure
This template using Bootstrap framework. Main content is placed between header and footer area. The content is nested within <div id="content">.
... header area ...

<section id="">
     <div class="container-fluid">
          <div class="row">
               <div class="col-md-4">
                    this is your content			
               </div>
               <div class="col-md-8">
                    this is your content
               </div>
          </div>
     </section>

     <section>
          <div class="container-fluid">
               <div class="row">
                    this is your content
               </div>
          </div>
     </section>

</div>


... footer area ...
        
Create Columns
For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent). Click here for more information.
<div class="row">
<div class="col-md-6"> this is 1/2 columns </div>
<div class="col-md-6"> this is 1/2 columns </div>
</div> <div class="row">
<div class="col-md-4"> this is 1/3 columns </div>
<div class="col-md-8"> this is 2/3 columns </div>
</div> <div class="row">
<div class="col-md-3"> this is 1/4 columns </div>
<div class="col-md-9"> this is 3/4 columns </div>
</div>

CSS

List of CSS files
  • bootstrap.css - main css framework for this theme
  • animsition.css - used for transition page
  • lightgallery.css -for lightgallery popup theme
  • themify-icons.css - for icon themify
  • font-awesome.css - for icon font-awesome
  • owl.carousel.css, owl.theme.css - for owl carousel jquery
  • animated-on3step.css - used to make animation
  • style.css - main css file for this template
  • queriesstyle.css - main css for responsive part
Background settings for section and element
All section/element background on this template can be edited within file style.css

Javascript

List of javascipt files
  • pluginson3step.js - all plugin js in file
  • bootstrap.min.js - bootstrap js file
  • jquery.themepunch.tools.min.js.js, jquery.themepunch.revolution.min.js -revolution slider js file
  • velocity.js - animation engine in jQuery
  • lightgallery.js - used to open popup image
  • sticky.js - used for sticky navigation and scroll top
  • on3step.js - custom js file and plugin
  • plugin-form.js - custom for form js
Animate object on scroll

Select an object that you want to animate. As example you want create animate for H1 element. You can see below:

<h1 class="onStep" data-animation="fadeInUp" data-time="0">Animate Text</h1>
  • You must add class name "onStep" for object that you want to animate.
  • fadeIn: sample type of animation. You can see all animation available from: http://daneden.github.io/animate.css/
  • data-animation: option for element animation
  • data-time: determine duration of animation (on milisecond)
Change contact form email address
Open > send.php. Change $to value with your email.