Gallery

Component #1 (with parallax)

<!-- Samples Section -->
<div class="space-2">
  <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll bg-white" data-options='{direction: "reverse"}' style="overflow: visible;">
    <div class="container-fluid px-lg-9">
      <div class="row justify-content-md-center align-items-center mx-n2">
        <div class="d-none d-md-inline-block col-md px-2">
          <img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/407x472/img6.jpg" alt="Image Description">
          <img class="img-fluid shadow rounded" src="../../assets/img/407x115/img1.jpg" alt="Image Description">
        </div>
        <div class="col-3 col-md px-2" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"7", mid:"0", final:"-7"}]'>
          <img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/407x472/img4.jpg" alt="Image Description">
          <img class="img-fluid shadow rounded" src="../../assets/img/407x283/img1.jpg" alt="Image Description">
        </div>
        <div class="col-6 col-md px-2">
          <img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/407x472/img5.jpg" alt="Image Description">
          <img class="img-fluid shadow rounded" src="../../assets/img/407x472/img3.jpg" alt="Image Description">
        </div>
        <div class="col-3 col-md px-2" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"-7", mid:"0", final:"7"}]'>
          <img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/300x360/img1.jpg" alt="Image Description">
          <img class="img-fluid shadow rounded" src="../../assets/img/407x535/img1.jpg" alt="Image Description">
        </div>
        <div class="d-none d-md-inline-block col-md px-2">
          <img class="img-fluid shadow rounded mb-3 mb-lg-5" src="../../assets/img/407x472/img1.jpg" alt="Image Description">
          <img class="img-fluid shadow rounded" src="../../assets/img/407x472/img2.jpg" alt="Image Description">
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Samples Section -->

<link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>

Component #2

Preview
HTML

<!-- Gallery Section -->
<div class="container space-2">
  <div class="row">
    <div class="col-md-5 align-self-md-end mb-3 mb-md-0">
      <img class="img-fluid rounded" src="../../assets/img/750x750/img6.jpg" alt="Image Description">
    </div>

    <div class="col-md-7">
      <div class="ml-lg-4">
        <img class="img-fluid rounded" src="../../assets/img/750x750/img5.jpg" alt="Image Description">
      </div>
    </div>
  </div>
</div>
<!-- End Gallery Section -->

Component #3

Preview
HTML

<!-- Gallery Section -->
<div class="container">
  <div class="row mx-n2">
    <div class="col-6 col-md px-2 mb-3">
      <div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img17.jpg);"></div>
    </div>
    <div class="col-md-3 d-none d-md-block px-2 mb-3">
      <div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img6.jpg);"></div>
    </div>
    <div class="col-6 col-md px-2 mb-3">
      <div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img14.jpg);"></div>
    </div>

    <div class="w-100"></div>

    <div class="col-6 col-md px-2 mb-3 mb-md-0">
      <div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img25.jpg);"></div>
    </div>
    <div class="col-md-4 d-none d-md-block px-2 mb-3 mb-md-0">
      <div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img16.jpg);"></div>
    </div>
    <div class="col-6 col-md px-2">
      <div class="h-250rem bg-img-hero" style="background-image: url(../../assets/img/480x320/img12.jpg);"></div>
    </div>
  </div>
</div>
<!-- End Gallery Section -->

Component #4

<!-- Hero Section -->
<div class="position-relative">
  <div class="container space-2 position-relative z-index-2">
    <div class="row mx-n1 mx-sm-n2">
      <div class="col-4 align-self-end px-1 px-sm-2 mb-2 mb-sm-3">
        <div class="ml-md-8">
          <img class="img-fluid rounded" src="../../assets/img/900x900/img1.jpg" alt="Image Description">
        </div>
      </div>
      <div class="col-8 px-1 px-sm-2 mb-2 mb-sm-3">
        <!-- Video Block -->
        <div id="youTubeVideoPlayerExample1" class="video-player bg-dark d-none d-md-block rounded">
          <img class="img-fluid video-player-preview rounded" src="../../assets/img/900x450/img14.jpg" alt="Image">

          <!-- Play Button -->
          <a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
             data-hs-video-player-options='{
               "videoId": "0qisGSwZym4",
               "parentSelector": "#youTubeVideoPlayerExample1",
               "targetSelector": "#youTubeVideoIframeExample1",
               "isAutoplay": true,
               "classMap": {
                 "toggle": "video-player-played"
               }
             }'>
            <span class="video-player-icon">
              <i class="fas fa-play"></i>
            </span>
          </a>
          <!-- End Play Button -->

          <!-- Video Iframe -->
          <div class="embed-responsive embed-responsive-16by9 rounded">
            <div id="youTubeVideoIframeExample1"></div>
          </div>
          <!-- End Video Iframe -->
        </div>
        <!-- End Video Block -->

        <div class="d-md-none">
          <img class="img-fluid rounded" src="../../assets/img/900x450/img14.jpg" alt="Image Description">
        </div>
      </div>
      <div class="col-8 px-1 px-sm-2 mb-2 mb-sm-3">
        <img class="img-fluid rounded" src="../../assets/img/900x450/img13.jpg" alt="Image Description">
      </div>
      <div class="col-4 px-1 px-sm-2 mb-2 mb-sm-3">
        <div class="mr-md-8">
          <img class="img-fluid rounded" src="../../assets/img/750x750/img2.jpg" alt="Image Description">
        </div>
      </div>
    </div>
  </div>

  <div class="position-absolute top-0 right-0 left-0 w-100 h-100 bg-img-hero mt-n11" style="background-image: url(../../assets/svg/components/abstract-shapes-12.svg);"></div>

  <!-- SVG Shape -->
  <figure class="position-absolute bottom-0 right-0 left-0 mb-11">
    <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1921 273">
      <polygon fill="#fff" points="0,273 1921,273 1921,0 "/>
    </svg>
  </figure>
  <!-- End SVG Shape -->
