Thank you for your recent purchase of Carga Transport & Cargo template. Please don't forget to rate the template and give us your appreciated review.
To install this HTML template you will need to upload all files and folders using an FTP client. We recommend using FileZilla FTP client. To upload your template you will need the following:
Once connected make sure to upload All files and folders within your preferred choice of styles within the "Carga" folder of your download package.
After downloading the template package you will find the following structure:
Below you will find the HTML files With the name of index:
After request from our user, we have added a new feature in the template; Track Order & Trace System. It is to be believed the first of its kind in HTML template. Normally this feature is added in WordPress Versions but We tried to give Minimal Functionality of the tracking and ordering system in the HTML too.
Below I am explaining how you can access this and use it.
NOTE: Try to give this access to only the responsible person, In case this system used by any hacker or unknown person he/she could damage your record of clients and orders.
'track-trace' folder contains All files and folders related to track trace system
Step 1: Goto 'carga/track-trace/config.php' file and update database username and password.
Step 1.1: Goto 'carga/track-trace/pdo_login.php' file and update database username and password.
Step 2: After adding correct logins, you need to access the install.php to install the 'test' database.
Access Your URL in Browser like this: www.yoursitename.com/track-trace/public/install.php (this will install the database and create a table for you)
Step 2.1: (If Install fails) Import Sample Database Provided in Data Folder Carga/track-trace/data/sample-db.sql
A sample database is added inside the package as well, you can find it here carga\track-trace\data\sample-db.sql) You can add sample database for sample records. How to Import any database
Step 3: After adding database successfully, access URL to view Home Screen
www.yoursitename.com/track-trace/public (Keep this URL secret, any unknown access could cause damages to your record)
www.yoursitename.com/track-trace/public/create.php
Step 4: From welcome screen, you can add order/shipment
Add data in fields to add record
After successfully adding the order, You will get Tracking ID here
Step 5: Update any added record from here
www.yoursitename.com/track-trace/public/update.php
It will get you to this screen
Click on 'Edit' button here. Click 'Submit' to update the record.
www.yoursitename.com/track-trace/public/update.php
Step 6: You can also view all records/orders here
www.yoursitename.com/track-trace/public/read.php
Step 7: You can track any order using tracking ID, Add the tracking id and HIT enter.
You will get the result on same screen
Click 'Back TO Home' to return to the 'Welcome Screen'
www.yoursitename.com/track-trace/public/delete.php
Step 8: You can delete any completed order or cancelled order if required.
You can easily create HTML pages, or whatever you want using this easy clean Template. Code is clearly written and commented for each considerable part.
when you open any HTML file you will notice that they are all have the same header and footer so they have the same HTML code and we'll explain both as follows:
If You need to create a new html page you must include the following tags in the following order:
The Head TAG ( All pages must have the following head tag ):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carga HTML Template | Homepage</title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<!-- Preloader -->
<div class="preloader"></div>
<!-- Main Header-->
<header class="main-header">
<!--Header Top-->
<div class="header-top">
<div class="auto-container">
<div class="clearfix">
<!--Top Left-->
<div class="top-left">
<!--Social Box-->
<ul class="social-box">
<li><a href="#"><span class="fa fa-twitter"></span></a></li>
<li><a href="#"><span class="fa fa-facebook"></span></a></li>
<li><a href="#"><span class="fa fa-linkedin"></span></a></li>
<li><a href="#"><span class="fa fa-google-plus"></span></a></li>
</ul>
</div>
<!--Top Right-->
<div class="top-right">
<ul class="right-list">
<li><span class="icon flaticon-mail"></span>info@carga.com</li>
<li><span class="icon flaticon-phone-contact"></span>+444 987-321-300</li>
</ul>
<!--Language-->
<div class="language dropdown"><a class="btn btn-default dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true" href="#"><span class="globe
flaticon-world"></span>United State Office <span class="icon fa fa-angle-down"></span></a>
<ul class="dropdown-menu style-one" aria-labelledby="dropdownMenu2">
<li><a href="#">NewYork Office</a></li>
<li><a href="#">Berlin Office</a></li>
<li><a href="#">Dubai Office</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--Header-Upper-->
<div class="header-upper">
<div class="auto-container">
<div class="clearfix">
<div class="pull-left logo-box">
<div class="logo"><a href="index.html"><img src="images/logo.png" alt="" title=""></a></div>
</div>
<div class="pull-right upper-right">
<!--Header Lower-->
<div class="header-lower">
<div class="clearfix">
<div class="nav-outer clearfix">
<!-- Main Menu -->
<nav class="main-menu navbar-expand-md">
<div class="navbar-header">
<!-- Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent">
<ul class="navigation clearfix">
<li class="current dropdown"><a href="#">Home</a>
<ul>
<li><a href="index.html">Home Page 01</a></li>
<li><a href="index-2.html">Home Page 02</a></li>
<li class="dropdown"><a href="#">Header Styles</a>
<ul>
<li><a href="index.html">Header Style 01</a></li>
<li><a href="index-2.html">Header Style 02</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="about.html">About us</a></li>
<li><a href="fleet.html">our fleet</a></li>
<li><a href="quote.html">Get Quote</a></li>
<li><a href="track.html">Track & Trace</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<!-- Main Menu End-->
<div class="outer-box clearfix">
<!--Option Box-->
<div class="option-box">
<!--Search Box-->
<div class="search-box-outer">
<div class="dropdown">
<button class="search-box-btn dropdown-toggle" type="button"
id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="flaticon-route"></span></button>
<ul class="dropdown-menu pull-right search-panel" aria-labelledby="dropdownMenu3">
<li class="panel-outer">
<div class="form-container">
<form method="post" action="blog.html">
<div class="form-group">
<input type="search" name="field-name" value=""
placeholder="Search Here" required>
<button type="submit" class="search-btn"><span
class="fa fa-search"></span></button>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End Header Lower-->
</div>
</div>
</div>
</div>
<!--End Header Upper-->
<!--Sticky Header-->
<div class="sticky-header">
<div class="auto-container clearfix">
<!--Logo-->
<div class="logo pull-left">
<a href="index.html" class="img-responsive"><img src="images/logo-small.png" alt="" title=""></a>
</div>
<!--Right Col-->
<div class="right-col pull-right">
<!-- Main Menu -->
<nav class="main-menu navbar-expand-md">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse clearfix" id="navbarSupportedContent1">
<ul class="navigation clearfix">
<li class="current dropdown"><a href="#">Home</a>
<ul>
<li><a href="index.html">Home Page 01</a></li>
<li><a href="index-2.html">Home Page 02</a></li>
<li class="dropdown"><a href="#">Header Styles</a>
<ul>
<li><a href="index.html">Header Style 01</a></li>
<li><a href="index-2.html">Header Style 02</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="about.html">About us</a></li>
<li><a href="fleet.html">our fleet</a></li>
<li><a href="quote.html">Get Quote</a></li>
<li><a href="track.html">Track & Trace</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav><!-- Main Menu End-->
</div>
</div>
</div>
<!--End Sticky Header-->
</header>
<!--End Main Header -->
<!--Hallery Section-->
<section class="gallery-section">
<div class="auto-container">
<h2 class="wow fadeInUp animated" data-wow-delay="0ms" data-wow-duration="1500ms">Title Here</h2>
<div class="row clearfix">
</div>
</div>
</section>
The style.css file is the responsible for the Template styling as follows:
/* ------------------------------------------ */
/* TABLE OF CONTENTS
/* ------------------------------------------ */
/* 01 - Fonts */
/* 02 - Reset */
/* 03 - Global */
/* 04 - Main Header */
/* 05 - Banner Section */
/* 06 - Video Section */
/* 07 - Services Section */
/* 08 - Clients Section */
/* 09 - Project Section / four Item Carousel */
/* 10 - Two Item Carousel */
/* 11 - Call To Action Section */
/* 12 - Four Item Carousel / Project Section */
/* 13 - Footer Style */
Note: Images used in the preview demo are not included in the Downloaded package.
Thanks for visiting and purchasing our template .