# Massive

## HTML5 Multipurpose Multi-page & One-page theme

- created: 08/15/2015
- latest update: 09/17/2016
- by: ThemeBucket
- email: themebucket@gmail.com

Thanks for purchasing Massive - Multipurpose HTML5 template.

### Installation

1. Unzip the file and find out the folder HTML. There are all html template files in this folder.

2. Folder Structure is as follows

- assets

  - css [only compiled css from sass]

  - img [all images]

  - js [only custom js files]

  - sass [all sass files]

    - abstract

    - base

    - layout

    - pages

    - shortcodes

    - themes

  - vendor [all the 3rd party css and js plugins]

  - index.html - Home page

3. You will need to Upload these files to your Web Server using FTP in order to use it on your Website. And other files can be used according to your preferences.

4. Now enjoy the theme and adding section/feature according to your need.

### HTML Structure

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta name="description" content="corporate, creative, general, portfolio, photography, blog, e-commerce, shop, product, gallery, retina, responsive">

        <!--favicon icon-->
        <link rel="icon" type="image/png" href="assets/img/favicon.png">

        <title>Massive Home</title>

        <!--common style-->
        <link href='http://fonts.googleapis.com/css?family=Abel|Source+Sans+Pro:400,300,300italic,400italic,600,600italic,700,700italic,900,900italic,200italic,200' rel='stylesheet' type='text/css'>

        <!-- inject:css -->
        <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/vendor/animate/animate.css">
        <link rel="stylesheet" href="assets/vendor/elasic-slider/elastic.css">
        <link rel="stylesheet" href="assets/vendor/iconmoon/linea-icon.css">
        <link rel="stylesheet" href="assets/vendor/magnific-popup/magnific-popup.css">
        <link rel="stylesheet" href="assets/vendor/owl-carousel/owl.carousel.css">
        <link rel="stylesheet" href="assets/vendor/owl-carousel/owl.theme.css">
        <link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="assets/css/shortcodes.css">
        <link rel="stylesheet" href="assets/css/style.css">
        <link rel="stylesheet" href="assets/css/default-theme.css">
        <!-- endinject -->

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="assets/vendor/backward/html5shiv.js"></script>
        <script src="assets/vendor/backward/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <!-- preloader start -->
        <div id="tb-preloader">
            <div class="tb-preloader-wave"></div>
        </div>
        <!-- preloader end -->

        <div class="wrapper">

            <!--header start-->
            <header class="l-header l-header_overlay">
            ...
            </header>
            <!--header end-->

            <!--hero section-->
            <div  class="parallax text-center vertical-align home-banner">
                <div class="container-mid">
                    <div class="container">
                        ...
                    </div>
                </div>
            </div>
            <!--hero section-->

            <!--body content start-->
            <section class="body-content">
                <div class="page-content">
                    <div class="container">
                        <div class="row">
                            ...
                        </div>
                    </div>
                </div>
            </section>
            <!--body content end-->

            <!--footer start -->
            <footer id="footer" class="dark">
                <!--primary footer-->
                <div class="primary-footer">
                    ...
                </div>
                <!--primary footer end-->

                <!--secondary footer-->
                <div class="secondary-footer">
                    ...
                </div>
                <!--secondary footer end-->
            </footer>
            <!--footer end-->
        </div>

        <!-- inject:js -->
        <script src="assets/vendor/modernizr/modernizr.js"></script>
        <script src="assets/vendor/jquery/jquery-1.10.2.min.js"></script>
        <script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/vendor/breakpoint/breakpoint.js"></script>
        <script src="assets/vendor/count-to/jquery.countTo.js"></script>
        <script src="assets/vendor/countdown/jquery.countdown.js"></script>
        <script src="assets/vendor/easing/jquery.easing.1.3.js"></script>
        <script src="assets/vendor/easy-pie-chart/jquery.easypiechart.min.js"></script>
        <script src="assets/vendor/elasic-slider/jquery.eislideshow.js"></script>
        <script src="assets/vendor/flex-slider/jquery.flexslider-min.js"></script>
        <script src="assets/vendor/gmap/jquery.gmap.min.js"></script>
        <script src="assets/vendor/images-loaded/imagesloaded.js"></script>
        <script src="assets/vendor/isotope/jquery.isotope.js"></script>
        <script src="assets/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
        <script src="assets/vendor/mailchimp/jquery.ajaxchimp.min.js"></script>
        <script src="assets/vendor/menuzord/menuzord.js"></script>
        <script src="assets/vendor/nav/jquery.nav.js"></script>
        <script src="assets/vendor/owl-carousel/owl.carousel.min.js"></script>
        <script src="assets/vendor/smooth/smooth.js"></script>
        <script src="assets/vendor/touchspin/touchspin.js"></script>
        <script src="assets/vendor/typist/typist.js"></script>
        <script src="assets/vendor/sticky/jquery.sticky.min.js"></script>
        <script src="assets/vendor/visible/visible.js"></script>
        <script src="assets/vendor/wow/wow.min.js"></script>
        <script src="assets/js/scripts.js"></script>
        <!-- endinject -->
    </body>
    </html>

