Version: 2.5.5 | Dated: 14 August 2016

Good Day!

Thank you for choosing our template - Mountain. If you have any questions please feel free to submit a ticket here.

Installation

Follow the steps below to get started with your Site Template:

  1. Open the Product/HTML Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below:
    • HTML/assets/css - Extra Stylesheets Folder
    • HTML/assets/images - Images Folder
    • HTML/assets/js - Javacripts Folder
    • HTML/assets/lib - Library Folder
    • HTML/assets/fonts - Fonts Folder
    • HTML/php - Required PHP Functions Folder
    • HTML/index.html - Index File/Homepage
    The other files can be used according to your preferences.
  4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Shortcodes

You can select your desired section from our shortcodes. For your convenience, here we gathered all our sections in following categories. You can select a category and you will find different styles of section used for same purpose.

You can choose a section and get the HTML structure.Copy that structure and paste it in your work. Hope that, this feature of our template will reduce your working time.

HTML Structure

Mountain follows a simple coding structure.

<!DOCTYPE html>
<lang="en-US" html dir="ltr">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Your Stylesheets, Favicons & Title
	============================================= -->
	...

</head>
<body>

	<main>

		<!-- Navbar
		============================================= -->
		<div id="menuzord" class="menuzord clearfix">
			<a href="index.html" class="menuzord-brand">
				<img src="assets/images/header/menu-logo.png"/>
			</a>
      		<ul class="menuzord-menu menuzord-right">
        		Navigation Links ...
      		</ul>
    	</div>

		<!-- Header Section
		============================================= -->
		<header id="header" class="header">

			...

		</header>

		<!-- Content blocks
		============================================= -->
		<section id="yourId" class="yourClass section">

			<div class="container">

				...

			</div>

		</section>

		<!-- Footer
		============================================= -->
		<footer>
      		<div class="container">
        		<div class="row">
		          	<div class="col-sm-6">
		            	<p>Copyrights © 2016 All Rights Reserved by Mountain.<br/><span>Terms of Use | Privacy Policy</span></p>
		          	</div>
		          	<div class="col-sm-6">
						<div class="social-icons">
						    <a href="#" class="footer-social">
						        <span class="ion-social-facebook"></span>
						    </a>
						    <a href="#" class="footer-social">
						        <span class="ion-social-twitter"></span>
						    </a>
						    <a href="#" class="footer-social">
						        <span class="ion-social-pinterest"></span>
						    </a>
						    <a href="#" class="footer-social">
						        <span class="ion-social-youtube"></span>
						    </a>
						    <a href="#" class="footer-social">
						        <span class="ion-social-googleplus"></span>
						    </a>
						    <a href="#" class="footer-social">
						        <span class="ion-social-linkedin"></span>
						    </a>
						</div>
		          	</div>
		        </div> <!-- /.row-->
      		</div> <!-- /.container-->
	      	<a href="#header" class="mountain-btn footer-btn">
		        <div class="r45">
		        	<span class="ion-android-arrow-up"></span>
		        </div>
	    	</a>
    	</footer>

    </main>


<!-- Offmountain Elements
============================================= -->

...

<!-- Javascripts
============================================= -->
...

</body>
</html>

Layout Settings

This Theme Supports both Boxed & Full-Width Layouts.


Adding the class .container-fluid to the <div> after section tag will turn your website into a Full-width Layout:

<div class="container-fluid">

Adding the class .container to the <div> after section tag will turn your website into a Boxed Layout:

<div class="container">

Grid System

Bootstrap grid system is used in this template.

Bootstrap Grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.col-md-6
.col...1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7

See More To see details vist Bootstrap.

Block Structure

Mountain follows a simple coding structure. here is the sample of a single block:

<!-- Content blocks
============================================= -->
<section id="sectionId" class="section ...">

	<div class="container">

		<div class="row">

			<div class="col-md-x">

				...

			</div>
			<div class="col-md-x">

				...

			</div>
			<div class="col-md-x">

				...

			</div>

		</div>

	</div>

