After unzip the download pack, you'll found a Template Folder with all the files.

Template Files

• Assets
  Contains graphic files PSD to edit the template.
• Documentation
  Contains the current help file that comes with the template.
• HTML
  Here are all the template files you'll need to get started.
• License
  Licensing information files.

Teplate Installation

In Local

You can view this Template in any browser, you can display or edit the Template without an internet connection.

The only section that will not work is the Contact Section which contains PHP code and requires a server enviroment for send messages.

In Remote

Open your FTP Client (like Filezilla) and upload the content of the HTML folder on your server root.

Once the files are done uploading go to www.yourdomainname.com/index.html

Change the font

By default, the template loads this font from Google Web Fonts Services, you can change the font with the one that suits you best.

 
                                   
                            
                            @import url(http://fonts.googleapis.com/css?family=Raleway:400,100,300,500,700,900);


                        

Remember to change the font family into head of style.css

                            
                              #header, #feature, #about, #testimonial, #screenshots, #image, #video, #newsletter, #download, #social {
                                font-family: 'Raleway', sans-serif;
                            }
                            


                        

By default, the template loads this color scheme, you can change the scheme color with the one of those available.

Introduction to LESS files

Alternatively you can use the LESS file included in the template. HTML > inc > less

Related Links

If you are not familiar with this new CSS technique, should read this posts:
www.hongkiat.com/blog/less-basic/
www.smashingmagazine.com/using-the-less-css-preprocessor-for-smarter-style-sheets/
www.youtube.com/watch?v=pw45u8lh-bw

How to use

By default, the template loads and ready to use all icons by GlyphIcons and Font Awesome. Include them is very simple:

Method 1

This works slightly differently, by:

Method 2

                            
                            


                            

                            span.icon { 
                                font-family: 'Glyphicons Halflings'; 
                            }
                             
                               

                            span.icon-2 { 
                                font-family: FontAwesome; 
                            }
                        

Next, the HTML Entity part:

                            

                            &# xf015; 


                             

                            &# xe021; 
        
                        

Method 3

Or including the rendering of the icon before the content using the :before CSS psuedo-element.

                            
                            


                            

                            span.icon:before { 
                                font-family: 'Glyphicons Halflings'; 
                                content: "\f015"; 
                            }


                            

                            span.icon-2:before { 
                                font-family: 'FontAwesome;'; 
                                content: "\f015"; 
                            }
        
                        

To add this icon to a page, add this HTML tag anywhere in the body of your page.

Related Links

www.getbootstrap.com/components/#glyphicons
www.fortawesome.github.io/Font-Awesome/
www.glyphicons.bootstrapcheatsheets.com/

FlexSlider 2

Flex Slider by Woo Theme, is the best responsive slider. In the Ultimate Flat is ready to use

How to use

To add or remove slides, we must act sull'elengo < li > < /li >

You can also set the advanced behaviors of the slide, changing the parameters in the file inc > js > main.js the line:

                            


                            $(window).load(function() {
                            $('.flexslider').flexslider({
                                animation: "slide",
                                animationLoop: false,
                                smoothHeight: true,
                                touch: true,
                                itemWidth: 120,
                                itemMargin: 2,
                                move: 2,
                                minItems: 1,
                                maxItems: 3
                              });
                            });




                        

OWL Carousel

OWL Carousel is touch enabled jQuery plugin that lets you create beautiful responsive carousel slider

How to use

To add or remove slides, we must act sull'elengo < li > < /li >

p>You can also set the advanced behaviors of the slide, changing the parameters in the file inc > js > main.js the line:

                            


                            $(document).ready(function() { 
                            $("#owl-screenshot").owlCarousel({
                                 
                                items : 5, //10 items above 1000px browser width
                                itemsDesktop : [1000,4], //5 items between 1000px and 901px
                                itemsDesktopSmall : [900,3], // betweem 900px and 601px
                                itemsTablet: [600,2], //2 items between 600 and 0
                                itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option

                                 
                              })
                            });

                        

Related Links

http://flexslider.woothemes.com/
https://github.com/woothemes/FlexSlider
http://owlgraphic.com/owlcarousel/
https://github.com/OwlFonk/OwlCarousel