### Layout Settings

Massive theme support both boxed and wide Layouts. For boxed Layouts you need to add class name boxed into the <body> tag like this <body class="boxed">

You can set BG color/ Banckground image/ Background pattern into boxed view

For Bg color : <body class="boxed box-bg">

For Background image: <body class="boxed box-background-img">

For Background pattern: <body class="boxed box-pattern">

You can edit to change BG color/ Banckground image/ Background pattern into css file.

### Logo

You can find LOGO container into header section

    <!--logo start-->
    <a href="index.html" class="logo-brand">
        <img class="retina" src="assets/img/logo-dark.png" alt="Massive">
    </a>
    <!--logo end-->

Massive has two types of logo style - logo light and logo dark like assets/img/logo.png and assets/img/logo-dark.png logo-dark should be used in dark navigation. You can use any size of logo but suitable size is 100px height and flexiable width.

### Retina logo

If you wish to use a Retina Logo, make sure that you use double the size of your Standard Logo. and logo name convention is logo@2x.png. And please make sure you give the class name class="retina" like this <img class="retina" src="img/logo.png" alt=""/>

In which image you want to make retina just keep double size of those images and give class class="retina" into import img tags like above

### Theme Color

You can change your website's Theme Color Scheme in an instant. You simply need to change the Color Code in the assets/css/default-theme.css file. We have few default scheme like green-theme.css, red-theme.css etc.
Make sure you add the assets/css/default-theme.css in your head after the assets/css/style.css stylesheets.

    <head>
        ...
        <!--theme color -->
        <link rel="stylesheet" href="assets/css/style.css">
        <link href="assets/css/default-theme.css" rel="stylesheet">
        ....
    </head>

### Font Change

We are using google font. So you can feel free to use any google font what you like best. Massive used google font Source Sans Pro

You can find the Link to the <head> tag of all the .html files. like this

    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,600,600italic,700,700italic,900,900italic,200italic,200' rel='stylesheet' type='text/css'>

And you have to add the font name into css file like

    font-family: 'Source Sans Pro', sans-serif;

### Navbar

You've lots of navbar options to chose from:

- Color Variants
  - Black / Dark
  - White / Light
  - Semi Dark
  - Transparent Dark
  - Transparent Light

- Style Variants
  - Standard
  - Center
  - Left
  - Wide
  - Floating
  - Compact
  - Expand

- Special
  - Menu Push
  - Menu Dotted

- Link Style
  - Standard
  - Background
  - Outline
  - Underline