</section>

Preloader Settings

Preloader Logo is generated by an Base64 image. Go to the style.css file and find the line .pace:before You have to change the content value to change the preloader logo.

  • Go to the link
  • Upload your image
  • Click the button called show code
  • You will find 2 types of code. Pick the second one to use in css file. Copy the code and paste it as the content value
	.pace:before {
	content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGoAAAA1CAMAAACeJ46HAAAAh1BMVEUAAAAAf74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af74Af75a2tyTAAAALHRSTlMAu/Nr72YyRHeZEGfdiMwhqmFV1wvEg/XiLfg6FQXospV9URunoEGOckklIzMOjpYAAAMGSURBVFjDtNTbcqJAFIXhRXDUgRkVFRTBEyhRs97/+cLapCu3SdH9XbWHou3ef4nfurRuUSOsByOYgisE9SKZaVGRbBDShr0XkLyRPCQI50Led9wDOdmvcwQzIyPE5CMjLyjIOQLZ7uzOcvY2w22WCCMnn8OOpJL/IE8IYk7+BcoWM4uvgu7yhgBKqgfo6s6RXmZARK7h394mc3ct7DU33WUN325kDDTkcJAVrfWOXMCzRp1je2BvckRGiYF378UnB+62alAatBwsAxSfk50alP/2fLMBlqrFo6ttMKUsdGvOBci8Fj+1348TpUbHb53X4m2PlxqUtQqXYjIkYq0k8GNFpviK7q5TyO3rjTMw81Z8Zs9rKXtrwxZuzz82uwIetLolF12JKU0FIKGp7cMpxlvYcwvK1bUxnGJNyX0VX9hjK0oEnMnvY+HufkCmKY5U2ciPbyT1f5HRObk2aZd3Hl38caJZbP9RZuhoXHpwk1vaF5OxnWdAfU3TNG6A5zx14scRvWfcr6+lFZ9jhFSD+KHPdstuR3EYBqP2TtIm2fRnq5VW2mc47/98I8tECNKMOsMtR0LB9lcOtCUQX7rjN/j/8fvjGn/+vXDH/w18j5//JC/8+iZkefPmjQiHNBYVJ+6Bukc5JUy+qi79UL9K0wqJeHCqONUnCmLgc8J2LxON2XqzL4M0hOKG23AKZtEKHutUrGWkymRbBmmscIMPVwh23OyNXuWrl1FVIajqdPuzUURGaYAsUtZbM9JO6QTMpypyK1vfSUASGaUxFlm5qbJVhj89V5FOVRWoIqM0GEpTKbRLe4AOVMQT1dwu2iANmr30Yb2r5oFqxU5yr8qgkGWUtkd28dVPpREInaoAG1AGaW/tJJHL10olAp0qwS47pEHaW8XGl+9AtVSvqhBtUPv0XeWMvlcZkr/pfI/FTnXQmJ9Unu5V/W4xAznlp9eIz6qdRu5Ulu5V/R4oGSc/xOKjagPUAEqnsnSv6nf2smAs5XFHjw+q1A5XSN7t0lfYjnRs8iKfX5qy//xM/dUAAAAASUVORK5CYII=");
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translatex(-50%);
	-ms-transform: translatex(-50%);
	transform: translatex(-50%);
}

Changing Fonts

Change your Fonts on the Fly as we have included a assets/fonts/ file to manage the custom fonts you include with ease. By default, Mountain uses 2 Fonts namely: Lato & Lovelo. Lato is from the Google Fonts Library. Lovelo is integrated in assets/fonts/ Lovelo directory. You can find the Linking to the Font Files in the head tag of all the .html files.

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,400italic,700);

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

You can now be able to change the Font Names in the css/style.css File.

Setting RTL (Right To Left)

You can simply convert your page to RTL. For this you have to replace style.css with style-rtl.css
It's easy :-)

One Page Navbar

This navbar is generally used in one-page site. Navbar is fixed in the top. You can go to the desired section by clicking links. Here is the sample code:

	<div id="menuzord" class="menuzord clearfix">
		<a href="index.html" class="menuzord-brand">
			<img src="assets/images/header/menu-logo.png"/>
		</a>
      	<ul class="menuzord-menu menuzord-right">
	        <li class="active"><a href="#">Home</a></li>
	        <li><a href="#">elements</a></li>
	        <li><a href="#">portfolio</a></li>
	        <li><a href="#">blog</a></li>
	        <li><a href="#">shop</a></li>
      	</ul>
    </div>

Portfolio Grid

We have used Masonry for portfolio gird

There are two layouts of portfolio. They are:

  • Portfolio Grid with Gutter
  • Portfolio Grid without Gutter

If you want to use without gutter layout just add the class .no-padding at section.

<section id="portfolio-grid-1" class="portfolio-grid-1 section no-padding">
	...
</section>

Here is the sample of grid:

<section id="portfolio-grid-1" class="portfolio-grid-1 section">
  <div class="container-fluid">
    <div class="portfolio-grid">
      <div class="grid-sizer"></div>
      <div class="portfolio-grid-item grid-item-2x">
        <div class="portfolio-thumb"><img src="assets/images/portfolio/1.png" class="img-responsive"/>
          <div class="portfolio-hover">
            <div class="vcenter"><a href="#">
                <div class="hover-icon"><i class="ion-link"></i></div>
                <div class="portfolio-description">
                  <h4>hello world</h4>
                  <p>culture</p>
                </div></a></div>
          </div>
        </div>
      </div>
      <div class="portfolio-grid-item">
        <div class="portfolio-thumb"><img src="assets/images/portfolio/2.png" class="img-responsive"/>
          <div class="portfolio-hover">
            <div class="vcenter"><a href="#">
                <div class="hover-icon"><i class="ion-link"></i></div>
                <div class="portfolio-description">
                  <h4>hello world</h4>
                  <p>culture</p>
                </div></a></div>
          </div>
        </div>
      </div>
      <div class="portfolio-grid-item">
        <div class="portfolio-thumb"><img src="assets/images/portfolio/3.png" class="img-responsive"/>
          <div class="portfolio-hover">
            <div class="vcenter"><a href="#">
                <div class="hover-icon"><i class="ion-link"></i></div>
                <div class="portfolio-description">
                  <h4>hello world</h4>
                  <p>culture</p>
                </div></a></div>
          </div>
        </div>
      </div>
      <div class="portfolio-grid-item">
        <div class="portfolio-thumb"><img src="assets/images/portfolio/4.png" class="img-responsive"/>
          <div class="portfolio-hover">
            <div class="vcenter"><a href="#">
                <div class="hover-icon"><i class="ion-link"></i></div>
                <div class="portfolio-description">
                  <h4>hello world</h4>
                  <p>culture</p>
                </div></a></div>
          </div>
        </div>
      </div>
      <div class="portfolio-grid-item">
        <div class="portfolio-thumb"><img src="assets/images/portfolio/5.png" class="img-responsive"/>
          <div class="portfolio-hover">
            <div class="vcenter"><a href="#">
                <div class="hover-icon"><i class="ion-link"></i></div>
                <div class="portfolio-description">
                  <h4>hello world</h4>
                  <p>culture</p>
                </div></a></div>
          </div>
        </div>
      </div>
      <div class="portfolio-grid-item">
        <div class="portfolio-thumb"><img src="assets/images/portfolio/6.png" class="img-responsive"/>
          <div class="portfolio-hover">
            <div class="vcenter"><a href="#">
                <div class="hover-icon"><i class="ion-link"></i></div>
                <div class="portfolio-description">
                  <h4>hello world</h4>
                  <p>culture</p>
                </div></a></div>
          </div>
        </div>
      </div>
      <div class="portfolio-grid-item">
        <div class="portfolio-thumb"><img src="assets/images/portfolio/7.png" class="img-responsive"/>
          <div class="portfolio-hover">
            <div class="vcenter"><a href="#">
                <div class="hover-icon"><i class="ion-link"></i></div>
                <div class="portfolio-description">
                  <h4>hello world</h4>
                  <p>culture</p>
                </div></a></div>
          </div>
        </div>
      </div>
      <div class="portfolio-grid-item">
        <div class="portfolio-thumb"><img src="assets/images/portfolio/8.png" class="img-responsive"/>
          <div class="portfolio-hover">
            <div class="vcenter"><a href="#">
                <div class="hover-icon"><i class="ion-link"></i></div>
                <div class="portfolio-description">
                  <h4>hello world</h4>
                  <p>culture</p>
                </div></a></div>
          </div>
        </div>
      </div>
      <div class="portfolio-grid-item">
        <div class="portfolio-thumb"><img src="assets/images/portfolio/9.png" class="img-responsive"/>
          <div class="portfolio-hover">
            <div class="vcenter"><a href="#">
                <div class="hover-icon"><i class="ion-link"></i></div>
                <div class="portfolio-description">
                  <h4>hello world</h4>
                  <p>culture</p>
                </div></a></div>
          </div>
        </div>
      </div>
      <button class="load-more-portfolio">load more</button>
    </div>
  </div>
</section>

Working Contact Form

Open the file ./php/contact.php and enter your data:

// Your email
$to = 'info@themewagon.com';
$subject = 'Contact Form : Mountain Responsive HTML5 Template';

If Contact form form not working

You need to check is PHP mail() function working.

  • Save this code as mailtest.php
  • change you@yourmail.com to your e-mail address
  • upload mailtest.php to your server
  • open mailtest.php in your browser (http://yourwebsite.com/mailtest.php)
  • check your inbox to see if a test message arrived.
If it works:
  • double-check your form script for errors (like e-mail address misspelling)
  • use the same e-mail address as your form recipient
  • double-check your SPAM filters and SPAM/Junk/Bulk mailboxes
If it not

Contact your host and ask them to check PHP mail() setting.

Configuring Mailchimp

Open the file ./php/subscribe.php and enter your data:

// MailChimp
$APIKey = '53bb3bcad3947b9c5b45884b439097f4-us3';
$listID = 'fd1b8baf3f;
Grab your List's Unique Id by going to http://admin.mailchimp.com/lists/

PLEASE DO NOT USE THE EXISTING API KEY OR LIST ID

Google Map

Recently Google has changed the system. One must have an API key for a domain to show google map in any website of that domain. So you have to create an API key for your website to take this service of google.

In our template, you will find the script for google map, added in the bottom of the file like following:

	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Please change that line like this

	<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false" type="text/javascript"></script>

For more to know, following links will help you more to get the API key for google map for your site.

Google Map is used in contact section. The code is in main.js. You can change your latitude and longitude from there in Line 148 & 149.

	/*===================================
	    Google Map
	 ===================================*/
	var map = new GMaps({
      	div: '#map',
      	lat: 23.790223,
      	lng: 90.414036,
      	scrollwheel: false,
      	// How you would like to style the map. 
      	// This is where you would paste any style found on Snazzy Maps.
      	styles: [{
      		"featureType":"administrative.locality",
      		"elementType":"all","stylers":[
				{"hue":"#2c2e33"},
				{"saturation":7},
				{"lightness":19},
				{"visibility":"on"}
			]
		},

		{
			"featureType":"landscape",
			"elementType":"all",
			"stylers":[
				{"hue":"#ffffff"},
				{"saturation":-100},
				{"lightness":100},
				{"visibility":"simplified"}
			]
		},

		{
			"featureType":"poi",
			"elementType":"all",
			"stylers":[
				{"hue":"#ffffff"},
				{"saturation":-100},
				{"lightness":100},
				{"visibility":"off"}
			]
		},

		{
			"featureType":"road",
			"elementType":"geometry",
			"stylers":[
				{"hue":"#bbc0c4"},
				{"saturation":-93},
				{"lightness":31},
				{"visibility":"simplified"}
			]
		},

		{
			"featureType":"road",
			"elementType":"labels",
			"stylers":[
				{"hue":"#bbc0c4"},
				{"saturation":-93},
				{"lightness":31},
				{"visibility":"on"}
			]
		},

		{
			"featureType":"road.arterial",
			"elementType":"labels",
			"stylers":[
				{"hue":"#bbc0c4"},
				{"saturation":-93},
				{"lightness":-2},
				{"visibility":"simplified"}
			]
		},

		{
			"featureType":"road.local",
			"elementType":"geometry",
			"stylers":[
				{"hue":"#e9ebed"},
				{"saturation":-90},
				{"lightness":-8},
				{"visibility":"simplified"}
			]
		},

		{
			"featureType":"transit",
			"elementType":"all",
			"stylers":[
				{"hue":"#e9ebed"},
				{"saturation":10},
				{"lightness":69},
				{"visibility":"on"}
			]
		},

		{
			"featureType":"water",
			"elementType":"all",
			"stylers":[
				{"hue":"#e9ebed"},
				{"saturation":-78},
				{"lightness":67},
				{"visibility":"simplified"}
			]
		}]
    })

    map.addMarker({
        lat: 23.790223,
        lng: 90.414036,
        title: 'mountain',
        infoWindow: {
            content: '<span class="map-header"><b>Mountain Headquarter</b><br/></span><span class="map-address">Build-A/6, Mirpur 14 , Dhaka</span>'
        },
        icon:'assets/images/map/marker.png'
    });

Count Up

Count Up is used in funfactsection. You can control the speed via javascript. In main.js at Line 184, you have found a property called duration. You can change it as your wish.

Here is the sample code:

	//fun facts

    (function () {
	    if(!$('#funfacts').html()) return;
	    var inview = new Waypoint.Inview({
	        element: $('#funfacts')[0],
	        enter: function (direction) {
	            $('.count.number').each(function () {
	                $(this).prop('Counter', 0).animate({
	                    Counter: $(this).text()
	                }, {
	                    duration: 3000,
	                    easing: 'swing',
	                    step: function (now) {
	                        $(this).text(Math.ceil(now));
	                    }
	                });
	            });
	            this.destroy();
	        }
	    });

    })();

Count Down

Count down is used in Coming Soonpage. Here the counting process is done via javascript. If you want to change the date and time as your desire, go main.js and change the date as your wish. In coming-soon.html we use <div id="countDown"> </div>. This id have to be same.

Here is the code for javascript

/*=======================================================
            Coming Soon Countdown
========================================================*/

$(document).ready(function(){
    if($("#countDown").length == 0) return;

    $('#countDown').countdown({
        date: "January 01, 2017 00:00:00",
        render: function(data) {
            var el = $(this.el);
            el.empty()
                .append("<div class='countdown-box'><span class='counter'>" + this.leadingZeros(data.days, 2) + "</span><h6>Days</h6></div>")
                .append("<div class='countdown-box'><span class='counter'>" + this.leadingZeros(data.hours, 2) + "</span><h6>Hours</h6></div>")
                .append("<div class='countdown-box'><span class='counter'>" + this.leadingZeros(data.min, 2) + "</span><h6>Minutes</h6></div>")
                .append("<div class='countdown-box'><span class='counter'>" + this.leadingZeros(data.sec, 2) + "</span><h6>Seconds</h6></div>");
        }
    });
});

Ajax Subscription

We use ajax for subscription. Mailchimp configuration is controlled by the folowing code of main.js file.

/*------------------------------------------
            Subscribe form ajax
------------------------------------------*/

$('#subscription-form,#coming-soon-form').submit(function(e) {

    e.preventDefault();
    var $form           = $('#subscription-form,#coming-soon-subscribe');
    var submit          = $('#subscribe-button');
    var ajaxResponse    = $('#subscription-response,#coming-soon-response');
    var email           = $('#subscriber-email').val();

    $.ajax({
        type: 'POST',
        url: 'php/subscribe.php',
        dataType: 'json',
        data: {
            email: email
        },
        cache: false,
        beforeSend: function(result) {
            submit.val("Joining...");
        },
        success: function(result) {
            if(result.sendstatus == 1) {
                ajaxResponse.html(result.message);
                $form.fadeOut(500);
            } else {
                ajaxResponse.html(result.message);
                submit.val("Join");
            }
        }
    });
});//End of Subscribe form ajax

Tabs & Accordions

Tabs

Sample code is here:

<ul role="tablist" class="nav nav-tabs">
    <li role="presentation" class="active">
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true">
            ...
        </a>
    </li>
    <li role="presentation" class="">
        <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" aria-expanded="false">
            ...
        </a>
    </li>
    <li role="presentation" class="">
        <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab" aria-expanded="false">
            ...
        </a>
    </li>
    <li role="presentation" class="">
        <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" aria-expanded="false">
            ...
        </a>
    </li>
</ul>
<div class="tab-content">
	<div id="home" role="tabpanel" class="tab-pane fade active in">
		...
	</div>
	<div id="profile" role="tabpanel" class="tab-pane fade">
	    ...
	</div>
	<div id="messages" role="tabpanel" class="tab-pane fade">
	    ...
	</div>
	<div id="settings" role="tabpanel" class="tab-pane fade">
	    ...
	</div>
</div>

Accordions

We simply follow Bootstrap accordions. Sample code is here:

	<div id="accordion" role="tablist" aria-multiselectable="true" class="panel-group">
	    <div class="panel panel-default">
	        <div id="headingOne" role="tab" class="panel-heading">
	            <h4 class="panel-title">
	                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
	                  How do I become an author?
	                </a>
	            </h4>
	        </div>
	        <div id="collapseOne" role="tabpanel" aria-labelledby="headingOne" class="panel-collapse collapse in">
	            <div class="panel-body">
	                ...
	            </div>
	        </div>
	    </div>
	    <div class="panel panel-default">
	        <div id="headingTwo" role="tab" class="panel-heading">
	            <h4 class="panel-title">
	                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" class="collapsed">
	                  Helpful Resources for Authors & for marketers
	                </a>
	            </h4>
	        </div>
	        <div id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo" class="panel-collapse collapse">
	            <div class="panel-body">
	                ...
	            </div>
	        </div>
	    </div>
	    <div class="panel panel-default">
	        <div id="headingThree" role="tab" class="panel-heading">
	            <h4 class="panel-title">
	                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree" class="collapsed">
	                  How much money can I make?
	                </a>
	            </h4>
	        </div>
	        <div id="collapseThree" role="tabpanel" aria-labelledby="headingThree" class="panel-collapse collapse">
	            <div class="panel-body">
	                ...
	            </div>
	        </div>
	    </div>
	    <div class="panel panel-default">
	        <div id="headingFour" role="tab" class="panel-heading">
	            <h4 class="panel-title">
	                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour" class="collapsed">
	                  Can I offer my items for free on a promotional basis?
	                </a>
	            </h4>
	        </div>
	        <div id="collapseFour" role="tabpanel" aria-labelledby="headingFour" class="panel-collapse collapse">
	            <div class="panel-body">
	                ...
	        </div>
	    </div>
	</div>

Icons

Only one type of icon set is used in Mountain.

Twitter Feed

To use Twitter Feed, you have to change the data-username="yourusername" in HTML file.

<div id="twitter-widget" class="twitter-widget mountainWidget">
    <h4>Twitter Widget</h4>
    <div class="line"></div>
    <ul data-username="wahidpolin" data-count="8" class="twitter-feed"></ul>
 </div>

Instagram Feed

To use Instagram Feed, Change the clientId in main.js.

/*=====================================================
    Instagram Feed
========================================================*/

(function(){

    if($("#instafeed").length == 0) return;

    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'nature',
        limit: 6,
        clientId: 'fa06c7e2c5d24947907f097b79d0f99a'
    });
    feed.run();


})();

