<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-hero">
<div class="inner-hero">
<div class="hero-slide">
<img src="images/hero-1.jpg" class="img-fluid" alt="hero-1">
<div class="hero-content">
<div class="container">
<div class="hero-inn-text">
<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>
</div>
<div class="hero-slide">
<img src="images/hero-2.jpg" class="img-fluid" alt="hero-1">
<div class="hero-content">
<div class="container">
<div class="hero-inn-text">
<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>
</div>
<div class="hero-slide">
<img src="images/hero-3.jpg" class="img-fluid" alt="hero-1">
<div class="hero-content">
<div class="container">
<div class="hero-inn-text">
<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>
</div>
<div class="hero-slide">
<img src="images/hero-1.jpg" class="img-fluid" alt="hero-1">
<div class="hero-content">
<div class="container">
<div class="hero-inn-text">
<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>
</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>
$('.inner-hero').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow:1,
slidesToScroll: 1,
arrows:true,/*
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: 1,
slidesToScroll: 1,
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</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 ----------------------*/
.hero-slide {
position: relative;
z-index: 1;
}
.hero-slide:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
background: #000000a6;
left: 0;
top: 0;
/* opacity: 0.2; */
}
.inner-hero {
position: relative;
}
.hero-slide .hero-content .hero-inn-text h1 {
color: #fff;
font-size: 50px;
}
.hero-slide .hero-content .hero-inn-text p {
color: #fff;
margin: 20px 0;
}
.hero-slide img {
position: relative;
width: 100%;
}
.hero-slide .hero-content .hero-inn-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
display: block;
}
.main-hero .slick-next, .main-hero .slick-prev {
z-index: 9;
}
.main-hero .slick-next {
right: 25px;
width: auto;
height: auto;
}
.main-hero .slick-prev {
left: 25px;
width: auto;
height: auto;
}
.main-hero .slick-prev:before {
content: '\f104';
font-weight: 900;
font-family: 'Font Awesome 5 Free';
font-size: 20px;
background: #fff;
width: 40px;
height: 40px;
display: inline-flex;
justify-content: center;
align-items: center;
color: #000;
opacity: 1;
border-radius: 100px;
}
.main-hero .slick-next:before {
content: '\f105';
font-weight: 900;
font-family: 'Font Awesome 5 Free';
font-size: 20px;
background: #fff;
width: 40px;
height: 40px;
display: inline-flex;
justify-content: center;
align-items: center;
color: #000;
opacity: 1;
border-radius: 100px;
}
/*---------------------------- banner 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 (max-width:991px){
footer .inner-footer .footer-column {
width: 33.33%;
}
@media (max-width:767px){
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;
}
}
@media (max-width:575px){
}
@media (max-width:425px){
footer .inner-footer .footer-column {
width: 100%;
}
}
