Server : Apache
System : Linux server1.cgrithy.com 3.10.0-1160.95.1.el7.x86_64 #1 SMP Mon Jul 24 13:59:37 UTC 2023 x86_64
User : nobody ( 99)
PHP Version : 8.1.23
Disable Function : NONE
Directory : /home/dnlcambodia/public_html/Documentation/
|
Server : Apache System : Linux server1.cgrithy.com 3.10.0-1160.95.1.el7.x86_64 #1 SMP Mon Jul 24 13:59:37 UTC 2023 x86_64 User : nobody ( 99) PHP Version : 8.1.23 Disable Function : NONE Directory : /home/dnlcambodia/public_html/Documentation/ |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fastrans Documentation</title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/scrollbar.css" rel="stylesheet">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<!--Page Wrapper-->
<div class="page-wrapper">
<!--Sidebar-->
<aside id="sidebar">
<!--Toggle Button-->
<div class="button-container clearfix"><div class="menu-toggle flaticon-menu10"></div></div>
<!--Menu Box-->
<div class="menu-box">
<!--Logo-->
<br>
<div class="logo text-right"><a href="#"><img src="images/logo.png" alt=""></a></div>
<!--Sticky Menu-->
<nav class="sticky-menu">
<ul>
<li class="current"><a href="#introduction">Introduction <span class="fa fa-arrow-right"></span></a></li>
<li><a href="#html-structure">HTML Structure <span class="fa fa-arrow-right"></span></a></li>
<li><a href="#slider">Slider Structure <span class="fa fa-arrow-right"></span></a></li>
<li><a href="#ch-tab">Service Items<span class="fa fa-arrow-right"></span></a></li>
<li><a href="#it-typer">Blog Slider<span class="fa fa-arrow-right"></span></a></li>
<li><a href="#it-cyber">Circle Progress<span class="fa fa-arrow-right"></span></a></li>
<li><a href="#it-counter">Counter Up<span class="fa fa-arrow-right"></span></a></li>
<li><a href="#it-port">Testimonial Slider<span class="fa fa-arrow-right"></span></a></li>
<li><a href="#it-video">Video PopUp<span class="fa fa-arrow-right"></span></a></li>
<li><a href="#it-abouttab">DIST (Miles):<span class="fa fa-arrow-right"></span></a></li>
<li><a href="#skill-progress">Gallery Popup<span class="fa fa-arrow-right"></span></a></li>
<li><a href="#faq-accordion">Faq Accordion<span class="fa fa-arrow-right"></span></a></li>
<li><a href="#portfolio-filter">Portfolio Filter<span class="fa fa-arrow-right"></span></a></li>
<li><a href="#it-tst-slide">Coming Soon<span class="fa fa-arrow-right"></span></a></li>
<li><a href="#css-structure">CSS Files and Structure <span class="fa fa-arrow-right"></span></a></li>
<li><a href="#javascript">Javascript <span class="fa fa-arrow-right"></span></a></li>
<li><a href="#sources-credits">Sources and Credits <span class="fa fa-arrow-right"></span></a></li>
<li><a href="#support">Support <span class="fa fa-arrow-right"></span></a></li>
</ul>
</nav>
</div>
<div class="copyright">Copyright © <a target="_blank" href="http://themeforest.net/user/themexriver/">themexriver</a> 2022</div>
</aside>
<div id="content-section">
<!--Introduction Section-->
<section class="section introduction" id="introduction">
<div class="sec-title">
<span class="icon fa fa-windows"></span>
<h2>Intoduction</h2>
</div>
<br>
<div class="sec-content">
<h2>Fastrans - Transport & Logistics HTML Template</h2>
<h3>An HTML Template</h3>
<div class="separator"></div>
<strong>Created :</strong> 1/4/2022<br>
<strong>By :</strong> themexriver<br>
<strong>Email :</strong> <a href="mailto:support@themexriver.com">support@themexriver.com</a> <br>
<br>
<p>Thank you for purchasing <strong>Fastrans</strong> - Transport & Logistics HTML Templat. If you have any questions that are beyond the scope of this help file, please feel free to email, via my user page contact form or put a ticket at Support Center .<br>Thankyou so much!</p>
</div>
</section>
<!--HTML Structure-->
<section class="section html-structure" id="html-structure">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>HTML Structure</h2>
</div>
<br>
<div class="sec-content">
<h3>
The html template uses Latest <strong>Bootstrap v4.0.0 </strong> with valid HTML5 tags. This theme is a responisve layout with 4 column Support column. All of the information in content area is nested within a class and comes with predefined classes.
</h3>
<pre class="prettyprint lang-html linenums">
<!-- Start of header
============================================= -->
<header>
...
</header>
<!-- End of header
============================================= -->
<!-- Start of section name
============================================= -->
<section id="section-name-id" class="section-name-class">
...
</section>
<!-- End section name
============================================= -->
<!-- Start of footer
============================================= -->
<footer>
...
</footer>
<!-- End of footer
============================================= -->
</pre>
</div>
</section>
<!-- slider structure -->
<section class="section slider" id="slider">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>Main Slider Structure</h2>
</div>
<br>
<div class="sec-content">
<h3>
To learn how to use <strong>Main Slider </strong>, here is the code or go to <a href="#" target="_blank" class="text-primary"><strong>revolution slider</strong></a> and check how does it work.
</h3>
<br>
<pre class="prettyprint lang-html linenums">
<rs-module-wrap id="rev_slider_29_1_wrapper" data-alias="slider-8" data-source="gallery" style="visibility:hidden;background:transparent;padding:0;margin:0px auto;margin-top:0;margin-bottom:0;">
<rs-module id="rev_slider_29_1" style="" data-version="6.5.8">
<rs-slides>
<rs-slide style="position: absolute;" data-key="rs-76" data-title="Slide" data-thumb="assets/slider1-50x100.png" data-in="o:0;" data-out="a:false;">
<img src="assets/slider1.png" alt="img" title="slider1" width="1920" height="989" class="rev-slidebg tp-rs-img" data-no-retina>
<!--
--><rs-layer
id="slider-29-slide-76-layer-0"
data-type="text"
data-color="#fa3b0e"
data-rsp_ch="on"
data-xy="xo:0,10px,7px,15px;yo:270px,222px,168px,104px;"
data-text="w:normal;s:20,16,12,16;l:25,20,15,16;fw:500;"
data-frame_0="x:-100%;"
data-frame_0_mask="u:t;"
data-frame_1="sp:1500;"
data-frame_1_mask="u:t;"
data-frame_999="o:0;st:w;"
style="z-index:5;font-family:'Roboto';text-transform:uppercase;"
>We specialise in the transportation
</rs-layer><!--
--><rs-layer
id="slider-29-slide-76-layer-1"
data-type="text"
data-rsp_ch="on"
data-xy="xo:0,9px,6px,15px;yo:325px,268px,203px,128px;"
data-text="w:normal;s:60,49,37,30;l:65,53,40,30;fw:700;"
data-frame_0="o:1;"
data-frame_0_chars="d:5;x:105%;o:1;rY:45deg;rZ:90deg;"
data-frame_0_mask="u:t;"
data-frame_1="st:1000;sp:1200;"
data-frame_1_chars="e:power4.inOut;d:10;rZ:0deg;"
data-frame_1_mask="u:t;"
data-frame_999="o:0;st:w;"
style="z-index:6;font-family:'Poppins'; padding-bottom: 10px;"
>Focused on aviation<br />
and energy.
</rs-layer><!--
--><rs-layer
id="slider-29-slide-76-layer-2"
data-type="text"
data-rsp_ch="on"
data-xy="xo:0,11px,8px,15px;yo:485px,400px,303px,198px;"
data-text="w:normal;s:20,16,12,16;l:25,20,15,20;"
data-frame_0="x:-175%;o:1;"
data-frame_0_mask="u:t;x:100%;"
data-frame_1="e:power3.out;st:1200;sp:1500;"
data-frame_1_mask="u:t;"
data-frame_999="o:0;st:w;"
style="z-index:7;font-family:'Roboto';"
>We own two core assets, London Southend Airport and Stobart<br />
Energy. Transformational and maturing business.
</rs-layer><!--
--><a
id="slider-29-slide-76-layer-3"
class="rs-layer rev-btn"
href="service.html" target="_blank" rel="noopener"
data-type="button"
data-rsp_ch="on"
data-xy="xo:0,11px,8px,15px;yo:580px,478px,363px,250px;"
data-text="w:normal;s:15,12,9,14;l:50,41,31,40;fw:700;a:center;"
data-dim="w:200px,165px,125px,150px;h:50px,41px,31px,40px;minh:0px,none,none,none;"
data-padding="r:25,21,16,10;l:25,21,16,10;"
data-frame_0="x:100%;"
data-frame_0_mask="u:t;"
data-frame_1="st:1500;sp:1500;"
data-frame_1_mask="u:t;"
data-frame_999="o:0;st:w;"
data-frame_hover="bgc:#ff3a2d;gs:sliding;bor:0px,0px,0px,0px;bri:120%;"
style="z-index:8;background-color:#007aff;font-family:'Poppins';text-transform:uppercase;cursor:pointer;"
><i class="fas fa-cog"></i> View services
</a><!--
--><rs-layer
id="slider-29-slide-76-layer-5"
data-type="image"
data-rsp_ch="on"
data-xy="x:r;xo:-181px,-149px,-113px,-191px;y:b;yo:90px,74px,56px,-15px;"
data-text="w:normal;s:20,16,12,7;l:0,20,15,9;"
data-dim="w:1034px,853px,648px,400px;h:599px,494px,375px,232px;"
data-basealign="slide"
data-frame_0="x:50,41,31,19;"
data-frame_1="st:1700;sp:1500;"
data-frame_999="o:0;st:w;"
style="z-index:9;"
><img src="assets/s-truck-1.png" alt="Img" class="tp-rs-img" width="1034" height="599" data-no-retina>
</rs-layer><!--
--> </rs-slide>
<rs-slide style="position: absolute;" data-key="rs-77" data-title="Slide" data-thumb="assets/slider1-50x100.png" data-in="o:0;" data-out="a:false;">
<img src="assets/slider1.png" alt="img" title="slider1" width="1920" height="989" class="rev-slidebg tp-rs-img" data-no-retina>
<!--
--><rs-layer
id="slider-29-slide-77-layer-0"
data-type="text"
data-color="#fa3b0e"
data-rsp_ch="on"
data-xy="xo:0,10px,7px,15px;yo:270px,222px,168px,104px;"
data-text="w:normal;s:20,16,12,16;l:25,20,15,16;fw:500;"
data-frame_0="x:-100%;"
data-frame_0_mask="u:t;"
data-frame_1="sp:1500;"
data-frame_1_mask="u:t;"
data-frame_999="o:0;st:w;"
style="z-index:5;font-family:'Roboto';text-transform:uppercase;"
>We specialise in the transportation
</rs-layer><!--
--><rs-layer
id="slider-29-slide-77-layer-1"
data-type="text"
data-rsp_ch="on"
data-xy="xo:0,9px,6px,15px;yo:325px,268px,203px,128px;"
data-text="w:normal;s:60,49,37,30;l:65,53,40,30;fw:700;"
data-frame_0="o:1;"
data-frame_0_chars="d:5;x:105%;o:1;rY:45deg;rZ:90deg;"
data-frame_0_mask="u:t;"
data-frame_1="st:1000;sp:1200;"
data-frame_1_chars="e:power4.inOut;d:10;rZ:0deg;"
data-frame_1_mask="u:t;"
data-frame_999="o:0;st:w;"
style="z-index:6;font-family:'Poppins'; padding-bottom: 10px;"
>Focused on aviation<br />
and energy.
</rs-layer><!--
--><rs-layer
id="slider-29-slide-77-layer-2"
data-type="text"
data-rsp_ch="on"
data-xy="xo:0,11px,8px,15px;yo:485px,400px,303px,198px;"
data-text="w:normal;s:20,16,12,16;l:25,20,15,20;"
data-frame_0="x:-175%;o:1;"
data-frame_0_mask="u:t;x:100%;"
data-frame_1="e:power3.out;st:1200;sp:1500;"
data-frame_1_mask="u:t;"
data-frame_999="o:0;st:w;"
style="z-index:7;font-family:'Roboto';"
>We own two core assets, London Southend Airport and Stobart<br />
Energy. Transformational and maturing business.
</rs-layer><!--
--><a
id="slider-29-slide-77-layer-3"
class="rs-layer rev-btn"
href="service.html" target="_blank" rel="noopener"
data-type="button"
data-rsp_ch="on"
data-xy="xo:0,11px,8px,15px;yo:580px,478px,363px,250px;"
data-text="w:normal;s:15,12,9,14;l:50,41,31,40;fw:700;a:center;"
data-dim="w:200px,165px,125px,150px;h:50px,41px,31px,40px;minh:0px,none,none,none;"
data-padding="r:25,21,16,10;l:25,21,16,10;"
data-frame_0="x:100%;"
data-frame_0_mask="u:t;"
data-frame_1="st:1500;sp:1500;"
data-frame_1_mask="u:t;"
data-frame_999="o:0;st:w;"
data-frame_hover="bgc:#ff3a2d;gs:sliding;bor:0px,0px,0px,0px;bri:120%;"
style="z-index:8;background-color:#007aff;font-family:'Poppins';text-transform:uppercase;cursor:pointer;"
><i class="fas fa-cog"></i> View services
</a><!--
--><rs-layer
id="slider-29-slide-77-layer-5"
data-type="image"
data-rsp_ch="on"
data-xy="x:r;xo:-181px,-149px,-113px,-191px;y:b;yo:90px,74px,56px,-15px;"
data-text="w:normal;s:20,16,12,7;l:0,20,15,9;"
data-dim="w:1034px,853px,648px,400px;h:599px,494px,375px,232px;"
data-basealign="slide"
data-frame_0="x:50,41,31,19;"
data-frame_1="st:1700;sp:1500;"
data-frame_999="o:0;st:w;"
style="z-index:9;"
><img src="assets/s-truck-1.png" alt="Img" class="tp-rs-img" width="1034" height="599" data-no-retina>
</rs-layer><!--
--> </rs-slide>
<rs-slide style="position: absolute;" data-key="rs-78" data-title="Slide" data-thumb="assets/slider1-50x100.png" data-in="o:0;" data-out="a:false;">
<img src="assets/slider1.png" alt="img" title="slider1" width="1920" height="989" class="rev-slidebg tp-rs-img" data-no-retina>
<!--
--><rs-layer
id="slider-29-slide-78-layer-0"
data-type="text"
data-color="#fa3b0e"
data-rsp_ch="on"
data-xy="xo:0,10px,7px,15px;yo:270px,222px,168px,104px;"
data-text="w:normal;s:20,16,12,16;l:25,20,15,16;fw:500;"
data-frame_0="x:-100%;"
data-frame_0_mask="u:t;"
data-frame_1="sp:1500;"
data-frame_1_mask="u:t;"
data-frame_999="o:0;st:w;"
style="z-index:5;font-family:'Roboto';text-transform:uppercase;"
>We specialise in the transportation
</rs-layer><!--
--><rs-layer
id="slider-29-slide-78-layer-1"
data-type="text"
data-rsp_ch="on"
data-xy="xo:0,9px,6px,15px;yo:325px,268px,203px,128px;"
data-text="w:normal;s:60,49,37,30;l:65,53,40,30;fw:700;"
data-frame_0="o:1;"
data-frame_0_chars="d:5;x:105%;o:1;rY:45deg;rZ:90deg;"
data-frame_0_mask="u:t;"
data-frame_1="st:1000;sp:1200;"
data-frame_1_chars="e:power4.inOut;d:10;rZ:0deg;"
data-frame_1_mask="u:t;"
data-frame_999="o:0;st:w;"
style="z-index:6;font-family:'Poppins'; padding-bottom: 10px;"
>Focused on aviation<br />
and energy.
</rs-layer><!--
--><rs-layer
id="slider-29-slide-78-layer-2"
data-type="text"
data-rsp_ch="on"
data-xy="xo:0,11px,8px,15px;yo:485px,400px,303px,198px;"
data-text="w:normal;s:20,16,12,16;l:25,20,15,20;"
data-frame_0="x:-175%;o:1;"
data-frame_0_mask="u:t;x:100%;"
data-frame_1="e:power3.out;st:1200;sp:1500;"
data-frame_1_mask="u:t;"
data-frame_999="o:0;st:w;"
style="z-index:7;font-family:'Roboto';"
>We own two core assets, London Southend Airport and Stobart<br />
Energy. Transformational and maturing business.
</rs-layer><!--
--><a
id="slider-29-slide-78-layer-3"
class="rs-layer rev-btn"
href="service.html" target="_blank" rel="noopener"
data-type="button"
data-rsp_ch="on"
data-xy="xo:0,11px,8px,15px;yo:580px,478px,363px,250px;"
data-text="w:normal;s:15,12,9,14;l:50,41,31,40;fw:700;a:center;"
data-dim="w:200px,165px,125px,150px;h:50px,41px,31px,40px;minh:0px,none,none,none;"
data-padding="r:25,21,16,10;l:25,21,16,10;"
data-frame_0="x:100%;"
data-frame_0_mask="u:t;"
data-frame_1="st:1500;sp:1500;"
data-frame_1_mask="u:t;"
data-frame_999="o:0;st:w;"
data-frame_hover="bgc:#ff3a2d;gs:sliding;bor:0px,0px,0px,0px;bri:120%;"
style="z-index:8;background-color:#007aff;font-family:'Poppins';text-transform:uppercase;cursor:pointer;"
><i class="fas fa-cog"></i> View services
</a><!--
--><rs-layer
id="slider-29-slide-78-layer-5"
data-type="image"
data-rsp_ch="on"
data-xy="x:r;xo:-181px,-149px,-113px,-191px;y:b;yo:90px,74px,56px,-15px;"
data-text="w:normal;s:20,16,12,7;l:0,20,15,9;"
data-dim="w:1034px,853px,648px,400px;h:599px,494px,375px,232px;"
data-basealign="slide"
data-frame_0="x:50,41,31,19;"
data-frame_1="st:1700;sp:1500;"
data-frame_999="o:0;st:w;"
style="z-index:9;"
><img src="assets/s-truck-1.png" alt="Img" class="tp-rs-img" width="1034" height="599" data-no-retina>
</rs-layer><!--
--> </rs-slide>
</rs-slides>
</rs-module>
</rs-module-wrap>
</pre>
</div>
</section>
<!-- Challenge Tab structure -->
<section class="section ch-tab" id="ch-tab">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>Service Items</h2>
</div>
<br>
<div class="sec-content">
<h3>
</h3>
<br>
<pre class="prettyprint lang-html linenums">
<div class="ft-service-innerbox-3 position-relative">
<div class="ft-service-img position-relative">
<img src="assets/img/service/ser4.jpg" alt="">
</div>
<div class="ft-service-text-icon position-relative">
<div class="ft-service-icon d-flex align-items-center justify-content-center position-absolute">
<i class="flaticon-plane"></i>
</div>
<div class="ft-service-text position-relative headline pera-content">
<h3><a href="service-single.html">Air Freight Service</a></h3>
<p>Once your business gets last-mile
delivery right, it becomes a hallmark of your service which creates a serious business opportunity.</p>
</div>
</div>
<div class="more-btn position-absolute">
<a class="d-flex align-items-center justify-content-center text-uppercase" href="service-single.html">Read more <i class="far fa-arrow-right"></i></a>
</div>
</div>
<div class="ft-service-innerbox-2 position-relative">
<div class="ft-service-img text-center">
<img src="assets/img/service/ser4.3.jpg" alt="">
</div>
<div class="ft-service-text position-relative headline">
<div class="ft-service-icon position-absolute d-flex align-items-center justify-content-center">
<i class="flaticon-free-shipping"></i>
</div>
<h3><a href="service-single.html" tabindex="0">Road Freight</a></h3>
<div class="ft-btn-2">
<a href="service-single.html" tabindex="0">
<i class="icon-first flaticon-right-arrow"></i>
<span>Read More</span>
</a>
</div>
</div>
<div class="ft-service-serial position-absolute">
1
</div>
</div>
</pre>
</div>
</section>
<!-- Typer structure -->
<section class="section it-typer" id="it-typer">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>Blog</h2>
</div>
<br>
<div class="sec-content">
<h3>
To learn how to use <strong>Portfolio </strong>, here is the code or go to and check how does it work.
</h3>
<br>
<pre class="prettyprint lang-html linenums">
<div class="blog-slider-3">
<div class="ft-item-innerbox">
<div class="ft-blog-innerbox-3 position-relative">
<div class="ft-blog-img">
<img src="assets/img/blog/blg3.3.jpg" alt="">
</div>
<div class="ft-blog-text headline pera-content position-relative">
<div class="ft-blog-meta d-flex justify-content-between">
<a href="#"><i class="fas fa-calendar-alt"></i> September 12, 2019</a>
<a href="#"><i class="fas fa-user"></i> Admin</a>
</div>
<h3><a href="blog-single.html">Organisational teams of
the are just like families.</a></h3>
<a class="more-btn text-uppercase d-flex justify-content-center align-items-center position-absolute" href="blog-single.html">Read More</a>
</div>
</div>
</div>
<div class="ft-item-innerbox">
<div class="ft-blog-innerbox-3 position-relative">
<div class="ft-blog-img">
<img src="assets/img/blog/blg3.4.jpg" alt="">
</div>
<div class="ft-blog-text headline pera-content position-relative">
<div class="ft-blog-meta d-flex justify-content-between">
<a href="#"><i class="fas fa-calendar-alt"></i> September 12, 2019</a>
<a href="#"><i class="fas fa-user"></i> Admin</a>
</div>
<h3><a href="blog-single.html">From Monday 14th June
we look a little different!</a></h3>
<a class="more-btn text-uppercase d-flex justify-content-center align-items-center position-absolute" href="blog-single.html">Read More</a>
</div>
</div>
</div>
<div class="ft-item-innerbox">
<div class="ft-blog-innerbox-3 position-relative">
<div class="ft-blog-img">
<img src="assets/img/blog/blg3.5.jpg" alt="">
</div>
<div class="ft-blog-text headline pera-content position-relative">
<div class="ft-blog-meta d-flex justify-content-between">
<a href="#"><i class="fas fa-calendar-alt"></i> September 12, 2019</a>
<a href="#"><i class="fas fa-user"></i> Admin</a>
</div>
<h3><a href="blog-single.html">The current UK Haulage
Market – How will this...</a></h3>
<a class="more-btn text-uppercase d-flex justify-content-center align-items-center position-absolute" href="blog-single.html">Read More</a>
</div>
</div>
</div>
<div class="ft-item-innerbox">
<div class="ft-blog-innerbox-3 position-relative">
<div class="ft-blog-img">
<img src="assets/img/blog/blg3.3.jpg" alt="">
</div>
<div class="ft-blog-text headline pera-content position-relative">
<div class="ft-blog-meta d-flex justify-content-between">
<a href="#"><i class="fas fa-calendar-alt"></i> September 12, 2019</a>
<a href="#"><i class="fas fa-user"></i> Admin</a>
</div>
<h3><a href="blog-single.html">Organisational teams of
the are just like families.</a></h3>
<a class="more-btn text-uppercase d-flex justify-content-center align-items-center position-absolute" href="blog-single.html">Read More</a>
</div>
</div>
</div>
<div class="ft-item-innerbox">
<div class="ft-blog-innerbox-3 position-relative">
<div class="ft-blog-img">
<img src="assets/img/blog/blg3.4.jpg" alt="">
</div>
<div class="ft-blog-text headline pera-content position-relative">
<div class="ft-blog-meta d-flex justify-content-between">
<a href="#"><i class="fas fa-calendar-alt"></i> September 12, 2019</a>
<a href="#"><i class="fas fa-user"></i> Admin</a>
</div>
<h3><a href="blog-single.html">From Monday 14th June
we look a little different!</a></h3>
<a class="more-btn text-uppercase d-flex justify-content-center align-items-center position-absolute" href="blog-single.html">Read More</a>
</div>
</div>
</div>
</div>
</pre>
</div>
</section>
<!-- Cyber Security Slider structure -->
<section class="section it-cyber" id="it-cyber">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>Cicle Progress</h2>
</div>
<br>
<div class="sec-content">
Cicle Progress
<h3>
</h3>
<br>
<pre class="prettyprint lang-html linenums">
<div class="counter-boxed text-center headline position-relative">
<div class="graph-outer">
<input type="text" class="dial" data-fgColor="#f22728" data-bgColor="#fff" data-width="80" data-height="80" data-linecap="round" value="95" >
<div class="inner-text count-box"><span class="count-text" data-stop="95" data-speed="3500"></span>%</div>
</div>
<h3>Warehousing</h3>
</div>
</pre>
</div>
</section>
<section class="section it-counter" id="it-counter">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>Counter Structure</h2>
</div>
<br>
<div class="sec-content">
<h3>
Counter Up
</h3>
<br>
<pre class="prettyprint lang-html linenums">
<div class="ft-funfact-inner-items text-center">
<div class="ft-funfact-inner-icon d-flex align-items-center justify-content-center position-relative">
<i class="flaticon-delivery-truck"></i>
</div>
<div class="ft-funfact-inner-text headline pera-content">
<h3><span class="counter">1656</span></h3>
<p>Completed Delivery</p>
</div>
</div>
</pre>
</div>
</section>
<section class="section it-port" id="it-port">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>Testimonial Slider</h2>
</div>
<br>
<div class="sec-content">
<h3>
</h3>
<br>
<pre class="prettyprint lang-html linenums">
<div class="ft-testimonial-slider-2">
<div class="choose_slider_items ul-li choose_slider">
<ul id="mySlider1">
<li class="current_item">
<div class="ft-testimonial-innerbox-item-2 text-center">
<div class="ft-testimonial-img">
<img src="assets/img/testimonial/test2.1.jpg" alt="">
</div>
<div class="ft-testimonial-text headline pera-content">
<div class="ft-testimonial-meta">
<h3>Gallen Maxwell</h3>
<span>UI/UX Designer</span>
</div>
<p>Lncididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
<div class="ft-testimonial-rate ul-li">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
</div>
</div>
</li>
<li class="current_item">
<div class="ft-testimonial-innerbox-item-2 text-center">
<div class="ft-testimonial-img">
<img src="assets/img/testimonial/test2.1.jpg" alt="">
</div>
<div class="ft-testimonial-text headline pera-content">
<div class="ft-testimonial-meta">
<h3>Gallen Maxwell</h3>
<span>UI/UX Designer</span>
</div>
<p>Lncididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
<div class="ft-testimonial-rate ul-li">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
</div>
</div>
</li>
<li class="current_item">
<div class="ft-testimonial-innerbox-item-2 text-center">
<div class="ft-testimonial-img">
<img src="assets/img/testimonial/test2.1.jpg" alt="">
</div>
<div class="ft-testimonial-text headline pera-content">
<div class="ft-testimonial-meta">
<h3>Gallen Maxwell</h3>
<span>UI/UX Designer</span>
</div>
<p>Lncididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
<div class="ft-testimonial-rate ul-li">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
</div>
</div>
</li>
<li class="current_item">
<div class="ft-testimonial-innerbox-item-2 text-center">
<div class="ft-testimonial-img">
<img src="assets/img/testimonial/test2.1.jpg" alt="">
</div>
<div class="ft-testimonial-text headline pera-content">
<div class="ft-testimonial-meta">
<h3>Gallen Maxwell</h3>
<span>UI/UX Designer</span>
</div>
<p>Lncididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
<div class="ft-testimonial-rate ul-li">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
</div>
</div>
</li>
<li class="current_item">
<div class="ft-testimonial-innerbox-item-2 text-center">
<div class="ft-testimonial-img">
<img src="assets/img/testimonial/test2.1.jpg" alt="">
</div>
<div class="ft-testimonial-text headline pera-content">
<div class="ft-testimonial-meta">
<h3>Gallen Maxwell</h3>
<span>UI/UX Designer</span>
</div>
<p>Lncididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
<div class="ft-testimonial-rate ul-li">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
</div>
</div>
</li>
<li class="current_item">
<div class="ft-testimonial-innerbox-item-2 text-center">
<div class="ft-testimonial-img">
<img src="assets/img/testimonial/test2.1.jpg" alt="">
</div>
<div class="ft-testimonial-text headline pera-content">
<div class="ft-testimonial-meta">
<h3>Gallen Maxwell</h3>
<span>UI/UX Designer</span>
</div>
<p>Lncididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
<div class="ft-testimonial-rate ul-li">
<ul>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<div><a id="btn_next1" href="#"><i class="far fa-arrow-right"></i></a></div>
<div><a id="btn_prev1" href="#"><i class="far fa-arrow-left"></i></a></div>
</div>
</div>
</pre>
</div>
</section>
<section class="section it-video" id="it-video">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>Video Popup</h2>
</div>
<br>
<div class="sec-content">
<h3>
Video Popup Settings
</h3>
<br>
<pre class="prettyprint lang-html linenums">
<a class="video_box" href="Put your youtube video link here">Play</a<
</pre>
</div>
</section>
<section class="section it-abouttab" id="it-abouttab">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>DIST (Miles):</h2>
</div>
<br>
<div class="sec-content">
<h3>
DIST (Miles): Settings
</h3>
<br>
<pre class="prettyprint lang-html linenums">
if ($("#slider-range").length) {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 3000,
values: [ 0, 1500 ],
slide: function( event, ui ) {
$( "#amount" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
});
</pre>
</div>
</section>
<section class="section skill-progress" id="skill-progress">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>Gallery Popup</h2>
</div>
<br>
<div class="sec-content">
<h3>
Gallery Popup Settings
</h3>
<br>
<pre class="prettyprint lang-html linenums">
<ul class="zoom-gallery">
<li><a href="assets/img/gallery/gl1.jpg" data-source="assets/img/gallery/gl1.jpg"><img src="assets/img/gallery/gl1.jpg" alt=""></a></li>
<li><a href="assets/img/gallery/gl2.jpg" data-source="assets/img/gallery/gl2.jpg"><img src="assets/img/gallery/gl2.jpg" alt=""></a></li>
<li><a href="assets/img/gallery/gl3.jpg" data-source="assets/img/gallery/gl3.jpg"><img src="assets/img/gallery/gl3.jpg" alt=""></a></li>
<li><a href="assets/img/gallery/gl4.jpg" data-source="assets/img/gallery/gl4.jpg"><img src="assets/img/gallery/gl4.jpg" alt=""></a></li>
<li><a href="assets/img/gallery/gl5.jpg" data-source="assets/img/gallery/gl4.jpg"><img src="assets/img/gallery/gl5.jpg" alt=""></a></li>
<li><a href="assets/img/gallery/gl6.jpg" data-source="assets/img/gallery/gl4.jpg"><img src="assets/img/gallery/gl6.jpg" alt=""></a></li>
</ul>
</pre>
</div>
</section>
<section class="section faq-accordion" id="faq-accordion">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>FAQ Accordion</h2>
</div>
<br>
<div class="sec-content">
<h3>
FAQ Accordion Settings
</h3>
<br>
<pre class="prettyprint lang-html linenums">
<div class="accordion" id="accordionExample">
<div class="accordion-item headline pera-content">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Can i specify a delivery date when ordering?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida Risus commodo viverra.
</div>
</div>
</div>
<div class="accordion-item headline pera-content">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
What payment methods are supported?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida Risus commodo viverra.
</div>
</div>
</div>
<div class="accordion-item headline pera-content">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
What is Federation of International Trade Association?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida Risus commodo viverra.
</div>
</div>
</div>
<div class="accordion-item headline pera-content">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
How can I Track My Shipments?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida Risus commodo viverra.
</div>
</div>
</div>
</div>
</pre>
</div>
</section>
<section class="section portfolio-filter" id="portfolio-filter">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>Portfolio Filter</h2>
</div>
<br>
<div class="sec-content">
<h3>
Portfolio Filter Settings
</h3>
<br>
<pre class="prettyprint lang-html linenums">
<ul id="filters" class="nav-gallery text-capitalize text-center">
<li class="filtr-button filtr-active" data-filter="all">All </li>
<li class="filtr-button" data-filter="1"> Here Is Your Title </li>
<li class="filtr-button" data-filter="2">Here Is Your Title Is Your Title </li>
<li class="filtr-button" data-filter="3">Here Is Your Title </li>
<li class="filtr-button" data-filter="4">Here Is Your Title </li>
<li class="filtr-button" data-filter="5">Here Is Your Title </li>
</ul>
<div class="portolio-page-item portfolio-content-2 filtr-container row">
<div class="col-lg-4 col-sm-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="ft-portfolio-slider-innerbox position-relative">
<div class="ft-portfolio-img">
<img src="Put Your Image Path Here" alt="">
</div>
<div class=""ft-portfolio-text text-center headline">
<span>Put Your Category Here</span>
<h3><a href="#">Put Your Title Here</a></h3>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="ft-portfolio-slider-innerbox position-relative">
<div class="ft-portfolio-img">
<img src="Put Your Image Path Here" alt="">
</div>
<div class=""ft-portfolio-text text-center headline">
<span>Put Your Category Here</span>
<h3><a href="#">Put Your Title Here</a></h3>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 filtr-item" data-category="1" data-sort="Busy streets">
<div class="ft-portfolio-slider-innerbox position-relative">
<div class="ft-portfolio-img">
<img src="Put Your Image Path Here" alt="">
</div>
<div class=""ft-portfolio-text text-center headline">
<span>Put Your Category Here</span>
<h3><a href="#">Put Your Title Here</a></h3>
</div>
</div>
</div>
</div>
</pre>
</div>
</section>
<section class="section it-tst-slide" id="it-tst-slide">
<div class="sec-title">
<span class="icon fa fa-th-large"></span>
<h2>Cooming Soon</h2>
</div>
<br>
<div class="sec-content">
<h3>
To learn how to use <strong>Cooming Soon </strong>, here is the code or go to Js fils (script.js)and check how does it work.
</h3>
<br>
<pre class="prettyprint lang-html linenums">
if ($('.coming-countdown').length > 0) {
var deadlineDate = new Date('Put Your Date Here').getTime();
};
</pre>
</div>
</section>
<!--CSS Structure-->
<section class="section css-structure" id="css-structure">
<div class="sec-title">
<span class="icon fa fa-at"></span>
<h2>CSS Files and Structure</h2>
</div>
<br>
<div class="sec-content">
<h3>Mainly two main CSS files are used in this theme. The first one <strong>bootstrap.css</strong>, second one is <strong>style.css</strong> which for this template and <strong>responsive</strong> style include in style.css file. </h3>
<p>If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.</p>
<h3>
CSS Files</h3>
<p>
Common stylesheets included in all pages:</p>
<pre class="prettyprint lang-html linenums">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/fontawesome-all.css">
<link rel="stylesheet" href="assets/css/flaticon.css">
<link rel="stylesheet" href="assets/css/jquery-ui.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/nice-select.css">
<link rel="stylesheet" href="assets/css/video.min.css">
<link rel="stylesheet" href="assets/css/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" href="assets/css/slick.css">
<link rel="stylesheet" href="assets/css/rs6.css">
<link rel="stylesheet" href="assets/css/slick-theme.css">
<link rel="stylesheet" href="assets/css/style.css">
</pre>
</div>
</section>
<!--Javascript-->
<section class="section javascript" id="javascript">
<div class="sec-title">
<span class="icon fa fa-code"></span>
<h2>Jquery and javascript</h2>
</div>
<br>
<div class="sec-content">
<h3>This theme imports three types of Javascript files.</h3>
<ul>
<li>jQuery</li>
<li>Custom scripts <strong>(script.js)</strong></li>
<li>Some plugins</li>
<br>
<li><strong>jQuery</strong> is a Javascript library that greatly reduces the amount of code that you must write.</li>
<li>Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.</li>
</ul>
<br>
<p>In addition to the custom scripts, I have implemented few "tried and true" plugins to create the effects. This plugin is packed, so you won't need to manually edit anything in the file. The only necessary thing to know is how to call the method. <strong>(All javascript plugins include in jquery-plugin-collection.js file)</strong></p>
<pre class="prettyprint lang-html linenums">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/appear.js"></script>
<script src="assets/js/slick.js"></script>
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/jquery.filterizr.js"></script>
<script src="assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.cssslider.min.js"></script>
<script src="assets/js/rbtools.min.js"></script>
<script src="assets/js/rs6.min.js"></script>
<script src="assets/js/script.js"></script>
</pre>
</div>
</section>
<!--Sources and Credits-->
<section class="section sources-credits" id="sources-credits">
<div class="sec-title">
<span class="icon fa fa-credit-card"></span>
<h2>Sources and Credits</h2>
</div>
<br>
<div class="sec-content">
<h3>Fonts Used int the template are google fonts, you can find theme on Google Fonts API</h3>
<p><strong> Fonts Used are :</strong></p>
<p>"Roboto"</p>
<p>"Poppins"</p>
<br>
<br>
<br>
<p><strong> Sliders Used Are :</strong></p>
<p>Slick Slider</p>
<p>Revolution Slider/p>
<br>
Every Code is properly commented for Editing Ease.
<br><br>
<p><strong> Icons Used are :</strong></p>
<br>
<p>Fontawsome Icons<br><a href="https://fortawesome.github.io/Font-Awesome/" target="_blank">https://fortawesome.github.io/Font-Awesome/</a></p>
</div>
</section>
<!--Support-->
<section class="section support" id="support">
<div class="sec-title">
<span class="icon fa fa-support"></span>
<h2>Support</h2>
</div>
<br>
<div class="sec-content">
<h3>Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at Support Center.</h3>
<p>Email Us at : <a href="mailto:support@themexriver.com">support@themexriver.com</a> </p>
</div>
</section>
</div>
</div>
<!--End pagewrapper-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/scrollbar.js"></script>
<script src="js/script.js"></script>
</body>
</html>