For more detalis visit Instagram Feed.

Flickr Photostream

To use Flickr Photostream, you have to change the API key and the username in main.js first.

var flickerAPI = "https://api.flickr.com/services/rest/?api_key=7a2dc9bed9dc21700704f273faaf89d7&format=json&nojsoncallback=1";
  $.get( flickerAPI, {
    method: "flickr.people.findByUsername",
    format: "json",
    username: 'Dullface'
  })
    .done(function(data ) {
         //console.log(data.user.nsid);
      var flickerAPI = "https://api.flickr.com/services/rest/?api_key=7a2dc9bed9dc21700704f273faaf89d7&format=json&nojsoncallback=1";
      $.getJSON( flickerAPI, {
        format: "json",
        user_id : data.user.nsid,
         method: "flickr.people.getPublicPhotos",
         extras : "url_t, url_s, url_q, url_m, url_n, url_z, url_c, url_l, url_o"
      })
    .done(function( data ) {
        //console.log(data);
        var photos = data.photos.photo;
      $.each( photos, function( i, item ) {
        if(item.url_m){
          var singleImgWrap = "<a class='gallery-popup' href="+item.url_o+"><img class='img-responsive' src="+item.url_q+" /></a>";
          $(".flickr-photo-wrap").append(singleImgWrap)  
        }
        if ( i === 11 ) {
            //magnific popup
            $('.gallery-popup').magnificPopup({        
                type:'image',
                removalDelay: 300,
                mainClass: 'mfp-fade',
                 gallery:{
                    enabled:true
                  }
            });
          return false;
        }
      });
    });

For more detalis visit Flickr Photostream.

Libraries

Libraries are those which we called bower components. Either javascript or css or both are included in these libraries

  • Bootstrap - Most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • Bootstrap 3 RTL - RTL Theme for Bootstrap v3.x.
  • Animate.css - Just-add-water CSS animations
  • WOW.js - Animation Library
  • ionIcon - The premium icon font for Ionic framework.
  • jQuery - jQuery JavaScript Library.
  • OwlCarousel - Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
  • Waypoints - Makes it easy to execute a function whenever you scroll to an element.
  • gmaps.js - google maps api with less pain and more fun.

Initial Release V1.0

Released on 06 May, 2016

Version 1.1

Released on 08 May, 2016

  • Some Bugs are fixed
  • Gallery Masonry & Masonry portfolio is compitable with Mozill browser.
  • Color Picker works in every page
  • More functionable and lucrative header.

Version 1.2

Released on 26 May, 2016

  • Instagram feed is added
  • Flickr Photostream is added
  • Blog pages are integrated
  • Different kind of Menu Styles are introduced
  • Color Picker fixed
  • More functionable and lucrative header.
  • Coming Soon & Subscribe Page are added
  • 4 Corporate layouts & 2 Portfolio layouts

Version 2.0

Released on 20 June, 2016

  • 8 Niche Demos are introduced. More are coming soon
  • 3 Miscellaneous pages (Maintenance Page, Subscription Page & Registration Page) are added
  • New Menu Style (Menu-Overlay) is introduced
  • Landing Page layout is added
  • Around more than 40+ generic sections are added to make various kinds of beautiful pages.
  • Some minor bugs are fixed
  • More functionable and lucrative headers.

Version 2.5

- Mega Leap

Released on 8 August, 2016

  • 5 New Niche Demos. More are Coming soon
  • Log In page is added
  • New typography is introduced
  • Shortcodes will make your work easier
  • Some minor bugs are fixed
  • More functionable and lucrative headers.

Version 2.5.5

Released on 24 February, 2017

  • scss files are integrated
  • Some minor bugs are fixed