Gallery Grid

Component #1

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 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

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" 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 -->