ABCTRAVEL HTML

"ABCTRAVEL HTML" Documentation by NoStudio Themes - v. 1.0

Created 01/12/2015
By: NoStudio Themes
Email: info@nsthemes.com

Thank you for downloading our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us. You can also let us know how we can improve this theme! Thanks so much!

HTML Structure
CSS Files
Javascript
Contat Form Configuration
Credits

1. HTML Structure ↑

Nav menu
Here the structure of the nav menu, you can simply change the label like "HOME" and the anchor like "index.html#msg-box3-15".
Look at parts highlighted below :

        
<!-- START NAV MENU -->
<nav class="ns-navbar-menu-box ns-navbar-menu-box-inline-right">
 <div class="ns-navbar-column">
  <ul class="ns-navbar-items ns-navbar-items-right ns-buttons ns-buttons-freeze ns-buttons-right btn-decorator ns-buttons-active ns-buttons-only-links">
   <li class="ns-navbar-item"><a class="ns-buttons-link btn text-success" href="#top">HOME</a></li>
   <li class="ns-navbar-item"><a class="ns-buttons-link btn text-success" href="index.html#msg-box3-15">TRAVEL</a></li>
   <li class="ns-navbar-item"><a class="ns-buttons-link btn text-success" href="index.html#features1-4">FEATURED</a></li>
   <li class="ns-navbar-item"><a class="ns-buttons-link btn text-success" href="index.html#gallery1-7">GALLERY</a></li>  
   <li class="ns-navbar-item"><a class="ns-buttons-link btn text-success" href="index.html#form1-12">CONTACT US</a></li>
  </ul>
 </div>
</nav>
<!-- END NAV MENU -->

Video
You can simply change the video link.

        
<!-- START VIDEO -->
<figure class="ns-figure ns-figure-wysiwyg ns-figure-full-width ns-figure-caption-outside-bottom" id="video1-3" style="background-color: rgb(255, 255, 255);">
    <iframe class="ns-embedded-video" src="https://www.youtube.com/embed/wJF5NXygL4k?rel=0&autoplay=1&loop=1"   frameborder="0" allowfullscreen></iframe>    
</figure>
<!-- END VIDEO -->

Content
In this theme you can find some text that help you to change your content:

        
<!-- START GENERAL INFO -->

	....your content goes here....

<!-- END GENERAL INFO -->

<!-- START ABOUT CONTENT -->

	....your content goes here....

<!-- END ABOUT CONTENT -->

<!-- START FEATURED -->

	....your content goes here....

<!-- END FEATURED -->

<!-- START TESTIMONIAL -->

	....your content goes here....

<!-- END TESTIMONIAL -->

<!-- START FOOTER -->

	....your content goes here....

<!-- END FOOTER -->

Gallery
You can built your gallery by renaming the gallery images ( thumbnail images ) and by renaming lightbox images ( large images ).
The code below help you to setup your gallery:

        
<!-- START GALLERY -->

    .
    .
    .
    <a href="#lb-gallery1-13" data-slide-to="0" data-toggle="modal">
        <img alt="" src="assets/images/800x533.png">
        <span class="icon glyphicon glyphicon-zoom-in"></span>
    </a>    
    .
    .
    .

<!-- END GALLERY -->

<!-- START LIGHTBOX GALLERY -->
    .
    .
    .
<div class="item">
    <img alt="" src="assets/images/1280x853.png">
</div>
    .
    .
    .
<!-- END LIGHTBOX GALLERY -->

Maps structure
Visit Google maps to get the coordinates to the map by typing your address into the search field ; after that, you have to paste them in the yellow code below. You can also add some informations in the tooltip, by replacing the text "Genoa", as you can see in the structure below:

        
<!-- START MAPS -->
<figure class="ns-figure ns-figure-wysiwyg ns-figure-full-width ns-figure-caption-outside-bottom" id="map1-8">
    <div class="ns-figure-map ns-google-map">
        <p class="ns-google-map-marker" data-coordinates="44.413512,8.918394">Genoa</p>
    </div>
</figure>
<!-- END MAPS -->

2. CSS Files ↑

This theme import different CSS files:

fonts.googleapis.com this is the extarnal css used for the font type.
bootstrap.min.css this is the css of the framework that is used in this theme.
style.css (assets/ns-themes/css/style.css) this is the main css file, here you can find color, typography, etc...
style.css (assets/ns-themes-gallery/style.css) this is the css of the gallery.
style.css (assets/ns-themes-slider/style.css) this is the css of the slider.
ns-additional.css some additional css like paragraph style or sub text color for this specified theme.

3. Javascript ↑

This theme import different Javascript files:

jquery.min.js this is a javascript library that reduces the amount of code that you must write.
bootstrap.min.js bootstrap framework got also javascript file to reduce code to write.
maps.googleapis.com this is the external javascritp used to display google maps in the map section of this theme.
SmoothScroll.js this javascript allow Smooth Scroll in this theme.
masonry.pkgd.min.js this javascript is a grid layout library.
imagesloaded.pkgd.min.js this javascript is a library help your images.
bootstrap-carousel-swipe.js this is the specified file for the slider in the top of the theme.
script.js this is the main javascript file.
script.js (ns-themes-gallery) this is the gallery javascript file.

4. Contact form ↑

How to configure contact form:
Configure contat form is really simply, you have to open the file "mail.php" and change the email address with your email address as you can see in the following line:

        
    mail('info@nsthemes.com', $subject, $_POST['message']);

5. Credits ↑

Credits and source file: