Scribd
Upload
35 views19 pages

Index - HTML 3

All

Uploaded by

orjinolly
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
35 views19 pages

Index - HTML 3

All

Uploaded by

orjinolly
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 19

<!

DOCTYPE html>
<html lang="zxx">

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />


<head>
<title>Fedex Courier Services :: Home </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="keywords" content="Shipment a Responsive web template, Bootstrap
Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG,
SonyEricsson, Motorola web design" />
<script>
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);

function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/owl.theme.css" type="text/css" media="all">
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css"
media="screen" property="" />
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/minimal-slider.css" type="text/css"
media="all" />
<link href="css/fontawesome-all.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?
family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?
family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800"
rel="stylesheet">
</head>

<body>
<script>
(function(){
if(typeof _bsa !== 'undefined' && _bsa) {
// format, zoneKey, segment:value, options
_bsa.init('flexbar', 'CKYI627U', 'placement:w3layoutscom');
}
})();
</script>
<script>
(function(){
if(typeof _bsa !== 'undefined' && _bsa) {
// format, zoneKey, segment:value, options
_bsa.init('fancybar', 'CKYDL2JN', 'placement:demo');
}
})();
</script>
<body>
<div class="mian-content">
<!-- main image slider container -->
<div class="slide-window">
<div class="slide-wrapper" style="width: 300%;">
<div class="slide">
<div class="slide-caption">
<h3>Have a <span>package</span>?.</h3>
<div class="cont-btn">
<a class="btn text-uppercase" href="#" data-
toggle="modal" data-target="#exampleModalCenter">
Track</a>
</div>

</div>
</div>
<div class="slide slide2">
<div class="slide-caption">
<h3>Premium Worldwide <span>Logistics</span> Network </h3>
<div class="cont-btn">
<a class="btn text-uppercase" href="contact.html">
Contact</a>
</div>

</div>
</div>
<div class="slide slide3">
<div class="slide-caption">
<h3>Propel <span>yourself</span> into the future.</h3>
<div class="cont-btn">
<a class="btn text-uppercase" href="contact.html">
Contact</a>
</div>

</div>
</div>
</div>
<div class="slide-controller">
<div class="slide-control-left">
<div class="slide-control-line"></div>
<div class="slide-control-line"></div>
</div>
<div class="slide-control-right">
<div class="slide-control-line"></div>
<div class="slide-control-line"></div>
</div>
</div>
</div>
<!-- main image slider container -->

<div class="header-top-w3layouts">
<div class="container">

<header>
<div class="top-head-w3-agile text-left">
<div class="row top-content-info-wthree">
<div class="col-lg-5 top-content-left">
<h6>Have any Questions?</h6>
</div>
<div class="col-lg-7 top-content-right">
<div class="row">
<div class="col-md-6 callnumber text-left">
<h6>Call Us : <span><a href="tel:
+14094226132">+14094226132</a></span></h6>

