Sobre HTML Documentation

Thank you for purchasing our template. If you have any questions regarding our product feel free to visit our support forum

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
/video - folder with videos
/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.


      <header class="nav-type-1">
      
        <nav class="navbar">
          <div class="header-wrap relative">

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

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

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

Dark Scheme

To apply the dark scheme just add class dark to the body element.


      <body class="relative dark">

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/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

Credits

Support

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