Tracky - Transport & Logistic Responsive HTML Template

Tracky is a transport and logistics HTML template. Its based on bootstarp 1170 px grid system.
It speacially designed for transport business. Any one can customize this template as his wishes.

  • Created: 01/30/2017
  • Latest update: 06/16/2017
  • Version: 1.0.3
  • Template by: Softnio

Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Genaral Information

Features

• 1170 px bootstrap grid.
• Font awesome icons.
• Easy to customize.
• sass files included.
• Fully Responsive.
• Modern and unique design.

Including page

• index.html
• about-us.html
• service.html
• blog.html
• blog-single.html
• contact.html

The core stylesheets (CSS) of this template are placed in /css/ folder.

All Images are in /images/ folder.

All Javascripts files are in /js/ folder.

HTML Structure

Basic Structure:

  1. <nav class="navbar navbar-default navbar-custom navbar-fixed-top"></nav> - main navigation,logo
  2. <section></section> - all content goes section
  3. <footer></footer> - social, copyright

Genarel structure of home page:

<body>
    <!-- navbar -->
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top" data-spy="affix" data-offset-top="100">
    </nav>
    <!-- End navbar -->

    <!-- banner -->
    <section id="myCarousel"  class="banner-content carousel slide carousel-fade">    
    </section>
    <!-- End banner -->

    <!-- about us -->
    <section id="about-us" class="about-us">
    </section>
    <!-- End about-us -->

    <!-- Statistics -->
    <section class="statistics parallax-window" data-parallax="scroll" data-image-src="image/parallax-bg.jpg">        
    </section>
    <!-- End Statistics -->

    <!-- Service -->
    <section id="service" class="service">
    </section>
    <!-- End service -->

    <!--quote&testimonial  -->
    <section class="quo-tstmnail">
    </section>
    <!-- End quote&testimonial -->

    <!-- client-logo -->
    <section class="cl-logo">
    </section>
    <!-- End client-logo -->

    <!-- call to action -->
    <section class="call-action">                
    </section>
    <!-- End call to action -->

    <!-- map -->
    <section class="map-holder">
    </section>
    <!-- End map -->

    <!--Footer  -->
    <footer class="footer-wrapper">
    </footer>
    <!-- End Footer -->

    <div class="copyright">
    </div>
</body>  

CSS Files and Structure

CSS files :

All CSS are located in the "css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:

01. bootstrap.min.css
02. font-awesome.min.css
03. nice-select.css
04. owl.carousel.css
05. style.css

CSS structure sample :

/* ==========================================================================
    1.0 Fonts
   ========================================================================== */
/*open sans font*/
@font-face {
  font-family: 'open-sans';
  src: url("../fonts/open-sans/opensans-regular-webfont.eot");
  src: url("../fonts/open-sans/opensans-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/opensans-regular-webfont.woff2") format("woff2"), url("../fonts/open-sans/opensans-regular-webfont.woff") format("woff"), url("../fonts/open-sans/opensans-regular-webfont.ttf") format("truetype");
  font-weight: 400; }
@font-face {
  font-family: 'open-sans';
  src: url("../fonts/open-sans/opensans-bold-webfont.eot");
  src: url("../fonts/open-sans/opensans-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/opensans-bold-webfont.woff2") format("woff2"), url("../fonts/open-sans/opensans-bold-webfont.woff") format("woff"), url("../fonts/open-sans/opensans-bold-webfont.ttf") format("truetype");
  font-weight: 700; }
@font-face {
  font-family: 'open-sans';
  src: url("../fonts/open-sans/opensans-light-webfont.eot");
  src: url("../fonts/open-sans/opensans-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans/opensans-light-webfont.woff2") format("woff2"), url("../fonts/open-sans/opensans-light-webfont.woff") format("woff"), url("../fonts/open-sans/opensans-light-webfont.ttf") format("truetype");
  font-weight: 300; }
