AUTHENTICATION BY GRID IMAGE PATTERN

A PROJECT REPORT

Submitted by

RAGHUL K (312818104052)
SURIYA PRAKASH R (312818104083)
THOSSI BALA V (312818104087)

in partial fulfillment for the award of the degree

of
BACHELOR OF ENGINEERING
in
COMPUTER SCIENCE AND ENGINEERING

AGNI COLLEGE OF TECHNOLOGY, CHENNAI

ANNA UNIVERSITY : CHENNAI 600 025

MAY 2022
 ANNA UNIVERSITY: CHENNAI 600 025

BONAFIDE CERTIFICATE

Certified that this project report “Authentication by Grid Image Pattern” is

the bonafide work of “RAGHUL K (312818104052), SURIYA PRAKASH R
(312818104083), THOSSI BALA V (312818104087)” who carried out the project
work under my supervision.

SIGNATURE SIGNATURE
Dr. Meera Mr. SUDHAHAR T.N M.E.,
HEAD OF THE DEPARTMENT ASSISTANT PROFESSOR
PROFESSOR SUPERVISOR
Department of Computer Science Department of Computer Science
and Engineering, and Engineering,
Agni College of Technology, Agni College of Technology,
Thalambur , Thalambur ,
Chennai-600 130. Chennai-600 130.

Submitted for the project work and Viva-Voice Examination held on ________-2021

INTERNAL EXAMINER EXTERNAL EXAMINER

 ACKNOWLEDGEMENT

Apart from one’s effort, the success of a project depends largely in the
encouragement and the guidelines of many others. We take this opportunity to
express our gratitude to the people who have been instrumental in the successful
completion of this project.

We take this opportunity to express our deep sense of gratitude to our

Principal DR.S.CHANDRAVADHANA M.E.,Ph.D., for his valuable
encouragement and enlightening suggestions throughout the project.

We also take this opportunity to express our heartfelt thanks to

Dr.S.SARAVANAN M.E.,Ph.D. Head of the Department, Computer science
and Engineering.

We would like to thank our project coordinator Mr. SUDHAHAR T.N

M.E. for the support and guidance to complete the project successfully.

We wish to express our silence and profound thanks to our guide Mr.
SUDHAHAR T.N M.E. Assistant Professor, for providing the support and the
encouragement that were instrumental in the successful completion of the
project.

We express our profound thanks to all the faculty members of the

department of Computer Science and Engineering for their continuous
encouragement and guidelines given to us for the work and their great support
in successfully completing this project. We would like to thank our parent and
our friend for their encouragement and support without which we couldn’t have
completed our project on time.
 ABSTRACT

The GPS (Global Positioning System) has been used to monitor the
transport. The vehicle should be installed with live GPS tracker. The details of
the vehicle and count of the passengers is tracked in the app using the
fingerprint sensors which is used to make a check-in facility in the Vehicle.
Passengers should make a check-in while boarding the vehicle. Then should
check-out when they leave the vehicle. The main concept behind this project is
that the GPS tracker and fingerprint is attached inside the vehicle the GPS is
used to detect the current, then the sensor used to make a check-in and out tasks
after verifying the fingerprint the details is shared to the sensors to the app.

The app helps the makes the clear view of the passenger check-in and out
exact time, date and location. Mainly this app is made for the security purpose
for the details of the passengers whether they are in the vehicle or else not. Or
whether they were dropped at different destination point. If a passenger from a
different vehicle board’s different vehicle of the same management. It allows
him to do the check-in but it shows the alert message like this passenger is from
this specified vehicle and its number.

i
 LIST OF FIGURES

Figure No. Figure Name Page No.

1. Architecture Diagram 11
2. UML Diagram 11
3. Use Case Diagram 12
4. Collaboration UML Diagram 14
5. Activity Diagram 15

ii
 LIST OF ABBREVIATIONS

ABBREVIATIONS EXPANSION
ML Machine Learning.

VMS Vehicle Monitoring System.

GPS Global Positioning System.

GSM Global System for Mobile.

UI User Interface.

TCP Transmission Control Protocol.

IP Internet Protocol.

HMI Human Machine Interface.

MMI Man Machine Interface.

iii
 TABLE OF CONTENTS

CHAPTER NO TITLE PAGE NO

ABSTRACT i

LIST OF FIGURES ii

LIST OF ABBREVATION iii

1. INTRODUCTION
1.1 Domain Introduction 1
1.2 Project Introduction 2
2. LITERATURE REVIEW

2.1 General 4
2.2 Literature Survey 4
3. SYSTEM ANALYSIS AND DESIGN
3.1 Introduction 8
3.2 Existing System 8
3.3 Proposed System 9
3.4 System Design 10
3.4.1 Architectural Diagram 10
3.5 UML Diagram 11
3.5.1 Use case Diagram 12
3.5.2 Collaboration UML Diagram 13
3.5.3 Activity Diagram 14
4. SYSTEM SPECIFICATIONS
4.1 Requirement Analysis 16
4.2 Hardware Specifications 16
4.3 Software Specification 17
 4.3.1 Hyper Text Markup Language (HTML) 18
5. MODULE EXPLANATION
5.1 List of Modules 20
5.1.1 User Interface Module 20
5.1.2 Tracking Module 21
5.1.3 Output Module 22
6. CONCLUSION AND FUTURE ENHANCEMENT
6.1 Conclusion 23
6.2 Future Enhancement 23
APPENDIX A (Coding) 24
APPENDIX B (Output) 70
REFERENCES 78
 CHAPTER 1
INTRODUCTION

1.1 DOMAIN INTRODUCTION:

Machine learning, sometimes called ML, is a cutting-edge field in computer

science that seeks to get computers to carry out tasks without being explicitly
programmed to carry out a given task. Machine learning uses many techniques
to create algorithm to learn and make predictions from data sets. It is used in
data mining which is a technique to discover patterns and models in data sets
where relationships are previously unknown. Machine learning is used in search
engines, optimization problems, computer vision, and more. These concepts
have been applied in Google’s self-driving car and in recommendation engines
on sites like Amazon and Netflix.

Machine learning algorithms work by building a model from a training

set. A training set is a data set that is input into an algorithm where the correct
outputs are already known. The ML algorithm builds the model as it reads the
training set, reading the next input, predicting the output, then checking its
prediction to the actual output, and adjusting accordingly.

Machine learning is sometimes thought of as purely data mining, but data

mining is a subfield of machine learning that uses unsupervised learning.

Supervised learning is the machine learning task of determining

a function from labelled data. For example, in a machine learning algorithm that
detects if a post is spam or not, the training set would include posts labelled as
"spam" and posts labelled as "not spam" to help teach the algorithm how to
recognize the difference. Supervised learning algorithms infer a function from
labelled data and use this function on new examples. Since the algorithm
receives

1
a data set as input that already has a correct answer associated with it, the
algorithm will learn by comparing its output with the correct answer, and if it
finds errors, it adjusts the model accordingly. The training continues until the
algorithm outputs information within the desired accuracy range.Unsupervised
learning uses input data that is unlabelled. Specifically, because the data is
unlabelled, there is no error or reward to let the algorithm know if it is close or
far away from the proper solution. Unsupervised learning is very important
when using machine learning on problems where the answer is not known. The
goal of unsupervised learning is to take in data and explore it to find some
structure within the data. A model is created from unsupervised learning by
deducing structures and patterns in the input data.
Regression is a statistics method used to estimate relationships among
variables. Usually, regression is concerned with how the typical value of the
dependent variable changes when an independent variable is altered. Regression
analysis estimates the conditional expectation of the dependent variable given
the independent variables. In other words, it estimates the average value of the
dependent variable when the independent variables are fixed.

1.2 PROJECT INTRODUCTION:

In today’s world tracking is a simple and easy But we designed new
tracking which is used track both passenger and vehicle. The GPS (global
positioning system) has been used to monitor the transport. The vehicle should
be installed with live GPS tracker. The details of the vehicle and count of the
passengers is tracked in the app using the fingerprint sensors which is used to
make a check-in facility in the Vehicle. Passengers should make a check-in
while boarding the vehicle. Then should check-out when they leave the vehicle.
The main concept behind this project is that the GPS tracker and fingerprint is
attached inside the vehicle the GPS is used to detect the current, then the sensor
used to make a check-in and out tasks after verifying the fingerprint the details

2
is shared to the sensors to the app.

The app helps the makes the clear view of the passenger check-in and out
exact time, date and location. Mainly this app is made for the security purpose
for the details of the passengers whether they are in the vehicle or else not. Or
whether they were dropped at different destination point. If a passenger from a
different vehicle board’s different vehicle of the same management. It allows
him to do the check-in but it shows the alert message like this passenger is from
this specified vehicle and its number.

3
 CHAPTER 2

LITERATURE SURVEY

2.1 GENERAL
Literature survey is the most important step in software development
process. Before developing the tool it is necessary to determine the time factor,
economy n company strength. Once these things r satisfied, ten next step is to
determine which operating system and language can be used for developing the
tool. Once the programmers start building the tool the programmers need lot of
external support. This support can be obtained from senior programmers, from
book or from websites. Before building the system the above consideration are
taken into account for developing the proposed system.

2.2 REVIEW OF LITERATURE

SURVEY-1:

Title: Vehicle Monitoring and Tracking System using GPS and GSM
Technologies.
Author: B. Hari Kumar, Syeda Fathima Tehseen, S.Thanveer, Guntha Vamshi
Krishna, Syed Mohisin Akram
Year: 2017.
Description: In this paper proposed a method for vehicle monitoring and
tracking system using GPS and GSM technologies. In the recent past, there have
been many technological developments in order to provide better security for
the vehicles. Few of the technologies provide security in the form of locking
system. The manufacturers of the vehicles also are striving for providence of
better systems for the vehicle’s security and protecting it from theft. Recently,
there has been implementation of the central locking system and also theft
detection system. But this method had the drawback that it alerts even the local

4
user. This paper narrates providing the security systems using the GPS and
GSM. The vehicle tracking system has been implemented to track the current
location of the vehicle. The details of the current position can be sent through
the GSM. There are certain systems like remote monitoring system which
provides the details of the vehicle’s position through an SMS. In the present
system, not only the tracking of the vehicle’s location is discussed but transfer
of the information to the owner’s mobile is implemented if the vehicle is
subjected to theft. Not only is this, in this, monitoring the status of the engine of
the vehicle also discussed by providing a thermistor for continuous monitoring
of the temperature. This method also has a feature of automatically slowing
down the speed of the vehicle when few particular zones like schools and
hospitals etc., which are detected by GPS are approaching along with the voice
message output.

SURVEY-2:

Title: Vehicle Tracking System using GPS Technologies

