MultiHost

Hosting & Multipurpose HTML5 Template

Created: 14/11/2014
Latest Update: 14/11/2014
By: designthemes
Email: ram@iamdesigning.com

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Folder Structure

style.css - main style.css
The skins folder - contains the css for predefined skins that comes with the template.
The css folder - contains the css for all major browsers, prettyphoto & for the font awesome. - ( Please ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours. )
The fonts folder - contains the FontAwesome font files.
The images folder - contains all the images that are used in the stylesheets for the layout purpose & it has subfolder named post-images , which contains images used in post, pages and other areas
The js folder - contains javascript files & plugins ( Which includes)
1. jQuery framework (jquery.js)
2. Modernizr (modernizr-2.6.2.min.js)
3. Isotope plugin (jquery.isotope.min.js)
4. CarouFredSel plugin (jquery.carouFredSel-6.2.0-packed.js)
5. Fitvids (jquery.fitvids.js)
6. Easing (jquery-easing.1.3.js)
7. Migrate (jquery-migrate-1.2.1.min.js)
8. Mobile Menu (jquery.dlmenu.js)
9. One Page (jquery.nav.min.js, jquery.scrollTo.min.js)
10. Parallax (jquery.parallax-1.1.3.js)
11. PrettyPhoto (jquery.prettyPhoto.js)
12. Progress Chart (jquery.donutchart.js)
13. Sticky Navigation (jquery.sticky.js)
14. Tabs (jquery.tabs.min.js)
15. ToolTip (jquery.tipTip.minified.js)
16. Go to Top plugin (jquery.ui.totop.min.js)
17. Inview plugin for animation purpose (inview.js)
18. Form Validation (jquery.validate.min.js)
19. Animate Number plugin (jquery.animateNumber.min.js)
20. BX Slider plugin (jquery.bxslider.js)
21. For LayerSlider
  1. greensock.js
  2. layerslider.kreaturamedia.jquery.js
  3. layerslider.transitions.js
22. For Revolution Slider
  1. jquery.themepunch.revolution.min
  2. jquery.themepunch.tools.min
23. For Twitter Feeds
  1. jquery.tweet.min.js
24. Google Map plugin (jquery.gmap.min.js)
25. And custom js (custom.js)

HTML Structure

Here is the HTML Structure of the Template (simplified):


<!-- **Wrapper** -->
<div class="wrapper">

    <!-- **Header Top Bar** -->
    <div id="bbar-wrapper">
            .	.	.	.	.
    </div><!-- **Header Top Bar - End** --> 
      	
	<!-- **Header Wrapper** -->
	<div id="header-wrapper">
    
        <!-- **Header** -->
        <header id="header">    
     
            <div class="container">
            
                <!-- **Logo** -->
                <div id="logo">
                    .	.	.	.	.
                </div><!-- **Logo Ends** -->    
                        
                <!-- **Main-Menu Navigation** -->
                <nav id="main-menu">
                    .	.	.	.	.
                </nav><!-- **Main-Menu Navigation Ends** -->     
                 
            </div>    	
            
        </header><!-- **Header Ends** -->
        
	</div><!-- **Header Wrapper Ends** -->        
    
    <!-- **Main** -->
    <div id="main">
    
    	<!-- **Slider Section** -->
    	<div id="slider">
            .	.	.	.	.
        </div><!-- **Slider Ends** -->       
        
        <!-- **Content Main** -->
        <section class="content-main">         
               
            <!-- **Container** -->
            <div class="container">   
                 
                <!-- **Primary Section** -->
                <div id="primary" class="content-full-width">     
                    .	.	.	.	.
                </div><!-- **Primary Ends** -->
                
            </div><!-- **Container Ends** -->
            
        </section><!-- ***Content Main Ends** -->     
               
    </div><!-- **Main Ends** -->
    
    <!-- **Footer** -->
    <footer id="footer">
    
    	<div class="container">
        	.	.	.	.	.
        </div>    
            
        <div class="copyright">  
        	.	.	.	.	.
        </div>
        
    </footer><!-- **Footer Ends** -->
	
</div><!-- **Wrapper Ends** -->

CSS files and Structure

The style.css is main css file used in this template. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

@import "css/reset.css";

	/*----*****---- << General >> ----*****----*/
	
	body styles comes here
	
	/*----*****---- << Fonts >> ----*****----*/
	
	Fonts styles comes here
	
	/*----*****---- << Headings >> ----*****----*/
	
	Heading styles comes here
	
	/*----*****---- << Text Elements >> ----*****----*/
	
	Text Elements styles comes here	
	
	/*----*****---- << Tables >> ----*****----*/
	
	Tables styles comes here	
	
	/*----*****---- << Columns >> ----*****----*/
	
	Columns styles comes here    
	
	/*----*****---- << Definition Lists >> ----*****----*/
	
	Definition Lists styles comes here
		
	/*----*****---- << Forms >> ----*****----*/
	
	Forms styles comes here
	
	/*----*****---- << Images >> ----*****----*/
	
	Images styles comes here
	
	/*----*****---- << PIE >> ----*****----*/
	
	PIE styles comes here    
	
	/*----*****---- << Transition >> ----*****----*/
	
	Transition styles comes here    
	
	/*----*****---- << Widgets >> ----*****----*/
	
	Widgets' styles comes here

	
/*----*****---- << Layout >> ----*****----*/

	/*----*****---- << Container >> ----*****----*/

	Container styles comes here
    
	/*----*****---- << Fullwidth Section >> ----*****----*/

	Fullwidth Section styles comes here   
    
	/*----*****---- << Preview - Landing Page >> ----*****----*/

	Landing Page styles comes here     
	
	/*----*****---- << Header >> ----*****----*/
	
	Header styles comes here
	
    /*----*****---- << Slider >> ----*****----*/
    
    Home styles comes here
    
    /*----*****---- << Breadcrumb section >> ----*****----*/
    
    Breadcrumb styles comes here    
    
    /*----*****---- << Blog >> ----*****----*/
    
    Blog styles comes here    
    
    /*----*****---- << Portfolio >> ----*****----*/
    
    Portfolio styles comes here    
    
    /*----*****---- << Side Navigation >> ----*****----*/
    
    Side Navigation styles comes here  
    
    /*----*****---- << Contact >> ----*****----*/
    
    Contact styles comes here      
    
    /*----*****---- << 404 >> ----*****----*/
    
    404 styles comes here    
    
    /*----*****---- << Carousel & Sliders >> ----*****----*/
    
    Partner Carousel styles comes here    
    
    /*----*****---- << Miscellaneous >> ----*****----*/
        
    Pagination, UI To-Top and other miscellenous styles comes here
    
    /*----*****---- << Footer >> ----*****----*/
    
    Footer styles comes here

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.

Javascript

This template imports following Javascript files.

jQuery framework (jquery.js)
Modernizr (modernizr-2.6.2.min.js)
Isotope plugin (jquery.isotope.min.js)
CarouFredSel plugin (jquery.carouFredSel-6.2.0-packed.js)
Fitvids (jquery.fitvids.js)
Easing (jquery-easing.1.3.js)
Migrate (jquery-migrate-1.2.1.min.js)
Mobile Menu (jquery.dlmenu.js)
One Page (jquery.nav.min.js, jquery.scrollTo.min.js)
Parallax (jquery.parallax-1.1.3.js)
PrettyPhoto (jquery.prettyPhoto.js)
Progress Chart (jquery.donutchart.js)
Sticky Navigation (jquery.sticky.js)
Tabs (jquery.tabs.min.js)
ToolTip (jquery.tipTip.minified.js)
Go to Top plugin (jquery.ui.totop.min.js)
Inview plugin for animation purpose (inview.js)
Form Validation (jquery.validate.min.js)
Animate Number plugin (jquery.animateNumber.min.js)
BX Slider plugin (jquery.bxslider.js)
For LayerSlider
1. greensock.js
2. layerslider.kreaturamedia.jquery.js
3. layerslider.transitions.js
For Revolution Slider
1. jquery.themepunch.revolution.min
2. jquery.themepunch.tools.min
For Twitter Feeds
1. jquery.tweet.min.js
Google Map plugin (jquery.gmap.min.js)
And custom js (custom.js)

