Thank you
Thank you for purchasing. If you have any questions that are beyond the scope of this documentation, please feel free to contact me.
Rate it if you like it.
Introduction
"Shipping" is a unique and professional Logistics & Transport HTML template. It is built with Bootstrap 3 framework. It is specially designed to give your transport business website a unique and elegant look. It is easy to customize and coded in developer friendly manner.
It is fully responsive HTML template and is adaptive with any size viewport. Solid integration of reusable UI components and latest trending plugins. This theme can be used for type of project applications.
Installation
To install this theme, Just unzip the zip file from your downloaded from themeforest.net . Unzip the Shipping.zip file in this downloaded file and upload the files from this folder on the server.
You can also view the files offline in your browser.You should see demo version of this theme from its themeforest page.
Features
- Fully Responsive Theme - Build using BootStrap 3 - Fits in any resolution.
-
Unique Animation effect on user interactions and scrolling content using jQuery, CSS3 and animate.css .
-
Designed with LOVE based on HTML5, CSS3 and jQuery.
-
Shipping Vector Icons along with Material Icons & Font awesome icons included.
-
Google fonts included.
-
Comes in 10 colors. (More in future updates)
-
Responsive and Filterable Gallery Showcase. Load Videos and images in portfolio and show them in elegant lightbox. Videos from any online source like YouTube, Vimeo etc. can also be loaded in portfolio.
-
Responsive, mobile based touch swipe Carousel applied at various places.
-
Fully working client side validated EMAIL based PHP - AJAX contact form.
-
Responsive header - Fits based on screen resolution of device.
-
Responsive Lightbox Integrated - Images, Videos and Embeded codes, in lightboxes can be loaded and viewed usnig Previous and Next button options.
-
Fully Tested - Works in all modern browsers (Chrome, Firefox, IE, Safari) and resolutions (Desktops, Tablets and Mobiles)
-
Social media links area in header & footer.
-
Detailed and Clear Documentation.
-
Excellent Support, Response & Timely Updates, makes it fun to use and customize.
PSD Version
Shipping is also available in PSD version and can be downloaded from themeforest. Visit this link: Shipping - Logistics & Transport PSD template.
File Structure
Within the download you'll find the following file structure and contents
Once downloaded, unzip the compressed folder and you'll see something like this:
Shipping/ ├── Shipping/ ───> Contains the develop version of Shipping HTML Template. │ │ ├── img/ └──> All the images etc. │ │ ├── js/ └──> All the custom scripts │ │ ├── css/ └──> All the custom stylesheets │ │ ├── fonts/ └──> All the webfont files │ │ └── index.html ├── version.txt/ ───> Contains the version of Shipping Theme └── documentation/ ───> The help documentation is.
HTML Structure
Page Layout
<!DOCTYPE html>
<html>
<head>
<title>Shipping - Logistics & Transport HTML Template</title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/pace.min.js"></script>
<link href="css/pace-loading-bar.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/animate.shipping.css">
<link rel="stylesheet" type="text/css" href="css/ShippingIcon.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/inviewport-1.3.2.js"></script>
<!--Owl-->
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<link href="css/owl.transitions.css" rel="stylesheet">
<script src="js/owl.carousel.min.js"></script>
<!-- Main Style -->
<link rel="stylesheet" id="main-style" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body class="blue page-loading">
<!-- Section Start - Header -->
<section class='header' id='header'>
<!-- Header Top Bar - Start -->
<div class="topbar-wrap">
<div class="container">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 logo-area">
<div class="logo">
...
</div>
</div>
<div class="col-lg-7 col-md-8 col-sm-7 col-xs-5 menu-area">
<!-- Menu Top Bar - Start -->
<div class="topbar">
<div class="menu">
<div class="..." data-effect="...">
<div class='cssmenu'>
<!-- Menu - Start -->
<ul class='menu-ul'>
<li class='has-sub'>
...
</li>
...
...
</ul>
<!-- Menu - End -->
</div>
</div>
</div>
</div>
<!-- Menu Top Bar - End -->
<!-- Mobile Menu - Start -->
<div class="menu-mobile col-xs-10 pull-right cssmenu">
<i class="icon icon-menu menu-toggle"></i>
<ul class="menu" id='parallax-mobile-menu'>
</ul>
</div>
<!-- Mobile Menu - End -->
</div>
</div>
</div>
<!-- Header Top Bar - End -->
<div class="header-bg header-small">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 slantbar hidden-xs"></div>
<!-- Header Tracking Box - Start -->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 white-wrap hidden-xs">
<div class="white-box">
<div class="track-order">
...
...
</div>
</div>
</div>
<!-- Header Tracking Box - End -->
<!-- Header Content Slide - Start -->
<div style="...">
<img src="..." alt="..." class="img-responsive">
<div class="bg-overlay"></div>
<div class="main-wrap">
...
...
</div>
</div>
<!-- Header Content Slide - End -->
</div>
</section>
<!-- Section End - Header -->
<!-- Section Start - Our Mission -->
<section class='mission'>
<div class="container">
<div class="row">
...
...
...
</div>
</div>
</section>
<!-- Section End - Our Mission -->
<!-- Section Start - Who We Are -->
<section class='whoweare'>
<div class="container">
<div class="row">
...
...
</div>
</div>
</section>
<!-- Section End - Who We Are -->
<!-- Section Start - Footer -->
<section class='footer bg-black parallax ' id='footer'>
<div class="bg-overlay"></div>
<div class="container">
<div class="row">
<!-- Text Widget - Start -->
<div class="..." data-effect="...">
...
</div>
<!-- Text Widget - End -->
<!-- News Widget - Start -->
<div class="..." data-effect="...">
...
</div>
<!-- News Widget - End -->
<!-- Contact Widget - Start -->
<div class="..." data-effect="...">
...
</div>
<!-- Contact Widget - End -->
</div>
</div>
<!-- Copyright Bar - Start -->
<div class="copyright">
<div class="col-md-12">
<div class="container">
...
...
</div>
</div>
</div>
<!-- Copyright Bar - End -->
</section>
<!-- Section End - Footer -->
</body>
</html>
<head></head>
<head>
<title>Shipping - Logistics & Transport HTML Template</title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/pace.min.js"></script>
<link href="css/pace-loading-bar.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/animate.shipping.css">
<link rel="stylesheet" type="text/css" href="css/ShippingIcon.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/inviewport-1.3.2.js"></script>
<!--Owl-->
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<link href="css/owl.transitions.css" rel="stylesheet">
<script src="js/owl.carousel.min.js"></script>
<!-- Main Style -->
<link rel="stylesheet" id="main-style" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body></body>
<body class="blue page-loading">
<!-- Section Start - Header -->
<section class='header' id='header'>
<!-- Header Top Bar - Start -->
<div class="topbar-wrap">
<div class="container">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 logo-area">
<div class="logo">
...
</div>
</div>
<div class="col-lg-7 col-md-8 col-sm-7 col-xs-5 menu-area">
<!-- Menu Top Bar - Start -->
<div class="topbar">
<div class="menu">
<div class="..." data-effect="...">
<div class='cssmenu'>
<!-- Menu - Start -->
<ul class='menu-ul'>
<li class='has-sub'>
...
</li>
...
...
</ul>
<!-- Menu - End -->
</div>
</div>
</div>
</div>
<!-- Menu Top Bar - End -->
<!-- Mobile Menu - Start -->
<div class="menu-mobile col-xs-10 pull-right cssmenu">
<i class="icon icon-menu menu-toggle"></i>
<ul class="menu" id='parallax-mobile-menu'>
</ul>
</div>
<!-- Mobile Menu - End -->
</div>
</div>
</div>
<!-- Header Top Bar - End -->
<div class="header-bg header-small">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 slantbar hidden-xs"></div>
<!-- Header Tracking Box - Start -->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 white-wrap hidden-xs">
<div class="white-box">
<div class="track-order">
...
...
</div>
</div>
</div>
<!-- Header Tracking Box - End -->
<!-- Header Content Slide - Start -->
<div style="...">
<img src="..." alt="..." class="img-responsive">
<div class="bg-overlay"></div>
<div class="main-wrap">
...
...
</div>
</div>
<!-- Header Content Slide - End -->
</div>
</section>
<!-- Section End - Header -->
<!-- Section Start - Our Mission -->
<section class='mission'>
<div class="container">
<div class="row">
...
...
...
</div>
</div>
</section>
<!-- Section End - Our Mission -->
<!-- Section Start - Who We Are -->
<section class='whoweare'>
<div class="container">
<div class="row">
...
...
</div>
</div>
</section>
<!-- Section End - Who We Are -->
<!-- Section Start - Footer -->
<section class='footer bg-black parallax ' id='footer'>
<div class="bg-overlay"></div>
<div class="container">
<div class="row">
<!-- Text Widget - Start -->
<div class="..." data-effect="...">
...
</div>
<!-- Text Widget - End -->
<!-- News Widget - Start -->
<div class="..." data-effect="...">
...
</div>
<!-- News Widget - End -->
<!-- Contact Widget - Start -->
<div class="..." data-effect="...">
...
</div>
<!-- Contact Widget - End -->
</div>
</div>
<!-- Copyright Bar - Start -->
<div class="copyright">
<div class="col-md-12">
<div class="container">
...
...
</div>
</div>
</div>
<!-- Copyright Bar - End -->
</section>
<!-- Section End - Footer -->
</body>
Header Section
<!-- Section Start - Header -->
<section class='header' id='header'>
<!-- Header Top Bar - Start -->
<div class="topbar-wrap">
<div class="container">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 logo-area">
<div class="logo">
...
</div>
</div>
<div class="col-lg-7 col-md-8 col-sm-7 col-xs-5 menu-area">
<!-- Menu Top Bar - Start -->
<div class="topbar">
<div class="menu">
<div class="..." data-effect="...">
<div class='cssmenu'>
<!-- Menu - Start -->
<ul class='menu-ul'>
<li class='has-sub'>
...
</li>
... ...
</ul>
<!-- Menu - End -->
</div>
</div>
</div>
</div>
<!-- Menu Top Bar - End -->
<!-- Mobile Menu - Start -->
<div class="menu-mobile col-xs-10 pull-right cssmenu">
<i class="icon icon-menu menu-toggle"></i>
<ul class="menu" id='parallax-mobile-menu'>
</ul>
</div>
<!-- Mobile Menu - End -->
</div>
</div>
</div>
<!-- Header Top Bar - End -->
<div class="header-bg header-small">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 slantbar hidden-xs"></div>
<!-- Header Tracking Box - Start -->
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 white-wrap hidden-xs">
<div class="white-box">
<div class="track-order">
... ...
</div>
</div>
</div>
<!-- Header Tracking Box - End -->
<!-- Header Content Slide - Start -->
<div style="...">
<img src="..." alt="..." class="img-responsive">
<div class="bg-overlay"></div>
<div class="main-wrap">
... ...
</div>
</div>
<!-- Header Content Slide - End -->
</div>
</section>
<!-- Section End - Header -->
Footer Section
<!-- Section Start - Footer -->
<section class='footer bg-black parallax ' id='footer'>
<div class="bg-overlay"></div>
<div class="container">
<div class="row">
<!-- Text Widget - Start -->
<div class="..." data-effect="...">
...
</div>
<!-- Text Widget - End -->
<!-- News Widget - Start -->
<div class="..." data-effect="...">
...
</div>
<!-- News Widget - End -->
<!-- Contact Widget - Start -->
<div class="..." data-effect="...">
...
</div>
<!-- Contact Widget - End -->
</div>
</div>
<!-- Copyright Bar - Start -->
<div class="copyright">
<div class="col-md-12">
<div class="container">
... ...
</div>
</div>
</div>
<!-- Copyright Bar - End -->
</section>
<!-- Section End - Footer -->
Color Themes
In the <head>...</head> section of Shipping theme main color file needs to be included. Default theme (Blue colored) file is style.css
Default Theme (Blue)
<link rel="stylesheet" id="main-style" type="text/css" href="css/style.css">
Other 9 theme files are indicated by name itself in the CSS folder of this theme. They are as below:
Red Theme
<link rel="stylesheet" id="main-style" type="text/css" href="css/style.red.css">
Orange Theme
<link rel="stylesheet" id="main-style" type="text/css" href="css/style.orange.css">
Green Theme
<link rel="stylesheet" id="main-style" type="text/css" href="css/style.green.css">
Yellow Theme
<link rel="stylesheet" id="main-style" type="text/css" href="css/style.yellow.css">
Light Green Theme
<link rel="stylesheet" id="main-style" type="text/css" href="css/style.lightgreen.css">
Dark Blue Theme
<link rel="stylesheet" id="main-style" type="text/css" href="css/style.darkblue.css">
Pink Theme
<link rel="stylesheet" id="main-style" type="text/css" href="css/style.pink.css">
Purple Theme
<link rel="stylesheet" id="main-style" type="text/css" href="css/style.purple.css">
Teal Theme
<link rel="stylesheet" id="main-style" type="text/css" href="css/style.teal.css">
Note: Please include only one file out of 10 themes for color of your choice.
CSS Utilities
Bootstrap CSS
For the bootstrap css and components, please check the Bootstrap 3
Icons
- Shipping Custom Icons
This set is part of the theme.
- Material Design Icons
Check MaterialDesignIcons for more details to see how to use and examples
- FontAwesome icons
Check FontAwesome for more details to see how to use and examples
Animate
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Colors
This theme is available in 5 colors.
Blue
Yellow
Orange
Red
Green
Light Green
Dark Blue
Purple
Pink
Teal
The Grid
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # of columns | 12 | |||
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | Yes | |||
| Column ordering | Yes | |||
CSS
style.css is the main CSS file located in css/ folder of the package. Whole CSS file is well indexed with topic and its related code. Also animate.shipping.css file is found in this folder. It has all the animation classes for various elements.
Javascript
main.js is the javascript file having all the js code. File is located in js/ folder. This file code is also well formatted and section in different respective function names.
Fonts
Google fonts are used in the theme. They are as follows:
- Opensans - Default Body font