Meet Space Restaurant
Tempt your customers with irresistible food
Explore More
Affordable than ever
Find the perfect food for less
Explore More
HTML:
<!-- Hero Section -->
<div class="js-slick-carousel u-slick"
data-autoplay="true"
data-infinite="true"
data-speed="10000"
data-adaptive-height="true"
data-arrows-classes="d-none d-lg-inline-block u-slick__arrow-classic u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fa fa-arrow-left u-slick__arrow-classic-inner u-slick__arrow-classic-inner--left ml-lg-2 ml-xl-4"
data-arrow-right-classes="fa fa-arrow-right u-slick__arrow-classic-inner u-slick__arrow-classic-inner--right mr-lg-2 mr-xl-4"
data-pagi-classes="position-absolute-bottom-0 text-center u-slick__pagination u-slick__pagination--white">
<div class="js-slide">
<!-- Slide #1 -->
<div class="d-lg-flex bg-img-hero gradient-overlay-half-dark-v3" style="background-image: url(../../assets/img/1920x1080/img39.jpg);">
<div class="container d-lg-flex align-items-lg-center flex-lg-wrap height-100vh--lg text-center space-3">
<div class="w-lg-75 mx-lg-auto">
<div class="mb-5">
<span class="d-block text-white font-weight-medium text-uppercase mb-3"
data-scs-animation-in="fadeInUp">Meet Space Restaurant</span>
<h1 class="display-4 text-white font-size-48--md-down font-weight-medium text-capitalize"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="500">Find the perfect food for less</h1>
</div>
<a class="js-go-to btn btn-lg btn-wide btn-light font-size-14 font-weight-medium rounded-0 text-uppercase" href="javascript:;"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="700"
data-target="#contentSection"
data-type="static">Explore More</a>
</div>
</div>
</div>
<!-- End Slide #1 -->
</div>
<div class="js-slide">
<!-- Slide #1 -->
<div class="d-lg-flex bg-img-hero gradient-overlay-half-dark-v3" style="background-image: url(../../assets/img/1920x1080/img40.jpg);">
<div class="container d-lg-flex align-items-lg-center flex-lg-wrap height-100vh--lg text-center space-3">
<div class="w-lg-75 mx-lg-auto">
<div class="mb-5">
<span class="d-block text-white font-weight-medium text-uppercase mb-3"
data-scs-animation-in="fadeInUp">Affordable than ever</span>
<h1 class="display-4 text-white font-size-48--md-down font-weight-medium text-capitalize"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="500">Tempt your customers with irresistible food</h1>
</div>
<a class="js-go-to btn btn-lg btn-wide btn-light font-size-14 font-weight-medium rounded-0 text-uppercase" href="javascript:;"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="700"
data-target="#contentSection"
data-type="static">Explore More</a>
</div>
</div>
</div>
<!-- End Slide #1 -->
</div>
</div>
<!-- End Hero Section -->
CSS library:
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Space -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<script src="../../assets/js/components/hs.go-to.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
// initialization of go to
$.HSCore.components.HSGoTo.init('.js-go-to');
});
</script>