Mountain - The Minimal Portfolio Template for Inspiration

  • Version: 1.0.0
  • Last Updated: 07/02/2016
  • Author: Themesflat
Thank you so much for your interests. Your comments and ratings would be much appreciated. If you purchase this template, you will get support. We will update this template time by time and we want to hear your wishes for the future updates or for complete new templates. You need file images please contact via skyper:ghp_c1 or email themesflat@gmail.com we will send this for you. If you like this template, don’t forget to rate it 5 stars

Template features:

  • Bootstrap 3 Framework
  • jQuery 1.11.2
  • HTML5 & CSS3
  • Responsive Template
  • Free Fonts used
  • Pixel Perfect
  • Clean & Unique Design
  • Developer Friendly Code
  • Working PHP Contact Form
  • Custom Shortcodes
  • Multi-Pages
  • Easy Customizer
  • Fully Customizable
  • Browser Compatibility
  • Responsive Carousel
  • Clean Code
  • Clean Design
  • W3C Validation
  • Parallax Section
  • Documentation
  • & much more...

HTML Structure

Following the modern, elegant and minimalist style, Mountain is more than a beautiful portfolio with journal blog and WooCommerce store integrated, which is ideal to build creative page for individual or start-up.

The simple but versatile design of Mountain offers you 12+ layouts of grid, masonry, gallery, justify styles, making it effortless to create your showcase. Moreover, this theme’s packed with many essential feature such as fully responsive, mobile friendly, site speed & SEO optimal, Working PHP Contact Form

Below is Mountain basic structure:

<!DOCTYPE html>
	<head>
	    <meta charset="utf-8">
	    <title>Mountain - The Minimal Portfolio Template for Inspirations</title>

	    <!-- Mobile Specific Metas -->

	    <!-- Bootstrap  -->

	    <!-- Theme Style -->

	    <!-- Responsive -->	    
	   
	    <!-- Animation Style -->    

	    <!-- Favicon and touch icons  -->
	</head>

	<body>

		<!-- Top -->
		<div class="top"> </div>

		<!-- Header -->
		<div class="header"> </div>

		<!-- Slide -->
		<div class="tp-banner-container"> </div>

	    <!-- Section -->
	    <section class="flat-row"> </section>

	    <!-- Footer -->
	    <footer class="footer"> </footer>

	   	<!-- Bottom -->
	   	<div class="bottom"> </div>

	   	<!-- Go Top -->
	    <a class="go-top">
	     	<i class="fa fa-angle-up"></i>
	    </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.flexslider-min.js"></script>
	   	<script type="text/javascript" src="javascript/jquery-waypoints.js"></script>
	    <script type="text/javascript" src="javascript/jquery.cookie.js"></script>
	    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>   
	   	<script type="text/javascript" src="javascript/gmap3.min.js"></script>
	   	<script type="text/javascript" src="javascript/jquery.fitvids.js"></script>   
	   	<script type="text/javascript" src="javascript/parallax.js"></script>   	   	
	   	<script type="text/javascript" src="javascript/switcher.js"></script>
	   	<script type="text/javascript" src="javascript/jquery-validate.js"></script>	   	
	   	<script type="text/javascript" src="javascript/main.js"></script>	

		<!-- Revolution Slider -->
		<script type="text/javascript" src="javascript/jquery.themepunch.tools.min.js"></script>
		<script type="text/javascript" src="javascript/jquery.themepunch.revolution.min.js"></script>
		<script type="text/javascript" src="javascript/slider.js"></script>

	</body>
	</html>

CSS System

The Mountain CSS System contains 3 parts:
  • Theme style
  • Shortcodes style
  • Responsive style
  • Javascript - Fonts - Animation - Bootstrap style

Style.css ( Theme style )


/**
  * Reset
  * Repeatable Patterns
  * Header
  * Page title
  * Breadcrumbs
  * Blog-lager  
  * Blog single
  * Blog masory
  * Navigation
  * Pagination
  * Widgets
  * Off-Canvas
  * GoTop button
  * Footer
  * Parallax  
  * Revolution Slider
  * Switcher  
*/

Shortcodes.css ( Shortcodes - Elements style )

You can easily use the shortcodes to create your own page.


/**  
  * Row
  * Flat divider
  * Grid simple layout
  * Gallery alt layout
  * Gallery list
  * Justify Layout
  * Contact
  * About 
  * Woocommerce shop
  * Shop Detail
  * Infor slider
  * Flat Information
  * Flat-Preloader
*/

Javascript - Fonts - Animation - Bootstrap style

/**  
  * icomoon.css
  * flexslider.css
  * font-awesome.css

  * owl.carousel.css
  * revolution-slider.css

  * animate.css
  * shortcodes.css
  * responsive.css

  * bootstrap.css 
  * woocommerce.css
*/

Javascript Custom

Here you can modify any settings for ( Retina Logos, Animations, Testimonials, Sliders, Twitter, Flickr Widget & Progress bar and more..)
Change Icon for map go to Main.js ( javascript/main.js ) find line 682 icon: 'http://themesflat.com/html/Mountain/images/map.png' replace url images

Main.js ( javascript/main.js )


/**
  * isMobile
  * responsiveMenu
  * simpleSlider
  * popupGallery
  * headerFixed
  * iconCanvasClick
  * iconSearchClick
  * iconFilterClick
  * parallax
  * Carousel_slider
  * blogMasory
  * Masonry_GalleryGrid
  * projectIsotope
  * flatAnimation
  * ajaxContactForm
  * alertBox
  * WoocommerceSlider
  * Flexslider_Images
  * goTop
  * swClick
  * removePreloader
*/

Shortcodes System

You can easily use the shortcodes to create your own page. Details at here

    
/**  
  * Row
  * Flat divider
  * Grid simple layout
  * Gallery alt layout
  * Gallery list
  * Justify Layout
  * Contact
  * About 
  * Woocommerce shop
  * Shop Detail
  * Infor slider
  * Flat Information
  * Flat-Preloader
*/

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.

Config.php ( contact/config.php )


$address = "themesflat@gmail.com";

Credits