<!-- =======================
Main Banner START -->
<section class="py-0">
<div class="container-fluid">
<div class="row">
<div class="col-lg-11 mx-auto">
<!-- Slider START -->
<div class="tiny-slider arrow-round arrow-blur arrow-hover rounded-3 overflow-hidden">
<div class="tiny-slider-inner" data-gutter="0" data-arrow="true" data-dots="false" data-items="1">
<!-- Card item START -->
<div class="card overflow-hidden h-400px h-sm-600px rounded-0" style="background-image:url(assets/images/category/hotel/06.jpg); background-position: center left; background-size: cover;">
<!-- Background dark overlay -->
<div class="bg-overlay bg-dark opacity-3"></div>
<!-- Card image overlay -->
<div class="card-img-overlay d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-11 col-lg-7">
<h6 class="text-white fw-normal mb-0">💖 Fall in love with the City</h6>
<!-- Title -->
<h1 class="text-white display-6">Modern Luxury In Manhattan</h1>
<a href="#" class="btn btn-primary mb-0">Reserve Today</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="card overflow-hidden h-400px h-sm-600px bg-parallax text-center rounded-0" data-jarallax-video="https://www.youtube.com/watch?v=71V3HawWXU4">
<!-- Background dark overlay -->
<div class="bg-overlay bg-dark opacity-3"></div>
<!-- Card image overlay -->
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-4">
<div class="container w-100 my-auto">
<div class="row justify-content-center">
<div class="col-11 col-lg-8">
<!-- Title -->
<h1 class="text-white">Taking luxury hospitality to new heights</h1>
<a href="#" class="btn btn-dark mb-0">Take Me There</a>
</div>
</div>
</div>
</div>
</div>
<!-- Card item END -->
</div>
</div>
<!-- Slider END -->
</div>
</div>
</div>
</section>
<!-- =======================
Main Banner END -->
Copy-paste the stylesheet <link>
into your <head>
to load the CSS.
<link rel="stylesheet" type="text/css" href="assets/vendor/tiny-slider/tiny-slider.css">
Copy-paste the following <script>
near the end of your pages under Vendors to enable it.
<script src="assets/vendor/tiny-slider/tiny-slider.js"></script>
<script src="assets/vendor/jarallax/jarallax.min.js"></script>
<script src="assets/vendor/jarallax/jarallax-video.min.js"></script>