### Black / Dark

    <!--header start-->
    <header class="l-header">

        <div class="l-navbar l-navbar_expand l-navbar_t-dark js-navbar-sticky">
            <div class="container">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-standard">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### White / Light

    <!--header start-->
    <header class="l-header">

        <div class="l-navbar l-navbar_expand l-navbar_t-light js-navbar-sticky">
            <div class="container">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-standard">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Semi Dark

    <!--header start-->
    <header class="l-header l-header_overlay">

        <div class="l-navbar l-navbar_expand l-navbar_t-semi-trans js-navbar-sticky">
            <div class="container">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-standard">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Transparent Dark

    <!--header start-->
    <header class="l-header l-header_overlay">

        <div class="l-navbar l-navbar_expand l-navbar_t-dark-trans js-navbar-sticky">
            <div class="container">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-standard">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Transparent Light

    <!--header start-->
    <header class="l-header l-header_overlay">

        <div class="l-navbar l-navbar_expand l-navbar_t-light-trans js-navbar-sticky">
            <div class="container">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-standard">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Standard

    <!--header start-->
    <header class="l-header">

        <div class="l-navbar l-navbar_expand l-navbar_t-dark js-navbar-sticky">
            <div class="container">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-standard">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Center

    <!--header start-->
    <header class="l-header">

        <div class="l-navbar l-navbar_expand l-navbar_s-center l-navbar_t-light js-navbar-sticky">
            <div class="container">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-standard">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Left

Note: make sure to add body_has-navbar-left class to body tag.

    <!--header start-->
    <header class="l-header">

        <div class="l-navbar l-navbar_s-left l-navbar_t-light">
            <div class="container">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Wide

    <!--header start-->
    <header class="l-header">

        <div class="l-navbar l-navbar_expand l-navbar_t-dark js-navbar-sticky">
            <div class="container-fluid">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-standard">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Floating

    <!--header start-->
    <header class="l-header l-header_overlay">

        <div class="l-navbar l-navbar_expand l-navbar_s-floating l-navbar_t-light js-navbar-sticky">
            <div class="container">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-standard">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Compact

    <!--header start-->
    <header class="l-header">

        <div class="l-navbar l-navbar_compact l-navbar_t-light js-navbar-sticky">
            <div class="container-fluid">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-standard">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Expand

    <!--header start-->
    <header class="l-header">

        <div class="l-navbar l-navbar_expand l-navbar_t-light js-navbar-sticky">
            <div class="container-fluid">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-standard">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Menu Push

    <!--header start-->
    <a href="#cd-nav" class="cd-nav-trigger">Menu
        <span class="cd-nav-icon"></span>
        <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
            <circle r="50" fill="transparent"></circle>
        </svg>
    </a>

    <div id="cd-nav" class="cd-nav">
        <div class="cd-navigation-wrapper">
            <div class="cd-half-block">
                <h2>Navigation</h2>
                <nav>
                    <ul class="cd-primary-nav">
                        <li class="selected">
                            <a href="#">Home</a>
                        </li>
                        <li  class="">
                            <a href="#">About Us</a>
                        </li>
                        ...
                    </ul>
                </nav>
            </div>

            <div class="cd-half-block">
                <address>
                    <ul class="cd-contact-info">
                        <li><a href="mailto:themebucket@gmail.com">themebucket@gmail.com</a></li>
                        <li>0123-12345678</li>
                        <li>
                            <span>DreamLand Street</span>
                            <span>XYZ -123 Lane</span>
                            <span>Melbourne, Australia</span>
                        </li>
                    </ul>
                </address>
            </div>
        </div>
    </div>
    <!--header end-->

###

### Menu Dotted

    <!--header start-->
    <nav id="cd-vertical-nav">
        <ul>
            <li>
                <a href="#">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Intro</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="cd-dot"></span>
                    <span class="cd-label">About</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Features</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Portfolio</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Pricing</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Contact</span>
                </a>
            </li>
        </ul>
    </nav>
    <!--header end-->

###

### Standard

    <!--header start-->
    <header class="l-header">

        <div class="l-navbar l-navbar_expand l-navbar_t-light js-navbar-sticky">
            <div class="container-fluid">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-standard">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Background

    <!--header start-->
    <header class="l-header">

        <div class="l-navbar l-navbar_expand l-navbar_t-light js-navbar-sticky">
            <div class="container-fluid">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-bg">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Outline

    <!--header start-->
    <header class="l-header">

        <div class="l-navbar l-navbar_expand l-navbar_t-light js-navbar-sticky">
            <div class="container-fluid">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-outline">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

