Expeditor - Cargo 3 in 1

HTML Template

created: 01/02/2017
latest update: 01/12/2017
by: mad_velikorodnov
themeforest.net/user/mad_velikorodnov/portfolio

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to contact us via Ticksy Support System. Thanks so much!

The template has 39 HTML files:

about.html
careers.html
checkout.html
columns.html
contact.html
elements.html
faq.html
front_page.html
gallery.html
get_quote.html
header_4.html
header_5.html
header_6.html
home_2.html
home_3.html
index.html
news_big_img.html
news_single.html
news_small_img.html
page_404.html
product_page.html
services.html
shipment_calculation.html
shipment_tracking.html
shop_cart.html
shop_my_acc.html
single_service.html
team.html
team_member.html
typography.html

<!DOCTYPE html>

<html lang="en">
<head>





<title>Expeditor</title>








   



    

    



      



              



                    



                    
    </header>

    

    




            



            

            



            

            

            

            

            

            


            



            


            

            

            

            


            

            


            


            


            

            


            

            


            

            


            



    

    

      

        

              

                


                


                


                

      

      

        


            


            


            


            


            


            


            


            


      

      


        

          


              

                

                

              

              
              <
                

              

              

                

                

              

              

                

                

              

              

                

                

              

              

                

                

              


      

      


        

      

      


        

                


                


                


                


                


                


                



      

      


        


          




              


              


              


              


              


              

      

      


        

          



              

                
                

                  

                
                


                
                


                  

                
                

              

              

                
                


                  

                
                

              


      

      


        


      

    </div>

    

    


              


              


              


              



              

              



              


              



      


      



    







</body>
</html>

This template uses 10 css files:

audioplayer.css
bootstrap.min.css
fontello.css
jquery.fancybox.css
linea-icons-basic.css
owl.carousel.css
owl.theme.css
owl.transitions.css
responsive.css
style.css

The main style.css file has such structure

/* ----------------------------------
1. Reset default browser styles
2. Global
3. General classes
4. Typography
5. Header
6. Content Elements
7. UI Elements
      7.1. Buttons
      7.2. Forms
          7.2.1. Inputs & Textarea
          7.2.2. Label & Legend
          7.2.3. Checkbox & Radio
          7.2.4. Select
          7.2.5. Fieldset
          7.2.6. Form variations
      7.3. Tables
      7.4. Lists
      7.5. Blockquotes
      7.6. Dividers
8. Widgets & Shortcodes
      8.1. Twitter Feed
      8.2. Instagram Feed
      8.3. LightBox
      8.5. Accordions & Toggles
      8.6. Alert boxes
      8.7. Callouts
      8.8. Pagination
      8.9. Dropcaps
      8.10. Icon Boxes
      8.11. Testimonials
      8.12. Carousel Sliders
      8.13. Progress Bars
      8.14. Pricing Tables
      8.15. Counters
      8.16. Tabs & Tour Sections
      8.17. Isotope
      8.18. Team Members
      8.19. Google Map
      8.20. Services
      8.21. Countdown
      8.22. Audio Player
9. Blog
      9.1. Entries
10. Portfolio
11. Shop
12. Sidebar
13. Footer
-------------------------------------*/

This template uses 24 js files:

plugins.js
script.js
jquery-2.2.1.js
jquery-ui.min.js
jquery.modernizr.js
retina.min.js
apear.js
audioplayer.js
bootstrap.js
elevatezoom.min.js
instafeed.min.js
isotope.pkgd.min.js
jackbox-packed.min.js
jquery.countdown.min.js
jquery.fancybox.js
jquery.localScroll.min.js
jquery.queryloader2.min.js
jquery.scrollTo.min.js
owl.carousel.min.js
jquery.themepunch.enablelog.js
jquery.themepunch.revolution.min.js
jquery.themepunch.tools.min.js
jquery.tweet.js
jquery.tweet.min.js

If you want to change slider settings, for example, you want switch on/off autoslideshow or change time delay you can find all slider settings here js/script.js

The template has 6 footers and 6 headers.

If you want to use any header you have to go, for example, to html\inc\header4.html

and replace code on your page with below