Color Schemes

Our template comes with 20 predefined color variations. Please add this CSS below the shortcodes.css

    	Electric Blue		=		<link id="skin-css" href="skins/electricblue/style.css" rel="stylesheet" media="all" />
        Orange				=		<link id="skin-css" href="skins/orange/style.css" rel="stylesheet" media="all" />
        Cyan				=		<link id="skin-css" href="skins/cyan/style.css" rel="stylesheet" media="all" />
        Purple				=		<link id="skin-css" href="skins/purple/style.css" rel="stylesheet" media="all" />
        Red					=		<link id="skin-css" href="skins/red/style.css" rel="stylesheet" media="all" />
        Coral				=		<link id="skin-css" href="skins/coral/style.css" rel="stylesheet" media="all" />
        Dark Blue			=		<link id="skin-css" href="skins/darkblue/style.css" rel="stylesheet" media="all" />
        FernGreen			=		<link id="skin-css" href="skins/ferngreen/style.css" rel="stylesheet" media="all" />
        Dusk Blue			=		<link id="skin-css" href="skins/duskblue/style.css" rel="stylesheet" media="all" />
        Dark Magenta		=		<link id="skin-css" href="skins/darkmagenta/style.css" rel="stylesheet" media="all" />
        Lavender			=		<link id="skin-css" href="skins/lavender/style.css" rel="stylesheet" media="all" />
		Pink				=		<link id="skin-css" href="skins/pink/style.css" rel="stylesheet" media="all" /> 
        Light Green			=		<link id="skin-css" href="skins/lightgreen/style.css" rel="stylesheet" media="all" />     
        Lime Green			=		<link id="skin-css" href="skins/limegreen/style.css" rel="stylesheet" media="all" />  
        Ocean				=		<link id="skin-css" href="skins/ocean/style.css" rel="stylesheet" media="all" />  
        Royal Blue			=		<link id="skin-css" href="skins/royalblue/style.css" rel="stylesheet" media="all" />  
        Violet				=		<link id="skin-css" href="skins/violet/style.css" rel="stylesheet" media="all" />  
        Yellow				=		<link id="skin-css" href="skins/yellow/style.css" rel="stylesheet" media="all" /> 
        Salmon				=		<link id="skin-css" href="skins/salmon/style.css" rel="stylesheet" media="all" /> 
        Chocolate			=		<link id="skin-css" href="skins/chocolate/style.css" rel="stylesheet" media="all" />

Note - It is quite easy to change the color of any element such as background, font, link and etc..,

Setting up Blog & Portfolios

Setting up Blogs

You can show your blog in "Two column", "Three column", "Fullwidth" and "Thumb" manner.

    	/* === Columns ===*/
        /* 1. Column Classes  = dt-sc-one-column, dt-sc-one-half, dt-sc-one-third	*/
        /* 2. Blog Class  = blog-fullwidth, blog-thumb - Applicable for one-column only */

<div class="tpl-blog-holder apply-isotope">    
    <div class="column column-class blog-image-class">
        <!-- **Blog Entry** -->
        <article class="blog-entry post-format-class">                
            <div class="entry-thumb">
                <a href="blog-single.html" title=""> <img src="images/post-images/blog-fullwidth1.jpg" alt="" title="" /> </a>
                <span class="border-shape"> </span>
            </div>
           
            <div class="entry-details">                        
                <div class="entry-title">
                    <h3> <a href="blog-single.html" title="">	.	.	.	.	</a> </h3>
                </div>
                
                <div class="entry-body">
                    <p> .	.	.	.  </p>
                </div>
            </div>
                
            <div class="entry-meta">
                <div class="entry-format"> 
                    <a class="ico-format"> </a> 
                </div> 
                <ul >
                    <li >
                        <a href="#" title=""> <i class="icon-class"><i > author </a> 
                    </li>
                    
                    <li >
                        <a href="#" title=""> <i class="icon-class"><i > date </a> 
                    </li>
                    
                    <li >
                        <a href="#" title=""> <i class="icon-class"><i > comments </a> 
                    </li>                                
                    
                    <li >
                        <a href="#" title=""> <i class="icon-class"><i > tags </a> 
                    </li>                 
                    
                 </ul>
                </div>
            </div>   
                                     
        </article><!-- **Blog Entry - End** -->
    </div>   
</div>

Setting up Portfolios

You can show your portfolio in "Two", "Three" and "Four" columns manner.

    	/* === Columns ===*/
        /* Column Classes  = dt-sc-one-half, dt-sc-one-third, dt-sc-one-fourth	*/

Skeleton to add portfolio items

<div class="sorting-container">
    <a href="#" title="" class="active-sort" data-filter="*"> All </a>
    <a href="#" title="" data-filter=".photography"> Photography </a>
    <a href="#" title="" data-filter=".gallery"> Gallery </a>
    <a href="#" title="" data-filter=".design"> Design </a>
    <a href="#" title="" data-filter=".architecture"> Architecture </a>
</div>

<div class="portfolio-container isotope">    
    
    <div class="portfolio column-class isotope-item filter-class">
        <div class="portfolio-thumb">
            <img src=". . ." alt="" title="">
            <div class="image-overlay">
                <a href=". . ." data-gal="prettyPhoto[gallery]" title="" class="link"> <span class="icon-class"> </span> </a>
                <a href=". . ." target="_blank" title="" class="zoom"> <span class="icon-class"> </span> </a>
            </div>
        </div>
        <div class="portfolio-detail">
            <h3> <a href="portfolio-single.html" title=""> . . . </a> </h3>
            <span> . . . </span>
        </div>
    </div>
    
    <div class="portfolio column-class isotope-item filter-class">
        <div class="portfolio-thumb">
            <img src=". . ." alt="" title="">
            <div class="image-overlay">
                <a href=". . ." data-gal="prettyPhoto[gallery]" title="" class="link"> <span class="icon-class"> </span> </a>
                <a href=". . ." target="_blank" title="" class="zoom"> <span class="icon-class"> </span> </a>
            </div>
        </div>
        <div class="portfolio-detail">
            <h3> <a href="portfolio-single.html" title=""> . . . </a> </h3>
            <span> . . . </span>
        </div>
    </div>
    
</div>

Using Styled Elements

Buttons

You can choose from 20 pre-defined color variations with these buttons as we've provided in skins.

Code for Buttons:

 
      <a href="#" title="" class="dt-sc-button small color-class"">Small Button</a>
      <a href="#" title="" class="dt-sc-button medium color-class"">Medium Button</a>
      <a href="#" title="" class="dt-sc-button large color-class"">Large Button</a>
      <a href="#" title="" class="dt-sc-button xlarge color-class"">XLarge Button</a>

Horizontal Tabs

Here is the HTML structure for Framed Horizontal Tabs

<!-- **Tabs Container** -->            
<div class="dt-sc-tabs-container">
    <ul class="dt-sc-tabs-frame">
        <li><a class="current" href="#"> What is Lorem Ipsum? </a></li>
        <li><a href="#"> Why do we use it? </a></li>
    </ul>
    <div class="dt-sc-tabs-frame-content">
         . . . . . 
    </div>
    <div class="dt-sc-tabs-frame-content">
         . . . . . 
    </div>
</div><!-- **Tabs Container - End** -->

Here is the HTML structure for Frameless Horizontal Tabs

<!-- **Tabs Container** -->            
<div class="dt-sc-tabs-container">
    <ul class="dt-sc-tabs">
        <li><a class="current" href="#"> What is Lorem Ipsum? </a></li>
        <li><a href="#"> Why do we use it? </a></li>
    </ul>
    <div class="dt-sc-tabs-content">
         . . . . . 
    </div>
    <div class="dt-sc-tab-content">
         . . . . . 
    </div>
</div><!-- **Tabs Container - End** -->

Here is the HTML structure for another new type of Frameless Horizontal Tabs

<!-- **Tabs Container** -->            
<div class="dt-sc-tabs-container type2">
    <ul class="dt-sc-tabs">
        <li><a class="current" href="#"> What is Lorem Ipsum? </a></li>
        <li><a href="#"> Where does it comes from? </a></li>
        <li><a href="#"> Why do we use it? </a></li>
    </ul>
    <div class="dt-sc-tabs-content">
         . . . . . 
    </div>
    <div class="dt-sc-tab-content">
         . . . . . 
    </div>
    <div class="dt-sc-tab-content">
         . . . . . 
    </div>    
