<!--Hero-->
<section class="position-relative bg-dark overflow-hidden">
<!-- Swiper slider -->
<div class="swiper-container swiper-classic">
<!-- Swiper wrapper -->
<div class="swiper-wrapper">
<!-- slide item -->
<div class="swiper-slide" style="background-image:url('assets/img/backgrounds/bg7.jpg')">
<div class="bg-dark position-absolute start-0 top-0 w-100 h-100 opacity-75"></div>
<div class="container-fluid text-white d-flex align-items-center h-100">
<div class="row pt-5 w-100">
<div class="col-xl-8 col-lg-10 mx-auto text-center">
<ul class="carousel-layers list-unstyled mb-0">
<!--Slide heading-->
<li data-carousel-layer="fade-start">
<h2 class="display-1 mb-3">
Accelerate your business
</h2>
</li>
<li data-carousel-layer="fade-end">
<!--Slide subheading-->
<p class="lead mb-4 mb-lg-5">
We build relationships
that connect brands to peoples
</p>
</li>
<li data-carousel-layer="fade-start">
<!--Slide action-->
<a href="#" class="btn btn-primary btn-lg">
How it works
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--Slide 2-->
<div class="swiper-slide" style="background-image:url('assets/img/backgrounds/bg3.jpg')">
<div class="bg-dark position-absolute start-0 top-0 w-100 h-100 opacity-75"></div>
<div class="container-fluid text-white d-flex align-items-center h-100">
<div class="row pt-5 w-100">
<div class="col-xl-8 col-lg-10 mx-auto text-center">
<ul class="carousel-layers list-unstyled mb-0">
<!--Slide heading-->
<li data-carousel-layer="fade-start">
<h2 class="display-1 mb-3">
Grow your business
</h2>
</li>
<li data-carousel-layer="fade-end">
<!--Slide subheading-->
<p class="lead mb-4 mb-lg-5">
We build relationships
that connect brands to peoples
</p>
</li>
<li data-carousel-layer="fade-start">
<!--Slide action-->
<a href="#" class="btn btn-primary btn-lg">
Purchase now
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--Slide 3-->
<div class="swiper-slide" style="background-image:url('assets/img/backgrounds/bg2.jpg')">
<div class="bg-dark position-absolute start-0 top-0 w-100 h-100 opacity-75"></div>
<div class="container-fluid text-white d-flex align-items-center h-100">
<div class="row pt-5 w-100">
<div class="col-xl-8 col-lg-10 mx-auto text-center">
<ul class="carousel-layers list-unstyled mb-0">
<li data-carousel-layer="fade-start">
<!--Slide heading-->
<h2 class="display-1 mb-3">
Build your business
</h2>
</li>
<li data-carousel-layer="fade-end">
<!--Slide subheading-->
<p class="lead mb-4 mb-lg-5">
We build relationships
that connect brands to peoples
</p>
</li>
<li data-carousel-layer="fade-start">
<!--Slide action-->
<a href="#" class="btn btn-primary btn-lg">
Try it Now!
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Slider pagination -->
<div class="swiper-pagination swiperClassic-pagination text-white"></div>
<!-- Slider Arrow -->
<div class="swiper-button-prev swiperClassic-button-prev bg-transparent width-5x height-5x text-white">
</div>
<!-- Slider Arrow -->
<div class="swiper-button-next swiperClassic-button-next bg-transparent width-5x height-5x text-white">
</div>
</div>
</section>
<!--/.Slider end-->
<!--Swiper slider-->
<script src="assets/vendor/node_modules/js/swiper-bundle.min.js"></script>
<script>
var swiperClassic = new Swiper(".swiper-classic", {
slidesPerView: 1, spaceBetween: 0,
loop: true, autoplay: { delay: 2500 },
effect: "creative",
creativeEffect: {
prev: {
shadow: true,
translate: ["-20%", 0, -1],
},
next: {
translate: ["100%", 0, 0],
},
},
pagination: {
el: ".swiperClassic-pagination",
clickable:true
},
navigation: { nextEl: ".swiperClassic-button-next", prevEl: ".swiperClassic-button-prev" }
});
</script>
<!-- Bootstrap + Vendor + Theme -->
<script src="assets/css/theme.bundle.js"></script>