###

### Underline

    <!--header start-->
    <header class="l-header">

        <div class="l-navbar l-navbar_expand l-navbar_t-light js-navbar-sticky">
            <div class="container-fluid">
                <nav class="menuzord js-primary-navigation" role="navigation" aria-label="Primary Navigation">

                    <!--logo start-->
                    <a href="index.html" class="logo-brand ">
                        <img class="retina" src="assets/img/logo.png" alt="" />
                    </a>
                    <!--logo end-->

                    <!--mega menu start-->
                    <ul class="menuzord-menu menuzord-right c-nav_s-underline">
                    ...
                    </ul>
                    <!--mega menu end-->

                </nav>
            </div>
        </div>

    </header>
    <!--header end-->

### Page Title

Massive have 10 different page title

1. Default Title
2. Background Title
3. Background Transparent Title
4. Parallax Transparent Title
5. No Background Title
6. Pattern Title
7. Center Align Title
8. Right Align Title
9. Dark Title
10. Mini Title

#### 1. Default Title

Default Page Title style with Text Left aligned & Breadcrumbs Right aligned.

    <!--page title start-->
    <section class="page-title">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h4 class="text-uppercase">page title</h4>
                    <span>Sub title</span>
                    <ol class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Shortcodes</a></li>
                        <li class="active">Page Title</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <!--page title end-->

####

#### 2. Background Title

    <section class="page-title background-title dark">
        ....
    </section>

####

#### 3. Background Transparent Title

    <!--header start-->
    <!-- Note: Use semi transparent, dark transparent or light transparent header -->
    <!--header end-->

    <!--page title start-->
    <section class="page-title background-title dark">
        ...
    </section>
    <!--page title end-->

#### 4. Parallax Transparent Title

    <!--header start-->
    <!-- Note: Use semi transparent, dark transparent or light transparent header -->
    <!--header end-->

    <!--page title start-->
    <section class="page-title parallax-title ">
        ...
    </section>
    <!--page title end-->

#### 5. No Background Title

    <!--page title start-->
    <section class="page-title no-bg">
        ...
    </section>
    <!--page title end-->

#### 6. Pattern Title

    <!--page title start-->
    <section class="page-title pattern-title">
        ...
    </section>
    <!--page title end-->

#### 7. Center Align Title

    <!--page title start-->
    <section class="page-title page-title-center">
        ...
    </section>
    <!--page title end-->

#### 8. Right Align Title

    <!--page title start-->
    <section class="page-title page-title-right">
        ...
    </section>
    <!--page title end-->

#### 9. Dark Title

    <!--page title start-->
    <section class="page-title dark">
        ...
    </section>
    <!--page title end-->

#### 10. Mini Title

    <!--page title start-->
    <section class="page-title mini-title">
        ...
    </section>
    <!--page title end-->

### Page Section

The standard page section has the following

    <!--section-->
    <div class="page-content">
        <div class="container">
            <div class="row">
                <!--title-->
                <div class="heading-title text-center">
                    <h3 class="text-uppercase">Section Title </h3>
                    <span class="text-uppercase">sub title </span>
                </div>
                <!--title-->
                <div class="col-md-12">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias aliquam blanditiis,
                        corporis debitis et eum fugit magni minima nostrum nulla omnis pariatur perferendis,
                        perspiciatis, quos saepe sed? Ea, sint.</p>
                </div>
            </div>
        </div>
    </div>
    <!--section-->

#### Section Background color change

you can change the section background color. like gray/dark. For gray background color please add extra class name gray-bg and For dark background color add class name dark-bg

For Gray background color

    <!--section-->
    <div class="page-content gray-bg">
        <div class="container">
            <div class="row">
                 ....
            </div>
        </div>
    </div>
    <!--section-->

For Dark background color

    <!--section-->
    <div class="page-content dark-bg">
        <div class="container">
            <div class="row">
                 ....
            </div>
        </div>
    </div>
    <!--section-->

#### Section Parallax

For section parallax add extra class name parallax-inner full-width and set your parallax image

    <!--parallax-->
    <div class="parallax-inner full-width" style="background-image: url('img/parallax/para1.jpg')">
        <div class="container-fluid ">
            <div class="row">
                <div class="col-md-12">
                    ...
                </div>
            </div>
        </div>
    </div>
    <!--parallax-->

### Section Extra Classes

We have created some useful helper classes for you. Here are a few of them:

- `.light-txt` - Text color white
- `.theme-color` - Text color will be theme color
- `.theme-bg` - Background color will be theme color
- `.radius-less` - Zero Radius
- `.circle` - Radius will be circle
- `.inline-block` - Display inline-block

Some margin top/bottom classes

    /* --------------------------------------------------------------
        pre-defined >  margin top | margin bottom
    ---------------------------------------------------------------*/

    /*margin top*/

    .m-top-0{
        margin-top: 0px !important;
    }
    .m-top-10 {
        margin-top: 10px;
    }
    .m-top-15 {
        margin-top: 15px;
    }
    .m-top-20 {
        margin-top: 20px;
    }
    .m-top-25 {
        margin-top: 25px;
    }
    .m-top-30 {
        margin-top: 30px;
    }
    .m-top-35 {
        margin-top: 35px;
    }
    .m-top-40 {
        margin-top: 40px;
    }
    .m-top-50 {
        margin-top: 50px;
    }
    .m-top-80 {
        margin-top: 80px;
    }
    .m-top-100 {
        margin-top: 100px;
    }

    .m-top-0, .m-top-10, .m-top-15, .m-top-20, .m-top-25, .m-top-30, .m-top-35, .m-top-40, .m-top-50, .m-top-80, .m-top-100,
    .m-bot-0, .m-bot-10, .m-bot-15, .m-bot-20, .m-bot-25, .m-bot-30, .m-bot-35, .m-bot-40, .m-bot-50, .m-bot-80, .m-bot-100{
        display: inline-block;
    }

    /*margin bottom*/

    .m-bot-0 {
        margin-bottom: 0px !important;
    }
    .m-bot-10 {
        margin-bottom: 10px;
    }

    .m-bot-15 {
        margin-bottom: 15px;
    }

    .m-bot-20 {
        margin-bottom: 20px;
    }

    .m-bot-25 {
        margin-bottom: 25px;
    }

    .m-bot-30 {
        margin-bottom: 30px;
    }

    .m-bot-35 {
        margin-bottom: 35px;
    }

    .m-bot-40 {
        margin-bottom: 40px;
    }

    .m-bot-50 {
        margin-bottom: 50px;
    }

    .m-bot-80 {
        margin-bottom: 80px;
    }

    .m-bot-100 {
        margin-bottom: 100px;
    }

Some padding classes

    /*padding top*/
    .p-top-0{
        padding-top: 0px !important;
    }
    .p-top-10 {
        padding-top: 10px;
    }
    .p-top-15 {
        padding-top: 15px;
    }
    .p-top-20 {
        padding-top: 20px;
    }
    .p-top-25 {
        padding-top: 25px;
    }
    .p-top-30 {
        padding-top: 30px;
    }
    .p-top-35 {
        padding-top: 35px;
    }
    .p-top-40 {
        padding-top: 40px;
    }
    .p-top-50 {
        padding-top: 50px;
    }
    .p-top-80 {
        padding-top: 80px;
    }
    .p-top-100 {
        padding-top: 100px;
    }
    .p-tb-10 {
        padding: 10px 0;
    }
    .p-tb-20 {
        padding: 20px 0;
    }
    .p-tb-30 {
        padding: 30px 0;
    }
    .p-tb-50 {
        padding: 50px 0;
    }
    .p-tb-100 {
        padding: 100px 0;
    }
    .p-tb-150 {
        padding: 150px 0;
    }
    .p-tb-200 {
        padding: 200px 0;
    }
    .p-top-0 {
        padding-top: 0 !important;
    }
    .p-bot-0 {
        padding-bottom: 0 !important;
    }

