View file It's Me/doc/help.html

File size: 34.36Kb
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>It's Me</title>

    <!-- Bootstrap -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/shi_default.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
      body{
        line-height: 24px;
        letter-spacing: 0.3px;
        font-family: 'Raleway', sans-serif;
      }
      h1, h2,h3,h4,h5,h6{
        font-family: 'Raleway', sans-serif;
      }

      .nav-left{
        position: fixed;
        height: 100%;
        left: 0;
        width: 250px;
        border-right: 1px solid #ddd;
        background: #f2f2f2;
      }
      .author{
        border-bottom: 1px solid #ddd;
        display: block;
        margin-bottom: 30px;
      }
      .author img{
        width: 100%;        
      }

      .main-navigation{
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .main-navigation li{
        display: block;
      }

      .main-navigation li a{
        transition: all 0.6s ease 0s;
        padding: 9px 25px;
        border-left: 5px solid transparent;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
        display: block;
        color: #5C88AC;
      }



      .main-navigation li.active a, .main-navigation li a:hover{
        background: #fff;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-left: 5px solid #ddd;
      }

      .body-content{
        margin-left: 250px;
        padding: 0 50px;
      }

      .content{
        padding-top: 113px;
        padding-bottom: 50px;
      }

      .content img{
        max-width: 100%;
      }

      .no-mt{
        margin-top: 0;
      }

      .pr-name{
        font-weight: 700;
        color: #5C88AC;
        font-size: 40px;
      }

      .title{
        font-weight: 700;
        color: #5C88AC;
        margin-bottom: 30px;
      }

      .color2{
        color: #999;
      }

      .white-space-30{
        height: 30px;
      }

      .bold{
        font-weight: 700;
      }
      .page{
        border-bottom: 1px solid #ddd;
      }

      .btn{
        border-radius: 0;
      }
    </style>
  </head>
  <body  data-spy="scroll" data-target="#navbar-page" data-offset='100'>

    <div class="nav-left">
      <h1 class="no-mt"><a href="http://themeforest.net/user/yobithemes?ref=yobithemes" class="author"><img src="img/author.png" alt="" ></a></h1>


      <div id="navbar-page">
        <ul class="main-navigation nav">
          <li><a href="#start" class="inner-link">Start</a></li>
          <li><a href="#structure"  class="inner-link">Structure</a></li>
          <li><a href="#style"  class="inner-link">CSS</a></li>
          <li><a href="#javascript"  class="inner-link">JS</a></li>
          <li><a href="#work"  class="inner-link">Portfolio</a></li>
          <li><a href="#googlemap" class="inner-link">Google Map</a></li>
          <li><a href="#contact_form"  class="inner-link">Contact Form</a></li>
          <li><a href="#change_log"  class="inner-link">Change log</a></li>
          <li><a href="#credits"  class="inner-link">Credits and Sources</a></li>
          <li><a href="#thankyou"  class="inner-link">Thank You</a></li>   
        </ul>
      </div>

    </div>
    <div class="body-content">
      <section id="start" class="page">
        <div class="content">
          <h1 class="no-mt pr-name">It's Me - Personal Resume and Portfolio</h1>
          <h4 class="color2">HTML Template Documentation v1.1</h4>

          <div class="white-space-30"></div>
          <p>
            <span class="bold">Created:</span> 11 July 2015<br>
            <span class="bold">By:</span> yobithemes<br>
            <span class="bold">eMail:</span> <a href="mailto:yobi.studio@gmail.com">yobi.studio@gmail.com</a><br/>
            <span class="bold">Skype:</span> yobi.setiawan<br>
          </p>
          <p >
            Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to write an email, contact via themeforest user page or add my skype faster support .
          </p>
          <br/>
          <a class="btn btn-default" href="mailto:yobi.studio@gmail.com">Support via eMail</a>
          <a class="btn btn-default" href="http://themeforest.net/user/yobithemes?ref=yobithemes">Go to Themeforest</a>
        </div>
      </section>

      <section id="structure" class="page">
        <div class="content">
          <h2 class="no-mt title">HTML Structure</h2>
          <p>This theme is a responsive layout and using <a href="http://getbootstrap.com/">Bootstrap v3.x</a> as css frameworks.</p>
          <p>Here is the general structure of HTML page.</p>
          <div class="snippet-container"><div class="sh_default snippet-wrap"><div class="snippet-menu sh_sourceCode"><a class="snippet-window sh_url" href="#">pop-up</a><a class="snippet-text sh_url" href="#">text</a></div><pre class="shi_pre sh_html snippet-formatted sh_sourceCode"><ol class="snippet-num"><li><span class="sh_preproc">&lt;!DOCTYPE</span> <span class="sh_type">html</span><span class="sh_preproc">&gt;</span></li><li><span class="sh_keyword">&lt;html</span> <span class="sh_type">lang</span><span class="sh_symbol">=</span><span class="sh_string">"en"</span><span class="sh_keyword">&gt;</span></li><li>  <span class="sh_keyword">&lt;head&gt;</span></li><li>     {{css load}}</li><li>  <span class="sh_keyword">&lt;/head&gt;</span></li><li>  <span class="sh_keyword">&lt;body&gt;</span></li><li>    </li><li>    <span class="sh_comment">&lt;!-- Page Loader --&gt;</span></li><li>    <span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"page-loader"</span><span class="sh_keyword">&gt;</span></li><li>      {{page loader}}</li><li>    <span class="sh_keyword">&lt;/div&gt;</span><span class="sh_comment">&lt;!-- End Page Loader --&gt;</span></li><li>    <span class="sh_comment">&lt;!-- body-area --&gt;</span></li><li>    <span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"body-area"</span><span class="sh_keyword">&gt;</span></li><li>      <span class="sh_comment">&lt;!-- Header --&gt;</span></li><li>      <span class="sh_keyword">&lt;header</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"main-header"</span><span class="sh_keyword">&gt;</span></li><li>        {{header content}}</li><li>      <span class="sh_keyword">&lt;/header&gt;</span><span class="sh_comment">&lt;!-- end HEader --&gt;</span>  </li><li>      <span class="sh_comment">&lt;!-- Content body --&gt;</span></li><li>      <span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"content-body"</span><span class="sh_keyword">&gt;</span></li><li>        {{page content}}</li><li>      <span class="sh_keyword">&lt;/div&gt;</span><span class="sh_comment">&lt;!-- end Content body --&gt;</span></li><li></li><li>      <span class="sh_comment">&lt;!-- footer --&gt;</span></li><li>      <span class="sh_keyword">&lt;footer</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"main-footer"</span><span class="sh_keyword">&gt;</span></li><li>        {{footer content}}</li><li>      <span class="sh_keyword">&lt;/footer&gt;</span><span class="sh_comment">&lt;!-- footer --&gt;</span></li><li>    <span class="sh_keyword">&lt;/div&gt;</span><span class="sh_comment">&lt;!-- body-area --&gt;</span></li><li>    </li><li>    {{js load}}</li><li>  <span class="sh_keyword">&lt;/body&gt;</span></li><li><span class="sh_keyword">&lt;/html&gt;</span></li></ol></pre><pre class="snippet-textonly sh_sourceCode" style="display:none;" tabindex="0" contenteditable="">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
     {{css load}}
  &lt;/head&gt;
  &lt;body&gt;
    
    &lt;!-- Page Loader --&gt;
    &lt;div class="page-loader"&gt;
      {{page loader}}
    &lt;/div&gt;&lt;!-- End Page Loader --&gt;
    &lt;!-- body-area --&gt;
    &lt;div class="body-area"&gt;
      &lt;!-- Header --&gt;
      &lt;header class="main-header"&gt;
        {{header content}}
      &lt;/header&gt;&lt;!-- end HEader --&gt;  
      &lt;!-- Content body --&gt;
      &lt;div class="content-body"&gt;
        {{page content}}
      &lt;/div&gt;&lt;!-- end Content body --&gt;

      &lt;!-- footer --&gt;
      &lt;footer class="main-footer"&gt;
        {{footer content}}
      &lt;/footer&gt;&lt;!-- footer --&gt;
    &lt;/div&gt;&lt;!-- body-area --&gt;
    
    {{js load}}
  &lt;/body&gt;
&lt;/html&gt;</pre></div></div>
        </div>
      </section>



      <section id="style" class="page">
        <div class="content">
          <h2 class="no-mt title">Stylesheets</h2>

          <h3>Files</h3>

          <p>This theme imports CSS files.</p>

          <p >
            <span class="bold color2">external css:</span><br/>
            <span class="bold">1. bootstrap.min.css</span> - framework<br>
            <span class="bold">2. font-awesome.min.css</span> - font icons<br>
            <span class="bold">3. jquery.simpleCaptcha.css</span> - captcha<br>
            <span class="bold">4. magnific-popup.css</span> - popup <br>
            <br>
            <span class="bold color2">template style :</span><br/>
            <span class="bold">5. style.css</span> theme style<br>
            <span class="bold">6  theme-custom.css</span> - place your style<br>
          </p>


          <div class="white-space-30"></div>
          <h4 >style.css includes:</h4>


          <div class="snippet-container"><div class="sh_default snippet-wrap"><div class="snippet-menu sh_sourceCode"><a class="snippet-window sh_url" href="#">pop-up</a><a class="snippet-text sh_url" href="#">text</a></div><pre class="shi_pre sh_c snippet-formatted sh_sourceCode"><ol class="snippet-num"><li></li><li><span class="sh_comment">/* TABLE OF CONTENTS</span></li><li><span class="sh_comment">1) Body</span></li><li><span class="sh_comment">2) Page Loader</span></li><li><span class="sh_comment">3) Helper</span></li><li><span class="sh_comment">4) Typography</span></li><li><span class="sh_comment">5) Main Header</span></li><li><span class="sh_comment">6) Hero</span></li><li><span class="sh_comment">7) Sections</span></li><li><span class="sh_comment"> 7.a) background</span></li><li><span class="sh_comment"> 7.b) descmini</span></li><li><span class="sh_comment"> 7.c) resume</span></li><li><span class="sh_comment"> 7.d) pie</span></li><li><span class="sh_comment"> 7.e) gallery</span></li><li><span class="sh_comment"> 7.f) team</span></li><li><span class="sh_comment"> 7.g) testimonial</span></li><li><span class="sh_comment"> 7.h) service</span></li><li><span class="sh_comment"> 7.i) video</span></li><li><span class="sh_comment"> 7.j) map</span></li><li><span class="sh_comment"> 7.k) blog</span></li><li><span class="sh_comment">8) Components</span></li><li><span class="sh_comment"> 8.a) btn</span></li><li><span class="sh_comment"> 8.b) progress</span></li><li><span class="sh_comment"> 8.c) form</span></li><li><span class="sh_comment"> 8.d) tabs</span></li><li><span class="sh_comment"> 8.e) nav</span></li><li><span class="sh_comment"> 8.f) modal </span></li><li><span class="sh_comment"> 8.g) panel</span></li><li><span class="sh_comment"> 8.h) magnific-popup</span></li><li><span class="sh_comment">9) Main Footer</span></li><li><span class="sh_comment">10) Extra Pages</span></li><li></li><li></li><li><span class="sh_comment">* */</span></li></ol></pre><pre class="snippet-textonly sh_sourceCode" style="display:none;" tabindex="0" contenteditable="">/* TABLE OF CONTENTS
1) Body
2) Page Loader
3) Helper
4) Typography
5) Main Header
6) Hero
7) Sections
 7.a) background
 7.b) descmini
 7.c) resume
 7.d) pie
 7.e) gallery
 7.f) team
 7.g) testimonial
 7.h) service
 7.i) video
 7.j) map
 7.k) blog
8) Components
 8.a) btn
 8.b) progress
 8.c) form
 8.d) tabs
 8.e) nav
 8.f) modal 
 8.g) panel
 8.h) magnific-popup
9) Main Footer
10) Extra Pages


* */</pre></div></div>
        </div>
      </section>

      <section id="javascript" class="page">
        <div class="content">
          <h2 class="no-mt title">Javascript</h2>
          <h3>Files</h3>
          <p>This theme imports Javascript files.</p>

          <h3></h3>





          <p >
            <span class="bold color2">Plugins,  You do not need to edit these items.</span> <br>
            <span class="bold">1. jquery.min.js</span> - jQuery<br>
            <span class="bold">2. jquery.easing-1.3.pack.js</span> - jQuery Easing<br>
            <span class="bold">3. bootstrap.min.js</span> -  Jquery Bootstrap Framework<br>
            <span class="bold">4. jquery.easypiechart.min.js</span> - Jquery Pie Chart<br>
            <span class="bold">5. isotope.pkgd.min.js</span> - Jquery Filter & sort magical layouts<br>
            <span class="bold">6. jquery.validate.min.js</span> - Jquery Form Validation<br>
            <span class="bold">7. jquery.simpleCaptcha.js</span> - Captcha<br>
            <span class="bold">8. SimpleAjaxUploader.min.js</span> - Ajax uploader<br>
            <span class="bold">9. jquery.magnific-popup.min.js</span> - Jquery lightbox & dialog script <br>
            <span class="bold">10. gmap3.min.js</span> - Jquery Google Map<br>
            <span class="bold">11. metisMenu.js </span> - Jquery Metis Menu<br>

            <br>
            <span class="bold color2">Theme Javascript</span> <br>
            <span class="bold">12. map.js</span> - Theme Google Map<br>
            <span class="bold">13. theme.js</span> - Theme Javascript<br>
          </p>

        </div>
      </section>


      <section id="work" class="page">
        <div class="content">
          <h2 class="no-mt title">Portfolio</h2>


          <p><span class="color2">List Filter</span><br/> you can filter your portfolio, check code below</p>
          <p><img src="img/1.jpg" alt=""></p>



          <div class="snippet-container"><div class="sh_default snippet-wrap"><div class="snippet-menu sh_sourceCode"><a class="snippet-window sh_url" href="#">pop-up</a><a class="snippet-text sh_url" href="#">text</a></div><pre class="shi_pre sh_html snippet-formatted sh_sourceCode"><ol class="snippet-num"><li><span class="sh_keyword">&lt;ul</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"list-inline list-filter-galery"</span><span class="sh_keyword">&gt;</span></li><li>  <span class="sh_keyword">&lt;li</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"active"</span> <span class="sh_type">data-filter</span><span class="sh_symbol">=</span><span class="sh_string">"*"</span><span class="sh_keyword">&gt;&lt;a</span> <span class="sh_type">href</span><span class="sh_symbol">=</span><span class="sh_string">"#"</span><span class="sh_keyword">&gt;</span>All<span class="sh_keyword">&lt;/a&gt;&lt;/li&gt;</span></li><li>  <span class="sh_keyword">&lt;li</span> <span class="sh_type">data-filter</span><span class="sh_symbol">=</span><span class="sh_string">".img"</span><span class="sh_keyword">&gt;&lt;a</span> <span class="sh_type">href</span><span class="sh_symbol">=</span><span class="sh_string">"#"</span> <span class="sh_keyword">&gt;</span>Image<span class="sh_keyword">&lt;/a&gt;&lt;/li&gt;</span></li><li>  <span class="sh_keyword">&lt;li</span> <span class="sh_type">data-filter</span><span class="sh_symbol">=</span><span class="sh_string">".gal"</span><span class="sh_keyword">&gt;&lt;a</span> <span class="sh_type">href</span><span class="sh_symbol">=</span><span class="sh_string">"#"</span><span class="sh_keyword">&gt;</span>Gallery<span class="sh_keyword">&lt;/a&gt;&lt;/li&gt;</span></li><li>  <span class="sh_keyword">&lt;li</span> <span class="sh_type">data-filter</span><span class="sh_symbol">=</span><span class="sh_string">".vid"</span><span class="sh_keyword">&gt;&lt;a</span> <span class="sh_type">href</span><span class="sh_symbol">=</span><span class="sh_string">"#"</span><span class="sh_keyword">&gt;</span>Video<span class="sh_keyword">&lt;/a&gt;&lt;/li&gt;</span></li><li>  <span class="sh_keyword">&lt;li</span> <span class="sh_type">data-filter</span><span class="sh_symbol">=</span><span class="sh_string">"{{.classfilter}}"</span><span class="sh_keyword">&gt;&lt;a</span> <span class="sh_type">href</span><span class="sh_symbol">=</span><span class="sh_string">"#"</span><span class="sh_keyword">&gt;</span>{{label}}<span class="sh_keyword">&lt;/a&gt;&lt;/li&gt;</span></li><li>  <span class="sh_keyword">&lt;li&gt;</span></li><li>    ...</li><li>  <span class="sh_keyword">&lt;/li&gt;</span></li><li><span class="sh_keyword">&lt;/ul&gt;</span></li></ol></pre><pre class="snippet-textonly sh_sourceCode" style="display:none;" tabindex="0" contenteditable="">&lt;ul class="list-inline list-filter-galery"&gt;
  &lt;li class="active" data-filter="*"&gt;&lt;a href="#"&gt;All&lt;/a&gt;&lt;/li&gt;
  &lt;li data-filter=".img"&gt;&lt;a href="#" &gt;Image&lt;/a&gt;&lt;/li&gt;
  &lt;li data-filter=".gal"&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
  &lt;li data-filter=".vid"&gt;&lt;a href="#"&gt;Video&lt;/a&gt;&lt;/li&gt;
  &lt;li data-filter="{{.classfilter}}"&gt;&lt;a href="#"&gt;{{label}}&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;
    ...
  &lt;/li&gt;
&lt;/ul&gt;</pre></div></div>

          <div class="white-space-30"></div>
          <p><span class="color2">Portfolio Item</span><br/> </p>
          <p><img src="img/2.jpg" alt=""></p>

          <div class="white-space-30"></div>
          <p>this theme support AJAX Jquery to show details portofolio, for example page please check folder <code>works/*</code>  </p>
          <p><code>
              &lt;a href="url_link.html" class="link-work"&gt;Project Title &lt;i class="fa fa-link"&gt;&lt;/i&gt;&lt;/a&gt;
            </code>
          </p>
          <div class="snippet-container"><div class="sh_default snippet-wrap"><div class="snippet-menu sh_sourceCode"><a class="snippet-window sh_url" href="#">pop-up</a><a class="snippet-text sh_url" href="#">text</a></div><pre class="shi_pre sh_html snippet-formatted sh_sourceCode"><ol class="snippet-num"><li><span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"galery-box clearfix bg2"</span><span class="sh_keyword">&gt;</span></li><li> </li><li>  <span class="sh_comment">&lt;!-- item portfolio --&gt;</span> </li><li>  <span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"col-sm-3 col-xs-6 item-box img"</span><span class="sh_keyword">&gt;</span></li><li>    <span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"hover-area"</span><span class="sh_keyword">&gt;</span></li><li>      <span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"text-vcenter-area"</span><span class="sh_keyword">&gt;</span></li><li>        <span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"text-vcenter"</span><span class="sh_keyword">&gt;</span></li><li>          <span class="sh_keyword">&lt;h3&gt;&lt;a</span> <span class="sh_type">href</span><span class="sh_symbol">=</span><span class="sh_string">"url_link.html"</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"link-work"</span><span class="sh_keyword">&gt;</span>Project Title <span class="sh_keyword">&lt;i</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"fa fa-link"</span><span class="sh_keyword">&gt;&lt;/i&gt;&lt;/a&gt;&lt;/h3&gt;</span></li><li>        <span class="sh_keyword">&lt;/div&gt;</span>  </li><li>      <span class="sh_keyword">&lt;/div&gt;</span></li><li>    <span class="sh_keyword">&lt;/div&gt;</span></li><li>    <span class="sh_keyword">&lt;img</span> <span class="sh_type">src</span><span class="sh_symbol">=</span><span class="sh_string">"url_img_project_preview.jpg"</span> <span class="sh_type">alt</span><span class="sh_symbol">=</span><span class="sh_string">""</span><span class="sh_keyword">&gt;</span></li><li>  <span class="sh_keyword">&lt;/div&gt;</span><span class="sh_comment">&lt;!-- end item portfolio --&gt;</span></li><li>  </li><li>  <span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"col-sm-3 col-xs-6 item-box {{classfilter}}"</span><span class="sh_keyword">&gt;</span></li><li>    {{...}}</li><li>  <span class="sh_keyword">&lt;/div&gt;</span></li><li>  </li><li><span class="sh_keyword">&lt;/div&gt;</span></li></ol></pre><pre class="snippet-textonly sh_sourceCode" style="display:none;" tabindex="0" contenteditable="">&lt;div class="galery-box clearfix bg2"&gt;
 
  &lt;!-- item portfolio --&gt; 
  &lt;div class="col-sm-3 col-xs-6 item-box img"&gt;
    &lt;div class="hover-area"&gt;
      &lt;div class="text-vcenter-area"&gt;
        &lt;div class="text-vcenter"&gt;
          &lt;h3&gt;&lt;a href="url_link.html" class="link-work"&gt;Project Title &lt;i class="fa fa-link"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/h3&gt;
        &lt;/div&gt;  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;img src="url_img_project_preview.jpg" alt=""&gt;
  &lt;/div&gt;&lt;!-- end item portfolio --&gt;
  
  &lt;div class="col-sm-3 col-xs-6 item-box {{classfilter}}"&gt;
    {{...}}
  &lt;/div&gt;
  
&lt;/div&gt;</pre></div></div>

        </div>
      </section>
      <section id="googlemap" class="page">
        <div class="content">
          <h2 class="no-mt title">Google Map</h2>

          <p><img src="img/3.jpg" alt=""></p>
          <br/>
          <p><span class="color2">Setup Your Location</span><br/> 
            you need latitude and longitude of your location. you can try this site <a href="#">http://itouchmap.com/latlong.html</a>
            <br/><br/>
            check the code </p>
          <div class="snippet-container"><div class="sh_default snippet-wrap"><div class="snippet-menu sh_sourceCode"><a class="snippet-window sh_url" href="#">pop-up</a><a class="snippet-text sh_url" href="#">text</a></div><pre class="shi_pre sh_html snippet-formatted sh_sourceCode"><ol class="snippet-num"><li><span class="sh_comment">&lt;!-- map --&gt;</span></li><li><span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"map-area  br-t br-b"</span><span class="sh_keyword">&gt;</span></li><li>  <span class="sh_comment">&lt;!-- change data-lat="48.856318" data-lng="2.351866" with your location--&gt;</span></li><li>  <span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"map"</span> <span class="sh_type">id</span><span class="sh_symbol">=</span><span class="sh_string">"map"</span> <span class="sh_type">data-lat</span><span class="sh_symbol">=</span><span class="sh_string">"48.856318"</span> <span class="sh_type">data-lng</span><span class="sh_symbol">=</span><span class="sh_string">"2.351866"</span><span class="sh_keyword">&gt;&lt;/div&gt;</span></li><li>  <span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"map-scroll-space"</span><span class="sh_keyword">&gt;&lt;/div&gt;</span></li><li>  <span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"map-wait-msg"</span><span class="sh_keyword">&gt;</span>Plase Wait...<span class="sh_keyword">&lt;/div&gt;</span></li><li>  <span class="sh_keyword">&lt;div</span> <span class="sh_type">class</span><span class="sh_symbol">=</span><span class="sh_string">"map-detail-location"</span><span class="sh_keyword">&gt;</span></li><li>    <span class="sh_keyword">&lt;h4&gt;</span>Locations:<span class="sh_keyword">&lt;/h4&gt;</span></li><li>    <span class="sh_keyword">&lt;p&gt;</span>Jl Karanggan no 132 Bandung Indonesia<span class="sh_keyword">&lt;/p&gt;</span></li><li>  <span class="sh_keyword">&lt;/div&gt;</span></li><li><span class="sh_keyword">&lt;/div&gt;</span><span class="sh_comment">&lt;!-- end map --&gt;</span></li></ol></pre><pre class="snippet-textonly sh_sourceCode" style="display:none;" tabindex="0" contenteditable="">&lt;!-- map --&gt;
&lt;div class="map-area  br-t br-b"&gt;
  &lt;!-- change data-lat="48.856318" data-lng="2.351866" with your location--&gt;
  &lt;div class="map" id="map" data-lat="48.856318" data-lng="2.351866"&gt;&lt;/div&gt;
  &lt;div class="map-scroll-space"&gt;&lt;/div&gt;
  &lt;div class="map-wait-msg"&gt;Plase Wait...&lt;/div&gt;
  &lt;div class="map-detail-location"&gt;
    &lt;h4&gt;Locations:&lt;/h4&gt;
    &lt;p&gt;Jl Karanggan no 132 Bandung Indonesia&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;&lt;!-- end map --&gt;</pre></div></div>

        </div>
      </section>
      <section id="contact_form" class="page">
        <div class="content">
          <h2 class="no-mt title">Contact Form</h2>

          <p><span class="color2">Setup Contact Form</span><br/> 
            please open <code>php/config.php</code>, change and save it
          </p>

          <div class="snippet-container"><div class="sh_default snippet-wrap"><div class="snippet-menu sh_sourceCode"><a class="snippet-window sh_url" href="#">pop-up</a><a class="snippet-text sh_url" href="#">text</a></div><pre class="shi_pre sh_php snippet-formatted sh_sourceCode"><ol class="snippet-num"><li><span class="sh_symbol">&lt;?php</span></li><li></li><li></li><li><span class="sh_comment">//mailto</span></li><li><span class="sh_variable">$my_email</span> <span class="sh_symbol">=</span> <span class="sh_string">'your@email.com'</span><span class="sh_symbol">;</span></li><li></li><li><span class="sh_comment">//default sucject email </span></li><li><span class="sh_variable">$default_subject</span> <span class="sh_symbol">=</span> <span class="sh_string">"Your Default Subject Email"</span><span class="sh_symbol">;</span></li><li></li><li><span class="sh_comment">//massage success </span></li><li><span class="sh_variable">$success_msg</span> <span class="sh_symbol">=</span> <span class="sh_string">"Thanks, I will get back to you ASAP"</span><span class="sh_symbol">;</span></li><li></li><li><span class="sh_comment">//captcha</span></li><li><span class="sh_variable">$active_captcha</span> <span class="sh_symbol">=</span> TRUE<span class="sh_symbol">;</span></li><li></li><li><span class="sh_comment">//uploader</span></li><li><span class="sh_variable">$active_uploader</span> <span class="sh_symbol">=</span> TRUE<span class="sh_symbol">;</span></li></ol></pre><pre class="snippet-textonly sh_sourceCode" style="display:none;" tabindex="0" contenteditable="">&lt;?php


//mailto
$my_email = 'your@email.com';

//default sucject email 
$default_subject = "Your Default Subject Email";

//massage success 
$success_msg = "Thanks, I will get back to you ASAP";

//captcha
$active_captcha = TRUE;

//uploader
$active_uploader = TRUE;
              </pre></div></div>
          <br/>
          <p>also you can enable and disable Captcha and Uploader, check code <code>php/config.php</code> </p>
          <p><img src="img/4.jpg" alt=""></p>
        </div>
      </section>
      
      
      <section id="change_log" class="page">
        <div class="content">
          <h2 class="no-mt title">Change Logs</h2>

          <pre>
            1. 2015.07.07 - version 1.0
               * Initial release!
            2. 2015.08.11 - version 1.1
               - add dropdown menu
               - add dark verion skin 
          </pre>
          <br/>
          <h4>New Dark Skin</h4>
          <p><img src="img/5.jpg" alt=""></p>
          
          <p>the code: <br/>add class "dark-page" on body</p>
          <code>&lt;body class="dark-page"&gt;</code>
          <br/>
          <br/>
          <h4>New Dropdown Menu</h4>
          <p><img src="img/6.jpg" alt=""></p>
          
          <p>the code:  <br/> add id="menu"</p>
          <code>&lt;nav class="main-nav" id="menu"&gt;</code>
        </div>
      </section>

      <section id="credits" class="page">
        <div class="content">
          <h2 class="no-mt title">Credits and Sources</h2>

          <h3>CSS</h3>
          <p >
            <span class="bold color2">external css:</span><br/>
            <span class="bold">1. bootstrap.min.css</span> - framework <a href="http://getbootstrap.com/">link</a><br>
            <span class="bold">2. font-awesome.min.css</span> - font icons <a href="http://fortawesome.github.io/Font-Awesome/">link</a><br>
            <span class="bold">3. jquery.simpleCaptcha.css</span> - captcha <a href="https://github.com/jakerella/jquerySimpleCaptcha">link</a><br>
            <span class="bold">4. magnific-popup.css</span> - popup <a href="http://dimsemenov.com/plugins/magnific-popup/">link</a><br>
          </p>

          <h3>JS</h3>
          <p >
            <span class="bold color2">Plugins</span> <br>
            <span class="bold">1. jquery.min.js</span> - jQuery <a href="http://jquery.com/">link</a><br>
            <span class="bold">2. jquery.easing-1.3.pack.js</span> - jQuery Easing <a href="http://gsgd.co.uk/sandbox/jquery/easing/">link</a><br>
            <span class="bold">3. bootstrap.min.js</span> -  Jquery Bootstrap Framework <a href="http://getbootstrap.com/javascript/">link</a><br>
            <span class="bold">4. jquery.easypiechart.min.js</span> - Jquery Pie Chart <a href="http://rendro.github.io/easy-pie-chart/">link</a><br>
            <span class="bold">5. isotope.pkgd.min.js</span> - Jquery Filter & sort magical layouts <a href="http://isotope.metafizzy.co/">link</a><br>
            <span class="bold">6. jquery.validate.min.js</span> - Jquery Form Validation <a href="https://github.com/jzaefferer/jquery-validation">link</a><br>
            <span class="bold">7. jquery.simpleCaptcha.js</span> - Captcha <a href="https://github.com/jakerella/jquerySimpleCaptcha">link</a><br>
            <span class="bold">8. SimpleAjaxUploader.min.js</span> - Ajax uploader <a href="https://github.com/LPology/Simple-Ajax-Uploader">link</a><br>
            <span class="bold">9. jquery.magnific-popup.min.js</span> - Jquery lightbox & dialog script <a href="http://dimsemenov.com/plugins/magnific-popup/">link</a> <br>
            <span class="bold">10. gmap3.min.js</span> - Jquery Google Map <a href="http://gmap3.net/">link</a><br>
            <span class="bold">11. metisMenu.js (new)</span> - Jquery Metis Menu <a href="https://github.com/onokumus/metisMenu">link</a><br>
            

          </p>

          <h3>Fonts</h3>
          <p >
            <span class="bold color2">Google Fonts</span> <br>
            <span class="bold">1. Open Sans</span> - <a href="https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Open+Sans:400,300">link</a><br>
            <span class="bold">2. Sarala</span> - <a href="https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Sarala:400,700">link</a><br>

          </p>


          <h3>Images</h3>

          <p >
            <span class="bold color2">Resources</span> <br>
            <span class="bold">1. pixabay</span> - <a href="http://pixabay.com/">link</a><br>
          </p>


        </div>
      </section>
      <section id="thankyou" class="page">
        <div class="content">
          <h2 class="no-mt title">Thank You</h2>

          <p class="margin-top max-width">
            As we said at the beginning, we are glad to help you if you have any <span class="bold">questions or feedback </span>relating to this theme.
            No guarantees, but we do our best to assist.<br>
            <span class="bold">yobithemes</span>
          </p>

          <br/>
          <a class="btn btn-default" href="mailto:yobi.studio@gmail.com">Support via eMail</a>
          <a class="btn btn-default" href="http://themeforest.net/user/yobithemes?ref=yobithemes">Go to Themeforest</a>
          
          <div class="white-space-30"></div>
          <h4>Please dont forget to rate this item, Cheers :)</h4>
          <p> <img src="img/5.png" alt=""></p>
          <a class="btn btn-default" href="http://themeforest.net/downloads?ref=yobithemes">Rate this item</a>
          <br/>
           
        </div>
      </section>

    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/jquery.easing-1.3.pack.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script src="js/shi_jquery.min.js"></script>

    <script>
(function($) {
  "use strict";
  var height_w = 0;

  //Run function when document ready
  $(document).ready(function() {
    min_height_w();
    sm_scroll();

  });

  //Run function when window resize
  $(window).resize(function() {
    min_height_w();
  });

  function min_height_w() {
    height_w = $(window).height();
    $('.page').css('min-height', height_w);
  }

  function sm_scroll() {
    $('.inner-link').click(function() {
      var target = this.hash, $target = $(target);
      $('html, body').stop().animate({
        'scrollTop': $target.offset().top
      }, 1000, 'easeInOutExpo', function() {
        //window.location.hash = target;
      });
      return false;
    });
  }

})(jQuery);
    </script>
  </body>
</html>