Author: Kismat Pradhan, Yogesh Limboo, Anu Rai, Avinash Sharma,
Shirshak Gurung.
Year: 2016.
Description: In this paper proposed a method for vehicle tracking system using
GPS technology. The author of the paper provides a solution for tracking and
monitoring the public transportation vehicles using devices such as Raspberry
Pi and GPS Antenna. Raspberry Pi processing board can be used to receiving
values and gives the result. This method can find a way to monitor the
transportation vehicle from the location source to destination. In this paper,
there is a use of GPS receiver module for receiving the latitude and longitude
values of the present location of the vehicle continuously. A passenger of the
vehicle will give different locations to the system between the source and
5
destination locations. These values will be stored in the Raspberry Pi database
and Raspberry Pi processor will compare the passenger specified values with
the current vehicle location values and if the result is not the same then the
passenger will be informed with warning message via display system that driver
is driving in the wrong direction. The author of this paper has explains an
embedded system, used to know the location of the vehicle using technologies
like GSM and GPS. System needs closely linked GPS and GSM module with a
microcontroller. Initially, the GPS installed in the device will receive the vehicle
location from satellite and store it in a microcontroller‘s buffer. In order to track
location the registered mobile number has to send request, once authentication
of number get completed, the location will be sent to mobile number in the form
of SMS. Then GSM get deactivated and GPS get activated again. The SMS
consist of latitude and longitude value of vehicle. This value received in the
SMS can be viewed via android app and this coordinate will be plotted in the
app automatically.

SURVEY-3:

Title: GPS/GSM Based Bus Tracking System (BTS)

Author: Christeena Joseph, A.D.Ayyappan, A.R.Aswini, B.Dhivya Bharathy
Year: 2018.
Description: In this paper proposed a method for GPS/GSM Based Bus
Tracking System (BTS).There are many vehicle tracking systems being
developed in the developed and developing countries. These embedded systems
with their array of hardware modules have been included into lots of public and
private vehicles in the urban area. A system for tracking and knowing the
location of inter-city buses in urban areas was developed in Ghana by the
University of Ghana. GPS and GSM/GPRS system was used in the tracking
system which sends SMS alerts about the vehicle location and also provides real
6
time tracking through web application. To maintain the tracking data external
database server was used which again increased the cost of the tracking system.
The system also provided many other enhancements like theft alert etc.,
Tracking systems were first developed for the shipping industry to track cargo.
First devices developed were passive. To obtain automatic and real time
tracking active devices are to be used. Muruganandham and P.R.Mukesh
proposed a system that uses GSM/GPRS modem and GPS system to provide
real time tracking over the internet by TCP/IP connection through Java
applications developed specifically for it. External databases are used to
maintain the tracking details. The Bangalore vehicle tracking and control
systems at Bangalore and ongoing projects at Koyambedu, Chennai provides
real time solutions to public vehicles. The system proposed here is a GPS/GSM
real time vehicle tracking system with internal database of the various location
details of which the vehicle would travel on a daily basis. This solution can be
applied to public transport buses and college buses which take only the
specified routes on a daily basis.

7
 CHAPTER 3

SYSTEM ANALYSIS AND DESIGN

3.1 INTRODUCTION:

• Vehicle Monitoring System is used to track vehicles current location and

the passenger’s login such as where they board the vehicle where they
depart from the vehicle etc. time data are also recorded and stored in the
database.

• In our project we have built a special designed web through which the
admin see and manage the total database.

• And another side we have also built a app which is used to for the
passengers who can see their login i.e check in/out activity.

3.2 EXISTING SYSTEM:

Existing have traditional car alarm systems are ineffective and inefficient
due to the frequency with which they sound, providing little protection nor
security to vehicle owners. This has resulted in the proliferation of “next-
generation” car alarm systems. State-of-the-art vehicle security systems, such as
the Viper 3303 or Python 991, offer real-time threat alerts and two-way
communication. Threat alerts are transmitted to a remote or a smartphone and
displayed via a “car security dashboard”. These alerts consist of a combination
of text and audio and provide detailed information regarding the security
incursion. Additionally, we found one product capable of transmitting a low-
resolution image of the vehicle to the user (ScyTek’s Vision Guard 8000, which
is no longer supported by the company); however, this system is range-limited
and of questionable quality. The two-way communication that many of these
devices support permits the user to remotely start the engine, disarm the system,
8
 and turn on the lights. Other recent car alarm innovations include cabin strobe
lights, local video recording, and synthetic graphical car representations.

3.3 PROPOSED SYSTEM:

 The GPS has been used to monitor current location of the vehicle. The details of
the passengers and drivers is first saved in the database.

 The vehicle is attached with a fingerprint sensor panel inside the vehicle. Through
this fingerprint sensor the valid passenger is verified with the database and then
the check-in and check-out is done.

 Once when the finger-print is verified with the existing database then entry is
done. This entry ensures the current boarding point and destination and the time
which they check-in and check-out (for security purpose).

 This check-in and check-out details can be viewed by the passengers and can be
managed by the admin. An app that consists of two different login is used the first
one is the admin the admin can do the following.

 The admin can track the location of the any of the vehicle in that management.
The admin can able to view passengers check-in and check-out list in a particular
vehicle or entire vehicle.

 The second login is the passengers the passengers can able to view the check-in
and check-out date, time and location.

 The main concept behind this project is that the GPS tracker and fingerprint is
attached inside the vehicle the GPS is used to detect the current, then the sensor
used to make a check-in and out tasks after verifying the fingerprint the details is
9
 shared to the sensors to the app.

 The app helps the makes the clear view of the passenger check-in and out exact
time, date and location. Mainly this app is made for the security purpose for the
details of the passengers whether they are in the vehicle or else not. Or whether
they were dropped at different destination point.

 If a passenger from a different vehicle board’s different vehicle of the same

management. It allows him to do the check-in but it shows the alert message like
this passenger is from this specified vehicle and its number.

3.4 SYSTEM DESIGN:

3.4.1 ARCHITECTURAL DIAGRAM:

An Architecture Diagram is a graphical representation of a set of

concepts, that are part of an architecture, including their principles, elements
and components. There are many kinds of architecture diagrams, like a software
architecture diagram, system architecture diagram, application architecture
diagram, security architecture diagram, etc. A system architecture or systems
architecture is the conceptual model that defines the structure, behavior, and
more views of a system. An architecture description is a formal description and
representation of a system, organized in a way that supports reasoning about
the structures and behavior of the system.

10
 Fig 1. Architecture Diagram

3.5 UML DIAGRAM:

The Unified Modeling Language (UML) is a general-purpose,

developmental, modeling language in the field of software engineering that is
intended to provide a standard way to visualize the design of a system.

Fig 2. UML Diagram

11
3.5.1 USE CASE DIAGRAM:

A Use Case Diagram at its simplest is a representation of a user's

interaction with the system that shows the relationship between the user and the
different use cases in which the user is involved. A use case diagram can
identify the different types of users of a system and the different use cases and
will often be accompanied by other types of diagrams as well. The use cases are
represented by either circles or ellipses.

Fig 3. Use Case Diagram

12
3.5.2 COLLABORATION UML DIAGRAM:

A Collaboration Diagram is a diagram that shows object interactions

organized around the objects and their links to each other. Unlike a sequence
Diagram, a Collaboration diagram shows the relationships among the objects.
Sequence diagrams and the collaboration diagrams express similar information,
but show it in different ways.

It represents the collaboration, which is a set of objects roles related in a

particular context, and in the interaction it is the set of messages exchanged
among the objects to achieve an operation or result.

13
 Fig 4. Collaboration UML Diagram

3.5.3 ACTIVITY DIAGRAM:

Activity diagrams are graphical representations of workflows of

stepwise activities and actions with support for choice, iteration and
concurrency. In the Unified Modeling Language, activity diagrams are intended
to model both computational and organizational processes (i.e., workflows), as
well as the data flows intersecting with the related activities. Although activity
diagrams primarily show the overall flow of control, they can also include
elements showing the flow of data between activities through one or more data
stores.

14
Fig 5. Activity Diagram.

15
 CHAPTER 4

SYSTEM SPECIFICATIONS

System Specifications is a structured collection of information that

embodies the requirements of a system. The System Specification describes the
functional and non-functional requirements posed on a system element (system,
Enabling System or segment). In order to prepare the System Specification, the
requirements will be derived from the specifications of higher system elements
or from the Overall System Specification.

4.1. REQUIREMENT ANALYSIS:

In Systems engineering and software engineering, requirements analysis

focuses on the tasks that determine the needs or conditions to meet the new or
altered product or project, taking account of the possibly conflicting
requirements of the various stakeholders, analyzing, documenting, validating
and managing software or system requirements.

Requirements analysis is critical to the success or failure of a systems or

software project. The requirements should be documented, actionable,
measurable, testable, traceable, related to identified business needs or
opportunities, and defined to a level of detail sufficient for system design.

4.2. HARDWARE SPECIFICATIONS:

Hardware requirements is the most common set of requirements defined

by any operating system or software application is the physical computer
resources, also known as hardware, A hardware requirements list is often

16
 accompanied by a hardware compatibility list (HCL), especially in case of
operating systems.

 Processor: AMD, Intel i3,i5,i7.

 RAM: 4 gigabyte (GB)
 Hard disk space: 10 GB or Higher
 Sensor: Finger-Print, GPS-GSM, Count

4.3. SOFTWARE SPECIFICATIONS:

Software requirements deal with defining software resource requirements
and prerequisites that need to be installed on a computer to provide optimal
functioning of an application. These requirements or prerequisites are generally
not included in the software installation package and need to be installed
separately before the software is installed.

Specification involves representing and storing the collected requirements

knowledge in a persistent and well-organized fashion that facilitates effective
communication and change management. Use cases, user stories, functional
requirements, and visual analysis models are popular choices for requirements
specification.

 OPERATING SYSTEM : Windows 8,8.1,10.

 IDE : Android Studio.
 LANGUAGES : HTML,CSS,Bootstrap.

17
4.3.1 HYPER TEXT MARKUP LANGUAGE (HTML):

Hypertext Markup Language (HTML) is the standard markup language for

documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages
such as JavaScript. Web browsers receive HTML documents from a web server
or from local storage and render the documents into multimedia web pages.
HTML describes the structure of a web page semantically and originally
included cues for the appearance of the document. HTML can embed programs
written in a scripting language such as JavaScript, which affects the behavior
and content of web pages. Inclusion of CSS defines the look and layout of
content. HTML markup consists of several key components, including
those called tags (and their attributes), character-based data types, character
references and entity references. HTML tags most commonly come in pairs
like <h1> an </h1>, although some represent empty elements and so are
d

unpaired, for example <img>. The first tag in such a pair is the start tag, and the
second is the end tag (they are also called opening tags and closing tags). Another
important component is the HTML document type declaration, which triggers
standards mode rendering.

Elements:

HTML documents imply a structure of nested HTML elements. These are

indicated in the document by HTML tags, enclosed in angle brackets thus: <p>.

18
In the simple, general case, the extent of an element is indicated by a pair of tags:
a "start tag" <p> and "end tag" </p>. The text content of the element, if any, is

placed between these tags.

Tags may also enclose further tag markup between the start and end,
including a mixture of tags and text. This indicates further (nested) elements, as
children of the parent element.

The start tag may also include attributes within the tag. These indicate
other information, such as identifiers for sections within the document,
identifiers used to bind style information to the presentation of the document,
and for some <img>
tags such as the used to embed images, the reference to the image
resource.
Some elements, such as the line break <br>, do not permit any embedded
content, either text or further tags. These require only a single empty tag (akin
to a start tag) and do not use an end tag.

Many tags, particularly the closing end tag for the very commonly used
paragraph element <p>, are optional. An HTML browser or other agent can
infer
the closure for the end of an element from the context and the structural rules
defined by the HTML standard. These rules are complex and not widely
understood by most HTML coders.

<tag attribute1="value1" attribute2="value2">''content''</tag>. Some

HTML elements are defined as empty elements and take the
form <tag attribute1="value1" attribute2="value2">. The name of an HTML
element is the name used in the tags. Note that the end tag's name is preceded
by a slash character, / , and that in empty elements the end tag is neither
required nor allowed. If attributes are not mentioned, default values are used in

19
each case.

20
 CHAPTER 5

MODULE EXPLANATION

5.1 LIST OF MODULES:

5.1.1 User Interface Module

5.1.2 Tracking Module
5.1.3 Output Module

5.1.1 USER INTERFACE MODULE:

The User Interface (UI), in the industrial design field of human-
computer interaction, is the space where interactions between humans and
machines occur. The goal of this interaction is to allow effective operation and
control of the machine from the human end, whilst the machine simultaneously
feeds back information that aids the operators' decision-making process.
Examples of this broad concept of user interfaces include the interactive
aspects of computer operating systems, hand tools, heavy machinery operator
controls, and process controls. The design considerations applicable when
creating user interfaces are related to or involve such
disciplines as ergonomics and psychology.

Generally, the goal of user interface design is to produce a user interface

which makes it easy, efficient, and enjoyable (user-friendly) to operate a
machine in the way which produces the desired result. This generally means that
the operator needs to provide minimal input to achieve the desired output, and
also that the machine minimizes undesired outputs to the human.

21
 User interfaces are composed of one or more layers including a human-
machine interface (HMI) interfaces machines with physical input hardware
such as keyboards, mice, game pads and output hardware such as computer
monitors, speakers, and printers. A device that implements an HMI is called
a human interface device (HID). Other terms for human-machine interfaces are
man-machine interface (MMI) and when the machine in question is a
computer human-computer interface.

5.1.2 TRACKING MODULE:

A GPS tracking unit, geo tracking unit, or simply tracker is a navigation
device normally on a vehicle, asset, person or animal that uses the Global
Positioning System (GPS) to determine its movement and determine its
WGS84 UTM geographic position (geo tracking) to determine its location.
Locations are stored in the tracking unit or transmitted to an Internet-connected
device using the cellular network (GSM/GPRS/CDMA/LTE or SMS), radio,
or satellite modem embedded in the unit or WIFI work world-wide. Various
companies buy position and track data for marketing. Also used for military
and criminal, to shut down and pick up repossession/thefts and find truck
loads. Tracks can be map displayed in real time, with GPS tracking
software. smart phones with GPS capability. GPS antenna size limits tracker
size, ofter smaller than a half-dollar. Virtually every cell phone tracks its
movements and per most cell user agreements uploads the track data, creating
trillions of sellable locations and tracks, value varies from fractions of a mil to
dollars per point and user association.

22
 5.1.3 OUTPUT MODULE:

Output for the given to the UI by the basic of input received by the user
during the checking time since checking is done the exact place, time and date is
also been recorded and stored in the database. When the user want to see them
they can either seen through either in the web or app designed.

23
 CHAPTER 6
CONCLUSION AND FUTURE ENHANCEMENT

6.1. CONCLUSION:
The main objective of this project was to design and construct a
low cost-effective system to track location of the vehicle. The system
was designed and developed in such a way that, it can track any
number of vehicles simultaneously at anywhere when the GSM
coverage is existent. Some extra features were also introduced and
included to the system to convince its flexibility, enhancement and for
security. Overall the project was designed in such a way that, will be
easy to operate and user-friendly to use and it will help to maintain
security of the passengers.

6.2. FUTURE ENHANCEMENTS:

Global Positioning System (GPS) is much more than just the means of finding a
way while commuting. It fulfils a much higher purpose than finding the fastest
route. They help you to monitor crucial parameters like speed, trip distance, geo-
fencing, real-time tracking among others. GPS trackers have paved the way for both
automobiles like cars, trucks, buses as well as personal safety devices like GPS
tracking smartwatches. They are easily trackable via smartphone or laptop keeping
you tension-free. Trackers are small with technological advancement, tend to grow
and improve. The future of GPS tracking looks extremely promising and we can
expect some interesting advancement in this area.

24
 APPENDIX-A (CODING)
LOGIN.HTML

<html>

<head>

<title>Login Form</title>

<style>

body{

margin:0;

padding:0;

background-image:url(bus.jpg);

background-size:cover;

.content{

top:50%;

left:50%;

position:absolute;

transform:translate(-50%,-50%);

.card{

padding:60px 40px 50px 40px;

background:rgb(50,50,50);

border-radius:10px;

#name{
25
 border:none;

background:transparent;

border-bottom:1px solid white;

padding:8px;

margin-bottom:25px;

outline:none;

color:white;

#button{

border-radius:20px;

padding:10px 20px;

background:dodgerblue;

color;white;

margin-top:10px;

border:none;

outline:none;

margin-left:45px;

margin-top:30px;

#button:hover{

background-color:white;

color:black;

a{

26
 font-size:14px;

img{

border: 100%;

position:absolute;

margin-left:85px;

margin-top:-40px;

</style>

</head>

<body>

<div class="content">

<img src="agni.png" height="70" width="70">

<div class="card">

<input type="text" placeholder="username" id="name"><br>

<input type="password" placeholder="password" id="name"><br>

<a href="#">Forget Password?</a><br>

<input type="Submit" value="Submit" id="button">

</div>

</div>

</body>

</html>

27
LOGIN.HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<!-- Title Tag -->

<title>VMS</title>

<!-- <<Mobile Viewport Code>> -->

<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">

<!-- <<Attched Stylesheets>> -->

<link rel="stylesheet" href="css/theme.css" type="text/css" />
<link rel="stylesheet" href="css/media.css" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link href='https://fonts.googleapis.com/css?
family=Open+Sans:300,300,600,600italic,400italic,800,700' rel='stylesheet'
type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:300,700,300'
rel='stylesheet' type='text/css'>

</head>
<body>

28
<!-- \\ Begin Holder \\ -->
<div class="DesignHolder">
<!-- \\ Begin Frame \\ -->
<div class="LayoutFrame">
<!-- \\ Begin Header \\ -->
<header>
<div class="Center">
<div class="site-logo">
<h1><a href="#">V<span>M</span>S</a></h1>
</div>
<div id="mobile_sec">
<div class="mobile"><i class="fa fa-bars"></i><i class="fa
fa-times"></i></div>
<div class="menumobile">
<!-- \\ Begin Navigation \\ -->
<nav class="Navigation">
<ul>
<li class="active">
<a href="#home">Home</a>
<span class="menu-item-bg"></span>
</li>
<li>
<a href="#about">About</a>
<span class="menu-item-bg"></span>
</li>
<li>
<a href="#services">Services</a>
<span class="menu-item-bg"></span>
</li>

29
 </ul>
</nav>
<!-- // End Navigation // -->
</div>
</div>
<div class="clear"></div>
</div>
</header>
<!-- // End Header // -->
<!-- \\ Begin Banner Section \\ -->
<div class="Banner_sec" id="home">
<!-- \\ Begin banner Side -->
<div class="bannerside">
<div class="Center">
<!-- \\ Begin Left Side -->
<div class="leftside">
<h3>Security <span>User Friendly</span></h3>
<p>VMS (vehicle monitoring system) is an tracking system of
vehicle and the passengers.The purpose of this vms is for the security of the
passengers.Each and every movement of vehicle will be tracked.</p>
<a href="#about">MORE DETAILS</a>
</div>

<!-- // End Left Side // -->

<!-- \\ Begin Right Side -->
<div class="rightside">
<div class="Slider">
<figure><img src="D:\Mini Project\Model\img\bus.jpg"
alt="#" align="Right" height=600 % width=650 %></figure>
30
 </div>

</div>
<!-- // End Right Side // -->
</div>
</div>
<!-- // End banner Side // -->
<div class="clear"></div>
</div>
<!-- // End Banner Section // -->
<div class="bgcolor"></div>
<!-- \\ Begin Container \\ -->
<div id="Container">
<!-- \\ Begin About Section \\ -->
<div class="About_sec" id="about">
<div class="Center">
<h2>About us</h2>
<p> <b>Vehicle Monitoring System</b></p>
<div class="Line"></div>
<!-- \\ Begin Tab side \\ -->
<div class="Tabside">
<ul>
<li><a href="javascript:;" class="tabLink activeLink" id="cont-
1">Mision</a></li>
<li><a href="javascript:;" class="tabLink"
id="cont-2">vision</a></li>

</ul>
<div class="clear"></div>
<div class="tabcontent" id="cont-1-1">
31
 <div class="TabImage">
<div class="img1">
<figure><img src="img/about-img1.jpg"
alt="image"></figure>
</div>

</div>
<div class="Description">
<h3>Mission For our Vechical Monitoring
System<span></span></h3>
<p>Vehicle Monitoring System. This paper proposes and
implements a low cost object tracking system using GPS System.</p>
<p>The system permits localization of the automobile and
transmitting the position to the owner on his mobile phone.</p>
<p>A GPS tracker is first placed inside the vehicle to track the
location of the vehicle.</p>
<p>This GPS is used by the user and admin to the location to
know the exact current location of the vehicle.</p>
<p>This can be effectively used to track the location of the
passengers.</p>
</div>
</div>
<div class="tabcontent" id="cont-2-1">
<div class="TabImage">
<div class="img2">
</div>
</div>
<div class="Description">
<br><br><h3>Vision for our Vechical Monitoring
System<span></span></h3>
32
 <p>The main objective of this project was to design and
construct a low cost-effective system to track location of the vehicle. </p>
<p>The system was designed and developed in such a way that,
it can track any number of vehicles simultaneously at anywhere when the GSM
coverage is existent.</p>
<p>Some extra features were also introduced and included to
the system to convince its flexibility, enhancement and for security.</p>
<p>Overall the project was designed in such a way that,will be
easy to operate and user-friendly to use and it will help to maintain security of the
passengers. </p>
</div>
</div>

<div class="clear"></div>
</div>
<!-- // End Tab Side // -->
</div>
</div>
<!-- // End About Section // -->
<!-- \\ Begin Services Section \\ -->
<div class="Services_sec" id="services">
<div class="Center">
<h2>our Services</h2>
<p> We provide following information in our vechical monitoring
system.</p>
<div class="Line"></div>
<!-- \\ Begin Services Side \\ -->
<div class="Serviceside">
<ul>
<li class="Development"><a
33
href="#services"><h4>NAVIGATION</h4></a></li>
<li class="Desdin"><a href="#services"><h4>STUDENT-
INFO</h4></a></li>
<li class="Concept"><a
href="#services"><h4>BUS-INFO</h4></a></li>
<li class="System"><a
href="#services"><h4>SCHEDULE-TIME</h4></a></li>
</ul>
</div>
<!-- // End Services Side // -->
</div>
</div>
<!-- // End Services Section // -->

<!-- \\ Begin Contact Section \\

<div class="Contact_sec" id="contact">
<div class="Contactside">
<div class="Center">
<h2>Contact Us</h2>
<p> You can reach us through Phone, E-mail, Facebook, Twitter. <br>
With the information provided below. </p>
<div class="Line"></div>
</div>
</div> -->
<div id="GoogleMap"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!
1m3!1d3889.919496511065!2d80.19545700000002!3d12.848476!3m2!1i1024!
2i768!4f13.1!3m3!1m2!1s0x0%3A0x191bc5eec274319!2sAgni%20College%20of
%20Technology!5e0!3m2!1sen!2sin!4v1619464769569!5m2!1sen!2sin"
width="1350" height="600" style="border:0;" allowfullscreen=""
34
loading="lazy"></iframe>
<!-- \\ Begin Get Section \\
<div class="Get_sec">
<div class="Mid"> -->
<!-- \\ Begin Left Side \\
<div class="Leftside">
<form action="#">
<fieldset>
<p><input type="text" value="" placeholder="NAME"
class="field"></p>
<p><input type="email" value="" placeholder="EMAIL"
class="field"></p>
<p><input type="text" value="" placeholder="TITLE"
class="field"></p>
<p><textarea cols="2" rows="2"
placeholder="MESSAGE"></textarea></p>
<p><input type="submit" value="send" class="button"></p>
</fieldset>
</form>
</div> -->
<!-- // End Left Side // -->
<!-- \\ Begin Right Side \\
<div class="Rightside">
<h3>Get in touch !</h3>
<address>
<b>Agni College of Technology - ACT</b><br>Old
Mahabalipuram Road,<br>Thalambur, Chennai - 600 130,<br>Tamil Nadu, India
</address>
<address class="Number">
Reception :044-67409441 to <br>044-67409499 (60 Lines)
35
 </address>
<address class="Email">
<a href="mailto:[email protected]">[email protected]</a>
</address>
<div class="clear"></div>
<ul>
<li><a rel="nofollow"
href="http://www.facebook.com/templatemo"
target="_parent"><img src="img/facebook-icn.png"
alt="image"></a></li>
<li><a href="#"><img src="img/twitter-icn.png"
alt="image"></a></li>
<li><a href="#"><img src="img/google-plus-icn.png"
alt="image"></a></li>
</ul>
</div> -->
<!-- // End Right Side //
</div> -->
<!-- \\ Begin Footer \\-->
<footer>
<div class="Cntr">
<p>COPYRIGHT © 2021 | VMS </p>
</div>
</footer>
<!-- // End Footer // -->
</div>
<!-- // End Get Section // -->

</div>
<!-- // End Contact Section // -->
36
 </div>
<!-- // End Container // -->
</div>
<!-- // End Layout Frame // -->
</div>
<!-- // End Design Holder // -->
<div id="loader-wrapper">
<div id="loader"></div>

<div class="loader-section section-left"></div>

<div class="loader-section section-right"></div>

</div>

<!-- <<Attched Javascripts>> -->

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.sudoSlider.min.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
</body>
</html>

MEDIA.CSS

@media only screen and (min-width: 769px) and (max-width: 10000px) {

#mobile_sec .menumobile { display: block!important; }
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {

37
header { width: 100%; }
header .Center { width: 100%; padding: 0px 2%; }
header .site-logo { padding: 18px 0 0 1px; }
header.smaller .site-logo { padding: 11px 0 0; }

.Navigation { margin-right: 0px; }

.Navigation li a { padding: 30px 36px; }
header.smaller .Navigation li a { padding: 16px 36px; }

.Banner_sec { width: 100%; height: 524px; }

.Banner_sec .Center {width: 100%; padding: 0px 2%; }
.Banner_sec .bannerside { top: 144px; }
.Banner_sec .leftside h3 { font-size: 32px; }
.Banner_sec .rightside { width: 66%; }
.Banner_sec .rightside .Slider { width: 100%; }
.Banner_sec .rightside .Slider .text { padding: 25px 10px 21px 10px; }
.Banner_sec .rightside .Slider .text .Icon { width: 45%; }
.Banner_sec .rightside .Slider .text .Lorem { width: 40%; }
.Banner_sec .rightside .Shadow { width: 105%; }
.Banner_sec .rightside .prevBtn { top: 160px; }
.Banner_sec .rightside .nextBtn { top: 160px; }

#Container { width: 100%; }

.About_sec { width: 100%; padding: 70px 0px; }

.About_sec .Center { width: 100%; padding: 0px 2%; }
.About_sec p { font-size: 13px; }
.About_sec .Tabside { padding: 50px 0; }
.About_sec .Tabside .Description { margin-top: 0px; width: 51%; }

38
.Services_sec { width: 100%; padding: 70px 0px; }
.Services_sec .Center { width: 100%; padding: 0px 2%; }
.Services_sec p { font-size: 13px; }
.Services_sec .Serviceside { width: 100%; padding: 50px 0 30px; }
.Services_sec .Serviceside li { margin: 0px 2% 0px 0px; width: 23.5%; }

.Pricing_sec { width: 100%; padding: 70px 0px; }

.Pricing_sec .Center { width: 100%; padding: 0px 2%; }
.Pricing_sec p { font-size: 13px; }
.Pricing_sec .Pricingside { width: 100%; padding: 50px 0 0 }
.Pricing_sec .Pricingside li .Basic { width: 6%;}
.Pricing_sec .Pricingside li .Dollar { width: 14%; }
.Pricing_sec .Pricingside li .Band { width: 16%; padding: 1px 30px}
.Pricing_sec .Pricingside li .Order { width: 16%; float: right; }

.Pricing_sec .Pricingside li.bg1 .Dollar1 { width: 14.8%; }

.Pricing_sec .Pricingside li.bg1 .Band { width: 16%; padding: 1px 30px}
.Pricing_sec .Pricingside li.bg1 .Order1 { width: 16%; float: right; }

.Contact_sec { width: 100%; }

.Contact_sec .Center { width: 100%; padding: 70px 2%;}

.Contact_sec .Map { width: 100%;}

.Contact_sec .Map img { height: 300px; width: 100%; }

.Get_sec { width: 100%; }

.Get_sec .Mid { width: 100%; padding: 50px 2%; }

footer { width: 100%; }

39
 footer .Cntr { width: 100%; padding: 20px 2%; }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */

@media only screen and (min-width: 768px) and (max-width: 1024px) {

header { width: 100%; height: 87px; }

header .Center { width: 100%; padding: 0px 2%; }
header .site-logo { padding: 27px 0 0 1px; position: relative; z-index: 1; }
header .site-logo h1 { line-height: 33px; }
header.smaller .Navigation li a { padding: 16px 20px; }

.Navigation { margin-right: 0px; }

.Navigation li a { padding: 30px 20px; }

.Banner_sec { width: 100%; height: 464px; }

.Banner_sec .Center {width: 100%; padding: 0px 2%; }
.Banner_sec .bannerside { top: 144px; }
.Banner_sec .leftside { padding: 0px; width: 34%; }
.Banner_sec .leftside h3 { font-size: 30px; }
.Banner_sec .leftside p { padding: 10px 0px; font-size: 14px; line-height: 18px; }
.Banner_sec .rightside { width: 64%;}
.Banner_sec .rightside .Slider { width: 100%;}
.Banner_sec .rightside .Slider .text { padding: 25px 10px 21px 10px; }
.Banner_sec .rightside .Slider .text .Icon { width: 46%; }
.Banner_sec .rightside .Slider .text li { padding: 0px 10px;}
.Banner_sec .rightside .Slider .text .Lorem { width: 50%; }
.Banner_sec .rightside .Slider .text .Lorem p { font-size: 16px; }
.Banner_sec .rightside .Shadow { width: 106.5%; left: -21px; }
.Banner_sec .rightside .prevBtn { top: 100px; left: 10px; }
40
 .Banner_sec .rightside .nextBtn { top: 100px; right: 10px; }

#Container { width: 100%; }

.About_sec { width: 100%; padding: 70px 0px 30px 0px; }

.About_sec .Center { width: 100%; padding: 0px 2%; }
.About_sec h2 { font-size: 40px; line-height: 40px; }
.About_sec p { padding: 15px 0px; font-size: 13px; }
.About_sec .Tabside { padding: 50px 0 0px 0; }
.About_sec .Tabside .Description { margin-top: 0px; width: 51%; }
.About_sec .Tabside .Description p { padding: 10px 0px; }
.About_sec .Tabside .TabImage { width: 45.63%; }
.About_sec .Tabside .TabImage .img1 { left: 0px; background-position: -40px
203px; }
.About_sec .Tabside .TabImage .img1 img { width: 95%; }

.About_sec .Tabside .TabImage .img2 { left: 15px; height: auto; background-

position: -50px 132px; }
.About_sec .Tabside .TabImage .img2 img { width: 90%; height: auto; }

.Services_sec { width: 100%; padding: 70px 0px 30px 0px; }

.Services_sec .Center { width: 100%; padding: 0px 2%; }
.Services_sec h2 { font-size: 40px; line-height: 40px; }
.Services_sec p { padding: 15px 0px; font-size: 13px; }
.Services_sec .Serviceside { width: 100%; padding: 50px 0 30px; }
.Services_sec .Serviceside li { margin: 0px 2% 0px 0px; width: 23.5%; }

.Services_sec .Serviceside li.Development a { background-size: 60%;}

.Services_sec .Serviceside li.Development h4 { padding: 134px 0 0; }
.Services_sec .Serviceside li.Development a:hover h4 { background-size: 60%;}
41
.Services_sec .Serviceside li.Desdin a { background-size: 60%;}
.Services_sec .Serviceside li.Desdin h4 { padding: 134px 0 0; }
.Services_sec .Serviceside li.Desdin a:hover h4 { background-size: 60%;}

.Services_sec .Serviceside li.Concept a { background-size: 60%;}

.Services_sec .Serviceside li.Concept h4 { padding: 134px 0 0; }
.Services_sec .Serviceside li.Concept a:hover h4 { background-size: 60%;}

.Services_sec .Serviceside li.System a { background-size: 60%;}

.Services_sec .Serviceside li.System h4 { padding: 134px 0 0; }
.Services_sec .Serviceside li.System a:hover h4 { background-size: 60%;}

.Pricing_sec { width: 100%; padding: 70px 0px 30px 0px; }

.Pricing_sec .Center { width: 100%; padding: 0px 2%; }
.Pricing_sec h2 { font-size: 40px; line-height: 40px; }
.Pricing_sec p { padding: 15px 0px; font-size: 13px; }
.Pricing_sec .Pricingside { width: 100%; padding: 30px 0 0 }
.Pricing_sec .Pricingside li { height: 90px;}
.Pricing_sec .Pricingside li:hover .Band { padding: 0px; height: 90px; }
.Pricing_sec .Pricingside li .Basic { width: 8%; height: 90px;}
.Pricing_sec .Pricingside li .Dollar { width: 14%; height: 90px; }
.Pricing_sec .Pricingside li .Dollar h2 { font-size: 24px; }
.Pricing_sec .Pricingside li .Band { width: 16%; }
.Pricing_sec .Pricingside li .Band p { font-size: 15px; }
.Pricing_sec .Pricingside li .Order { width: 14%; float: right; height: 90px; }

.Contact_sec { width: 100%; }

.Contact_sec .Center { width: 100%; padding: 70px 2% 30px 2%; }
.Contact_sec h2 { font-size: 40px; line-height: 40px; }
42
 .Contact_sec p { padding: 15px 0px; font-size: 13px; }

.Contact_sec .Map { width: 100%;}

.Contact_sec .Map img { height: 250px; width: 100%; }

.Get_sec { width: 100%; }

.Get_sec .Mid { width: 100%; padding: 50px 2%; }
.Get_sec .Leftside p { margin: 0 0 20px; }
.Get_sec .Leftside input.field { padding: 10px 20px; }
.Get_sec .Leftside textarea { padding: 10px 20px; height: 125px; }
.Get_sec .Leftside .button {-webkit-appearance: none; }

.Get_sec .Rightside { padding-top: 0px; }

.Get_sec .Rightside h3 { font-size: 40px; padding-bottom: 34px; }
.Get_sec .Rightside address { padding: 0 0 23px 65px; }

footer { width: 100%; }

footer .Cntr { width: 100%; padding: 20px 2%; }

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */

@media only screen and (min-width: 480px) and (max-width: 767px) {

header { width: 100%; position: absolute; height: 57px;}

header .Center { width: 100%; }
header .site-logo { padding: 10px 0% 0px 3%; position: relative; z-index: 1; }
header .site-logo h1 { margin: 0px; line-height: 36px; }
header.smaller { height: 55px;}

43
 header.smaller .site-logo { padding: 10px 0% 0px 3%; }
header.smaller .site-logo h1 a { font-size: 36px; }

#mobile_sec { position: fixed; width: 100%; }

#mobile_sec .mobile { display: block; position: relative; float: right;}
#mobile_sec .menumobile { display: none; width: 100%; position: absolute; top:
55px; right: 0%; background: rgba(0, 0, 0, 0.5); }
#mobile_sec .menumobile .Navigation { width: 100%; float: none; }
#mobile_sec .menumobile .Navigation ul { float: none;}
#mobile_sec .menumobile .Navigation li { float: none; width: 100%; border-
bottom: solid 1px #365374; }
#mobile_sec .menumobile .Navigation li a { padding: 10px 21px; background:
none; border-bottom: none; }
#mobile_sec .menumobile .Navigation li:last-child { border-bottom: none; }

.Banner_sec { width: 100%; height: 620px; }

.Banner_sec .Center {width: 100%; padding: 0px 3%; }
.Banner_sec .bannerside { top: 144px; }
.Banner_sec .leftside { padding: 0px 0px 20px 0px; width: 100%; float: none; }
.Banner_sec .rightside { width: 99%;}
.Banner_sec .rightside .Slider { width: 100%;}
.Banner_sec .rightside .Slider .text { padding: 10px 10px; }
.Banner_sec .rightside .Slider .text .Icon { width: 48%; }
.Banner_sec .rightside .Slider .text li { padding: 0px 10px;}
.Banner_sec .rightside .Slider .text .Lorem { width: 50%; }
.Banner_sec .rightside .Slider .text .Lorem p { font-size: 14px; }
.Banner_sec .rightside .Shadow { width: 105.5%; left: -16px; }
.Banner_sec .rightside .prevBtn { top: 100px; left: 10px; }
.Banner_sec .rightside .nextBtn { top: 100px; right: 10px; }

44
 .Banner_sec .rightside #slider li img { height: 280px; width: 100%;}

.bgcolor { height: 50px; }

#Container { width: 100%; }

.About_sec { width: 100%; padding: 100px 0px 50px; }

.About_sec .Center { width: 100%; padding: 0px 3%; }
.About_sec h2 { font-size: 30px; line-height: 30px; }
.About_sec p { padding: 15px 0px; font-size: 13px; }
.About_sec .Tabside { padding: 30px 0 0px 0; }
.About_sec .Tabside ul { padding-bottom: 25px;}
.About_sec .Tabside li a { font-size: 14px; padding: 14px 30px; }
.About_sec .Tabside .TabImage { width: 100%; float: none; padding-bottom:
35px; text-align: center;}
.About_sec .Tabside .TabImage .img1 { left: 0px; position: relative; }
.About_sec .Tabside .TabImage .img1 img { margin: auto;}
.About_sec .Tabside .TabImage .img2 { left: 25px; }
.About_sec .Tabside .TabImage .img2 img { width: 100%; height: auto; }
.About_sec .Tabside .Description { margin-top: 0px; width: 100%; }
.About_sec .Tabside .Description p { padding: 10px 0px; text-align: justify; }

.Services_sec { width: 100%; padding: 100px 0px 30px; }

.Services_sec .Center { width: 100%; padding: 0px 3%; }
.Services_sec h2 { font-size: 30px; line-height: 30px; }
.Services_sec p { padding: 15px 0px; font-size: 13px; }
.Services_sec .Serviceside { width: 100%; padding: 50px 0 30px; }
.Services_sec .Serviceside li { margin: 0px 0% 3% 2%; float: none; display:inline-
block; }

45
 .Pricing_sec { width: 100%; padding: 100px 0px 30px; }
.Pricing_sec .Center { width: 100%; padding: 0px 3%; }
.Pricing_sec h2 { font-size: 30px; line-height: 30px; }
.Pricing_sec p { padding: 15px 0px; font-size: 13px; }
.Pricing_sec .Pricingside { width: 100%; padding: 30px 0 0 }
.Pricing_sec .Pricingside li { height: 100%; width: 100%; margin: 0px 0px 50px
0px; }
.Pricing_sec .Pricingside li .Basic { width: 100%; float: none; }
.Pricing_sec .Pricingside li .Basic h5 { -webkit-transform: rotate(0deg); -moz-
transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);
transform: rotate(0deg); writing-mode: lr-tb; }
.Pricing_sec .Pricingside li .Dollar { width: 100%; float: none; }
.Pricing_sec .Pricingside li .Band { width: 100%; float: none; border-bottom: solid
1px #ccc; background: none; height: 75px; }
.Pricing_sec .Pricingside li .Order { width: 100%; float: none; }
.Pricing_sec .Pricingside li:hover .Band { height: 75px; }

.Contact_sec { width: 100%; }

.Contact_sec .Center { width: 100%; padding: 80px 3%;}
.Contact_sec h2 { font-size: 30px; line-height: 30px; }
.Contact_sec p { padding: 15px 0px; font-size: 13px; }

.Contact_sec .Map { width: 100%;}

.Contact_sec .Map img { height: 200px; width: 100%; }

.Get_sec { width: 100%; }

.Get_sec .Mid { width: 100%; padding: 30px 3%; }
.Get_sec .Leftside { width: 100%; float: right;}

46
 .Get_sec .Leftside p { margin: 0 0 20px; }
.Get_sec .Leftside input.field { padding: 10px 20px; }
.Get_sec .Leftside textarea { padding: 10px 20px; height: 125px; }
.Get_sec .Leftside .button { -webkit-appearance: none; margin: 0px; padding:
12px 0px; }

.Get_sec .Rightside { padding-top: 0px; width: 100%; }

.Get_sec .Rightside h3 { font-size: 30px; padding-bottom: 20px; }
.Get_sec .Rightside address { padding: 0 0 15px 65px; }
.Get_sec .Rightside ul { padding: 10px 0 0 3px; }

footer { width: 100%; }

footer .Cntr { width: 100%; padding: 10px 3%; }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */

@media only screen and (max-width: 479px) {

header { width: 100%; position: absolute; height: 57px; }

header .Center { width: 100%;}
header .site-logo { padding: 10px 0% 0px 3%; position: relative; z-index: 1; }
header .site-logo h1 { margin: 0px; line-height: 36px; }
header.smaller { height: 55px;}
header.smaller .site-logo { padding: 10px 0% 0px 3%; }
header.smaller .site-logo h1 a { font-size: 36px; }

#mobile_sec { position: fixed; width: 100%;}

#mobile_sec .mobile { display: block; position: relative; float: right; }
#mobile_sec .menumobile { display: none; width: 100%; position: absolute; top:
47
55px; right: 0%; background: rgba(0, 0, 0, 0.5); }
#mobile_sec .menumobile .Navigation { width: 100%; float: none; }
#mobile_sec .menumobile .Navigation ul { float: none;}
#mobile_sec .menumobile .Navigation li { float: none; width: 100%; border-
bottom: solid 1px #365374; }
#mobile_sec .menumobile .Navigation li a { padding: 10px; background: none;
border-bottom: none; }
#mobile_sec .menumobile .Navigation li a:hover,
#mobile_sec .menumobile .Navigation li a.active { background: #ff9000; border-
bottom: none; }
#mobile_sec .menumobile .Navigation li:last-child { border-bottom: none; }

.Banner_sec { width: 100%; height: 556px; }

.Banner_sec .Center {width: 100%; padding: 0px 3%; }
.Banner_sec .bannerside { top: 90px; }
.Banner_sec .leftside { padding: 0px 0px 10px 0px; width: 100%; float: none; }
.Banner_sec .leftside h3 { font-size: 30px; }
.Banner_sec .leftside p { font-size: 14px; line-height: 18px; padding: 10px 0px; }
.Banner_sec .leftside a { font-size: 13px; }
.Banner_sec .rightside { width: 98%;}
.Banner_sec .rightside .Slider { width: 99%; text-align: center; }
.Banner_sec .rightside .Slider .text { padding: 10px 10px; }
.Banner_sec .rightside .Slider .text .Icon { width: 100%; }
.Banner_sec .rightside .Slider .text .Icon li { float: none!important; display: inline-
block; padding: 0px 10px;}
.Banner_sec .rightside .Slider .text .Lorem { width: 100%; }
.Banner_sec .rightside .Slider .text .Lorem p { font-size: 13px; text-align: initial;}
.Banner_sec .rightside .Slider .text .Lorem p span { display: inline-block; float:
right; }
48
 .Banner_sec .rightside .Shadow { width: 105.5%; left: -16px; }
.Banner_sec .rightside .prevBtn { top: 100px; left: 10px; }
.Banner_sec .rightside .nextBtn { top: 100px; right: 10px; }
.Banner_sec .rightside #slider li img { height: 290px; width: 100%;}

.bgcolor { height: 50px; }

#Container { width: 100%; }

.About_sec,
.Services_sec,
.Pricing_sec {
width: 100%; padding: 60px 0px 30px;
}
.About_sec .Center { width: 100%; padding: 0px 3%; }
.About_sec h2 { font-size: 30px; line-height: 30px; }
.About_sec p { padding: 15px 0px; font-size: 13px; }
.About_sec .Tabside { padding: 30px 0 0px 0; }
.About_sec .Tabside ul { padding-bottom: 25px;}
.About_sec .Tabside li a { font-size: 13px; padding: 14px; }
.About_sec .Tabside .TabImage { width: 100%; float: none; padding-bottom:
25px; text-align: center;}
.About_sec .Tabside .TabImage .img1 { left: 0px; position: relative; height:
244px; background: none;background-size: 100%; }
.About_sec .Tabside .TabImage .img1 img { margin: auto;}
.About_sec .Tabside .TabImage .img2 { left: 20px; background: none;
background-size: 100%; }
.About_sec .Tabside .TabImage .img2 img { width: 94%; height: auto; }
.About_sec .Tabside .Description { margin-top: 0px; width: 100%; }
49
 .About_sec .Tabside .Description p { padding: 10px 0px; text-align: justify; }

.Services_sec .Center { width: 100%; padding: 0px 3%; }

.Services_sec h2 { font-size: 30px; line-height: 30px; }
.Services_sec p { padding: 15px 0px; font-size: 13px; }
.Services_sec .Serviceside { width: 100%; padding: 50px 0 30px; }
.Services_sec .Serviceside li { margin: 0px 0% 3% 2%; float: none; display:inline-
block; }

.Pricing_sec .Center { width: 100%; padding: 0px 3%; }

.Pricing_sec h2 { font-size: 30px; line-height: 30px; }
.Pricing_sec p { padding: 15px 0px; font-size: 13px; }
.Pricing_sec .Pricingside { width: 100%; padding: 30px 0 0 }
.Pricing_sec .Pricingside li { height: 100%; width: 100%; margin: 0px 0px 50px
0px; }
.Pricing_sec .Pricingside li .Basic { width: 100%; float: none; }
.Pricing_sec .Pricingside li .Basic h5 { -webkit-transform: rotate(0deg); -moz-
transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);
transform: rotate(0deg); writing-mode: lr-tb; }
.Pricing_sec .Pricingside li .Dollar { width: 100%; float: none; }
.Pricing_sec .Pricingside li .Band { width: 100%; float: none; border-bottom: solid
1px #ccc; background: none; height: 75px; }
.Pricing_sec .Pricingside li .Order { width: 100%; float: none; }
.Pricing_sec .Pricingside li:hover .Band { height: 75px; }

.Contact_sec { width: 100%; }

.Contact_sec .Center { width: 100%; padding: 60px 3% 30px;}
.Contact_sec h2 { font-size: 30px; line-height: 30px; }
.Contact_sec p { padding: 15px 0px; font-size: 13px; }

50
 .Contact_sec .Map { width: 100%;}
.Contact_sec .Map img { height: 200px; width: 100%; }

.Get_sec { width: 100%; }

.Get_sec .Mid { width: 100%; padding: 30px 4%; }
.Get_sec .Leftside { width: 100%; float: right;}
.Get_sec .Leftside p { margin: 0 0 20px; }
.Get_sec .Leftside input.field { padding: 10px 20px; }
.Get_sec .Leftside textarea { padding: 10px 20px; height: 125px; }
.Get_sec .Leftside .button { margin: 0px; padding: 12px 0px; -webkit-appearance:
none; }

.Get_sec .Rightside { padding-top: 0px; width: 100%; }

.Get_sec .Rightside h3 { font-size: 30px; padding-bottom: 10px; }
.Get_sec .Rightside address { padding: 0 0 15px 47px; }
.Get_sec .Rightside ul { padding: 10px 0 0 3px; }

footer { width: 100%; }

footer .Cntr { width: 100%; padding: 10px 3%; }
}

@media only screen and (max-width: 1199px) {

header,
.Navigation li,
.Navigation li:hover span,
.Navigation li.active span {
height: 87px; }
header.smaller .Navigation li:hover span,
header.smaller .Navigation li.active span {

51
 height: 60px;
}
}
@media only screen and (max-width: 767px) {
header {
height: 55px;
position: fixed;
}
.Navigation li {
height: 45px;
}
header .site-logo {
padding-top: 8px;
}
.Navigation li:hover span, .Navigation li.active span {
height: 45px;
}
.Navigation li span {
border-bottom: none;
background: none;
}
#mobile_sec .menumobile .Navigation li:hover,
#mobile_sec .menumobile .Navigation li.active {
background: #FF9000 none repeat scroll 0% 0%;
border-bottom: medium none;
}
header.smaller .Navigation li {
height: 45px;
}
.Banner_sec .leftside a {
52
 margin-top: 20px;
margin-bottom: 20px;
}
}
THEME.CSS
* { margin: 0px; padding: 0px; box-sizing: border-box; -webkit-font-smoothing:
antialiased; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit;
font-size: 100%; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-
align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav,
section, summary { display: block; }
html, body, button, input, select, textarea { font-family: Arial; font-size: 12px;
color: #8c806e; }
ul, ol { margin-top: 0; margin-bottom: 10px; }
ul ul { margin-bottom: 0; }
li { font-size: 13px; margin: 5px 0px 10px 0px; }
pre { overflow: auto; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none;
hyphens: none; quotes: none; }
a img { border: 0; }
a, input { outline: none; }
a { color: #F06; }
a:hover { text-decoration: none; }
53
h1, h2, h3, h4, h5, h6 { margin: 5px 0px 15px 0px; clear: both; font-weight:
lighter; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 14px; }
p {font-size: 13px; margin: 5px 0px 15px 0px; }

img { -ms-interpolation-mode: bicubic; border: 0; height: auto; max-width: 100%;

vertical-align: middle; display: block; }
figure { margin: 0; }
::-webkit-input-placeholder { color: rgba(51, 51, 51, 0.7); }
:-moz-placeholder { color: rgba(51, 51, 51, 0.7); }
::-moz-placeholder { color: rgba(51, 51, 51, 0.7); opacity: 1; /* Since FF19 lowers
the opacity of the placeholder by default */ }
:-ms-input-placeholder { color: rgba(51, 51, 51, 0.7); }
input:focus, textarea:focus { background-color: #fff; border: 1px solid #c1c1c1;
border: 1px solid rgba(51, 51, 51, 0.3); color: #333; }
input:focus, select:focus { outline: 2px solid #c1c1c1; outline: 2px solid rgba(51,
51, 51, 0.3); }
.hide { display: none;}

.clear { clear: both; height: 0px; overflow: hidden; }

/* <<< Design Holder >>> */

.DesignHolder { position: relative; display: block; width: 100%; min-height:
100%; }

54
/* <<< Layout Frame >>> */
.LayoutFrame { margin: 0 auto; width: 100%; display: block; }

/* <<< Body >>> */

body { background: #fff; }

/* <<< Header >>> */

header { width: 100%; position: fixed; top: 0px; left: 0px; height: 105px;
background: rgba(0, 0, 0, 0.5); z-index: 9; }
header .Center { max-width: 1100px; margin: auto; }
header .site-logo { padding: 30px 0px 0px 0px; width: 220px; float: left; transition:
all 0.3s; }
header .site-logo h1 { margin: 0px; }
header .site-logo h1 a { font-size: 36px; color: #fff; font-family: 'Open Sans', sans-
serif; font-weight: 800; text-decoration: none; text-transform: uppercase; text-
shadow: rgb(3, 3, 3) 0px 2px 5px; transition: all 0.7s ease; }
header .site-logo h1 a span { color: #ff9000; }
header.smaller { padding: 0px 0px 0px 0px; height: 60px; transition: all 0.3s;
background: rgba(0, 0, 0, 0.75); }
header.smaller .site-logo {padding: 13px 0px 0px 0px; }
header.smaller .site-logo h1 { line-height: 30px; }
header.smaller .site-logo h1 a { font-size: 30px; }

/* <<< Navigation >>> */

.Navigation { float: right; width: 68.18%; margin-right: 11px; }
.Navigation ul { list-style: none; margin: 0px; float: right; }
.Navigation li { float: left; padding: 0px; margin: 0px; height: 105px; position:
relative; transition: all 0.3s ease; }
.Navigation li a { padding: 42px 41px 36px 41px; font-size: 16px; color: #fff; font-
family: 'Open Sans', sans-serif; font-weight: 400; text-decoration: none; display:
55
block; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.Navigation li span {
border-bottom: solid 5px #ff9000;
background: rgba(56,87,122,1);
background: -webkit-gradient(left top, left bottom, color-stop(0%,
rgba(56,87,122,1)), color-stop(0%, rgba(56,87,122,1)), color-stop(0%,
rgba(56,87,122,1)), color-stop(100%, rgba(44,68,94,1)));
background: linear-gradient(to bottom, rgba(56,87,122,1) 0%, rgba(56,87,122,1)
0%, rgba(56,87,122,1) 0%, rgba(44,68,94,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38577a',
endColorstr='#2c445e', GradientType=0 );
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -10;
opacity: 0;
transition: all 0.5s ease;
}
.Navigation li:hover span, .Navigation li.active span {
opacity: 1;
}

header.smaller .Navigation li a { padding: 16px 41px; }

header.smaller .Navigation li { height: 60px; }

.mobile { display: none; }

.mobile .fa { padding: 12px 14px; font-size: 31px; width: 55px; height: 55px; color:
56
#fff; cursor: pointer; background: #ff9408; }
.mobile .fa:hover { background: #e3860e; }
.mobile.closed .fa-bars { display: none; }
.mobile .fa-times { padding: 11px 15px; width: 55px; height: 55px; display: none;
font-size: 31px; }
.mobile.closed .fa-times { display: block; }

/* <<< Banner Section >>> */

.Banner_sec { width: 100%; background: url(../img/Banner-bg.jpg) top center no-
repeat; height: 687px; position: relative; background-size: cover; }
.Banner_sec .bannerside { width: 100%; position: absolute; top: 256px; left: 0px; }
.Banner_sec .Center { max-width: 1100px; margin: auto; }
.Banner_sec .leftside { padding: 92px 0px 0px 0px; width: 28.90%; float: left; }
.Banner_sec .leftside h3 { font-size: 36px; color: #fff; font-family: 'Open Sans',
sans-serif; font-weight: 800; text-transform: uppercase; margin: 0px; line-height:
34px;}
.Banner_sec .leftside h3 span { color: #ff9000; font-family: 'Open Sans', sans-serif;
font-weight: 600; display: block; }
.Banner_sec .leftside p { padding: 16px 0px 26px 0px; font-size: 16px; color: #fff;
font-family: 'Open Sans', sans-serif; font-weight: 600; font-style: italic; margin: 0px;
word-spacing: 2px; line-height: 22px; }
.Banner_sec .leftside a { padding: 11px 16px; font-size: 14px; color: #fff; font-
family: 'Open Sans', sans-serif; font-weight: 600; text-transform: uppercase; text-
decoration: none; display: inline-block; border: solid 1px #b0bdc8; background:
rgba(64, 93, 118, 0.8); transition: all 0.3s ease; }
.Banner_sec .leftside a:hover { background: #ff9000; color: #fff; border: solid 1px
#ff9000; }
.Banner_sec .rightside { width: 68.36%; float: right; position: relative; }
.Banner_sec .rightside .bx-wrapper { position: relative; z-index: 1; }
.Banner_sec .rightside ul { list-style: none; margin: 0px; }
57
.Banner_sec .rightside li { padding: 0px; margin: 0; float: none!important; }
.Banner_sec .rightside #slider { width: 100%; float: right; position: relative; z-
index: 1; }
.Banner_sec .rightside .Slider .text { padding: 25px 47px 21px 30px; position:
absolute; bottom: 0px; left: 0px; width: 100%; background: rgba(0, 0, 0, 0.7); }
.Banner_sec .rightside .Slider .text .Icon { width: 38%; float: left; }
.Banner_sec .rightside .Slider .text ul { list-style: none; margin: 0px; }
.Banner_sec .rightside .Slider .text li { float: left!important; padding: 0px 30px 0px
10px; margin: 0px; }
.Banner_sec .rightside .Slider .text li a { display: block; font-size: 14px; color: #fff;
text-decoration: none; font-family: 'Open Sans', sans-serif; font-weight: 400;
transition: all 0.3s ease;}
.Banner_sec .rightside .Slider .text li:last-child { padding: 0px; }
.Banner_sec .rightside .Slider .text li:hover a { color: #ff9000!important;}
.Banner_sec .rightside .Slider .text li a .fa { padding: 13px; margin-right: 10px;
color: #fff; border-radius: 50px; border: solid 2px #fff; transition: all 0.3s ease; }
.Banner_sec .rightside .Slider .text li:hover a .fa { background: #ff9000; color: #fff;
border: solid 2px #ff9000; }
.Banner_sec .rightside .Slider .text li:last-child { padding-right: 0px; padding-left:
0px;}
.Banner_sec .rightside .Slider .text .Lorem { float: right; width: 31%; }
.Banner_sec .rightside .Slider .text .Lorem p { padding-top: 5px; font-size: 18px;
color: #fff; margin: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; text-
transform: uppercase; text-align: right; line-height: 19px; }
.Banner_sec .rightside .Slider .text .Lorem p span { font-size: 14px; text-align: right;
color: #ff9000; display: block; text-transform: capitalize;}
.Banner_sec .rightside .prevBtn { width: 42px; height: 42px; display: block; text-
indent: -9999px; background: url(../img/prev-arrow.png) no-repeat; position:
absolute; top: 213px; left: 49px; z-index: 1; opacity: 0.5; transition: opacity 0.3s
ease; }
58
.Banner_sec .rightside .prevBtn:hover { opacity: 1; }
.Banner_sec .rightside .nextBtn { width: 42px; height: 42px; display: block; text-
indent: -9999px; background: url(../img/next-arrow.png) no-repeat; position:
absolute; top: 213px; right: 47px; z-index: 1; opacity: 0.5; transition: opacity 0.3s
ease; }
.Banner_sec .rightside .nextBtn:hover { opacity: 1; }
.Banner_sec .rightside .Shadow { position: absolute; bottom: -3px; left: -25px; max-
width: none; }

/* <<< bg color>>> */
.bgcolor { height: 74px; width: 100%; background: rgba(249,250,251,1);
background: -webkit-gradient(left top, left bottom, color-stop(0%,
rgba(249,250,251,1)), color-stop(0%, rgba(249,250,251,1)), color-stop(100%,
rgba(225,228,231,1)));
background: linear-gradient(to bottom, rgba(249,250,251,1) 0%,
rgba(249,250,251,1) 0%, rgba(225,228,231,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fafb',
endColorstr='#e1e4e7', GradientType=0 ); }

/* <<< Container >>> */

#Container { overflow: hidden; width: 100%; }

/* <<< About Section >>> */

.About_sec { padding: 115px 0px 88px 0px ; width: 100%; overflow: hidden; }
.About_sec .Center { max-width: 1100px; margin: auto; overflow: hidden; text-
align: center; }
.About_sec h2 { font-size: 56px; color: #000; font-family: 'Oswald', sans-serif;
font-weight: 400; margin: 0px; text-transform: uppercase; line-height: 60px; letter-
spacing: -0.4px; }

59
 .About_sec p { padding: 24px 0px 35px 0px; font-size: 14px; color: #979797;
margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; font-weight:
400; }
.About_sec .Line { border: solid 1px #ff9408; height: 2px; width: 252px; margin:
auto; }
.About_sec .Tabside { padding: 90px 0px; width: 100%;}
.About_sec .Tabside ul { list-style: none; margin: 0px; padding-bottom: 59px; }
.About_sec .Tabside li { float: none; padding: 0px; margin: 0px -2px; display:
inline-block;}
.About_sec .Tabside li a { padding: 14px 40px 13px 40px; font-size: 18px; color:
#989898; font-family: 'Open Sans', sans-serif; font-weight: 400; text-decoration:
none; text-transform: uppercase; border: solid 1px #d5d5d5; display: block;
transition: all 0.3s ease; }
.About_sec .Tabside li a:hover, .About_sec .Tabside li a.activeLink { border: solid
1px #ff9408; background: #ff9408; color: #fff;}
.About_sec .Tabside .TabImage { width: 43.63%; float: left; position: relative; }
.About_sec .Tabside .TabImage .img1 { position: absolute; top: 0px; left: 42px;
height: 260px; background: url(../img/about-shadow.png) no-repeat; background-
position: 25px 223px; }
.About_sec .Tabside .TabImage .img1 img { padding: 5px; border: solid 1px
#ececec; background: #fff; }
.About_sec .Tabside .TabImage .img2 { position: absolute; top: 40px; left: 2px;
height: 260px; background: url(../img/about-shadow.png) bottom center no-repeat;
background-position: 0px 223px; }
.About_sec .Tabside .TabImage .img2 img { padding: 5px; border: solid 1px
#ececec; background: #fff; }
.About_sec .Tabside .Description { width: 54.3%; float: right; text-align: left;
margin-top: -6px;}
.About_sec .Tabside .Description h3 { font-size: 24px; color: #000; margin: 0px;
text-transform: uppercase; font-family:'Open Sans'; line-height: 29px; }
60
 .About_sec .Tabside .Description h3 span { padding-left: 3px; font-size: 14px;
color: #ff9000; display: block; }
.About_sec .Tabside .Description p { padding: 21px 0px 4px 0px; font-size: 14px;
color: #979797; margin: 0px; font-family:'Open Sans'; line-height: 25px; }
.About_sec .Tabside .Description p .cyan { font-size: 16px; color: #08c2ff; }

/* <<< Services Section >>> */

.Services_sec{ padding: 114px 0px 90px 0px ; width: 100%; overflow: hidden;
background: url(../img/Services-bg.jpg) top center no-repeat; background-size:
cover; }
.Services_sec .Center { max-width: 1100px; margin: auto; overflow: hidden; text-
align: center; }
.Services_sec h2 { font-size: 56px; color: #fff; font-family: 'Oswald', sans-serif;
font-weight: 400; margin: 0px; text-transform: uppercase; line-height: 60px; }
.Services_sec p { padding: 25px 0px 35px 0px; font-size: 14px; color: #d8dfe5;
margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; font-weight:
400; }
.Services_sec .Line { border: solid 1px #ff9408; height: 2px; width: 252px;
margin: auto; }
.Services_sec .Serviceside { padding: 76px 0px 30px 0px; width: 100%; overflow:
hidden; }
.Services_sec .Serviceside ul { list-style: none; margin: 0px }
.Services_sec .Serviceside li { float: left; padding: 0px; margin: 0px 40px 0px 0px;
text-align: center; width: 245px; }
.Services_sec .Serviceside li:last-child { margin-right: 0px;}
.Services_sec .Serviceside li.Development { padding: 44px 0px 161px 0px;
background: url(../img/Development-bg.jpg) no-repeat;box-shadow: 1px 4px 7px -
4px rgba(0,0,0,0.75); } .Services_sec .Serviceside li.Development a { text-
decoration: none; background: url(../img/Development-cn.png) top center no-repeat;
61
display: block; }
.Services_sec .Serviceside li.Development h4 { padding: 138px 0px 0px 0px;
font-size: 17px; color: #03a4df; text-decoration: none; text-transform: uppercase;
font-family: 'Open Sans', sans-serif; font-weight: 400; }
.Services_sec .Serviceside li.Development a:hover h4 { color: #fff; background:
url(../img/Develop-hover-icn.png) top center no-repeat; }

.Services_sec .Serviceside li.Desdin { padding: 44px 0px 159px 0px;background:

url(../img/desgin-bg.jpg) no-repeat; box-shadow: 1px 4px 7px -4px
rgba(0,0,0,0.75); }
.Services_sec .Serviceside li.Desdin a { text-decoration: none; background:
url(../img/desgin-icn.png) top center no-repeat; display: block; }
.Services_sec .Serviceside li.Desdin h4 { padding: 138px 0px 0px 0px; font-size:
18px; color: #ffab3f; text-decoration: none; text-transform: uppercase; font-family:
'Open Sans', sans-serif; font-weight: 400; }
.Services_sec .Serviceside li.Desdin a:hover h4 { color: #fff; background:
url(../img/desgin-hover-icn.png) top center no-repeat; }

.Services_sec .Serviceside li.Concept { padding: 44px 0px 159px 0px;

background: url(../img/concept-bg.jpg) no-repeat; box-shadow: 1px 4px 7px -4px
rgba(0,0,0,0.75); }
.Services_sec .Serviceside li.Concept a { text-decoration: none; background:
url(../img/concept-icn.png) top center no-repeat; display: block; }
.Services_sec .Serviceside li.Concept h4 { padding: 138px 0px 0px 0px; font-size:
18px; color: #ae382d; text-decoration: none; text-transform: uppercase;font-family:
'Open Sans', sans-serif; font-weight: 400; }
.Services_sec .Serviceside li.Concept a:hover h4 { color: #fff; background:
url(../img/concept-hover-icn.png) top center no-repeat; }

.Services_sec .Serviceside li.System { padding: 44px 0px 159px 0px;background:

62
url(../img/systam-bg.jpg) no-repeat; box-shadow: 1px 4px 7px -4px
rgba(0,0,0,0.75); }
.Services_sec .Serviceside li.System a { text-decoration: none; background:
url(../img/systam-icn.png) top center no-repeat; display: block; }
.Services_sec .Serviceside li.System h4 { padding: 138px 0px 0px 0px; font-size:
18px; color: #5e5f61; text-decoration: none; letter-spacing: -1px; text-transform:
uppercase; font-family: 'Open Sans', sans-serif; font-weight: 400; }
.Services_sec .Serviceside li.System a:hover h4 { color: #fff; background:
url(../img/systam-hover-icn.png) top center no-repeat;}

/* <<< Pricing Section >>> */

.Pricing_sec { padding: 112px 0px 108px 0px ; width: 100%; overflow: hidden;
background: #ececec; }
.Pricing_sec .Center { max-width: 1100px; margin: auto; overflow: hidden; text-
align: center; }
.Pricing_sec h2 { font-size: 57px; color: #000; font-family: 'Oswald', sans-serif;
font-weight: 400; margin: 0px; text-transform: uppercase; line-height: 60px; }
.Pricing_sec p { padding: 26px 0px 35px 0px; font-size: 14px; color: #8f8f8f;
margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; font-weight:
400; }
.Pricing_sec .Line { border: solid 1px #ff9408; height: 2px; width: 252px; margin:
auto; }
.Pricing_sec .Pricingside { padding: 75px 0px 0px 0px; width: 100%; overflow:
hidden; text-align: initial; }
.Pricing_sec .Pricingside ul { list-style: none; margin: 0px; }
.Pricing_sec .Pricingside li { float: none; padding: 0px; margin: 0px 0px 11px 0px;
height: 103px; background: #fff; text-align: center; }
.Pricing_sec .Pricingside li .Basic { width: 55px; float: left; display: table; height:
103px; background: #ff9408; transition: all ease 0.3s; }
.Pricing_sec .Pricingside li .Basic h5 { display: table-cell; vertical-align: middle;
63
font-size: 17px; color: #2d2d2d; font-family: 'Oswald', sans-serif; font-weight: 400;
text-transform: uppercase; margin: 0px; -webkit-transform: rotate(270deg); -moz-
transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform:
rotate(270deg); transform: rotate(270deg); clear: none; text-align: center; }
.Pricing_sec .Pricingside li .Dollar { padding: 22px 0px 21px 0px; width: 205px;
float: left; background: #2d2d2d; transition: all ease 0.3s;}
.Pricing_sec .Pricingside li .Dollar h2 { font-size: 34px; color: #ff9408; font-
family: 'Oswald', sans-serif; font-weight: 400; letter-spacing: 1px; }

.Pricing_sec .Pricingside li .Band { padding: 1px 30px; width: 173px; float: left;
background: url(../img/divider.png) right 16px no-repeat; transition: all 0.3s ease; }
.Pricing_sec .Pricingside li .Band p { font-size: 16px; color: #979797; margin:
0px; font-family: 'Oswald', sans-serif; font-weight: 400; text-transform: uppercase;
line-height: 20px; }
.Pricing_sec .Pricingside li .Band p span { display: block; }
.Pricing_sec .Pricingside li .Band.last { background: none; }
.Pricing_sec .Pricingside li .Order {width: 147px; float: left; display: table; height:
103px; }
.Pricing_sec .Pricingside li .Order a { font-size: 17px; color: #fff; font-family:
'Oswald', sans-serif; font-weight: 400; text-decoration: none; display: table-cell;
vertical-align: middle; text-transform: uppercase; background: #2d2d2d; }

.Pricing_sec .Pricingside li:hover .Basic { padding: 0px; background: #2d2d2d; }

.Pricing_sec .Pricingside li:hover .Basic h5 { color: #fff; }
.Pricing_sec .Pricingside li:hover .Band { padding: 0px; background: #2d2d2d
url(../img/divider-black.png) right 16px no-repeat; height: 103px; }
.Pricing_sec .Pricingside li:hover .Band p { color: #fff; }
.Pricing_sec .Pricingside li:hover .Dollar { background: #ff9408; color: #fff; }
.Pricing_sec .Pricingside li:hover .Dollar h2 { color: #fff; }

64
 .Pricing_sec .Pricingside li:hover .Order a { background: #ff9408; color: #fff;
transition: all 0.3s ease;}

/* <<< Contact Section >>> */

.Contact_sec { width: 100%; overflow: hidden; }
.Contact_sec .Contactside { background: url(../img/Contact-bg.jpg) top center no-
repeat; background-size: cover; overflow: hidden;}
.Contact_sec .Center { padding: 115px 0px 77px 0px; max-width: 1100px;
margin: auto; overflow: hidden; text-align: center; }
.Contact_sec h2 { font-size: 57px; color: #fff; font-family: 'Oswald', sans-serif;
font-weight: 400; margin: 0px; text-transform: uppercase; line-height: 60px;}
.Contact_sec p { padding: 24px 0px 35px 0px; font-size: 14px; color: #ebebeb;
margin: 0px; font-family: 'Open Sans', sans-serif; line-height: 25px; font-weight:
400; }
.Contact_sec .Line { border: solid 1px #ff9408; height: 2px; width: 252px; margin:
auto; }
.Contact_sec .Pricingside { padding: 70px 0px 10px 0px; width: 100%; overflow:
hidden; text-align: initial; }

/* <<< Map >>> */

.Map { position: relative; z-index: 1; width: 100%; overflow: hidden; box-shadow:
0px 1px 12px 3px #242424;
-webkit-box-shadow: 0px 1px 12px 3px #242424; -moz-box-shadow: 0px
1px 12px 3px #242424; -o-box-shadow: 0px 1px 12px 3px #242424; }
.Map #GoogleMap { height: 399px; }

/* <<< Get Section >>> */

.Get_sec { width: 100%; overflow: hidden; background: url(../img/Get-

65
bg.jpg) top center no-repeat; background-size: cover; }
.Get_sec .Mid { padding: 76px 0px 95px 0px; max-width: 1100px; margin:
auto; overflow: hidden; }
.Get_sec .Leftside { width: 48.2%; float: left; }
.Get_sec .Leftside fieldset { padding: 0px; margin: 0px; }
.Get_sec .Leftside p { padding: 0px; margin: 0px 0px 25px 0px; }
.Get_sec .Leftside input.field { padding: 18px 20px 17px 20px; font-size:
14px; color: #979797; font-family: 'Open Sans', sans-serif; font-weight: 400; border:
0px; width: 100%; box-shadow: 0px 2px 6px 0px #242424; -webkit-box-shadow:
0px 2px 6px 0px #242424; -moz-box-shadow: 0px 2px 6px 0px #242424;
-o-box-shadow: 0px 2px 6px 0px #242424; border-radius: 0px; }
.Get_sec .Leftside input:focus { outline: none;}
.Get_sec .Leftside textarea { padding: 18px 20px 17px 20px; font-size:
14px; color: #979797; font-family: 'Open Sans', sans-serif; font-weight: 400; border:
0px; width: 100%; height: 156px; resize:none; box-shadow: 0px 2px 6px 0px
#242424; -webkit-box-shadow: 0px 2px 6px 0px #242424; -moz-box-shadow: 0px
2px 6px 0px #242424; -o-box-shadow: 0px 2px 6px 0px #242424; border-radius:
0px; }
.Get_sec .Leftside textarea:focus { outline: none;}
.Get_sec .Leftside .button { padding: 16px 0px 17px 0px; margin-top: -3px;
font-size: 14px; color: #e9ecee; font-family: 'Open Sans', sans-serif; font-weight:
700; text-align: center; background: #e2850a; border: 0px; text-
transform:uppercase; width: 100%; cursor: pointer; box-shadow: 0px 2px 6px 0px
#242424; -webkit-box-shadow: 0px 2px 6px 0px #242424; -moz-box-shadow: 0px
2px 6px 0px #242424; -o-box-shadow: 0px 2px 6px 0px #242424; border-radius:
0px; transition: all 0.3s ease;}
.Get_sec .Leftside .button:hover { background: #2d2d2d; color: #fff;}
.Get_sec .Rightside { padding-top: 12px; width: 48.18%; float: right;}
.Get_sec .Rightside h3 { padding-bottom: 44px; font-size: 46px; color:
#f88e04; font-family: 'Oswald', sans-serif; font-weight: 400; margin: 0px; text-
66
transform:uppercase; line-height: 46px; }
.Get_sec .Rightside address { padding: 0px 0px 27px 65px; margin-left:
3px; font-size: 14px; color: #ebedf1; font-family: 'Open Sans', sans-serif; font-
weight: 400; font-style: normal; background: url(../img/location-icn.png) left 4px
no-repeat; line-height: 24px; }
.Get_sec .Rightside address.Number { background: url(../img/phone-
icn.png) left 5px no-repeat; }
.Get_sec .Rightside address.Email { margin-left: 4px; background:
url(../img/mail-icn.png) left 0px no-repeat; }
.Get_sec .Rightside address.Email a { text-decoration: none; color: #ebedf1;
}
.Get_sec .Rightside address.Email a:Hover { color: #f88e04; }
.Get_sec .Rightside ul { list-style: none; margin: 0px; padding: 27px 0px
0px 3px; }
.Get_sec .Rightside li { float: left; padding: 0px; margin: 0px 22px 0px
0px; }
.Get_sec .Rightside li a { text-decoration: none; }

/* <<< footer >>> */

footer { overflow: hidden; width: 100%; text-align: center; background:
rgba(0, 0, 0, 0.6); }
footer .Cntr { padding: 28px 0px; max-width: 1100px; margin: auto;}
footer .Cntr p { padding: 0px; font-size: 13px; color: #a9abad; font-
family:'Open Sans'; margin: 0px; }
footer .Cntr a { color: #a9abad; text-decoration: none; }
footer .Cntr a:hover { color: #fff; }

/*
============================================================
67
==============
Author's custom styles

============================================================
============== */
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-
index: 1000; }
#loader { display: block; position: relative; left: 50%; top: 50%; width: 150px;
height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid
transparent; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; /*
Chrome, Opera 15+, Safari 5+ */
animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
z-index: 1001; }
#loader:before { content: ""; position: absolute; top: 5px; left: 5px; right:
5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent;
border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; /*
Chrome, Opera 15+, Safari 5+ */
animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ }
#loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px;
bottom: 15px; border-radius: 50%; border: 3px solid transparent;
border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; /* Chrome,
Opera 15+, Safari 5+ */ animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+,
IE 10+, Opera */ }

@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ /*
IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
68
 100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+
*/ /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ /*
IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+
*/ /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}

#loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%;

background: #222222; z-index: 1000; -webkit-transform: translateX(0); /* Chrome,
Opera 15+, Safari 3.1+ */ /* IE 9 */ transform: translateX(0); /* Firefox 16+, IE
10+, Opera */}

#loader-wrapper .loader-section.section-left {
left: 0;
}

#loader-wrapper .loader-section.section-right {
right: 0;
69
}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ /*
IE 9 */
transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {

-webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */ /* IE
9 */
transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader {
opacity: 0;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;

-webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */ /*

IE 9 */
transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */
transition: all 0.3s 1s ease-out;
}

70
/* JavaScript Turned Off */
.no-js #loader-wrapper {
display: none;
}

71
 APPENDIX-B (OUTPUT)

OUTPUT

LOGIN PAGE

72
HOME PAGE

73
ABOUT US PAGE

74
ABOUT US PAGE

75
OUR SERVICES

76
TRACKING PAGE

77
APP INTERFACE

78
APP LOGIN

79
 REFERENCES

1. Vehicle Monitoring System (2016)

Author: Kavitha, G.Deepika, A.Devapriya, N.Divya Bharathi.

2. Vehicle Monitoring and Tracking System using GPS and GSM Technologies
(2017)

Author: Hari Kumar, Syeda Fathima, Thanveer, Vamshi Krishna, Syed

Akram.

3. Vehicle tracking system using GPS technology (2016)

Author: Kismat Pradhan, Yogesh Limboo, Anu Rai, Avinash Sharma,

Shirshak Gurung.

4. GPS/GSM Based Bus Tracking System (BTS) (2018)

Author: Christeena Joseph, A.D.Ayyappan, A.R.Aswini, B.Dhivya

Bharathy.

5. GPS/GSM Tracking System (2017)

Author: Saravanan, Ravi Kumar, Ashwin Rio, Bhavan Kumar.

80