### Portfolio

Portfolio filter structure is following

    <!--filter-->
    <div class="text-center">
        <ul class="portfolio-filter">
            <li class="active"><a href="#" data-filter="*"> All</a></li>
            <li><a href="#" data-filter=".cat1">printing</a></li>
            <li><a href="#" data-filter=".cat2">Web</a></li>
            <li><a href="#" data-filter=".cat3">illustration</a></li>
            <li><a href="#" data-filter=".cat4">media</a></li>
            <li><a href="#" data-filter=".cat5">crafts</a></li>
        </ul>
    </div>
    <!--filter-->

Portfolio Item structure is following

    <div class="portfolio col-3 gutter ">
        <!--portfolio item-->
        <div class="portfolio-item cat1 cat3 ">
            <div class="thumb">
                <img src="img/portfolio/01.jpg" alt="">
                <div class="portfolio-hover">
                    <div class="action-btn">
                        <a href="img/portfolio/01.jpg" class="popup-link" title="lightbox view"> <i class="icon-basic_magnifier"></i>  </a>
                    </div>
                    <div class="portfolio-description">
                        <h4><a href="img/portfolio/01.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
                        <p><a href="#">category</a></p>
                    </div>
                </div>
            </div>
        </div>
        <!--portfolio item-->
    </div>

We have 5 column option (2 col, 3 col, 4 col, 5 col and 6 col) with gutter and gutter less

If you want to show 3 column portfolio items then code as follows

    <div class="portfolio col-3 ">
        ...
    </div>

ere just added class name col-3 into portfolio tag like <div class="portfolio col-3 ">

Similarly you can set

column 2 col-2

column 4 col-4

column 5 col-5

column 6 col-6

and if you need gutter of those column the just add a gutter class name like this

    <div class="portfolio col-3 gutter ">
        ...
    </div>

#### Portfolio Masonry

For masonry view just add class name portfolio-masonry like as follows

    <div class="portfolio portfolio-masonry col-3 gutter">
        ...
    </div>

#### Portfolio with Title

Portfolio with title structure are as follows

    <div class="portfolio portfolio-with-title col-3 gutter ">

        <div class="portfolio-item cat1 cat3 ">
            <!--portfolio image-->
            <div class="thumb">
                <img src="img/portfolio/01.jpg" alt="">
                <div class="portfolio-hover">
                    <div class="action-btn">
                        <a href="img/portfolio/01.jpg" class="popup-link" title="lightbox view"> <i class="icon-basic_magnifier"></i>  </a>
                    </div>
                </div>
            </div>
            <!--portfolio image-->

            <!--portfolio title-->
            <div class="portfolio-title">
                <h4><a href="img/portfolio/01.jpg" class="popup-link" title="lightbox view">lightbox view</a></h4>
                <p><a href="#">category 1</a> , <a href="#">category 3</a> </p>
            </div>
            <!--portfolio title-->

        </div>
    </div>

### Blog

Classic Image Blog post structure are as follows.

    <!--classic image post-->
    <div class="blog-classic">
        <div class="date">
            24
            <span>MAR 2015</span>
        </div>
        <div class="blog-post">
            <div class="full-width">
                <img src="img/post/p12.jpg" alt=""/>
            </div>
            <h4 class="text-uppercase"><a href="blog-single.html">standard blog post with photo</a></h4>
            <ul class="post-meta">
                <li><i class="fa fa-user"></i>posted by <a href="#">admin</a></li>
                <li><i class="fa fa-folder-open"></i> <a href="#">lifestyle</a>, <a href="#">travel</a>, <a href="#">fashion</a></li>
                <li><i class="fa fa-comments"></i> <a href="#">4 comments</a></li>
            </ul>
            <p>Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets.. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.  </p>
            <a href="blog-single.html" class="btn btn-small btn-dark-solid  "> Continue Reading</a>
        </div>
    </div>
    <!--classic image post-->

