Gallery

Component #1 (with parallax)

Image Description Image Description
Image Description Image Description
Image Description Image Description
Image Description Image Description
Image Description Image Description
                    
                      <!-- 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-lg mb-3 mb-lg-5" src="../assets/img/407x472/img6.jpg" alt="Image Description">
                                <img class="img-fluid shadow rounded-lg" 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-lg mb-3 mb-lg-5" src="../assets/img/407x472/img4.jpg" alt="Image Description">
                                <img class="img-fluid shadow rounded-lg" src="../assets/img/407x283/img1.jpg" alt="Image Description">
                              </div>
                              <div class="col-6 col-md px-2">
                                <img class="img-fluid shadow rounded-lg mb-3 mb-lg-5" src="../assets/img/407x472/img5.jpg" alt="Image Description">
                                <img class="img-fluid shadow rounded-lg" 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-lg mb-3 mb-lg-5" src="../assets/img/300x360/img1.jpg" alt="Image Description">
                                <img class="img-fluid shadow rounded-lg" 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-lg mb-3 mb-lg-5" src="../assets/img/407x472/img1.jpg" alt="Image Description">
                                <img class="img-fluid shadow rounded-lg" 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

Image Description
Image Description
                    
                      <!-- 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-lg" 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-lg" src="../assets/img/750x750/img5.jpg" alt="Image Description">
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Gallery Section -->
                    
                  

Component #3

                    
                      <!-- 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-lg" 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-lg">
                                <img class="img-fluid video-player-preview rounded-lg" 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-lg">
                                  <div id="youTubeVideoIframeExample1"></div>
                                </div>
                                <!-- End Video Iframe -->
                              </div>
                              <!-- End Video Block -->

                              <div class="d-md-none">
                                <img class="img-fluid rounded-lg" 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-lg" 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-lg" 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-lg">
                        <img class="img-fluid video-player-preview rounded-lg" src="../assets/img/1920x800/img6.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-lg">
                          <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-lg" 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-lg bg-img-hero min-h-300rem" style="background-image: url(../assets/img/900x450/img6.jpg);"></div>
                          <div class="js-slide rounded-lg bg-img-hero min-h-300rem" style="background-image: url(../assets/img/900x450/img7.jpg);"></div>
                          <div class="js-slide rounded-lg bg-img-hero min-h-300rem" style="background-image: url(../assets/img/900x450/img8.jpg);"></div>
                          <div class="js-slide rounded-lg bg-img-hero min-h-300rem" style="background-image: url(../assets/img/900x450/img9.jpg);"></div>
                          <div class="js-slide rounded-lg 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>
                    
                  

Component #8

Published: December 27, 2018
                    
                      <!-- Gallery Section -->
                      <div class="container position-relative">
                        <div id="fancyboxGallery" class="js-fancybox"
                             data-hs-fancybox-options='{
                               "selector": "#fancyboxGallery .js-fancybox-item"
                             }'>
                          <div class="rounded-lg overflow-hidden">
                            <div class="row mx-n1">
                              <div class="col-md-8 px-1">
                                <!-- Gallery -->
                                <a class="js-fancybox-item d-block" href="javascript:;"
                                    data-src="../assets/img/1920x1080/img27.jpg"
                                    data-caption="Front in frames - image #01">
                                  <img class="img-fluid w-100" src="../assets/img/900x455/img1.jpg" alt="Image Description">

                                  <div class="position-absolute bottom-0 right-0 pb-3 pr-3">
                                    <span class="d-md-none btn btn-sm btn-light">
                                      <i class="fas fa-expand mr-2"></i> View Photos
                                    </span>
                                  </div>
                                </a>
                                <!-- End Gallery -->
                              </div>

                              <div class="col-md-4 d-none d-md-inline-block px-1">
                                <!-- Gallery -->
                                <a class="js-fancybox-item d-block mb-2" href="javascript:;"
                                    data-src="../assets/img/1920x1080/img11.jpg"
                                    data-caption="Front in frames - image #04">
                                  <img class="img-fluid w-100" src="../assets/img/450x225/img1.jpg" alt="Image Description">
                                </a>
                                <!-- End Gallery -->

                                <!-- Gallery -->
                                <a class="js-fancybox-item d-block" href="javascript:;"
                                    data-src="../assets/img/1920x1080/img14.jpg"
                                    data-caption="Front in frames - image #04">
                                  <img class="img-fluid w-100" src="../assets/img/450x225/img2.jpg" alt="Image Description">

                                  <div class="position-absolute bottom-0 right-0 pb-3 pr-3">
                                    <span class="d-none d-md-inline-block btn btn-sm btn-light">
                                      <i class="fas fa-expand mr-2"></i> View Photos
                                    </span>
                                  </div>
                                </a>
                                <!-- End Gallery -->

                                <img class="js-fancybox-item d-none" alt="Image Description"
                                      data-src="../assets/img/1920x1080/img24.jpg"
                                      data-caption="Front in frames - image #05">
                                <img class="js-fancybox-item d-none" alt="Image Description"
                                      data-src="../assets/img/1920x1080/img20.jpg"
                                      data-caption="Front in frames - image #06">
                              </div>
                            </div>
                            <!-- End Row -->
                          </div>

                          <div class="d-flex justify-content-end mt-2">
                            <span class="small text-dark font-weight-bold">Published:</span>
                            <span class="small ml-1">December 27, 2018</span>
                          </div>
                        </div>
                      </div>
                      <!-- End Gallery Section -->
                    
                  
                    
                      <link rel="stylesheet" href="./node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>

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

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF FANCYBOX
                          // =======================================================
                          $('.js-fancybox').each(function () {
                            var fancybox = $.HSCore.components.HSFancyBox.init($(this));
                          });
                        });
                      </script>