/*Arimo font*/
@font-face {
  font-family: 'arimo';
  src: url("../fonts/arimo/arimo-regular-webfont.eot");
  src: url("../fonts/arimo/arimo-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/arimo/arimo-regular-webfont.woff2") format("woff2"), url("../fonts/arimo/arimo-regular-webfont.woff") format("woff"), url("../fonts/arimo/arimo-regular-webfont.ttf") format("truetype");
  font-weight: 400; }
@font-face {
  font-family: 'arimo';
  src: url("../fonts/arimo/arimo-bold-webfont.eot");
  src: url("../fonts/arimo/arimo-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/arimo/arimo-bold-webfont.woff2") format("woff2"), url("../fonts/arimo/arimo-bold-webfont.woff") format("woff"), url("../fonts/arimo/arimo-bold-webfont.ttf") format("truetype");
  font-weight: 700; }
/* ==========================================================================
    2.0 Reset css
   ========================================================================== */
body {
  font-family: 'open-sans';
  font-size: 14px;
  font-weight: 400;
  line-height: 22px; }

html, body {
  overflow-x: hidden; }

a:link, a:visited {
  outline: 0;
  text-decoration: none; }

a:hover, a:focus, a:active {
  text-decoration: none; }

img {
  border: 0 none;
  max-width: 100%;
  height: auto; }

ul, ol {
  padding: 0px;
  margin: 0px; }
  ul li, ol li {
    list-style: none; }

input:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: 0 0 0 transparent; }

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 10000;
  /* makes sure it stays on top */ }

.pad-0 {
  padding: 0px; }

.npl {
  padding-left: 0px; }

.npr {
  padding-right: 0px; }

.section-heading {
  color: #1e1d2b;
  font-size: 24px;
  font-weight: 700;
  font-family: arimo;
  text-transform: uppercase;
  padding-bottom: 45px; }

