"Untitled"
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" 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; }

Related: See More


Questions / Comments: