Loading...

# Getting Started

Unzip files from archive and you will find Html folder. Inside you'll find following files and folders:

- /css - folder with css files
- /fonts - folder with icon fonts
- /img - folder with all images
- /js - folder with jQuery script files
- contact.php - file for contact form

Note: Contact form will not work offline. You must upload your website on a server with support of PHP and PHP mail() function.

# Navigation

Basic navigation structure consist of the following code. To make navigation non sticky, remove id="sticky-nav" from navigation.

          <header class="nav-type-1">

            <div class="search-wrap">
              ...
            </div>

            <div class="top-bar hidden-xs">
              ...
            </div>

            <nav class="navbar navbar-static-top">
              <div class="navigation" id="sticky-nav">
                <div class="container relative">
                  <div class="row flex-parent">

                    <div class="navbar-header">
                      <!-- Logo -->
                      <div class="logo-container">
                        ...
                      </div>
                    </div> <!-- end navbar-header -->

                    <div class="nav-wrap flex-child">
                      <div class="collapse navbar-collapse text-center" id="navbar-collapse">

                        <ul class="nav navbar-nav">
                          ...
                        </ul>
                      </div>
                    </div> <!-- end nav-wrap -->

                    <div class="flex-child flex-right nav-right hidden-sm hidden-xs">
                      ...
                    </div>

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

# Contact Form

Open contact.php with any text editor and paste your email address in line 4. Save it.

    $to = "testemail@gmail.com"; // Your email here

Note: Contact form will not work offline. You must upload your website on a server with support of PHP and PHP mail() function.

#### For DreamHost users

If you can't receive email, open contact.php and remove line 45:

    $headers = 'From: ' . $mail .''. "\r\n".

# Google Map

Paste your address in data-address attribute in the Google map div

          <div id="google-map" class="gmap" data-address="V Tytana St, Manila, Philippines"></div>

#### API key

Starting from July 2016, Google maps API will require a key, which you can get free. Just follow the instructions - here
When you have your key, paste it in Google maps script

          <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=PASTE-YOUR-KEY-HERE"></script>

#### Google map script

The Google map code is located after all other scripts in the bottom part of html.

        <!-- jQuery Scripts -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
        <script type="text/javascript" src="js/gmap3.js"></script>
        <script type="text/javascript" src="js/plugins.js"></script>
        <script type="text/javascript" src="js/twitterFetcher_min.js"></script>
        <script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script>
        <script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
        <script type="text/javascript" src="js/rev-slider.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>

        <!-- Google Map -->
        <script type="text/javascript">
          $(document).ready( function(){

            var gmapDiv = $("#google-map");
            var gmapMarker = gmapDiv.attr("data-address");

            gmapDiv.gmap3({
              zoom: 16,
              address: gmapMarker,
              oomControl: true,
              navigationControl: true,
              scrollwheel: false,
              styles: [
                {
                "featureType":"all",
                "elementType":"all",
                  "stylers":[
                    { "saturation":"0" }
                  ]
              }]
            })
            .marker({
              address: gmapMarker,
              icon: "img/map_pin.png"
            })
            .infowindow({
              content: "V Tytana St, Manila, Philippines"
            })
            .then(function (infowindow) {
              var map = this.get(0);
              var marker = this.get(1);
              marker.addListener('click', function() {
                infowindow.open(map, marker);
              });
            });
          });
        </script>

To get Lat/Long, here is the - great service

Full list of features can be found - here

# Twitter feed

First you need to get your twitter id, you need to create it in your profile - link. Click Create new widget. Once you have it, paste your twitter id in data-twitter-id attribute

          <div id="tweets" data-twitter-id="594366594521804800" class="col-md-12"></div>

# Credits

- jQuery
- Bootstrap
- gMap3
- Images loaded
- Isotope
- Appear
- Easing
- Fitvids
- FlexSlider
- Owl carousel
- Flickity slider
- Magnific popup
- Twitter post fetcher
- Smooth Scroll

# Support

If you have any question feel free to visit our Support Forum