.btn {
  color: #fff;
  background: #3c82f4;
  transition: background 350ms, color 350ms; }
  .btn:hover {
    color: #fff;
    background: #1d6be9; }

.p-btn {
  color: #3c82f4;
  font-weight: bold;
  font-family: 'arimo'; }

h1, h2, h3, h4, h5, h6 {
  font-family: "arimo";
  font-weight: 700;
  margin: 0px; }

p {
  margin: 0px; }

.preload {
  display: none; }

/* ==========================================================================
    3.0 Navbar Styling
   ========================================================================== */
.navbar-custom {
  background: transparent;
  border: none; }
  .navbar-custom .navbar-brand {
    padding: 42px 37px;
    background: #ececec;
    width: 100%;
    height: 106px;
    display: block;
    transition: all .3s;
    transition-property: height, padding; }
    .navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus, .navbar-custom .navbar-brand:active {
      background: #ececec; }
  .navbar-custom > .container .navbar-brand {
    margin-left: 0px; }
  .navbar-custom.affix .masthead {
    visibility: hidden;
    height: 0px;
    padding: 0px;
    overflow: hidden; }
  .navbar-custom.affix .bottom-bar {
    background: #101327; }
  .navbar-custom.affix .navbar-brand {
    height: 60px;
    padding: 20px 37px; }
  .navbar-custom .masthead {
    color: #fff;
    font-weight: 300;
    padding: 8px 0;
    transition: height 0.3s;
    height: 46px;
    overflow: hidden; }
    .navbar-custom .masthead .contact {
      padding-top: 4px; }
      .navbar-custom .masthead .contact .contact-li {
        display: inline-block;
        margin-right: 35px; }
        .navbar-custom .masthead .contact .contact-li a {
          color: #fff; }
          .navbar-custom .masthead .contact .contact-li a:hover {
            color: #fff; }
      .navbar-custom .masthead .contact i {
        font-size: 18px;
        margin-right: 10px; }
    .navbar-custom .masthead .social a {
      color: #fff;
      line-height: 28px;
      border: 1px solid #fff;
      display: inline-block;
      height: 30px;
      width: 30px;
      margin-left: 5px;
      text-align: center; }
      .navbar-custom .masthead .social a:hover {
        background: #fff;
        color: #000; }
  .navbar-custom .bottom-bar {
    background: #191c30; }
    .navbar-custom .bottom-bar .office .nice-select {
      width: 100%;
      height: 100%;
      background-color: #3c82f4;
      color: white;
      padding: 10px 30px;
      font-weight: 300;
      border: none;
      cursor: pointer;
      border-radius: 0px; }
      .navbar-custom .bottom-bar .office .nice-select .list {
        background: #2e75e9;
        border-radius: 0px; }
      .navbar-custom .bottom-bar .office .nice-select:before {
        font-family: FontAwesome;
        content: "\f0ac";
        display: block;
        margin-top: -4px;
        position: absolute;
        left: 15px;
        top: 18%;
        margin-top: 0px; }
      .navbar-custom .bottom-bar .office .nice-select:after {
        border-bottom: 2px solid #FFF;
        border-right: 2px solid #FFF;
        top: 55%;
        right: 15px; }
      .navbar-custom .bottom-bar .office .nice-select .option:hover, .navbar-custom .bottom-bar .office .nice-select .option.selected.focus {
        background: #165fd7; }
    .navbar-custom .bottom-bar .nav {
      padding-top: 7px; }
      .navbar-custom .bottom-bar .nav li.active a {
        background: transparent;
        border-bottom: 3px solid #3c82f4; }
      .navbar-custom .bottom-bar .nav li a {
        color: #fff;
        font-family: 'arimo';
        font-weight: 700; }
        .navbar-custom .bottom-bar .nav li a:hover {
          border-bottom: 3px solid #3c82f4;
          color: #fff; }
    .navbar-custom .bottom-bar .search.dropdown {
      position: relative;
      float: right;
      display: inline-block; }
      .navbar-custom .bottom-bar .search.dropdown .dropbtn {
        color: #fff;
        width: 60px;
        height: 60px;
        background: #0f1121;
        padding: 20px 25px;
        display: block;
        cursor: pointer;
        border: none; }
      .navbar-custom .bottom-bar .search.dropdown .dropdown-content {
        display: none;
        position: absolute;
        right: 0px;
        width: 280px;
        height: 50px; }
        .navbar-custom .bottom-bar .search.dropdown .dropdown-content .form-control {
          background: #0f1121;
          width: 100%;
          height: 100%;
          border: none;
          border-radius: 0px;
          padding: 10px 20px; }
          .navbar-custom .bottom-bar .search.dropdown .dropdown-content .form-control input {
            width: 100%;
            border-radius: 0px;
            height: 30px;
            border: none;
            padding-left: 15px; }
      .navbar-custom .bottom-bar .search.dropdown:hover .dropdown-content {
        display: block; }
  .navbar-custom .navbar-collapse {
    width: 83.333%;
    border-width: 2px; }

/*========================================================================
    4.0 Banner Styling
   ========================================================================== */
.banner-content.carousel-fade {
  height: 900px;
  /* Background images are set within the HTML using inline CSS, not here */ }
  .banner-content.carousel-fade .carousel-inner .item {
    transition-property: opacity; }
  .banner-content.carousel-fade .carousel-inner .item,
  .banner-content.carousel-fade .carousel-inner .active.left,
  .banner-content.carousel-fade .carousel-inner .active.right {
    opacity: 0; }
  .banner-content.carousel-fade .carousel-inner .active,
  .banner-content.carousel-fade .carousel-inner .next.left,
  .banner-content.carousel-fade .carousel-inner .prev.right {
    opacity: 1; }
  .banner-content.carousel-fade .carousel-inner .next,
  .banner-content.carousel-fade .carousel-inner .prev,
  .banner-content.carousel-fade .carousel-inner .active.left,
  .banner-content.carousel-fade .carousel-inner .active.right {
    left: 0;
    transform: translate3d(0, 0, 0); }
  .banner-content.carousel-fade .tab-box {
    position: absolute;
    width: 100%;
    top: 265px; }
    .banner-content.carousel-fade .tab-box .custom-tab {
      margin-bottom: 185px; }
      .banner-content.carousel-fade .tab-box .custom-tab .nav-tabs.carousel-indicators {
        background: #191c30;
        padding: 0 40px 0 40px;
        border-bottom: 1px solid #30344e;
        position: static;
        margin-left: 0px;
        width: 100%; }
        .banner-content.carousel-fade .tab-box .custom-tab .nav-tabs.carousel-indicators .active {
          background: transparent; }
        .banner-content.carousel-fade .tab-box .custom-tab .nav-tabs.carousel-indicators li {
          height: auto;
          width: auto;
          text-indent: 0px;
          padding: 10px 28px 0 28px;
          border: none;
          border-radius: 0px;
          margin: 0px; }
          .banner-content.carousel-fade .tab-box .custom-tab .nav-tabs.carousel-indicators li:first-child {
            padding-left: 0px; }
          .banner-content.carousel-fade .tab-box .custom-tab .nav-tabs.carousel-indicators li:last-child {
            padding-right: 0px; }
        .banner-content.carousel-fade .tab-box .custom-tab .nav-tabs.carousel-indicators li a {
          outline: none;
          padding: 0 0 10px 0;
          color: #fff;
          margin: 0px;
          background: transparent;
          border: 0px;
          border-bottom: 3px solid transparent;
          border-radius: 0px;
          transition: border 300ms; }
          .banner-content.carousel-fade .tab-box .custom-tab .nav-tabs.carousel-indicators li a img {
            padding: 0 0 10px 0px;
            height: 41px;
            width: auto; }
        .banner-content.carousel-fade .tab-box .custom-tab .nav-tabs.carousel-indicators li a:hover, .banner-content.carousel-fade .tab-box .custom-tab .nav-tabs.carousel-indicators li.active a, .banner-content.carousel-fade .tab-box .custom-tab .nav-tabs.carousel-indicators li a:focus {
          border-bottom-color: #3c82f4; }
      .banner-content.carousel-fade .tab-box .custom-tab .tab-content {
        background-color: rgba(25, 28, 48, 0.8);
        color: #fff;
        padding: 40px 25px; }
        .banner-content.carousel-fade .tab-box .custom-tab .tab-content h4 {
          font-size: 30px;
          padding-bottom: 15px; }
  .banner-content.carousel-fade .tracking {
    background: rgba(25, 28, 48, 0.9);
    color: #fff;
    padding: 70px 0;
    z-index: 100;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%; }
    .banner-content.carousel-fade .tracking h3 {
      font-size: 30px; }
    .banner-content.carousel-fade .tracking p {
      padding-top: 10px; }
    .banner-content.carousel-fade .tracking .tracking-form {
      margin-top: 10px; }
      .banner-content.carousel-fade .tracking .tracking-form .form-group {
        margin-bottom: 0px; }
        .banner-content.carousel-fade .tracking .tracking-form .form-group .form-control {
          background: transparent;
          border-radius: 0px;
          height: 45px;
          border: 1px solid #555561;
          color: #fff; }
      .banner-content.carousel-fade .tracking .tracking-form .btn {
        height: 45px;
        border-radius: 0px;
        font-family: 'arimo';
        font-weight: 700;
        font-size: 18px;
        text-transform: uppercase;
        border: none; }
  .banner-content.carousel-fade .carousel,
  .banner-content.carousel-fade .item,
  .banner-content.carousel-fade .active {
    height: 100%; }
  .banner-content.carousel-fade .carousel-inner {
    height: 100%; }
  .banner-content.carousel-fade .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover; }

#in_pge_banner.banner-content {
  height: 350px; }
  #in_pge_banner.banner-content .header-text {
    color: #fff;
    padding-top: 210px; }
    #in_pge_banner.banner-content .header-text h4.page-title {
      font-size: 36px;
      font-family: 'arimo';
      font-weight: 700;
      padding-bottom: 10px; }
  #in_pge_banner.banner-content.a_page_banner {
    background: url("../image/about-us-banner.jpg") no-repeat;
    background-size: cover;
    background-position: center center; }
  #in_pge_banner.banner-content.ser_page_banner {
    background: url("../image/service-banner.jpg") no-repeat;
    background-size: cover;
    background-position: center center; }
  #in_pge_banner.banner-content.blog_page_banner {
    background: url("../image/blog-banner.jpg") no-repeat;
    background-size: cover;
    background-position: center center; }
  #in_pge_banner.banner-content.cntct_page_banner {
    background: url("../image/contact-banner.jpg") no-repeat;
    background-size: cover;

Javascript

Plugins:

All javascript are located in the "js" folder of the template.

01. gmaps.js
02. jquery.min.js
03. jquery.nice-select.js
04. bootstrap.js
05. owl.carousel.min.js
06. parallax.js
07. form.plugins.js - New
08. script.js

Javascript code sample:

All javascript code are located in script.js file.

;(function($){
  'use strict';
      // preloader
      $(window).on('load', function() { // makes sure the whole site is loaded
        $('#status').fadeOut(); // will first fade out the loading animation
        $('#preloader').delay(150).fadeOut('slow'); // will fade out the white DIV that covers the website.
        $('body').delay(150).css({'overflow':'visible'});
      });

      $('#carousel').carousel({
          interval: 3000
      });
      $('.carousel').carousel({
          interval: false
      });

      $('select').niceSelect();

      // owl
      $('.loop').owlCarousel({
          items: 3,
          loop: true,
          margin: 6,
          responsive:{
              600:{
                  items:6
              }
          }
      });

      // active page menu when click
      var url = window.location.href;
      $(".nav li a").each(function() {
          // checks if its the same on the address bar
          if (url === (this.href)) {
              $(this).closest("li").addClass("active");
          }
      });
          
      // top contact active
      var con = $(".contact");
      con.hide().eq(0).show();
      $('.list li').on('click', function(){
          var value = "#" + $(this).data("value");
          con.fadeOut(100);
          $(value).delay(150).fadeIn(250);
      });

      // google map initialize
      var map = new GMaps({
          div: '#map',
          lat: -12.043333,
          lng: -77.028333
      });
      var mapId=$("#map"), mapholder = $('.map-holder');
      mapholder.on('click', function () {
          mapId.css("pointer-events", "auto");
      });

      mapholder.on('mouseleave', function() {
        mapId.css("pointer-events", "none");
      });

      // FORM @v 1.0.3
  var contactForm = $('#contact-us'),
    quoteForm = $('#quote-request'),
    subscribeForm = $('#subscribe-me');
  if (quoteForm.length > 0 || contactForm.length > 0 || subscribeForm.length > 0) {
    if( !$().validate || !$().ajaxSubmit ) {
      console.log('quoteForm: jQuery Form or Form Validate not Defined.');
      return true;
    }
    // Quote Form - home page
    if (quoteForm.length > 0) {
      var selectRec = quoteForm.find('select.required'),
        qf_results = quoteForm.find('.form-results');
      quoteForm.validate({
        ignore: [],
        errorPlacement: function(error, elm) {
          if (elm.is('select.required')) { error.insertAfter(elm.next('.nice-select')); } else { error.insertAfter(elm); }
        },
        invalidHandler: function () { qf_results.slideUp(400); },
        submitHandler: function(form) {
          qf_results.slideUp(400);
          $(form).ajaxSubmit({
            target: qf_results, dataType: 'json',
            success: function(data) {
              var type = (data.result==='error') ? 'alert-danger' : 'alert-success';
              qf_results.removeClass( 'alert-danger alert-success' ).addClass( 'alert ' + type ).html(data.message).slideDown(400);
              if (data.result !== 'error') { $(form).clearForm(); }
            }
          });
        }
      });
      selectRec.on('change', function() { $(this).valid(); });
    }
    // Contact Form - contact page
    if (contactForm.length > 0) {
      var cf_results = contactForm.find('.form-results');
      contactForm.validate({
        invalidHandler: function () { cf_results.slideUp(400); },
        submitHandler: function(form) {
          cf_results.slideUp(400);
          $(form).ajaxSubmit({
            target: cf_results, dataType: 'json',
            success: function(data) {
              var type = (data.result==='error') ? 'alert-danger' : 'alert-success';
              cf_results.removeClass( 'alert-danger alert-success' ).addClass( 'alert ' + type ).html(data.message).slideDown(400);
              if (data.result !== 'error') { $(form).clearForm(); }
            }
          });
        }
      });
    }
    // Subsribe - footer form
    if (subscribeForm.length > 0) {
      var sf_results = subscribeForm.find('.form-results');
      subscribeForm.validate({
        invalidHandler: function () { sf_results.slideUp(400); },
        submitHandler: function(form) {
          sf_results.slideUp(400);
          $(form).ajaxSubmit({
            target: sf_results, dataType: 'json',
            success: function(data) {
              var type = (data.result==='error') ? 'alert-danger' : 'alert-success';
              sf_results.removeClass( 'alert-danger alert-success' ).addClass( 'alert ' + type ).html(data.message).slideDown(400);
              if (data.result !== 'error') { $(form).clearForm(); }
            }
          });
        }
      });
    }
  }
 
})(jQuery);

PSD Files

We've included All page psd files with this template:

  1. tracky-about.psd
  2. tracky-blog.psd
  3. tracky-contact.psd
  4. tracky-home.psd
  5. tracky-service.psd

How to Set Email Address for Form New

First open the php file located into form folder. Files are 'contact.php', 'quote-request.php', 'subscribe.php'. On each file you will saw bellow code. Just update your sitename, your email and name. If you want to add multiple email then just duplicate the line '$emailTO[] = array...' and add another email

// Enter Your Sitename
$sitename = 'your site';

// Enter your email addresses: @required
$emailTO[] = array( 'email' => 'your mail', 'name' => 'your name' );

If you want to add BCC / CC email address then just enable below line and update same way as email too.

//$emailBCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' );

//$emailCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' );

Change Log

Version 1.0 29 January, 2017

Initial Released Template

Version 1.0.2 30 January, 2017

Minor Bug fixed.

Version 1.0.3 16 Jun, 2017

In this version those we have made changes given bellow.

New Folder / file added:
+ /form
+ /js/form.plugins.js

New Code changes :
+ /js/script.js [included form processing code]
! All the form code updated into HTML files.
! Minor change stylesheet specifically for form part.

 

Note: If you have older version then you can upgarde to newer version. So first include '/form' folder into your project and new js file (as mentioned in change log). After that you may update stylesheet 'css/style.css' file. If you modify original css then include below css file into your css.

form label.error {
    display: none !important
}
.form-control.error, select.error, select.error+.nice-select {
    border-color: #FF4346
}

Caution: Must aware it will overwrite your custom coded if you already, so must keep backup before any process.

Sources and Credits

Javascript plugins:

Paralax :- https://github.com/pixelcog/parallax.js/
nice-select :- https://github.com/hernansartorio/jquery-nice-select
gmaps :-https://hpneo.github.io/gmaps/
preloader :- https://www.niklausgerber.com/projects/preloadme-a-lightweight-jquery-website-preloader/
jQuery Form :- http://malsup.com/jquery/form/
jQuery Validation :- http://jqueryvalidation.org/

PHP

PHPMailer :- https://github.com/PHPMailer/PHPMailer/

Images

pexels :- https://www.pexels.com/
unsplash :-https://unsplash.com/

Icons

Fontawesome :- http://fontawesome.io/icons/
Flaticon:- http://www.flaticon.com/

Fonts

Arimo :- Montserrat
Open sans :- Open sans