</div>
<div class="col-md-6 top-social-icons p-0">
<!-- GTranslate: https://gtranslate.io/ -->
<style type="text/css">
<!--
a.gflag {vertical-align:middle;font-size:24px;padding:1px 0;background-repeat:no-
repeat;background-image:url(//gtranslate.net/flags/24.png);}
a.gflag img {border:0;}
a.gflag:hover {background-image:url(//gtranslate.net/flags/24a.png);}
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}
-->
</style>

<br /><select onchange="doGTranslate(this);"><option value="">Select


Language</option><option value="en|af">Afrikaans</option><option value="en|
sq">Albanian</option><option value="en|ar">Arabic</option><option value="en|
hy">Armenian</option><option value="en|az">Azerbaijani</option><option value="en|
eu">Basque</option><option value="en|be">Belarusian</option><option value="en|
bg">Bulgarian</option><option value="en|ca">Catalan</option><option value="en|zh-
CN">Chinese (Simplified)</option><option value="en|zh-TW">Chinese
(Traditional)</option><option value="en|hr">Croatian</option><option value="en|
cs">Czech</option><option value="en|da">Danish</option><option value="en|
nl">Dutch</option><option value="en|en">English</option><option value="en|
et">Estonian</option><option value="en|tl">Filipino</option><option value="en|
fi">Finnish</option><option value="en|fr">French</option><option value="en|
gl">Galician</option><option value="en|ka">Georgian</option><option value="en|
de">German</option><option value="en|el">Greek</option><option value="en|
ht">Haitian Creole</option><option value="en|iw">Hebrew</option><option value="en|
hi">Hindi</option><option value="en|hu">Hungarian</option><option value="en|
is">Icelandic</option><option value="en|id">Indonesian</option><option value="en|
ga">Irish</option><option value="en|it">Italian</option><option value="en|
ja">Japanese</option><option value="en|ko">Korean</option><option value="en|
lv">Latvian</option><option value="en|lt">Lithuanian</option><option value="en|
mk">Macedonian</option><option value="en|ms">Malay</option><option value="en|
mt">Maltese</option><option value="en|no">Norwegian</option><option value="en|
fa">Persian</option><option value="en|pl">Polish</option><option value="en|
pt">Portuguese</option><option value="en|ro">Romanian</option><option value="en|
ru">Russian</option><option value="en|sr">Serbian</option><option value="en|
sk">Slovak</option><option value="en|sl">Slovenian</option><option value="en|
es">Spanish</option><option value="en|sw">Swahili</option><option value="en|
sv">Swedish</option><option value="en|th">Thai</option><option value="en|
tr">Turkish</option><option value="en|uk">Ukrainian</option><option value="en|
ur">Urdu</option><option value="en|vi">Vietnamese</option><option value="en|
cy">Welsh</option><option value="en|yi">Yiddish</option><option value="en|
ceb">Cebuano</option><option value="en|eo">Esperanto</option><option value="en|
gu">Gujarati</option><option value="en|ig">Igbo</option><option value="en|
jw">Javanese</option></select><div id="google_translate_element2"></div>
<script type="text/javascript">
function googleTranslateElementInit2() {new
google.translate.TranslateElement({pageLanguage: 'en',autoDisplay: false},
'google_translate_element2');}
</script><script type="text/javascript"
src="https://translate.google.com/translate_a/element.js?
cb=googleTranslateElementInit2"></script>

<script type="text/javascript">
/* <![CDATA[ */
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c
%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String))
{while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\
w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\
b','g'),k[c]);return p}('6 7(a,b){n{4(2.9){3 c=2.9("o");c.p(b,f,f);a.q(c)}g{3
c=2.r();a.s(\'t\'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a==\'\')v;3 b=a.w(\'|\')[1];3
c;3 d=2.x(\'y\');z(3 i=0;i<d.5;i++)4(d[i].A==\'B-C-D\')c=d[i];4(2.j(\'k\')==E||
2.j(\'k\').l.5==0||c.5==0||c.l.5==0){F(6()
{h(a)},G)}g{c.8=b;7(c,\'m\');7(c,\'m\')}}',43,43,'||document|var|if|length|
function|GTranslateFireEvent|value|createEvent||||||true|else|doGTranslate||
getElementById|google_translate_element2|innerHTML|change|try|HTMLEvents|initEvent|
dispatchEvent|createEventObject|fireEvent|on|catch|return|split|
getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|
500'.split('|'),0,{}))
/* ]]> */
</script>

</div>
</div>
</div>

</div>
</div>
<div class="clearfix"></div>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="logo text-left">
<h1>
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" height="50"></a>
</h1>
</div>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon">

</span>

</button>

<div class="collapse navbar-collapse"


id="navbarSupportedContent">
<ul class="navbar-nav ml-lg-auto text-right">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="contact.html">Contact</a>
</li>

</ul>

<div class="log-in">
<a class="btn text-uppercase" href="#" data-
toggle="modal" data-target="#exampleModalCenter">
TRACK</a>
</div>
</div>

</nav>
</header>
</div>
</div>

</div>
<!-- end of main image slider container -->
<!-- banner-text -->
<!-- ab -->
<section class="banner-bottom-w3ls py-lg-5 py-md-5 py-3">
<div class="container">
<!---728x90--->

<div class="inner-sec-w3layouts py-lg-5 py-3">


<div class="intro text-left">
<h3 class="main mb-md-5 mb-3">The market place for shippers and
transporters</h3>
<p>Our goal is to create a product and service that you're
satisfied with ,and you'll use everyday.This is why
we're constantly working on our services to make it
dynamic.
</p>
</div>
<div class="row mt-lg-5 mt-md-4 mt-4">
<div class="col-lg-4 about-in text-left">
<div class="card">
<div class="card-body">
<i class="fas fa-anchor mb-2"></i>

<h5 class="card-title">Ocean Freight</h5>


<!-- <p class="card-text">Lorem ipsum dolor sit
amet consectetur elit,Adipisicing elit tempor.</p> -->
</div>
</div>

</div>
<div class="col-lg-4 about-in text-left">
<div class="card">
<div class="card-body">

<i class="fas fa-fighter-jet mb-2"></i>

<h5 class="card-title">Air Freight</h5>


<!-- <p class="card-text">Lorem ipsum dolor sit
amet consectetur elit,Adipisicing elit tempor.</p> -->
</div>
</div>
</div>

<div class="col-lg-4 about-in text-left">


<div class="card">
<div class="card-body">
<i class="fas fa-truck mb-2"></i>

<h5 class="card-title">Land Transport</h5>


<!-- <p class="card-text">Lorem ipsum dolor sit
amet consectetur elit,Adipisicing elit tempor.</p> -->
</div>
</div>
</div>
<div class="col-lg-4 about-in text-left">
<div class="card">
<div class="card-body">
<i class="fab fa-docker mb-2"></i>

<h5 class="card-title">Supply</h5>
<!-- <p class="card-text">Lorem ipsum dolor sit
amet consectetur elit,Adipisicing elit tempor.</p> -->
</div>
</div>

</div>
<div class="col-lg-4 about-in text-left">
<div class="card">
<div class="card-body">
<i class="far fa-clock mb-2"></i>

<h5 class="card-title">Fast & On Time</h5>


<!-- <p class="card-text">Lorem ipsum dolor sit
amet consectetur elit,Adipisicing elit tempor.</p> -->
</div>
</div>

</div>

<div class="col-lg-4 about-in text-left">


<div class="card">
<div class="card-body">
<i class="far fa-money-bill-alt mb-2"></i>

<h5 class="card-title">Weather Insuarance</h5>


<!-- <p class="card-text">Lorem ipsum dolor sit
amet consectetur elit,Adipisicing elit tempor.</p> -->
</div>
</div>
</div>

</div>

</div>
</div>
</section>
<!-- //ab -->
<!---728x90--->
<!-- banner-bottom-w3ls -->
<section class="banner-bottom-w3ls py-lg-5 py-md-5 py-3">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 about-img">
</div>
<div class="col-lg-6 about-right">
<h4>Who We Are</h4>
<h3>We give you complete control of your shipments.</h3>
<p class="my-4">Over the years we have served our customers
with the best shipping experince with the help
of technological tools ranging from iot, live tracking,etc.
</p>

<ul class="author d-flex">


<li><img class="img-fluid" src="images/author.jpg"
alt=""></li>
<li><span>Johnson Smith</span>Sales
Representative,Atlanta,USA.</li>
</ul>

</div>
</div>
</div>
</section>
<!-- //banner-bottom-w3ls -->
<!-- /services -->
<section class="banner-bottom-w3ls py-lg-5 py-md-5 py-3">
<div class="container">
<!---728x90--->

<div class="inner-sec-w3layouts py-lg-5 py-3">


<h3 class="tittle text-center mb-md-5 mb-4">We Offered
Services</h3>
<div class="row middle-grids">
<div class="col-lg-4 about-in middle-grid-info text-center">
<div class="card">
<div class="card-body">
<i class="fas fa-archive mb-2"></i>
<h5 class="card-title my-3">Storage</h5>
<!-- <p class="card-text">We provide storage
facilities for shippers which is safer and cheaper than others.
</p> -->
</div>
</div>
</div>
<div class="col-lg-4 about-in middle-grid-info text-center">
<div class="card">
<div class="card-body">
<i class="fas fa-signal mb-2"></i>
<h5 class="card-title my-3">Trucking Services</h5>
<p class="card-text">
</p>
</div>
</div>
</div>
<div class="col-lg-4 about-in middle-grid-info text-center">
<div class="card">
<div class="card-body">
<i class="fas fa-users mb-2"></i>
<h5 class="card-title my-3">Expert Staff</h5>
<!-- <p class="card-text">At Fedex, our customers
are our pride this is why hiring experts to do the job is key to us.
</p> -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- //services -->
<!--gallery -->
<section class="gallery py-md-5 py-3">
<div class="gallery-inner pb-md-5 pb-3">
<h3 class="tittle text-center mb-md-5 mb-4">Gallery</h3>
<ul class="portfolio-categ filter pb-5 mb-lg-3 text-center">
<li class="port-filter all active">
<a href="#">All</a>
</li>
<li class="cat-item-1">
<a href="#" title="Category 1">category 1</a>
</li>
<li class="cat-item-2">
<a href="#" title="Category 2">category 2</a>
</li>
<li class="cat-item-3">
<a href="#" title="Category 3">category 3</a>
</li>

</ul>
<ul class="portfolio-area clearfix">
<li class="portfolio-item2" data-id="id-0" data-type="cat-item-3">
<span class="image-block img-hover">
<a class="image-zoom" href="images/g1.jpg" data-
gal="prettyPhoto[gallery]">
<img src="images/g1.jpg" class="img-fluid " alt="">
</a>
</span>
</li>
<li class="portfolio-item2" data-id="id-1" data-type="cat-item-2">
<span class="image-block">
<a class="image-zoom" href="images/g2.jpg" data-
gal="prettyPhoto[gallery]">
<img src="images/g2.jpg" class="img-fluid " alt="">
</a>
</span>
</li>
<li class="portfolio-item2" data-id="id-2" data-type="cat-item-1">
<span class="image-block">
<a class="image-zoom" href="images/g3.jpg" data-
gal="prettyPhoto[gallery]">
<img src="images/g3.jpg" class="img-fluid " alt="">
</a>
</span>
</li>
<li class="portfolio-item2" data-id="id-4" data-type="cat-item-3">
<span class="image-block">
<a class="image-zoom" href="images/g4.jpg" data-
gal="prettyPhoto[gallery]">
<img src="images/g4.jpg" class="img-fluid " alt="">
</a>
</span>
</li>
<li class="portfolio-item2" data-id="id-5" data-type="cat-item-2">
<span class="image-block">
<a class="image-zoom" href="images/g5.jpg" data-
gal="prettyPhoto[gallery]">
<img src="images/g5.jpg" class="img-fluid " alt="">
</a>
</span>
</li>
<li class="portfolio-item2" data-id="id-7" data-type="cat-item-1">
<span class="image-block">
<a class="image-zoom" href="images/g6.jpg" data-
gal="prettyPhoto[gallery]">
<img src="images/g6.jpg" class="img-fluid " alt="">
</a>
</span>
</li>
<li class="portfolio-item2" data-id="id-7" data-type="cat-item-1">
<span class="image-block">
<a class="image-zoom" href="images/g7.jpg" data-
gal="prettyPhoto[gallery]">
<img src="images/g7.jpg" class="img-fluid " alt="">
</a>
</span>
</li>
<li class="portfolio-item2" data-id="id-7" data-type="cat-item-1">
<span class="image-block">
<a class="image-zoom" href="images/g8.jpg" data-
gal="prettyPhoto[gallery]">
<img src="images/g8.jpg" class="img-fluid " alt="">
</a>
</span>
</li>
</ul>
<!--end portfolio-area -->
</div>
<!-- //gallery container -->
</section>
<!-- //gallery -->
<!-- /bottom-last -->
<section class="bottom-last py-5 text-center">
<div class="bottom-bg">
<h3>Imagination… What we can easily see is only a small percentage of
what is possible.</h3>

</div>
</section>
<!-- //bottom-last -->
<!--/Blog-Posts-->
<section class="banner-bottom-w3ls bg-light py-md-5 py-4">
<div class="container">
<div class="inner-sec-w3layouts py-md-5 py-4">
<h3 class="tittle text-center mb-md-5 mb-4">
Blog Posts</h3>
<!--/services-grids-->
<div class="row blog-sec">
<div class="col-lg-4 about-in blog-grid-info text-left">
<div class="card img">
<div class="card-body img">
<img
src="https://about.van.fedex.com/wp-content/uploads/2019/06/FedEx-Dollar-General-
600x400.jpg" alt="" class="img-fluid">
<div class="blog-des">
<span class="entry-date">June 17, 2019</span>
<h5 class="card-title text-uppercase mt-2"><a
href="blog/dollar-general.html">

FedEx Agreement with Dollar General


Increases Convenient Access to FedEx Drop-off and Pickup Services
</a></h5>
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 about-in blog-grid-info text-left">
<div class="card img">
<div class="card-body img">
<img
src="https://about.van.fedex.com/wp-content/uploads/2019/05/Ground-Seven-Day-
600x400.jpg" alt="" class="img-fluid">
<div class="blog-des">
<span class="entry-date">June 20, 2018</span>
<h5 class="card-title text-uppercase mt-2"><a
href="blog/ground-residential-delivery.html">Delivering Every Day: Announcing FedEx
Ground Seven-Day Residential </a></h5>

</div>
</div>
</div>
</div>
<div class="col-lg-4 about-in blog-grid-info text-left">
<div class="card img">
<div class="card-body img">
<img
src="https://about.van.fedex.com/wp-content/uploads/2018/02/Logo-Corporate-
600x400.jpg" alt="" class="img-fluid">
<div class="blog-des">
<span class="entry-date">May 30, 2019</span>
<h5 class="card-title text-uppercase mt-2"><a
href="blog/fedex-ground-announces-seven-day-residential-delivery-year-round.html">
FedEx Ground Announces Seven-Day
Residential Delivery Year-round
</a></h5>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--//Blog-Posts-->
<!--/testimonials-->
<section class="clients py-md-5 py-3">
<div class="container">
<div class="inner-sec-w3layouts py-md-5 py-3">
<h3 class="tittle text-center mb-md-5 mb-4">Some word from our
Clients</h3>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="feedback-info text-left">
<div class="feedback-top">

<p>It's been an amazing experience shipping with


Fedex for i and my company, over 7 years of trusted and quality services.</p>
</div>
<div class="feedback-grids">
<div class="feedback-img">
<img src="images/t1.jpg" class="img-fluid
rounded-circle" alt="" />
</div>
<div class="feedback-img-info">
<h5>Morgan Dorth</h5>
<p>United States
</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="item">
<div class="feedback-info text-left">

<div class="feedback-top">

<p>I would always recommend using their services,my


goods are handled with great care and arrive as stated.</p>
</div>
<div class="feedback-grids">
<div class="feedback-img">
<img src="images/t3.jpg" class="img-fluid
rounded-circle" alt="" />
</div>
<div class="feedback-img-info">
<h5>Steven Wilson</h5>
<p>United States
</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="item">
<div class="feedback-info text-left">
<div class="feedback-top">
<p>I love the customer serivice and ease of
shipping my products around the world</p>
</div>
<div class="feedback-grids">
<div class="feedback-img">
<img src="images/t2.jpg" class="img-fluid
rounded-circle" alt="" />
</div>
<div class="feedback-img-info">
<h5>Peter guptill</h5>
<p>Vestibulum </p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="item">
<div class="feedback-info text-left">

<div class="feedback-top">

<p>They saved me a lot of cash on transporting my


products to my customers arounf the world</p>
</div>
<div class="feedback-grids">
<div class="feedback-img">
<img src="images/t3.jpg" class="img-fluid
rounded-circle" alt="" />
</div>
<div class="feedback-img-info">
<h5>Steven Wilson</h5>
<p>United States
</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--//testimonials-->

<!--/newsletter-->
<footer class="newsletter_right_w3agile bg-dark pymd-5 py-4">
<div class="container">
<div class="inner-sec-w3layouts py-md-5 py-3">
<h3 class="tittle text-center mb-md-5 mb-4 text-white">Subscribe
our Newsletter</h3>
<div class="n-right-w3ls">
<form>
<div id="form_message" style="color: #fff">

</div>
<div class="form-group">
<input class="form-control" id="sub_first_name"
type="text" name="Name" placeholder="Name" required="">
</div>
<div class="form-group">
<input class="form-control" id="sub_first_email"
type="email" name="Email" placeholder=" Email Address" required="">
</div>

<div class="form-group">
<input class="form-control submit text-uppercase"
id="subscribe_btn" type="button" value="Subscribe">
</div>
<div class="clearfix"></div>
</form>
</div>
<div class="row footer-bottom-wthree mt-lg-5 mt-3">
<div class="col-lg-6 copyright">
<h2><a class="navbar-brand" href="index.html">
<img src="images/logo.png" height="50"></a>

</a></h2>
<p class="copy-right mt-3">© Fedex 1995-2019. All Rights
Reserved </p>
</div>
<div class="col-lg-6 social-icon footer">
<ul class="links-nav d-flex justify-content-end">
<li>
<a class="active" href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>

<li>
<a href="contact.html">Contact</a>
</li>
</ul>
<ul class="social-icons d-flex justify-content-end mt-3">
<li class="mr-1"><a href="#"><span class="fab fa-
facebook-f"></span></a></li>
<li class="mx-1"><a href="#"><span class="fab fa-
twitter"></span></a></li>
<li class="mx-1"><a href="#"><span class="fab fa-
google-plus-g"></span></a></li>
<li class="mx-1"><a href="#"><span class="fab fa-
linkedin-in"></span></a></li>
</ul>
</div>
<div class="clearfix"></div>

</div>

</div>
</div>
</footer>
<!--//newsletter-->
<!--model-forms-->
<!--/Login-->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="modal_details">

<div class="login px-4 mx-auto mw-100">


<h5 class="text-center mb-4">TRACK</h5>
<form>

<div id="error_messages" style="color:red">

</div>

<div class="form-group">
<label class="mb-2">TRACKING ID</label>
<input type="text" class="form-control"
id="tracking_id" aria-describedby="emailHelp" placeholder="9876789022" required="">
<small id="emailHelp" class="form-text text-
muted">Key in your tracking id to know the state of your parcel</small>
</div>
<button id="trck_btn" class="btn btn-success submit mb-
4">TRACK</button>

</form>

<div id="success_messages" style="color:#4eaf78">

</div>

<div id="details_messages" style="font-size:10px;">


</div>
</div>
</div>

</div>
</div>
</div>
<!--//Login-->
<!--//model-form-->
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/minimal-slider.js"></script>
<!-- carousel -->

<script src="js/owl.carousel.js"></script>

<script>
const btn2 = document.getElementById('subscribe_btn');
btn2.addEventListener('click',function(e){
// e.preventDefault()
if(sub_first_name.value == '' || sub_email.value == ''){
document.getElementById('form_message').innerHTML = 'Details are
incomplete!'

}
document.getElementById('form_message').innerHTML = 'Subscription
was successful!'
})
</script>
<script>
let btn = document.getElementById('trck_btn')
btn.addEventListener('click',iniTrack)

let messageContainer = document.getElementById('error_messages')


let successContainer = document.getElementById('success_messages')
let detailsContainer = document.getElementById('details_messages')

function iniTrack(e){
e.preventDefault()
messageContainer.innerHTML = ''
successContainer.innerHTML = ''
btn.innerHTML = 'Searching...'
btn.disabled = true

data = {
tracking_id:tracking_id.value
}

console.log(data)
if(data.tracking_id.length <= 0){
messageContainer.innerHTML = 'Tracking ID was left emptyy'
btn.innerHTML = 'TRACK'
btn.disabled = false
return false
}

const url = '/api/courier/track.php';


var myHeaders = new Headers()
myHeaders.append('Content-Type','Application/json')

const signupRequest = new Request(url,{


method:'POST',
cache:'default',
headers:myHeaders,
body:JSON.stringify(data),
mode:'cors'

})

$.ajax({
url,
method:'POST',
data
}).done(res =>
{
// console.log(res.message)

if(res.status === 'failed'){


btn.innerHTML = 'TRACK'
btn.disabled = false
messageContainer.innerHTML = res.message

}else if(res.status_code == 200){


btn.innerHTML = 'Waiting...'
successContainer.innerHTML = 'Please verify details below'
for (const key in res.data[0]) {
if (res.data[0].hasOwnProperty(key)) {
const element = res.data[0][key];

for (const k in element) {


if (element.hasOwnProperty(k)) {
const elem = element[k];
if(k == 'receiver_first_name'){
detailsContainer.innerHTML += `<div>Recievers First Name - $
{elem}</div>`
}
if(k == 'receiver_last_name'){
detailsContainer.innerHTML += `<div>Recievers Last Name - $
{elem}</div>`
}
if(k == 'shipper_last_name'){
detailsContainer.innerHTML += `<div>Senders Last Name -
${elem}</div>`
}
if(k == 'shipper_first_name'){
detailsContainer.innerHTML += `<div>Senders First Name -
${elem}</div>`
}
}
}

detailsContainer.innerHTML += `
<button id="trck_btn_veify" class="btn btn-success btn-
sm submit mb-4">Verify</button>
<button id="trck_btn_cancel" class="btn btn-danger btn-
sm submit mb-4">Reject</button>

`
}
}
}

console.log(res)
document.getElementById('trck_btn_veify').addEventListener('click',function(){
detailsContainer.innerHTML = ''
successContainer.innerHTML = 'Redirecting you to details page..'
btn.innerHTML = 'Confirmed!'
setTimeout(() => {
window.location.replace(`track.php?tracking_id=${tracking_id.value}`)

}, 2000);

})
document.getElementById('trck_btn_cancel').addEventListener('click',function(){
detailsContainer.innerHTML = ''
successContainer.innerHTML = ''
btn.innerHTML = 'TRACK'
btn.disabled = false
tracking_id.value = ''

})
}
).fail(err =>
{
console.log(err)
if(err.responseText == "Connection error: SQLSTATE[HY000] [2002] No connection
could be made because the target machine actively refused it."){
messageContainer.innerHTML = 'Whooops! Something went wrong,contact admin'
btn.innerHTML = 'TRACK'
btn.disabled = false
}else if(err.responseJSON.message == 'No tracking id found.'){
btn.innerHTML = 'TRACK'
btn.disabled = false
messageContainer.innerHTML = err.responseJSON.message
}
btn.innerHTML = 'TRACK'
btn.disabled = false

// submit_button.innerHTML= 'Try again.'


// if(err.responseText == ''){
// messageContainer.innerHTML = 'Are you registered yet?'

// }
})

</script>

<script>
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
900: {
items: 1,
nav: false
},
1000: {
items: 3,
nav: true,
loop: false,
margin: 20
}
}
})
})
</script>
<!-- //carousel -->
<script>
$(document).ready(function() {
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop(true, true).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).stop(true, true).slideUp("fast");
$(this).toggleClass('open');
}
);
});
</script>
<!-- //dropdown nav -->
<!--/ start-smoth-scrolling -->
<script src="js/move-top.js"></script>
<script src="js/easing.js"></script>
<script>
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 900);
});
});
</script>
<script>
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', //
fading element id
containerHoverID:
'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/

$().UItoTop({
easingType: 'easeOutQuart'
});

});
</script>
<!--// end-smoth-scrolling -->
<!-- /js -->
<script src="js/bootstrap.js"></script>
<!-- //js -->
<!-- jQuery-Photo-filter-lightbox-Gallery-plugin -->
<!--// end-smoth-scrolling -->
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.quicksand.js"></script>
<script src="js/pretty-script.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<!-- //jQuery-Photo-filter-lightbox-Gallery-plugin -->

</body>
</html>

You might also like