CARCAO HTML

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

Created 17/11/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!

Contents

  1. HTML Structure
  2. CSS Files
  3. Javascript
  4. Mailchimp Configuration
  5. Contat Form Configuration
  6. 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#map1-8".
Look at parts highlighted below : 

        
<!-- START NAV MENU -->
<nav class="ns-navbarfile-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-white" href="#top">HOME</a></li>
   <li class="ns-navbar-item"><a class="ns-buttons-link btn text-white" href="index.html#content4-1">SERVICES</a></li>
   <li class="ns-navbar-item"><a class="ns-buttons-link btn text-white" href="index.html#msg-box4-6">MODELS</a></li>
   <li class="ns-navbar-item"><a class="ns-buttons-link btn text-white" href="index.html#map1-8">LOCATION</a></li>
   <li class="ns-navbar-item"><a class="ns-buttons-link btn text-white" href="index.html#form1-7">CONTACT</a></li>
  </ul>
 </div>
</nav>
<!-- END NAV MENU -->


Slider
You can simply change images for each slide, by renaming the default image (1280x850.png) and uploading your picture into "images" folder.
Below you can see the example of the first slide: 

        
<!-- START SLIDE ONE -->
<div class="ns-box ns-section ns-section-relative ns-section-fixed-size ns-section-bg-adapted item dark center ns-section-full-height active" style="background-image: url(assets/images/1280x850.png);">
    <div class="ns-box-magnet ns-box-magnet-sm-padding">
        <div class=" container">
            
            <div class="row"><div class="col-sm-8 col-sm-offset-2">
                <div class="ns-hero">
                    <h1 class="ns-hero-text">GET 10% EXTRA DISCOUNT</h1>
                    <p class="ns-hero-subtext">Plan your trip now</p>
                </div>
                
            </div></div>
        </div>
    </div>
</div>
<!-- END SLIDE ONE -->


Services
Change the text highlighted in yellow for both services: 

        
<!-- START SERVICES ONE -->
<div class="caption">
    <div>
        <h3>UNLIMITED CAR RENTAL</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged when an unknown printer took a galley of type.</p>
    </div>
</div>
<!-- END SERVICES ONE -->


Models
Here you can change the image just renaming the default image (1280x850.png) and then uploading your picture into "images" folder.
You can also change the title and the text, just following the text highlighted below: 

        
<!-- START MODELS -->
<div class="ns-box-magnet ns-box-magnet-top-right ns-section-left col-sm-6">
    <figure class="ns-figure ns-figure-adapted ns-figure-caption-inside-bottom">
        <img class="ns-figure-img" alt="" src="assets/images/1280x850.png"> 
    </figure>
</div>
<div class="ns-box-magnet ns-class-ns-box-magnet-center-left col-sm-6 ns-section-right">
    <div class="ns-section-container ns-section-container-middle">
        <div class="ns-header ns-header-auto-align ns-header-wysiwyg">
            <h3 class="ns-header-text">QUALITY GUARANTEED</h3>
            
        </div>
    </div>
    <div class="ns-section-container ns-section-container-middle">
        <div class="ns-article ns-article-auto-align ns-article-wysiwyg"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type .</p></div>
    </div>
    
</div>
<!-- END MODELS -->


Take a tour
Change the title and the text by following the text highlighted below.
You can also change video by replacing the youtube video link highlighted below: 

        
<!-- START TAKE A TOUR -->
<div class="ns-box-magnet ns-class-ns-box-magnet-center-left col-sm-6 ns-section-left">
    <div class="ns-section-container ns-section-container-middle">
        <div class="ns-header ns-header-auto-align ns-header-wysiwyg">
            <h3 class="ns-header-text">TAKE A TOUR</h3>
            
        </div>
    </div>
    <div class="ns-section-container ns-section-container-middle">
        <div class="ns-article ns-article-auto-align ns-article-wysiwyg"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type .</p></div>
    </div>
    
</div>
<div class="ns-box-magnet ns-box-magnet-top-left ns-section-right col-sm-6">
    <figure class="ns-figure ns-figure-adapted ns-figure-caption-inside-bottom ns-figure-full-width">
        
        <iframe class="ns-embedded-video" src="https://www.youtube.com/embed/9_5pjZlWV3A?rel=0&autoplay=0&loop=0"   frameborder="0" allowfullscreen></iframe>
    </figure>
</div>
<!-- END TAKE A TOUR -->


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


Footer structure
Here the structure of the footer information, you can simply replace the yellow text with your company informations.
See below: 

        
<!-- START FOOTER -->
<div class="ns-section-container container">
    <div class="ns-contacts ns-contacts-wysiwyg row">
        <div class="col-sm-4">
            <img class="ns-contacts-img ns-contacts-img-left" alt="" src="assets/images/car-logo128x128-141.png">
        </div>
        <div class="col-sm-8">
            <div class="row">
                  <div class="col-sm-4">
                    <p class="ns-contacts-text"><strong>ADDRESS</strong><br>
1234 Street Name<br>
City, AA 99999</p>
                </div>
                <div class="col-sm-4">
                    <p class="ns-contacts-text"><strong>CONTACTS</strong><br>
Email: infot@carcao.com<br>
Phone: +1 (0) 000 0000 001<br>
Fax: +1 (0) 000 0000 002</p>
                </div>
                <div class="col-sm-4"><p class="ns-contacts-text"><strong>CUSTOMER CENTER</strong></p><ul class="ns-contacts-list"><li>SARA SHANNON</li><li>Phone: +1 (0) 000 0000 001</li><li>Email: sara.s@carcao.com</li></ul></div>
            </div>
        </div>
    </div>
</div>
<!-- END FOOTER -->

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-slider/style.css) this is the css of the slider on the top of the page.
  • 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.
  • 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.
  • jquery.ajaxchimp.min.js this javascript file is used to configure mailchimp subscription.
  • main.js this is a file used to add some additional funcion.


4. Mailchimp ↑

How to configure Mailchimp subscription:
Mailchimp is a solution for Email marketing. You can sign up for free use or get premium features. If you don't have an account click here and create it.
After that open the "main.js" file and change data with your information, see below: 

        
$('#mc-form').ajaxChimp({
    language: 'cm',
    url: 'http://nsthemes.us12.list-manage.com/subscribe/post?u=07ab11a197e784f0a8f6214a4&id=d48f6e6eaa'
        //http://xxx.xxx.list-manage.com/subscribe/post?u=xxx&id=xxx
});

5. 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']);

6. Credits ↑

Credits and source file:



Developed with passion by NS Themes - all right reserved - 2015