Trekee documentation

Trekee- Responsive HTML5 Template

Template Features:

• Multi Page Demos
• 17+ HTML Files
• 3 Index Multipage demos
• Easy to customize
• HTML5 & CSS3
• Clean & Simple Design
• Fully Responsive Layout
• Crossbrowser Compatible with Edge, IE9+, Firefox, Safari, Opera, Chrome
• Retina ready
• Font Awesome 400+ icons
• Elegant Icon Font 360+ icons
• Powered with Bootstrap
• Smooth animation
• Parallax sections
• Working Ajax contact form with validation
• Google Maps easy to setup via data attributes
• Responsive video
• Well documented

• Created: June 02, 2023
• Version 1.0
• By: cmshaper
• Email: cmwebdesigners@gmail.com

Unzip the archive and find out the folder cmshaper-client-html. There are all the template files in this folder.

The file and folder structure is something like this:

1. /css — folder with css files.
2. /fonts — folder with icon fonts.
3. /images — folder with image files.
4. /js — folder with Javascript files.
5. blog-*.html, ... — Blog page demos.
6. features-*.html, ... — Different features page demos.
7. form-*.html, ... — Different form demos.
8. home-*.html, ... — Different Home Variations.
9. page-*.html, ... — Different inner page demos.

Upload the template files to server with the help of one of the FTP-clients like FileZilla.

These are the css files which are loaded into the template in Head Section.

These are the JS files which are loaded into the template before the end of the HEAD and BODY Section.

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script>
    <script src="js/revolution.min.js"></script> 
    <script src="js/jquery.fancybox.pack.js"></script> 
    <script src="js/jquery.fancybox-media.js"></script>
    <script src="js/jquery.mixitup.min.js"></script>
    <script src="js/featherlight.min.js"></script>
    <script src="js/featherlight.gallery.min.js"></script>
    <script src="js/css3-animate-it.js"></script>
    <script src="js/validate.js"></script>
    <script src="js/custom.js"></script>

The general template structure is the same throughout the template. Here is the general structure:

<section class="Your_Section_Name">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                
            </div>
        </div>
    </div>
</section> 

There are 7 different classes for owl carosel to make different column carousels. Those are:

• carousel-1col
• carousel-2col
• carousel-3col
• carousel-4col
• carousel-5col
• carousel-6col
• carousel-col

• data-nav="true"
• data-dots="true"
• data-duration="4000"

<div class="carousel-1col" data-nav="false" data-dots="false" data-duration="4000">
  <div class="item">
    <img src="https://placehold.it/900x500" alt="">
  </div>
  <div class="item">
    <img src="https://placehold.it/900x500" alt="">
  </div>
  <div class="item">
    <img src="https://placehold.it/900x500" alt="">
  </div>
</div> 

<div class="carousel-2col" data-nav="false" data-dots="false" data-duration="4000">
  <div class="item">
    <img src="https://placehold.it/900x500" alt="">
  </div>
  <div class="item">
    <img src="https://placehold.it/900x500" alt="">
  </div>
  <div class="item">
    <img src="https://placehold.it/900x500" alt="">
  </div>
</div> 

<div class="carousel-3col" data-nav="false" data-dots="false" data-duration="4000">
  <div class="item">
    <img src="https://placehold.it/900x500" alt="">
  </div>
  <div class="item">
    <img src="https://placehold.it/900x500" alt="">
  </div>
  <div class="item">
    <img src="https://placehold.it/900x500" alt="">
  </div>
</div> 

There are one type of preloader we used
1. gif animated images
and

Gif Image preloader example:

<!-- Preloader -->
<div class="preloader"></div>

The Contact form html code example is as follows :

<form class="contact-form" method="post" action="contact-form/contact.php" role="form">
              <div class="messages"></div>
              <div class="controls">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="form_name">Name *</label>
                      <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Name is required.">
                      <div class="help-block with-errors"></div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="form_lastname">Phone *</label>
                      <input id="form_phone" type="text" name="phone" class="form-control" placeholder="Please enter your phone *" required="required" data-error="Phone number is required.">
                      <div class="help-block with-errors"></div>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="form_email">Email *</label>
                      <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
                      <div class="help-block with-errors"></div>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label for="form_email">Subject</label>
                      <input id="form_email" type="subject" name="subject" class="form-control" placeholder="Please enter subject" required="required">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <label for="form_message">Message *</label>
                      <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required data-error="Please,leave us a message."></textarea>
                      <div class="help-block with-errors"></div>
                    </div>
                  </div>
                  <div class="col-md-12">
                    <input type="submit" class="btn btn-success btn-send" value="Send message">
                  </div>
                </div>
              </div>
            </form>

For placing your email address, just go to form action location action="contact-form/contact.php" and open the contact.php file in contact folder. In that php file at line 32, you will see $toemail = 'spam.cmshaper@gmail.com'; Now just replace that email address by your own email address. Now your contact form is ready!

The Map Default code looks like this:

<!-- Google Map HTML Codes -->
 <section class="map-section">
      <!--Map Container-->
      <div class="map-outer">
          <!--Map Canvas-->
          <div class="map-canvas"
              data-zoom="12"
              data-lat="-37.817085"
              data-lng="144.955631"       
              data-type="roadmap"
              data-hue="#ffc400"
              data-title="Envato"
              data-content="Melbourne VIC 3000, Australia<br><a href='mailto:info@youremail.com'>info@youremail.com</a>"              
              style="height: 310px;">
          </div>
      </div>
    </section>

There are 13 pre-made map styles. You can use any of them.

All the map styles are:

• data-mapstyle="default"
• data-mapstyle="style1"

To add Flickr feed, just place the following code:

<div id="flickr-feed" class="clearfix"> 
  
  <!-- Flickr Link --> 
  
  <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=52617155@N08"></script> 

</div>      

Replace the value of attribute count=8, user=52617155@N08

These are the scripts used in the template with their related links for documentation.

• jQuery
• Bootstrap Framework
• scrollTo
• SmoothScroll
• Isotope
• jquery Stellar parallax
• Jquery Parallax
• Owl Carousel
• WOW
• Jflickrfeed
• JQuery Knob
• Pretty Maps

By default, the template loads Roboto, Open Sans, Titillium Web and Raleway font from Google Web Font Services, you can change the font with the one that suits you best.

You will find the font code in the "style-main.css" file in the "css" folder:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Note: All images are used for preview purpose only and not included in the final purchase files.

Images from:
https://www.flickr.com/
http://pixabay.com/
http://www.pixeden.com/free-graphics
http://dribbble.com/
https://wallpaperscraft.com/
http://behance.net/
http://pinterest.com/

Video from:
http://youtube.com/
https://vimeo.com/

Google Fonts:
Open Sans
Roboto
Playfair Display
Raleway
Droid Sans

Icon Fonts:
Font Awesome Icon Font
Pe-icon-7-stroke
Elegant Icon Font

Again, thank you for purchasing this Template!

If you have any questions, please use our profile contact form on Envato ( http://themeforest.net/user/cmshaper ).
We aim to answer all questions within 24 hours . In some cases the waiting time can be extended to 48 hours.

Email: cmshaper@gmail.com