<div class="h_top_part">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div class="header_top mobile_menu">
            <nav>
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </nav>
            <div class="login_block">
              <div class="widget widget_social_icons type_2 tool_down clearfix">
                <ul>
                  <li class="facebook">
                    <span class="tooltip">Facebook</span>
                    <a href="#">
                      <i class="fa fa-facebook"></i>
                    </a>
                  </li>
                  <li class="twitter">
                    <span class="tooltip">Twitter</span>
                    <a href="#">
                      <i class="fa fa-twitter"></i>
                    </a>
                  </li>
                  <li class="google_plus">
                    <span class="tooltip">Google+</span>
                    <a href="#">
                      <i class="fa fa-google-plus"></i>
                    </a>
                  </li>
                  <li class="rss">
                    <span class="tooltip">Rss</span>
                    <a href="#">
                      <i class="fa fa-rss"></i>
                    </a>
                  </li>
                  <li class="pinterest">
                    <span class="tooltip">Pinterest</span>
                    <a href="#">
                      <i class="fa fa-pinterest"></i>
                    </a>
                  </li>
                  <li class="instagram">
                    <span class="tooltip">Instagram</span>
                    <a href="#">
                      <i class="fa fa-instagram"></i>
                    </a>
                  </li>
                  <li class="linkedin">
                    <span class="tooltip">LinkedIn</span>
                    <a href="#">
                      <i class="fa fa-linkedin"></i>
                    </a>
                  </li>
                  <li class="vimeo">
                    <span class="tooltip">Vimeo</span>
                    <a href="#">
                      <i class="fa fa-vimeo-square"></i>
                    </a>
                  </li>
                  <li class="youtube">
                    <span class="tooltip">Youtube</span>
                    <a href="#">
                      <i class="fa fa-youtube-play"></i>
                    </a>
                  </li>
                  <li class="flickr">
                    <span class="tooltip">Flickr</span>
                    <a href="#">
                      <i class="fa fa-flickr"></i>
                    </a>
                  </li>
                  <li class="envelope">
                    <span class="tooltip">Contact Us</span>
                    <a href="#">
                      <i class="fa fa-envelope-o"></i>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
<div class="h_bot_part">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div class="clearfix">
            <a href="index.html" class="f_left logo"><img src="images/logo.png" alt=""></a>
            <div class="f_right">
              <div class="login_block">
                <ul>
                  <li class="login_button shop_button">
                    <a href="#" role="button">
                      <i class="fa fa-shopping-cart"></i>Cart(0)
                    </a>
                    <div class="shopping_cart">
                      <div class="sc_header">Recently added item(s)</div>
                      <div class="products_list">
                        <ul>
                          <li>
                            <div>
                              
                              <img src="images/shopping_c_img_1.jpg" alt="">
                              
                              <div class="product_description">
                                <a href="#">Cursus eleifend elit aenean</a>
                                <div>
                                  1 x $499.00
                                </div>
                              </div>
                              
                              <button class="close_product"><i class="fa fa-times-circle"></i></button>
                            </div>
                          </li>
                          <li>
                            <div>
                              
                              <img src="images/shopping_c_img_2.jpg" alt="">
                              
                              <div class="product_description">
                                <a href="#">Cursus eleifend elit aenean</a>
                                <div>
                                  1 x $1599.00
                                </div>
                                <div>
                                  Size: 2-Seat Sofa, <br>
                                  Color: Red
                                </div>
                              </div>
                              
                              <button class="close_product"><i class="fa fa-times-circle"></i></button>
                            </div>
                          </li>
                          <li>
                            <div>
                              
                              <img src="images/shopping_c_img_3.jpg" alt="">
                              
                              <div class="product_description">
                                <a href="#">Cursus eleifend elit aenean</a>
                                <div>
                                  2 x $99.00
                                </div>
                              </div>
                              
                              <button class="close_product"><i class="fa fa-times-circle"></i></button>
                            </div>
                          </li>
                        </ul>
                      </div>
                      
                      <div class="total_price">
                        <ul>
                          <li><span>Tax:</span><span>$0.00</span></li>
                          <li><span>Discount:</span><span>$37.00</span></li>
                          <li><span>Total:</span><span>$999.00</span></li>
                        </ul>
                      </div>
                      <div class="sc_footer">
                        <button class="button button_grey full_width">View Cart</button>
                        <button class="button button_orange full_width">Checkout</button>
                      </div>
                    </div>
                  </li>
                  
                  <li class="login_button">
                    <a href="#" role="button"><i class="fa fa-user login_icon"></i>Login</a>
                    <div class="popup">
                      <form>
                        <ul>
                          <li>
                            <label for="username">Username</label><br>
                            <input type="text" id="username">
                          </li>
                          <li>
                            <label for="password">Password</label><br>
                            <input type="password" id="password">
                          </li>
                          <li>
                            <input type="checkbox" id="checkbox_10"><label for="checkbox_10">Remember me</label>
                          </li>
                          <li>
                            <a href="#" class="button button_orange">Log In</a>
                            <div class="t_align_c">
                              <a href="#" class="color_dark">Forgot your password?</a><br>
                              <a href="#" class="color_dark">Forgot your username?</a>
                            </div>
                          </li>
                        </ul>
                      </form>
                      <section class="login_footer">
                        <h3>New Customer?</h3>
                        <a href="#" class="button button_grey">Create an Account</a>
                      </section>
                    </div>
                  </li>
                  
                  <li class="lang_button">
                    <a role="button" href="#"><img class="d_inline_middle m_right_10 m_mxs_right_0" src="images/flag_en.jpg" alt=""><span class="d_mxs_none">English</span></a>
                    <ul class="dropdown_list">
                      <li><a href="#" class="tr_delay_hover default_t_color"><img class="d_inline_middle" src="images/flag_en.jpg" alt="">English</a></li>
                      <li><a href="#" class="tr_delay_hover default_t_color"><img class="d_inline_middle" src="images/flag_g.jpg" alt="">German</a></li>
                      <li><a href="#" class="tr_delay_hover default_t_color"><img class="d_inline_middle" src="images/flag_s.jpg" alt="">Spanish</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
              <form class="search">
                <input type="text" placeholder="Search">
                <button class=""><i class="fa fa-search"></i></button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

