<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" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/media.css">
<title>index</title>
</head>
<body>
<section class="main-services">
<div class="container">
<div class="row">
<div class="col-12">
<div class="service-heading text-center">
<h2>Explore our various services</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="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>
<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>
$('.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: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
dots: false
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 575,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 425,
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>
.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;
}