</div><!-- **Tabs Container - End** -->

Vertical Tabs

Here is the HTML structure for Vertical Tabs

<div class="dt-sc-tabs-vertical-container">
    <ul class="dt-sc-tabs-vertical-frame column-class">
        <li class="current" ><a class="current" href="#">What is Lorem Ipsum? </a></li>
         <li><a href="#">Where does it comes from? </a></li>
        <li><a href="#"> Why we do it </a></li>
    </ul>
    <div class="dt-sc-tabs-vertical-frame-content column-class">
         . . . . . 
    </div>
    <div class="dt-sc-tabs-vertical-frame-content column-class">
         . . . . . 
    </div>
    <div class="dt-sc-tabs-vertical-frame-content column-class">
         . . . . . 
    </div>
</div>

Accordions

Here is the HTML structure for Standard Accordions

<!-- **Toggle Frame Set** -->  
<div class="dt-sc-toggle-frame-set">
	<div class="dt-sc-toggle">
        <h5 class="dt-sc-toggle-accordion active"> <a href="#" title=""> . . . . . </a> </h5>
        <div class="dt-sc-toggle-content">
                . . . . . 
        </div>
    </div>
    
    <div class="dt-sc-toggle">
        <h5 class="dt-sc-toggle-accordion"> <a href="#" title=""> . . . . . </a> </h5>
        <div class="dt-sc-toggle-content">
                . . . . . 
        </div>
    </div>
    
    <div class="dt-sc-toggle">
        <h5 class="dt-sc-toggle-accordion"> <a href="#" title=""> . . . . . </a> </h5>
        <div class="dt-sc-toggle-content">
                . . . . . 
        </div>
    </div>
</div> <!-- **Toggle Frame Set - End** -->

Here is the HTML structure for Framed Accordions

<!-- **Toggle Frame Set** -->  
<div class="dt-sc-toggle-frame-set">
    <div class="dt-sc-toggle-frame">
        <h5 class="dt-sc-toggle-accordion active"> <a href="#" title=""> . . . . . </a> </h5>
        <div class="dt-sc-toggle-content">
            . . . . . 
        </div>
    </div>
    <div class="dt-sc-toggle-frame">
        <h5 class="dt-sc-toggle-accordion"> <a href="#" title=""> . . . . . </a> </h5>
        <div class="dt-sc-toggle-content">
            . . . . . 
        </div>
    </div>
	<div class="dt-sc-toggle-frame">
        <h5 class="dt-sc-toggle-accordion"> <a href="#" title=""> . . . . . </a> </h5>
        <div class="dt-sc-toggle-content">
            . . . . . 
        </div>
    </div>    
</div> <!-- **Toggle Frame Set - End** -->

Toggles

Here is the HTML structure for Standard Toggles

    <!-- **Toggle Frame Set** -->  
    <div class="dt-sc-toggle-frame-set">
    	<div class="dt-sc-toggle">
            <h5 class="dt-sc-toggle"> <a href="#" title="">  . . . . . . </a> </h5>
            <div class="dt-sc-toggle-content">
                <p> . . . . . . </p>
            </div>
        </div>
        
        <div class="dt-sc-toggle">
            <h5 class="dt-sc-toggle"> <a href="#" title=""> . . . . . . </a> </h5>
            <div class="dt-sc-toggle-content">
                <p> . . . . . . </p>
            </div>
        </div>
        
        <div class="dt-sc-toggle">
            <h5 class="dt-sc-toggle"> <a href="#" title=""> . . . . . . </a> </h5>
            <div class="dt-sc-toggle-content">
                <p> . . . . . . </p>
            </div>  
        </div>      
    </div> <!-- **Toggle Frame Set - End** -->

Here is the HTML structure for Framed Toggles

    
<!-- **Toggle Frame Set** -->  
<div class="dt-sc-toggle-frame-set">
    <div class="dt-sc-toggle-frame">
        <h5 class="dt-sc-toggle"> <a href="#" title=""> . . . . . . </a> </h5>
        <div class="dt-sc-toggle-content">
            <p> . . . . . . </p>
        </div>
    </div>
    <div class="dt-sc-toggle-frame">
        <h5 class="dt-sc-toggle"> <a href="#" title=""> . . . . . .
        <div class="dt-sc-toggle-content">
            <p> . . . . . . </p>
        </div>
    </div>
    <div class="dt-sc-toggle-frame">
        <h5 class="dt-sc-toggle"> <a href="#" title=""> . . . . . .
        <div class="dt-sc-toggle-content">
            <p> . . . . . . </p>
        </div>
    </div>    
</div> <!-- **Toggle Frame Set - End** -->

Progress Bars

Default

    <div class="dt-sc-progress progress-striped">
        <div data-value="60" class="dt-sc-bar">
            <div class="dt-sc-bar-text"> Photoshop <span> 60% </span> </div>
        </div>
    </div>

Striped

    <div class="dt-sc-progress dt-sc-progress-striped">
        <div data-value="50" class="dt-sc-bar">
            <div class="dt-sc-bar-text"> jQuery <span> 50% </span> </div>
        </div>
    </div>

Active

    <div class="dt-sc-progress dt-sc-progress-striped active">
        <div data-value="75" class="dt-sc-bar">
            <div class="dt-sc-bar-text"> Web Design <span> 75% </span> </div>
        </div>
    </div>

Default

    <div class="dt-sc-progress dt-sc-standard type2">
        <div data-value="90" class="dt-sc-bar">
            <div class="dt-sc-bar-text"> Photoshop <span> 90% </span> </div>
        </div>
    </div>

Striped

    <div class="dt-sc-progress dt-sc-progress-striped type2">
        <div data-value="70" class="dt-sc-bar">
            <div class="dt-sc-bar-text"> Wordpress <span> 75% </span> </div>
        </div>
    </div>

Active

    <div class="dt-sc-progress dt-sc-progress-striped active type2">
        <div data-value="80" class="dt-sc-bar">
            <div class="dt-sc-bar-text"> HTML / CSS <span> 85% </span> </div>
        </div>
    </div>

