We build digital experience
We are creatively driven studio focused on developing interactive projects.
Creating digital business
Your product needs to differentiate your business. Our mission is to make that happen.
Human-powered high quality results
Our template provides access to human-powered hight quality results for hundreds of use cases.
HTML:
<!-- Hero Section -->
<div class="js-slick-carousel u-slick"
data-infinite="true"
data-autoplay="true"
data-speed="7000"
data-fade="true"
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-numbered-pagination="#slickPaging">
<!-- Slide #1 -->
<div class="js-slide">
<div class="d-md-flex align-items-md-center height-100vh--lg gradient-overlay-half-dark-v2 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img13.jpg);">
<div class="container text-center space-2 space-3--md">
<!-- Description -->
<div class="w-lg-80 mx-lg-auto mb-3">
<h1 class="display-3 font-size-48--md-down text-white"
data-scs-animation-in="fadeInUp">We build digital experience</h1>
</div>
<div class="w-lg-50 mx-lg-auto mb-7">
<p class="lead text-white"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">We are creatively driven studio focused on developing interactive projects.</p>
</div>
<div data-scs-animation-in="fadeInUp"
data-scs-animation-delay="400">
<a class="btn btn-light" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started with Space</a>
</div>
<!-- End Description -->
</div>
</div>
</div>
<!-- End Slide #1 -->
<!-- Slide #2 -->
<div class="js-slide">
<div class="d-md-flex align-items-md-center height-100vh--lg gradient-overlay-half-dark-v2 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img14.jpg);">
<div class="container text-center space-2 space-3--md">
<!-- Description -->
<div class="w-lg-80 mx-lg-auto mb-3">
<h1 class="display-3 font-size-48--md-down text-white"
data-scs-animation-in="fadeInUp">Creating digital business</h1>
</div>
<div class="w-lg-50 mx-lg-auto mb-7">
<p class="lead text-white"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">Your product needs to differentiate your business. Our mission is to make that happen.</p>
</div>
<div data-scs-animation-in="fadeInUp"
data-scs-animation-delay="400">
<a class="btn btn-light" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started with Space</a>
</div>
<!-- End Description -->
</div>
</div>
</div>
<!-- End Slide #2 -->
<!-- Slide #3 -->
<div class="js-slide">
<div class="d-md-flex align-items-md-center height-100vh--lg gradient-overlay-half-dark-v2 bg-img-hero" style="background-image: url(../../assets/img/1920x1080/img15.jpg);">
<div class="container text-center space-2 space-3--md">
<!-- Description -->
<div class="w-lg-80 mx-lg-auto mb-3">
<h1 class="display-3 font-size-48--md-down text-white"
data-scs-animation-in="fadeInUp">Human-powered high quality results</h1>
</div>
<div class="w-lg-50 mx-lg-auto mb-7">
<p class="lead text-white"
data-scs-animation-in="fadeInUp"
data-scs-animation-delay="200">Our template provides access to human-powered hight quality results for hundreds of use cases.</p>
</div>
<div data-scs-animation-in="fadeInUp"
data-scs-animation-delay="400">
<a class="btn btn-light" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Get Started with Space</a>
</div>
<!-- End Description -->
</div>
</div>
</div>
<!-- End Slide #3 -->
</div>
<!-- End Hero Section -->
<!-- Hero Slick Paging -->
<div class="container position-relative">
<div id="slickPaging" class="u-slick__paging-v1"></div>
</div>
<!-- End Hero Slick Paging -->
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 Implementing Plugins -->
<script src="assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>