#### Post Type

You can use different types of Post Types:

- Image post
- Slider Gallery
- Gallery Thumbs
- Blockquotes
- Standard Post
- Embedded Audio
- Embedde Video

### Appear Animation

f you want to use animation for some element, you need to add class wow fadeInLeft to this element and set data attribute like this:

    <div class="wow fadeInLeft" data-wow-delay="0.1s" data-wow-duration="2s">
        ...
    </div>

The full list of appear animation effects you can find here - http://daneden.github.io/animate.css/.

### Shortcodes

We've 20+ pre made shortcode elements. and all shortcode css are defined in the folder assets/sass/shortcodes

### Contact Form

There are 3 contact form variations contact-us-1.html, contact-us-2.html and contact-us-3.html. It's really really simple to setup contact form. You'll find contact form configurations in mailer/config.php file. Open that config file in your favorite editor and change the values accoding to sample code given below.

    return array(
        /**
         * Email settings
         */
        'mailer' => array(
            'subject'    => 'Website Contact Form', // Email subject
            'from_email' => 'from@example.com', // Use one of your emails to avaid spam issue
            'from_name'  => 'Jane Doe', // Use a know name eg: Mr. Web Form :)
            'to_email'   => 'to@example.com', // Email recipient address
            'to_name'    => '' // Optional
            ),

        /**
         * Fields map
         */
        'fields_map' => array(
            'DEFAULT' => array(
                'name'     => 'Name',
                'email'    => 'Email',
                'subject'  => 'Subject',
                'comments' => 'Message',
                ),

            'FORM_ALT' => array(
                'name'     => 'Name',
                'email'    => 'Email',
                'phone'    => 'Phone No',
                'subject'  => 'Subject',
                'comments' => 'Message',
                ),
            )
        );

### Mailchimp

You can setup Mailchimp Subscriptions anywhere on your Website by simply Copy / Pasting the sample code present in the HTML Files.

    <form class="form-inline mailchimp">
        <input id="sf-1" type="email" class="form-control" placeholder="Enter your email address">
        <button type="submit" class="btn btn-medium btn-rounded btn-dark-solid text-uppercase" >subscribe</button>
        <label for="sf-1"></label>
    </form>

Add following js file in your page

    <!-- Mailchimp -->
    <script src="js/mailchimp/jquery.ajaxchimp.min.js"></script>

And paste mailchip url into "sripts.js" file line# 625 shown bellow

    /* ---------------------------------------------
     Mailchimp Init
     --------------------------------------------- */
    if ($.fn.ajaxChimp) {
        $('.mailchimp').ajaxChimp({
            /**
             * Example mailchimp url
             * //blahblah.us1.list-manage.com/subscribe/post?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh9'
             */
            url: 'paste mailchip url'
        });
    }

### PSD and Mockup

Here is PSD files link. You can download it from here Click Here

###

### Credits

#### Image Credits

- http://depositphotos.com/
- http://dollarphotoclub.com/
- http://nothingtochance.co/
- https://unsplash.com/
- https://pixabay.com/
- http://www.1001freedownloads.com/free-photos/

#### jQuery

- jQuery
- Bootstrap
- Owl Carousel
- FlexSlider
- ElasticSlider
- Smooth Scroll
- Isotope
- Masonry
- wow js
- Magnific popup
- jQuery Easing
- jQuery countTo
- jQuery CountDown
- jQuery Visible
- Slider Revolution
- menuzord
- Typist

###

### Upgrade

To upgrade from older to v2.0 you may replace the img, css and js folder. Please do not forget to backup your files before the upgrade. If you encountered any problem during the upgrade please contact our support at themebucket@gmail.com

### End

Thanks for purchasing Massive - Multipurpose HTML5 template.

If you have any questions, feel free to contact us at themebucket@gmail.com