<div class="menu_wrap">
    <div class="container clearfix">
      
      <button id="menu_button">
        <div>Menu</div>
      </button>
      
      <nav role="navigation" class="main_menu">
        <ul>
          <li class="current"><a href="#">Home<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap clearfix">
              <div>
                <div>Homepage Layouts</div>
                <ul>
                  <li><a href="index.html">Home 1</a></li>
                  <li><a href="home_2.html">Home 2</a></li>
                  <li><a href="home_3.html">Home 3</a></li>
                  <li><a href="home_4.html">Home 4</a></li>
                  <li><a href="home_5.html">Home 5</a></li>
                </ul>
              </div>
              <div>
                <div>Header Styles</div>
                <ul>
                  <li><a href="index.html">Header 1</a></li>
                  <li><a href="home_2.html">Header 2</a></li>
                  <li><a href="home_3.html">Header 3</a></li>
                  <li><a href="home_4.html">Header 4</a></li>
                  <li><a href="home_5.html">Header 5</a></li>
                </ul>
              </div>
              <div>
                <div>Footer Styles</div>
                <ul>
                  <li><a href="index.html">Footer 1</a></li>
                  <li><a href="home_2.html">Footer 2</a></li>
                  <li><a href="home_3.html">Footer 3</a></li>
                  <li><a href="home_4.html">Footer 4</a></li>
                  <li><a href="home_5.html">Footer 5</a></li>
                </ul>
              </div>
            </div>
          </li>
          <li><a href="#">Business<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>

          </li>
          <li><a href="#">Sport<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>

          </li>
          <li><a href="#">Health<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>

          </li>
          <li><a href="#">Pages<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap type_2 clearfix">
              <ul>
                <li><a href="page_full_width.html">Full width page</a></li>
                <li><a href="page_author.html">Author page</a></li>
                <li><a href="page_about.html">About us</a></li>
                <li><a href="page_contributors.html">Contributors</a></li>
                <li><a href="page_contact.html">Contact</a></li>
                <li><a href="page_404.html">404 page</a></li>
                <li><a href="page_archives.html">Archives</a></li>
                <li><a href="page_tags.html">Tags</a></li>
                <li><a href="page_search_results.html">Search results</a></li>
                <li><a href="page_sitemap.html">Sitemap</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#">Features<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap type_2 clearfix">
              <ul>
                <li><a href="features_elements.html">Elements</a></li>
                <li><a href="features_typography.html">Typography</a></li>
                <li><a href="features_columns.html">Columns</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#">Blog<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap type_2 clearfix">
              <ul>
                <li><a href="#">Category layouts<span class="plus"><i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></span></a>
                  
                  <div class="sub_menu_wrap sub_menu_inner type_2 clearfix">
                    <ul>
                      <li><a href="blog_category1.html">Category layout 1</a></li>
                      <li><a href="blog_category2.html">Category layout 2</a></li>
                      <li><a href="blog_category3.html">Category layout 3</a></li>
                      <li><a href="blog_category4.html">Category layout 4</a></li>
                      <li><a href="blog_category5.html">Category layout 5</a></li>
                      <li><a href="blog_category6.html">Category layout 6</a></li>
                      <li><a href="blog_category7.html">Category layout 7</a></li>
                      <li><a href="blog_category8.html">Category layout 8</a></li>
                    </ul>
                  </div>
                </li>
                <li><a href="#">Post layouts & formats<span class="plus"><i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></span></a>
                  
                  <div class="sub_menu_wrap sub_menu_inner type_2 clearfix">
                    <ul>
                      <li><a href="blog_simple_post.html">Simple post</a></li>
                      <li><a href="blog_full_width_post.html">Full width post</a></li>
                      <li><a href="blog_featured_post.html">Extended featured image post</a></li>
                      <li><a href="blog_gallery_post.html">Gallery post</a></li>
                      <li><a href="blog_slideshow_post.html">Slideshow post</a></li>
                      <li><a href="blog_spotlight_post.html">Post with spotlight</a></li>
                      <li><a href="blog_video_post.html">Video post</a></li>
                      <li><a href="blog_audio_post.html">Audio post</a></li>
                      <li><a href="blog_review_post.html">Review post</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">Portfolio<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap type_2 clearfix">
              <ul>
                <li><a href="#">Portfolio layouts<span class="plus"><i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></span></a>
                  
                  <div class="sub_menu_wrap sub_menu_inner type_2 clearfix">
                    <ul>
                      <li><a href="portfolio_1column_with_sidebar.html">1 Column With Sidebar</a></li>
                      <li><a href="portfolio_2columns.html">2 Columns</a></li>
                      <li><a href="portfolio_2columns_with_sidebar.html">2 Columns With Sidebar</a></li>
                      <li><a href="portfolio_3columns.html">3 Columns</a></li>
                      <li><a href="portfolio_3columns_with_sidebar.html">3 Columns With Sidebar</a></li>
                      <li><a href="portfolio_4columns.html">4 Columns</a></li>
                    </ul>
                  </div>
                </li>
                <li><a href="#">Gallery layouts<span class="plus"><i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></span></a>
                  
                  <div class="sub_menu_wrap sub_menu_inner type_2 clearfix">
                    <ul>
                      <li><a href="gallery_2columns.html">2 columns</a></li>
                      <li><a href="gallery_3columns.html">3 columns</a></li>
                      <li><a href="gallery_4columns.html">4 columns</a></li>
                    </ul>
                  </div>
                </li>
                <li><a href="#">Post layouts & formats<span class="plus"><i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></span></a>
                  
                  <div class="sub_menu_wrap sub_menu_inner type_2 clearfix">
                    <ul>
                      <li><a href="image_gallery_post.html">Image gallery post</a></li>
                      <li><a href="image_slideshow_post.html">Image slideshow post</a></li>
                      <li><a href="extended_image_slideshow_post.html">Extended image slideshow post</a></li>
                      <li><a href="youtube_video_playlist_post.html">Youtube video playlist post</a></li>
                      <li><a href="vimeo_video_playlist_post.html">Vimeo video playlist</a></li>
                      <li><a href="video_slideshow_post.html">Video slideshow post</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li><a href="#">Buddypress<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap type_2 clearfix">
              <ul>
                <li><a href="#">Forums<span class="plus"><i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i></span></a>
                  
                  <div class="sub_menu_wrap sub_menu_inner type_2 clearfix">
                    <ul>
                      <li><a href="forum_front_page.html">Front page</a></li>
                      <li><a href="forum_topics_page.html">Topics page</a></li>
                      <li><a href="forum_single_topic_page.html">Single topic page</a></li>
                    </ul>
                  </div>
                </li>
                <li><a href="buddypress_activity.html">Activity</a></li>
                <li><a href="buddypress_groups.html">Groups</a></li>
                <li><a href="buddypress_members.html">Members</a></li>
                <li><a href="buddypress_single_member.html">Single member</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#">Shop<span class="plus"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i></span></a>
            
            <div class="sub_menu_wrap type_2 clearfix">
              <ul>
                <li><a href="shop_front_page_with_sidebar.html">Front page with sidebar</a></li>
                <li><a href="shop_full_width_front_page.html">Full width front page</a></li>
                <li><a href="shop_product_page.html">Product page</a></li>
                <li><a href="shop_shoping_cart.html">Shopping cart</a></li>
                <li><a href="shop_checkout.html">Checkout</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </nav>
    </div>
</div>

If you want to switch off sticky menu open js/plugins.js and replace

sticky: true,

with

sticky: false,

If you want to switch off loading menu open html and remove

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. Read more here: http://imulus.github.io/retinajs/

First, create your own keys at the https://dev.twitter.com/. Create your own application and generate keys for you domain.

Second, open the \plugins\twitter\index.php file and replace the current keys with yours:

    // Your Twitter App Consumer Key
    private $consumer_key = 'prGwIqh0DxorZcltCReQ7Q';

    // Your Twitter App Consumer Secret
    private $consumer_secret = 'Ovmq7ekQnLwc883fpqfEdAAhc4sLSWb609j566aXnok';

    // Your Twitter App Access Token
    private $user_token = '308471286-9tVgRFg0wIALwviPpp8QduLKPkYTM3AhPpClO6DW';

    // Your Twitter App Access Token Secret
    private $user_secret = 'trpkaAjNXydy0pvDeswANtw9zjhnOvSkYhqJukZsK8';

Third, open the js\plugins.js file, in line 1508 find the following code:

username: 'fanfbmltemplate',
Replace fanfbmltemplate with your twitter username.

To change a contact form and subscribe emails open bat/mail.php, newsletter.php and insert you email

$your_email = 'mail@companyname.com';

I've used the following scripts:

plugins.js - custom js with slider settings
script.js - custom js with theme core functions
jquery-2.2.1.js - main jQuery js library
jquery-ui.min.js - main jQueryUI library
jquery.modernizr.js - is a small piece of JavaScript code that automatically detects the availability of next-generation web technologies in your user's browsers
retina.min.js - is an open source script that makes it easy to serve high-resolution images to devices that support them
apear.js - jQuery plugin for tracking element's appearance in browser viewport
audioplayer.js - Responsive and Touch-Friendly
bootstrap.js - Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one
elevatezoom.min.js - Jquery Image Zoom Plugin
instafeed.min.js - is a dead-simple way to add Instagram photos to your website
isotope.pkgd.min.js - Filter & sort magical layouts
jackbox-packed.min.js - Responsive Lightbox
jquery.countdown.min.js - jQuery plugin that sets a div or span to show a countdown to a given time
jquery.fancybox.js - is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page
jquery.localScroll.min.js - Animated anchor navigation made easy with jQuery
jquery.queryloader2.min.js - Version of the QueryLoader by Gaya Kessler
jquery.scrollTo.min.js - Lightweight, cross-browser and highly customizable animated scrolling with jQuery
owl.carousel.min.js - Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider
jquery.themepunch.revolution.min.js - Slider Revolution is the #1 Selling Responsive jQuery Slider Plugin
jquery.tweet.js - Basic wrapper for Seaofclouds

Clipart for the preview was bought from http://depositphotos.com

Note: Image used are for demo purposes only & not included in the download pack.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section or http://velikorodnov.ticksy.com/

Expeditor - Cargo 3 in 1

HTML Template

HTML Files

HTML Structure

CSS Files and Structure

JavaScript Files

Sliders settings

Headers and Footers

Sticky Menu

Loading

Retina

Twitter

Contact form

Sources and Credits