Pricing Tables

    <!-- **Pricing Table** -->
    <div class="dt-sc-pricing-table">
    
        <div class="column dt-sc-one-fourth first">
            <div class="dt-sc-pr-tb-col">
                <div class="dt-sc-tb-header">
                    <div class="price">
                        $40 <span> month </span>
                    </div>                
                    <div class="dt-sc-tb-title">
                        <h5> Basic </h5>
                    </div>
                    <div class="buy-now">
                        <a href="" title="" class="button small"> Buy Now </a>
                    </div>                    
                </div>
                <ul class="tb-content">
                    <li> 15 Projects </li>
                    <li> 10 GB Storage </li>
                    <li> No Time Tracking </li>
                    <li> Enhanced Security </li>
                    <li> Unlimited Users </li>
                    <li> And many other features </li>
                </ul>
            </div>                        
        </div>
        
        <div class="column dt-sc-one-fourth">
            <div class="dt-sc-pr-tb-col selected">
                <div class="dt-sc-tb-header">
                    <div class="price">
                        $60 <span> month </span>
                    </div>                
                    <div class="dt-sc-tb-title">
                        <h5> Medium </h5>
                    </div>
                    <div class="buy-now">
                        <a href="" title="" class="button small"> Buy Now </a>
                    </div>                    
                </div>
                <ul class="tb-content">
                    <li> 15 Projects </li>
                    <li> 10 GB Storage </li>
                    <li> No Time Tracking </li>
                    <li> Enhanced Security </li>
                    <li> Unlimited Users </li>
                    <li> And many other features </li>
                </ul>
            </div>                        
        </div>
        
        <div class="column dt-sc-one-fourth">
            <div class="dt-sc-pr-tb-col">
                <div class="dt-sc-tb-header">
                    <div class="price">
                        $75 <span> month </span>
                    </div>                
                    <div class="dt-sc-tb-title">
                        <h5> Advanced </h5>
                    </div>
                    <div class="buy-now">
                        <a href="" title="" class="button small"> Buy Now </a>
                    </div>                    
                </div>
                <ul class="tb-content">
                    <li> 15 Projects </li>
                    <li> 10 GB Storage </li>
                    <li> No Time Tracking </li>
                    <li> Enhanced Security </li>
                    <li> Unlimited Users </li>
                    <li> And many other features </li>
                </ul>
            </div>                        
        </div>
        
        <div class="column dt-sc-one-fourth">
            <div class="dt-sc-pr-tb-col">
                <div class="dt-sc-tb-header">
                    <div class="price">
                        $90 <span> month </span>
                    </div>                
                    <div class="dt-sc-tb-title">
                        <h5> Ultimate </h5>
                    </div>
                    <div class="buy-now">
                        <a href="" title="" class="button small"> Buy Now </a>
                    </div>                    
                </div>
                <ul class="tb-content">
                    <li> 15 Projects </li>
                    <li> 10 GB Storage </li>
                    <li> No Time Tracking </li>
                    <li> Enhanced Security </li>
                    <li> Unlimited Users </li>
                    <li> And many other features </li>
                </ul>
            </div>                        
        </div>        
        
    </div><!-- **Pricing Table - End** -->

    
     <div class="dt-sc-pricing-table type3">
        <div class="column dt-sc-one-fourth first">
            <div class="dt-sc-pr-tb-col">
                <div class="icon">
                	 <span>  <img src="" alt="#" > </span>
                </div>
                <h3> Basic </h3>
                <span>Neque porro quisquam est</span>;
                <div class="price"> <sup>$</sup> 625 <sub>/yr<sub> <del>$1100<del> </div>
				<a class="dt-sc-button medium" href="#"> See More <a>
            </div>                        
        </div>   
        
        <div class="column dt-sc-one-fourth">
            <div class="dt-sc-pr-tb-col">
                <div class="icon">
                	 <span>  <img src="" alt="" > </span>
                </div>
                <h3> Basic </h3>
                <span>Neque porro quisquam est</span>;
                <div class="price"> <sup>$</sup> 625 <sub>/yr<sub> <del>$1100<del> </div>
				<a class="dt-sc-button medium" href=""> See More <a>
            </div>                        
        </div>  
        
        <div class="column dt-sc-one-fourth">
            <div class="dt-sc-pr-tb-col selected">
                <div class="icon">
                	 <span>  <img src="" alt="" > </span>
                </div>
                <h3> Basic </h3>
                <span>Neque porro quisquam est</span>;
                <div class="price"> <sup>$</sup> 625 <sub>/yr<sub> <del>$1100<del> </div>
				<a class="dt-sc-button medium" href="#"> See More <a>
            </div>                        
        </div>  
        
        <div class="column dt-sc-one-fourth">
            <div class="dt-sc-pr-tb-col">
                <div class="icon">
                	 <span>  <img src="" alt="" > </span>
                </div>
                <h3> Basic </h3>
                <span>Neque porro quisquam est</span>;
                <div class="price"> <sup>$</sup> 625 <sub>/yr<sub> <del>$1100<del> </div>
				<a class="dt-sc-button medium" href="#"> See More <a>
            </div>                        
        </div>                          
         
     </div>

DonutChart

        
            
                Save
off
                
                    Monthly
                    Code: XF235
                    Has been the industry's standard dummy text ever since the 1500s.
                    Select
                
            
        
        
            
                Save
off
                
                    Quarterly
                    Code: XF235
                    Has been the industry's standard dummy text ever since the 1500s.
                    Select
                
            
        
        
            
                Save
off
                
                    Half Yearly
                    Code: XF235
                    Has been the industry's standard dummy text ever since the 1500s.
                    Select
                
            
        
        
            
                Save
off
                
                    Yearly
                    Code: XF235
                    Has been the industry's standard dummy text ever since the 1500s.
                    Select

Sliders

MultiHost HTML5 Template comes with an awesome premium sliders namely,

LayerSlider - How to use it?
Revolution Responsive jQuery Slider - How to use it?

1. Layer Slider - have a look at our demo

        
         
            
            
            
                
                    
                    Hosting starts from $3.50/month
                    Best price all round
                    We provide the best class 24/7 support 