</div>
<!-- End Hero Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-video-player/dist/hs-video-player.min.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of video player
    $('.js-inline-video-player').each(function () {
      var videoPlayer = new HSVideoPlayer($(this)).init();
    });
  });
</script>

Component #5

<!-- Video Block -->
<div id="youTubeVideoPlayerExample2" class="video-player bg-dark rounded">
  <img class="img-fluid video-player-preview rounded" src="../../assets/img/1920x800/img10.jpg" alt="Image">

  <!-- Play Button -->
  <a class="js-inline-video-player video-player-btn video-player-centered shadow-soft rounded-circle" href="javascript:;"
     data-hs-video-player-options='{
       "videoId": "0qisGSwZym4",
       "parentSelector": "#youTubeVideoPlayerExample2",
       "targetSelector": "#youTubeVideoIframeExample2",
       "isAutoplay": true,
       "classMap": {
         "toggle": "video-player-played"
       }
     }'>
    <span class="video-player-icon">
      <i class="fas fa-play"></i>
    </span>
  </a>
  <!-- End Play Button -->

  <!-- Video Iframe -->
  <div class="embed-responsive embed-responsive-16by9 rounded">
    <div id="youTubeVideoIframeExample2"></div>
  </div>
  <!-- End Video Iframe -->
</div>
<!-- End Video Block -->

<link rel="stylesheet" href="../../assets/vendor/fancybox/dist/jquery.fancybox.min.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-video-player/dist/hs-video-player.min.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of video player
    $('.js-inline-video-player').each(function () {
      var videoPlayer = new HSVideoPlayer($(this)).init();
    });
  });
</script>

Component #6

<!-- Video Content Section -->
<div class="d-flex container-fluid py-3">
  <div class="d-flex justify-content-center align-items-center flex-column w-100 min-vh-100 bg-img-hero-center text-center rounded" style="background-image: url(../../assets/img/1920x1080/img23.jpg);">
    <!-- Fancybox -->
    <a class="js-fancybox video-player video-player-btn" href="javascript:;"
       data-hs-fancybox-options='{
         "src": "//youtube.com/0qisGSwZym4",
         "caption": "Front - Responsive Website Template",
         "speed": 700,
         "buttons": ["fullScreen", "close"],
         "vimeo": {
           "autoplay": 1
         }
       }'>
      <span class="video-player-icon">
        <i class="fas fa-play"></i>
      </span>
    </a>
    <!-- End Fancybox -->
  </div>
</div>
<!-- End Video Content Section -->

<link rel="stylesheet" href="../../assets/vendor/fancybox/dist/jquery.fancybox.min.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-video-player/dist/hs-video-player.min.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of video player
    $('.js-inline-video-player').each(function () {
      var videoPlayer = new HSVideoPlayer($(this)).init();
    });
  });
</script>

Component #7

<!-- Images Carousel Section -->
<div class="overflow-hidden">
  <div class="js-slick-carousel slick slick-gutters-2"
       data-hs-slick-carousel-options='{
         "infinite": true,
         "autoplay": true,
         "slidesToShow": 2,
         "centerMode": true,
         "centerPadding": "200px",
         "responsive": [{
           "breakpoint": 992,
           "settings": {
           "slidesToShow": 2,
             "centerPadding": "120px"
           }
         }, {
           "breakpoint": 768,
           "settings": {
           "slidesToShow": 1,
             "centerPadding": "80px"
           }
         }, {
           "breakpoint": 554,
           "settings": {
           "slidesToShow": 1,
             "centerPadding": "50px"
           }
         }]
        }'>
    <div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img6.jpg);"></div>
    <div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img7.jpg);"></div>
    <div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img8.jpg);"></div>
    <div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img9.jpg);"></div>
    <div class="js-slide rounded bg-img-hero min-h-300rem" style="background-image: url(../../assets/img/900x450/img10.jpg);"></div>
  </div>
</div>
<!-- End Images Carousel Section -->

<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of slick carousel
    $('.js-slick-carousel').each(function() {
      var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
    });
  });
</script>