"site"
Bootstrap 4.1.1 Snippet by Rajatsethi

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"> <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/media.css"> <title>index</title> </head> <body> <header> <nav class="navbar navbar-expand-lg "> <div class="container "> <a class="navbar-brand" href="#"><img src="images/logo.png" class="img-fluid" alt="logo"></a> <button class="navbar-toggler" href="#offcanvasExample" role="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" > <span class="toggle-btn"> <i class="fa-solid fa-bars"></i></span> </button> <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasExample"><img src="images/logo.png" class="img-fluid" alt="logo"></h5> <button type="button" class="close-btn" data-bs-dismiss="offcanvas" aria-label="Close"><span class=""><i class="fa-solid fa-x"></i></span></button> </div> <div class="offcanvas-body"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link px-3 dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Services </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link px-3"href="#">Tracking</a> </li> <li class="nav-item"> <a class="nav-link px-3"href="#">Shipping Calculator</a> </li> <li class="nav-item dropdown"> <a class="nav-link px-3 dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="country-icon"><img src="images/global.png" class="img-fluid" alt="global"></span> Select country </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> </ul> </li> </ul> <div class="right-nav nav-item"> <div class="search-icon"> <a href="javascript:;" class="nav-link"><span><i class="fa-solid fa-magnifying-glass"></i></span></a> </div> <ul> <li class="nav-item"> <a class="nav-link "href="#">Login </a> </li> <li class="nav-item"> <a class="nav-link "href="#"> Sign up</a> </li> </ul> </div> </div> </div> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav m-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link px-3 dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Services </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link px-3"href="#">Tracking</a> </li> <li class="nav-item"> <a class="nav-link px-3"href="#">Shipping Calculator</a> </li> <li class="nav-item dropdown"> <a class="nav-link px-3 dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="country-icon"><img src="images/global.png" class="img-fluid" alt="global"></span> Select country </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> </ul> </li> </ul> <div class="right-nav"> <div class="search-icon nav-item"> <a href="javascript:;" class="nav-link"><span><i class="fa-solid fa-magnifying-glass"></i></span></a> </div> <ul> <li class="nav-item"> <a class="nav-link "href="#">Login </a> </li> <li class="nav-item"> <a class="nav-link"href="#"> Sign up</a> </li> </ul> </div> </nav> </header> <section class="main-banner py-100"> <div class="container"> <div class="inner-banner"> <div class="row"> <div class="col-lg-6"> <div class="banner-text" data-aos="fade-right"> <h1>Putting smiles on your faces</h1> <p>We provide customized e-commerce, shipping and logistics solutions from the US, UK, Canada and China to Africa for individuals, small and large businesses.</p> <a href="javascript:;" class="common-btn">Get Started<span><i class="fa-solid fa-arrow-right-long"></i></span></a> </div> </div> <div class="col-lg-6"> <div class="banner-image" data-aos="fade-down"> <figure> <img src="images/banner.png" class="img-fluid" alt="banner"> </figure> </div> </div> </div> </div> </div> </section> <section class="main-services"> <div class="container"> <div class="row"> <div class="col-12"> <div class="service-heading text-center"> <h2 data-aos="fade-right">Explore our various services</h2> <p data-aos="fade-left">We want to bring the world to your doorstep. From placing a request to communications, to payment: Aquantuo helps you transport freight faster, cheaper, safer, and easier, so you can stay focused on your business and family</p> </div> </div> </div> <div class="slide-tab"> <div class="slider-btn"> <ul class="tab-slider"> <li> <a class="tab-btn active" href="#Online-Purchases">Online Purchases</a> </li> <li> <a class="tab-btn" href="#Buy-For-Me">Buy For Me</a> </li> <li> <a class="tab-btn" href="#Door-To-Door">Door To Door</a> </li> <li> <a class="tab-btn" href="#Fulfilment">Fulfilment</a> </li> <li> <a class="tab-btn" href="#Local-Delivery">Local Delivery</a> </li> <li> <a class="tab-btn" href="#Online-Purchases">Online Purchases</a> </li> <li> <a class="tab-btn" href="#Buy-For-Me">Buy For Me</a> </li> </ul> </div> <div class=" main-tab-data"> <div class="m-t-d container" id="Online-Purchases"> <div class="inner-tab-data"> <div class="row"> <div class="col-lg-6"> <div class="t-data-left"> <h5>Online Purchases</h5> <p>Have you fund something you need online but the store wont’t ship to Africa?</p> <p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p> <ul> <li> <span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span> Get your Aquantuo address </li> <li> <span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span> Shop </li> <li> <span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span> Ship to us </li> <li> <span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span> Pay </li> <li> <span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span> Delivered to you </li> </ul> <div class="read-more-btn"> <a href="javascript:;" class="read-more">Read more<span><i class="fa-solid fa-arrow-right-long"></i></span></a> </div> </div> </div> <div class="col-lg-6"> <div class="tab-right-image"> <figure> <img src="images/tab-image.png" class="img-fluid" alt="tab-image"> </figure> </div> </div> </div> </div> </div> <div class="m-t-d container" style="display: none;" id="Buy-For-Me"> <div class="inner-tab-data"> <div class="row"> <div class="col-lg-6"> <div class="t-data-left"> <h5>Buy For Me</h5> <p>Have you fund something you need online but the store wont’t ship to Africa?</p> <p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p> <ul> <li> <span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span> Get your Aquantuo address </li> <li> <span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span> Shop </li> <li> <span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span> Ship to us </li> <li> <span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span> Pay </li> <li> <span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span> Delivered to you </li> </ul> <div class="read-more-btn"> <a href="javascript:;" class="read-more">Read more<span><i class="fa-solid fa-arrow-right-long"></i></span></a> </div> </div> </div> <div class="col-lg-6"> <div class="tab-right-image"> <figure> <img src="images/tab-image4.jpg" class="img-fluid" alt="tab-image"> </figure> </div> </div> </div> </div> </div> <div class="m-t-d container" style="display: none;" id="Door-To-Door"> <div class="inner-tab-data"> <div class="row"> <div class="col-lg-6"> <div class="t-data-left"> <h5>Door To Door</h5> <p>Have you fund something you need online but the store wont’t ship to Africa?</p> <p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p> <ul> <li> <span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span> Get your Aquantuo address </li> <li> <span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span> Shop </li> <li> <span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span> Ship to us </li> <li> <span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span> Pay </li> <li> <span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span> Delivered to you </li> </ul> <div class="read-more-btn"> <a href="javascript:;" class="read-more">Read more<span><i class="fa-solid fa-arrow-right-long"></i></span></a> </div> </div> </div> <div class="col-lg-6"> <div class="tab-right-image"> <figure> <img src="images/tab-image2.jpg" class="img-fluid" alt="tab-image"> </figure> </div> </div> </div> </div> </div> <div class="m-t-d container" style="display: none;" id="Fulfilment"> <div class="inner-tab-data"> <div class="row"> <div class="col-lg-6"> <div class="t-data-left"> <h5>Fulfilment</h5> <p>Have you fund something you need online but the store wont’t ship to Africa?</p> <p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p> <ul> <li> <span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span> Get your Aquantuo address </li> <li> <span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span> Shop </li> <li> <span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span> Ship to us </li> <li> <span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span> Pay </li> <li> <span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span> Delivered to you </li> </ul> <div class="read-more-btn"> <a href="javascript:;" class="read-more">Read more<span><i class="fa-solid fa-arrow-right-long"></i></span></a> </div> </div> </div> <div class="col-lg-6"> <div class="tab-right-image"> <figure> <img src="images/tab-image1.jpg" class="img-fluid" alt="tab-image"> </figure> </div> </div> </div> </div> </div> <div class="m-t-d container" style="display: none;" id="Local-Delivery"> <div class="inner-tab-data"> <div class="row"> <div class="col-lg-6"> <div class="t-data-left"> <h5>Local Delivery</h5> <p>Have you fund something you need online but the store wont’t ship to Africa?</p> <p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p> <ul> <li> <span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span> Get your Aquantuo address </li> <li> <span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span> Shop </li> <li> <span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span> Ship to us </li> <li> <span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span> Pay </li> <li> <span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span> Delivered to you </li> </ul> <div class="read-more-btn"> <a href="javascript:;" class="read-more">Read more<span><i class="fa-solid fa-arrow-right-long"></i></span></a> </div> </div> </div> <div class="col-lg-6"> <div class="tab-right-image"> <figure> <img src="images/tab-image3.jpg" class="img-fluid" alt="tab-image"> </figure> </div> </div> </div> </div> </div> <div class="m-t-d container" style="display: none;" id="Online-Purchases"> <div class="inner-tab-data"> <div class="row"> <div class="col-lg-6"> <div class="t-data-left"> <h5>Online Purchases</h5> <p>Have you fund something you need online but the store wont’t ship to Africa?</p> <p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p> <ul> <li> <span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span> Get your Aquantuo address </li> <li> <span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span> Shop </li> <li> <span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span> Ship to us </li> <li> <span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span> Pay </li> <li> <span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span> Delivered to you </li> </ul> </div> </div> <div class="col-lg-6"> <div class="tab-right-image"> <figure> <img src="images/tab-image.png" class="img-fluid" alt="tab-image"> </figure> </div> </div> </div> </div> </div> <div class="m-t-d container" style="display: none;" id="Buy-For-Me"> <div class="inner-tab-data"> <div class="row"> <div class="col-lg-6"> <div class="t-data-left"> <h5>Buy For Me</h5> <p>Have you fund something you need online but the store wont’t ship to Africa?</p> <p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p> <ul> <li> <span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span> Get your Aquantuo address </li> <li> <span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span> Shop </li> <li> <span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span> Ship to us </li> <li> <span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span> Pay </li> <li> <span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span> Delivered to you </li> </ul> <div class="read-more-btn"> <a href="javascript:;" class="read-more">Read more<span><i class="fa-solid fa-arrow-right-long"></i></span></a> </div> </div> </div> <div class="col-lg-6"> <div class="tab-right-image"> <figure> <img src="images/tab-image4.jpg" class="img-fluid" alt="tab-image"> </figure> </div> </div> </div> </div> </div> </div> </div> </div> </section> <section class="main-counter"> <div class="container"> <div class="inner-counter" > <div class="row"> <div class="col-12 col-md-6 col-lg-3"> <div class="project-count"> <div class="item" data-number="15" style="visibility: visible;"> <div class="puls-num Customers"> <span class="plus">+</span> <p id="number1" class="number">15</p> <span class="k">K</span> </div> <p class="count-text">Customers</p> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="project-count"> <div class="item" data-number="120" style="visibility: visible;"> <div class="puls-num Shippments"> <span class="plus">+</span> <p id="number2" class="number">120</p> <span class="k">K</span> </div> <p class="count-text">Shippments</p> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="project-count"> <div class="item" data-number="15" style="visibility: visible;"> <div class="puls-num Partners"> <span class="plus">+</span> <p id="number3" class="number">15</p> </div> <p class="count-text">Partners</p> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3"> <div class="project-count"> <div class="item" data-number="500" style="visibility: visible;"> <div class="puls-num Weight"> <span class="plus ">+</span> <p id="number4" class="number">500</p> <span class="k">K</span> </div> <p class="count-text">Weight of goods moved</p> </div> </div> </div> </div> </div> </div> </section> <section class="why-choose py-100"> <div class="container"> <div class="row"> <div class="col-12"> <div class="w-c-heading text-center" data-aos="fade-down"> <h2 >Why Choose Us?</h2> <p>No two companies are alike. So when you want to ship, choose the company synonymous with trust in the shipping and logistics space, Aquantuo! Here is why:</p> </div> </div> </div> <div class="choose-box"> <div class="row"> <div class="col-12 col-md-6 col-lg-4"> <div class="inner-box" data-aos="fade-right"> <figure> <img src="images/smileys.png" class="img-fluid" alt="smileys"> </figure> <h6>Great customer experience</h6> <p>We provide an exceptional customer experience</p> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="inner-box" data-aos="fade-down"> <figure> <img src="images/shield-security.png" class="img-fluid" alt="shield-security"> </figure> <h6>Speed and Safety</h6> <p>We are fast, reliable and safe</p> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="inner-box" data-aos="fade-left"> <figure> <img src="images/wallet-search.png" class="img-fluid" alt="wallet-search"> </figure> <h6>Cost effective</h6> <p>Our rates are low, competitive and transparent</p> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="inner-box" data-aos="fade-right"> <figure> <img src="images/3d-rotate.png" class="img-fluid" alt="3d-rotate"> </figure> <h6>Stress free</h6> <p>We handle customs clearance and all applicable taxes for you</p> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="inner-box" data-aos="fade-down"> <figure> <img src="images/scan.png" class="img-fluid" alt="scan"> </figure> <h6>Ease of tracking</h6> <p>We provide details on your packages to include reliable tracking</p> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="inner-box" data-aos="fade-left"> <figure> <img src="images/truck-icon.png" class="img-fluid" alt="truck-icon"> </figure> <h6>Destination Delivery</h6> <p>We deliver to your door – business and residential</p> </div> </div> </div> </div> </div> </div> </section> <section class="main-map pb-100"> <div class="container"> <div class="row"> <div class="col-12"> <div class="map-heading text-center" data-aos="fade-left"> <h2>Where we are available</h2> <p>Aquantuo has offices in the USA, UK, Canada, China, Ghana, Kenya, Uganda and Nigeria, but has a network of affiliates to serve your global needs.</p> </div> </div> </div> <div class="inner-map"> <div class="row"> <div class="col-12"> <div class="map-frame"> <iframe src="https://www.google.com/maps/d/embed?mid=1hjs3mIoZBblBP_CvxiP4w38STiY&hl=en_US&ehbc=2E312F"></iframe> </div> </div> </div> </div> </div> </section> <section class="main-ship pb-100"> <div class="container"> <div class="row"> <div class="col-12"> <div class="ship-heading text-center" data-aos="fade-down"> <h2>Ship To and From Anywhere</h2> <p>We want to bring the world to your doorstep. From placing a request to communications, to payment: Aquantuo helps you transport freight faster, cheaper, safer, and easier, so you can stay focused on your business and family</p> </div> </div> </div> <div class="inner-ship"> <div class="row"> <div class="col-12 col-md-6 col-lg-4"> <div class="ship-i-box" data-aos="fade-right"> <figure> <img src="images/Ship.png" class="img-fluid" alt="Ship"> </figure> <p>By Sea</p> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="ship-i-box" data-aos="fade-down"> <figure> <img src="images/Truck.png" class="img-fluid" alt="Truck"> </figure> <p>By Land</p> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="ship-i-box" data-aos="fade-left"> <figure> <img src="images/Plane.png" class="img-fluid" alt="Plane"> </figure> <p>By Air</p> </div> </div> </div> </div> </div> </section> <section class="main-mobile-app"> <div class="container"> <div class="row inner-mob"> <div class="col-lg-6"> <div class="mobile-content"> <h2>Get our mobile app</h2> <p>Start your request now by downloading our free app from the App Store of Google Play</p> <div class="mob-both-btn"> <a href="javascript;:" class="app-store"><img src="images/App-store.png" class="img-fluid" alt="App-store"></a> <a href="javascript;:" class="play-store"><img src="images/Play-store.png" class="img-fluid" alt="Play-store"></a> </div> </div> </div> <div class="col-lg-6"> <div class="mob-image"> <figure> <img src="images/iphone.png" class="img-fluid" alt="iphone"> </figure> </div> </div> </div> </div> </section> <footer> <div class="container"> <div class="inner-footer"> <div class="footer-column"> <div class="footer-logo"> <figure> <img src="images/logo.png" class="img-fluid" alt="footer-logo"> </figure> </div> </div> <div class="footer-column"> <div class="footer-heading"> <h6>About Us</h6> <ul> <li> <a href="javascript:">What is Aquantuo</a> </li> <li> <a href="javascript:">Why Choose Us</a> </li> <li> <a href="javascript:">Membership Program</a> </li> <li> <a href="javascript:">Become A Transporter</a> </li> <li> <a href="javascript:">Press</a> </li> <li> <a href="javascript:">Blog</a> </li> <li> <a href="javascript:">Reviews</a> </li> <li> <a href="javascript:">Careers</a> </li> </ul> </div> </div> <div class="footer-column"> <div class="footer-heading"> <h6>Services</h6> <ul> <li> <a href="javascript:">Online Purchase</a> </li> <li> <a href="javascript:">Buy For Me</a> </li> <li> <a href="javascript:">Door - To - Door</a> </li> <li> <a href="javascript:">Fulfilment</a> </li> <li> <a href="javascript:">Local Delivery</a> </li> </ul> </div> </div> <div class="footer-column"> <div class="footer-heading"> <h6>Help</h6> <ul> <li> <a href="javascript:">How it Works</a> </li> <li> <a href="javascript:">How to Guides</a> </li> <li> <a href="javascript:">FAQ</a> </li> <li> <a href="javascript:">Prohibited items</a> </li> <li> <a href="javascript:">Privacy Policy</a> </li> <li> <a href="javascript:">Terms and Conditions</a> </li> <li> <a href="javascript:">Insurance, Claim and Return Policy</a> </li> <li> <a href="javascript:">Shipping Tools</a> </li> <li> <a href="javascript:">Sitemap</a> </li> </ul> </div> </div> <div class="footer-column"> <div class="footer-heading"> <h6>Contacts</h6> <ul> <li> <a href="javascript:">Ghana</a> </li> <li> <a href="javascript:">Kenya</a> </li> <li> <a href="javascript:">Nigeria</a> </li> <li> <a href="javascript:">Rwanda</a> </li> <li> <a href="javascript:">Uganda</a> </li> <li> <a href="javascript:">USA/UK/Canada/China</a> </li> <li> <a href="javascript:">Zambia</a> </li> </ul> </div> </div> </div> </div> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init(); AOS.init({ offset: 20, delay: 200, duration: 1000, }); </script> <script> $.fn.jQuerySimpleCounter = function( options ) { var settings = $.extend({ start: 0, end: 100, easing: 'swing', duration: 400, complete: '' }, options ); var thisElement = $(this); $({count: settings.start}).animate({count: settings.end}, { duration: settings.duration, easing: settings.easing, step: function() { var mathCount = Math.ceil(this.count); thisElement.text(mathCount); }, complete: settings.complete }); }; $('#number1').jQuerySimpleCounter({end: 15,duration: 3000}); $('#number2').jQuerySimpleCounter({end: 120,duration: 3000}); $('#number3').jQuerySimpleCounter({end: 15,duration: 2000}); $('#number4').jQuerySimpleCounter({end: 500,duration: 2500}); $('.tab-slider').slick({ dots: false, infinite: false, speed: 300, slidesToShow: 5, slidesToScroll: 1, prevArrow:"<img class='a-left control-c prev slick-prev' src='images/arrow-left.png'>", nextArrow:"<img class='a-right control-c next slick-next' src='images/arrow-right.png'>", responsive: [ { breakpoint: 1199, settings: { slidesToShow: 4, slidesToScroll: 1, infinite: true, dots: false } }, { breakpoint: 991, settings: { slidesToShow: 3, slidesToScroll: 1 } }, { breakpoint: 767, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); var selector = '.tab-btn'; $(selector).on('click', function(event){ event.preventDefault(); $(selector).removeClass('active'); $(this).addClass('active'); $('.m-t-d').hide(); var idr=$(this).attr('href'); $(idr).show(); }); </script> </body> </html>
/*font-family: 'Roboto', sans-serif;*/ @font-face { font-family: 'Nexa Demo'; src: url('../fonts/NexaDemo-Light.woff2') format('woff2'), url('../fonts/NexaDemo-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Nexa Demo'; src: url('../fonts/NexaDemo-Bold.woff2') format('woff2'), url('../fonts/NexaDemo-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } html{ scroll-behavior: smooth; } *{ margin: 0; padding: 0; box-sizing: border-box; } body{ margin: 0; padding: 0; overflow-x: hidden; font-family: 'Roboto', sans-serif; } a, a:hover{ text-decoration: none; transition: all ease-in-out 0.3s; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -ms-transition: all ease-in-out 0.3s; } p, ul, li, figure{ margin: 0; list-style: none; padding: 0; } img{ max-width: 100%; } .py-100{ padding-top: 100px; padding-bottom: 100px; } .pb-100{ padding-bottom: 100px; } a, input, select, textarea,p { margin: 0; padding: 0; } h2{ color: #000; font-size: 42px; font-weight: bold; font-family: 'Nexa Demo'; margin-bottom: 22px; } /*---------------------------- header css start ----------------------*/ header a.navbar-brand img { max-width: 202px; } header { background: #066277; } header .navbar-nav .nav-item .nav-link, header .right-nav .nav-item .nav-link { color: #FFF; font-size: 16px; font-family: 'Nexa Demo'; font-weight: 300; font-style: normal; } header .offcanvas-header .offcanvas-title img { max-width: 180px; } ul.navbar-nav li.nav-item.dropdown a .country-icon { width: 20px; display: inline-block; height: auto; } .right-nav ul li.nav-item a.nav-link { padding-left: 15px; padding-right: 5px; } .right-nav ul li.nav-item { position: relative; } .right-nav ul li.nav-item:after { content: '/'; color: #fff; position: absolute; top: 50%; transform: translateY(-50%); font-size: 20px; left: 0; display: inline-block; } .right-nav ul li.nav-item:first-child::after { display: none; } .right-nav ul { display: flex; align-items: center; } .right-nav { display: flex; align-items: center; } .offcanvas-header .close-btn { border: 0; background: transparent; top: 15px; position: absolute; right: 15px; color: #ffffff; background: #00bdff; padding: 5px 10px; } .navbar-toggler { background-color: #fff !important; } .offcanvas { background-color: #000000; } .navbar-toggler:focus { box-shadow: none !important; } /*---------------------------- header css End ----------------------*/ /*---------------------------- banner css start ----------------------*/ .main-banner { background: #066277; } .main-banner .inner-banner { max-width: 1180px; margin: 0 auto; } .main-banner .inner-banner .banner-text { padding-top: 80px; } .main-banner .inner-banner .banner-text h1 { color: #FFF; font-size: 72px; font-weight: bold; font-family: 'Nexa Demo'; } .main-banner .inner-banner .banner-text p { color: #FFF; font-size: 20px; line-height: 31px; letter-spacing: 0.2px; margin-top: 20px; margin-bottom: 40px; padding-right: 91px; font-family: 'Roboto', sans-serif; } .common-btn { display: inline-block; border-radius: 100px; background: #40B9EA; padding: 16px 34px; color: #FFF; font-size: 16px; font-family: 'Roboto', sans-serif; } .main-banner .inner-banner .banner-text a span { margin-left: 8px; } /*---------------------------- banner css End ----------------------*/ /*---------------------------- services css start ----------------------*/ .main-services { padding-top: 50px; } .main-services .service-heading { margin-bottom: 80px; } .main-services .service-heading p { color: #2A2A2A; text-align: center; font-size: 20px; line-height: 26px; max-width: 934px; margin: 0 auto; } .main-services .slide-tab { max-width: 1152px; margin: 0 auto; } .main-services .slide-tab .tab-slider { margin-bottom: 50px; } .main-services .slide-tab .tab-slider { margin-bottom: 50px; display: flex; justify-content: center; align-items: center; } .main-services .slide-tab .tab-slider .tab-btn.active, .main-services .slide-tab .tab-slider .show>.tab-btn { border-radius: 100px; background: #02111B; color: #FFF; font-size: 17px; font-weight: bold; font-family: 'Nexa Demo'; padding: 15px 30px; display: flex; justify-content: center; } .main-services .slide-tab .tab-slider .tab-btn { padding: 15px 30px; color: #2A2A2A; font-size: 17px; font-weight: bold; font-family: 'Nexa Demo'; display: flex; justify-content: center; } .tab-right-image img { border-radius: 34px 0; } .slider-btn .slick-list.draggable { padding: 0 20px; } .slider-btn .slick-prev { left: -35px; } .slider-btn .slick-next { right: -35px; } .main-tab-data .inner-tab-data .t-data-left { padding-top: 50px; } .main-tab-data .inner-tab-data .t-data-left h5 { color: #000; font-size: 36px; font-weight: bold; font-family: 'Nexa Demo'; line-height: 44px; margin-bottom: 16px; } .main-tab-data .inner-tab-data .t-data-left p { color: #2A2A2A; font-size: 16px; margin-bottom: 25px; } .main-tab-data .inner-tab-data .t-data-left ul { margin-top: 10px; display: inline-block; } .main-tab-data .inner-tab-data .t-data-left ul li { margin-bottom: 50px; position: relative; } .main-tab-data .inner-tab-data .t-data-left ul li:last-child { margin-bottom: 0px; } .main-tab-data .inner-tab-data .t-data-left ul li span { margin-right: 24px; display: inline-block; } .main-tab-data .inner-tab-data .t-data-left ul li:after { content: ''; position: absolute; display: inline-block; border: 2px dashed #7f9499; width: 2px; height: 35px; left: 22px; bottom: -44px; } .main-tab-data .inner-tab-data .t-data-left ul li:last-child::after { display: none; } .main-tab-data .read-more-btn { margin-top: 40px; } .main-tab-data .read-more-btn .read-more { color: #40B9EA; font-size: 18px; font-weight: bold; font-family: 'Nexa Demo'; } .main-tab-data .read-more-btn .read-more span { margin-left: 8px; display: inline-block; } .main-services .slide-tab .slick-next, .main-services .slide-tab .slick-prev { width: 40px !important; height: 40px !important; } /*---------------------------- services css End ----------------------*/ /*---------------------------- counter css start ----------------------*/ .main-counter { padding-top: 100px; } .main-counter .inner-counter { max-width: 800px; margin: 0 auto; } .main-counter .inner-counter .project-count { text-align: center; } .main-counter .inner-counter .project-count .item .puls-num { display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: bold; font-family: 'Nexa Demo'; } .main-counter .inner-counter .project-count .item .Customers { color: #066277; } .main-counter .inner-counter .project-count .item .Shippments { color: #A568ED; } .main-counter .inner-counter .project-count .item .Partners { color: #0EAD69; } .main-counter .inner-counter .project-count .item .Weight { color: #326CE7; } .main-counter .inner-counter .project-count .item .count-text { color: #2A2A2A; font-size: 20px; padding: 0 20px; } /*---------------------------- counter css End ----------------------*/ /*---------------------------- why-choose css start ----------------------*/ .why-choose { padding-bottom: 60px; } .why-choose .w-c-heading p { color: #2A2A2A; text-align: center; font-size: 18px; line-height: 24px; max-width: 860px; margin: 0 auto; } .why-choose .w-c-heading { margin-bottom: 33px; } .why-choose .choose-box, .main-ship .inner-ship { max-width: 1140px; margin: 0 auto; } .why-choose .choose-box .inner-box { border-radius: 12px; background: #F7F7F7; padding: 24px 32px; } .why-choose .choose-box .inner-box figure { width: 68px; height: 68px; display: inline-flex; background: #E3E4E5; border-radius: 10px; align-items: center; justify-content: center; } .why-choose .choose-box .inner-box h6 { color: #02111B; font-size: 18px; font-weight: bold; /* font-family: 'Nexa Demo';*/ margin-top: 16px; margin-bottom: 12px; } .why-choose .choose-box .inner-box p { color: #2A2A2A; font-size: 16px; line-height: 24px; min-height: 48px; } /*---------------------------- why-choose css End ----------------------*/ /*---------------------------- map css start ----------------------*/ .main-map .map-heading p { color: #2A2A2A; text-align: center; font-size: 20px; line-height: 26px; max-width: 934px; margin: 0 auto; } .main-map .map-heading { padding-bottom: 123px; } .main-map .inner-map { max-width: 1147px; margin: 0 auto; } .main-map .inner-map .map-frame iframe { width: 100%; height: 509px; filter: grayscale(1); } /*---------------------------- map css End ----------------------*/ /*---------------------------- ship css start ----------------------*/ .main-ship .inner-ship{ margin-top: 42px; } .main-ship .inner-ship .ship-i-box { position: relative; } .main-ship .ship-heading p { color: #2A2A2A; text-align: center; font-size: 20px; line-height: 26px; max-width: 934px; margin: 0 auto; } .main-ship .inner-ship .ship-i-box p { position: absolute; top: 32px; left: 32px; display: inline-block; color: #FFF; font-size: 32px; font-weight: bold; font-family: 'Nexa Demo'; } /*---------------------------- ship css End ----------------------*/ /*---------------------------- mobile-app css start ----------------------*/ .main-mobile-app { padding-bottom: 136px; } .main-mobile-app .inner-mob { border-radius: 25px; background: linear-gradient(337deg, #40B9EA 1.98%, #40B9EA 43.74%, rgba(0, 80, 134, 0.97) 88.33%); padding-top: 68px; } .main-mobile-app .inner-mob .mob-image { text-align: center; } .main-mobile-app .inner-mob .mobile-content { padding-left: 170px; padding-top: 100px; } .main-mobile-app .inner-mob .mobile-content h2 { color: #FFF; font-size: 48px; font-weight: bold; font-family: 'Nexa Demo'; margin-bottom: 0; } .main-mobile-app .inner-mob .mobile-content p { color: #FFF; font-size: 18px; font-weight: 300; font-style: normal; margin-top: 24px; margin-bottom: 40px; } .main-mobile-app .inner-mob .mobile-content .mob-both-btn .app-store { margin-right: 27px; } /*---------------------------- mobile-app css End ----------------------*/ /*---------------------------- footer css start ----------------------*/ footer { background: #02111B; padding: 75px 0; } footer .inner-footer { display: flex; max-width: 1180px; margin: 0 auto; flex-wrap: wrap; } footer .inner-footer .footer-column { width: 20%; } footer .inner-footer .footer-column .footer-heading h6 { color: #FFF; font-size: 18px; font-weight: bold; font-family: 'Nexa Demo'; margin-bottom: 45px; padding-top: 20px; } footer .inner-footer .footer-column ul li { margin-bottom: 22px; padding-right: 65px; } footer .inner-footer .footer-column ul li:last-child { margin-bottom: 0px; } footer .inner-footer .footer-column ul li a { color: #FFF; font-size: 16px; } footer .inner-footer .footer-column ul li a:hover { color: #00bdff; } /*---------------------------- footer css End ----------------------*/ @media (min-width:1280px){ .container{ max-width: 1332px !important; } } @media (min-width:992px) and (max-width:1299px){ .why-choose .choose-box .inner-box h6 { font-size: 17px; } .why-choose .choose-box .inner-box p { font-size: 14px; } } @media (min-width:992px){ .why-choose .choose-box .inner-box:nth-child(n+1), .why-choose .choose-box .inner-box:nth-child(n+2), .why-choose .choose-box .inner-box:nth-child(n+3) { margin-bottom: 40px; } } @media (max-width:1399px){ .main-mobile-app .inner-mob .mobile-content { padding-left: 90px; padding-top: 100px; } } @media (max-width:1199px){ header .navbar-nav .nav-item .nav-link, header .right-nav .nav-item .nav-link { padding-right: 10px !important; padding-left: 10px !important; } .main-banner .inner-banner .banner-text h1 { font-size: 60px; } .main-banner .inner-banner .banner-text p { padding-right: 0px; } .main-banner .inner-banner .banner-text { padding-top: 0; } footer .inner-footer .footer-column { width: 25%; } .main-mobile-app .inner-mob .mobile-content { padding-left: 12px; padding-top: 100px; } .main-map .map-heading { padding-bottom: 50px; } .main-services .slide-tab .tab-slider .tab-btn { padding: 10px 10px; font-size: 16px; } .main-services .slide-tab .tab-slider .tab-btn.active, .main-services .slide-tab .tab-slider .show>.tab-btn { padding: 10px 10px; font-size: 16px; } .main-tab-data .inner-tab-data .t-data-left ul li:after { height: 20px; bottom: -30px; } .main-tab-data .inner-tab-data .t-data-left ul li { margin-bottom: 35px; position: relative; } } @media (max-width:1099px){ .main-services .slide-tab .tab-slider { margin-bottom: 50px !important; max-width: 850px; margin: 0 auto; } } @media (max-width:991px){ .py-100 { padding-top: 50px; padding-bottom: 50px; } .pb-100{ padding-bottom: 50px; } .main-banner .inner-banner .banner-image { padding-top: 20px; } .why-choose .choose-box .inner-box { margin-bottom: 20px; } .main-ship .inner-ship .ship-i-box { position: relative; margin-bottom: 20px; } footer .inner-footer .footer-column { width: 33.33%; } .main-mobile-app { padding-bottom: 50px; } .main-mobile-app .inner-mob .mobile-content { margin-bottom: 20px; padding-top: 0; } .why-choose { padding-bottom: 40px; } .main-map .inner-map .map-frame iframe { height: 400px; } .main-tab-data .inner-tab-data .t-data-left { padding-top: 20px; margin-bottom: 20px; } .main-tab-data .read-more-btn { margin-top: 20px; } } @media (max-width:767px){ .why-choose .choose-box .inner-box p { min-height: auto; } h2 { font-size: 35px; margin-bottom: 15px; } .main-ship .ship-heading p { font-size: 16px; line-height: 22px; max-width: 100%; } .why-choose .w-c-heading p { font-size: 16px; line-height: 22px; max-width: 100%; } .main-ship .inner-ship .ship-i-box img { width: 100%; } .main-ship .inner-ship .ship-i-box p { top: 50%; left: 50%; transform: translate(-50%, -50%); } footer .inner-footer .footer-column { width: 50%; } footer .inner-footer .footer-column ul li { margin-bottom: 10px; padding-right: 0; } footer .inner-footer .footer-column .footer-heading h6 { margin-bottom: 20px; padding-top: 20px; } .main-tab-data .inner-tab-data .t-data-left { padding-top: 20px; } .main-services .service-heading { margin-bottom: 50px; } .main-services .service-heading p { font-size: 16px; line-height: 24px; max-width: 100%; } .main-counter { padding-top: 50px; } .main-counter .inner-counter { max-width: 100%; margin: 0 auto; } .main-map .map-heading p { font-size: 16px; line-height: 26px; max-width: 100%; } .slider-btn .slick-next, .slider-btn .slick-prev { top: 180%; } .slider-btn .slick-prev { left: 3%; } .slider-btn .slick-next { right: 3%; } } @media (max-width:575px){ .py-100 { padding-top: 30px; padding-bottom: 30px; } .pb-100{ padding-bottom: 30px; } .main-mobile-app .inner-mob .mobile-content h2 { color: #FFF; font-size: 40px; } .why-choose { padding-bottom: 10px; } .main-tab-data .inner-tab-data .t-data-left ul li span { margin-right: 10px; display: inline-block; } .main-tab-data .inner-tab-data .t-data-left h5 { color: #000; font-size: 30px; margin-bottom: 10px; } .main-tab-data .inner-tab-data .t-data-left p { margin-bottom: 10px; } .slider-btn .slick-next { right: 35%; } .slider-btn .slick-prev { left: 35%; } } @media (max-width:425px){ .main-banner .inner-banner .banner-text h1 { font-size: 40px; } .main-banner .inner-banner .banner-text p { font-size: 16px; line-height: 27px; margin-bottom: 20px; } footer .inner-footer .footer-column { width: 100%; } .main-mobile-app .inner-mob .mobile-content h2 { color: #FFF; font-size: 35px; } .main-mobile-app .inner-mob .mobile-content { padding-left: 0px; } .main-mobile-app .inner-mob .mobile-content p { margin-top: 10px; margin-bottom: 20px; } }

Related: See More


Questions / Comments: