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>