to all your business
                    *Offer for a limited period
                    
                       Start Now  
                    
                    
                
                    
                
                    
                    
                    Best Performance & Best 
 Price Deal
                    
                    with superior support we provide
                    
                    
                           Shared Hosting 
                    
                    
                    
                     

                    
                    
                    
                    
                           VPS Hosting 
                    
                    
                    
                    
                           Dedicated Hosting 
                    
                
                
                
                    
                    High Performance Servers
                    @
                    Unbeatable Price
                    
                        
                    
                    
                      Unlimited Domain Hosting 
                    
                      Unlimited  Hosting Space 
                    
                      Unlimited  File Transfer 
                    
                      Unlimited  Email Accounts 
                    
                    $2.50*
                    Per Month
                    *Offer for a limited period
                    
                    
                     
                          View Plans

2. Revolution Slider - have a look at our demo

  

        
        
        
            
            
                
                    	
                        
                            
                            
                            
                    
                            
                            We provide the best support you'll ever need
                            
                    
                            
                             24-7 Support 
                            
                    
                            
                               Live Chat 
                            
                    
                            
                              (554) 124-1922 (Toll Free)
                            
                    
                            
                            
                            
                    
                            
                            or
                            
                    
                            
                            Click here to have a live chat with us
                            
                        
                        
                        
                        
                            
                            
                            
                    
                            
                            Best class hosting with lots of 
unlimited 
                    features only with us.

                            
                    
                            
                            MULTI - HOST
                            
                    
                            
                             per

                    month
                            
                    
                            
                               View Plans  
                            
                    
                            
                            
                            
                    
                            
                            
                    
                                    
                            
                    
                            
                            as low as
                            
                    
                            
                            $250
                            
                        
                        
                        
                            
                            
                            
                    
                            
                            
                            
                    
                            
                            Best price all round
                            
                    
                            
                            Fast & Secure Shared Hosting
                            
                    
                            
                            
                                  UNLIMITED Space & Bandwidth 

                                  FREE  Domain

                                  UNLIMITED  Domain Hosting

                                  FREE  Site Builders

                            
                    
                            
                            
                                  UNLIMITED  Email Accounts

                                  FREE  Online Store

                                  WORDPRESS GALLERY & More

                                  cPANEL Interface

                            
                    
                            
                               View Plans

Contact Form

We have used form in contact pages

Here is the basic skeleton of the form:

    <div id="ajax_contact_msg"></div>
    <form class="contact-frm" name="frmcontact" action="php/send.php" method="post" novalidate="novalidate">
    
        <p class="column-class">
            <input type="text" required="" placeholder="Your Name (required)" name="txtname" >
        </p>
        
        <p class="column-class">
            <input type="email" placeholder="Your Email (required)" name="txtemail">
        </p>
        
        <p class="clear">
            <textarea required="" placeholder="Your Message (required)" name="txtmessage" ></textarea>
        </p>
        
        <p><input  class="dt-sc-button small" type="submit" value="Submit" name="btnsend" ></p>            
        
    </form>

Note:

How to change the to email address( to address only receives email)

Please open "php/send.php" and find Line.No: 4 to change it as below

$to = 'xxx@xxx.xx'; #Replace your email id

Google Map Setup

1. Please find the "custom.js" file from the template directory at "js/custom.js"
2. Find the script (Line.No: 76 - 83) for Google Map.
3. Please Change your address here to show your map in contact page.
Kindly refer below screenshot.

Fonts

We have used Google Fonts in our template. You can use any google font by doing the following changes :

1. Please replace the following lines in all layout files.

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'/>

2. Find the following lines in style.css and replace with your new font family.

body, input[type=text], input[type=password], input[type=email], input[type=tel], input.text, input[type=submit], select, textarea { font-family:'Ubuntu', Arial, Helvetica, Sans-serif; }

Source & Credits

Thanks so much to

jQuery

jQuery Easing Plugin

Fontawesome

BX Slider

G Map

Isotope

Parallax

jQuery Tabs

PrettyPhoto

Revolution Slider

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help, if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

BuddhaThemes