- var page_Title = 'Gallery Placeholder';
- var masonry_js            = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var skeleton_effect       = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Gallery With Placeholder
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Gallery
                    li.breadcrumb-item.active  Gallery With Placeholder
          // Container-fluid starts   
          .container
            .grid.grid-cols-12
              div(class="col-span-12")
                .card
                  .card-header
                    h5 IMAGE GALLERY WITH PLACEHOLDER LOADER
                  .gallery-description-skeleton.loader_skeleton
                    .grid.grid-cols-12.gap-4
                        div(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 boc-col-4")
                          .skeleton-wrapper 
                            .skeleton-image 
                            .skeleton-caption
                              .skeleton-name
                              .skeleton-desc
                              .skeleton-desc
                              .skeleton-desc
                        div(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 boc-col-4")
                          .skeleton-wrapper 
                            .skeleton-image 
                            .skeleton-caption
                              .skeleton-name
                              .skeleton-desc
                              .skeleton-desc
                              .skeleton-desc
                        div(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 boc-col-4")
                          .skeleton-wrapper 
                            .skeleton-image 
                            .skeleton-caption
                              .skeleton-name
                              .skeleton-desc
                              .skeleton-desc
                              .skeleton-desc
                        div(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 boc-col-4")
                          .skeleton-wrapper 
                            .skeleton-image 
                            .skeleton-caption
                              .skeleton-name
                              .skeleton-desc
                              .skeleton-desc
                              .skeleton-desc
                        div(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 boc-col-4")
                          .skeleton-wrapper 
                            .skeleton-image 
                            .skeleton-caption
                              .skeleton-name
                              .skeleton-desc
                              .skeleton-desc
                              .skeleton-desc
                        div(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 boc-col-4")
                          .skeleton-wrapper 
                            .skeleton-image 
                            .skeleton-caption
                              .skeleton-name
                              .skeleton-desc
                              .skeleton-desc
                              .skeleton-desc
                        div(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 boc-col-4")
                          .skeleton-wrapper 
                            .skeleton-image 
                            .skeleton-caption
                              .skeleton-name
                              .skeleton-desc
                              .skeleton-desc
                              .skeleton-desc
                        div(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 boc-col-4")
                          .skeleton-wrapper 
                            .skeleton-image 
                            .skeleton-caption
                              .skeleton-name
                              .skeleton-desc
                              .skeleton-desc
                              .skeleton-desc
                        div(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 boc-col-4")
                          .skeleton-wrapper 
                            .skeleton-image 
                            .skeleton-caption
                              .skeleton-name
                              .skeleton-desc
                              .skeleton-desc
                              .skeleton-desc
                        div(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 boc-col-4")
                          .skeleton-wrapper 
                            .skeleton-image 
                            .skeleton-caption
                              .skeleton-name
                              .skeleton-desc
                              .skeleton-desc
                              .skeleton-desc
                        div(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 boc-col-4")
                          .skeleton-wrapper 
                            .skeleton-image 
                            .skeleton-caption
                              .skeleton-name
                              .skeleton-desc
                              .skeleton-desc
                              .skeleton-desc
                        div(class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 boc-col-4")
                          .skeleton-wrapper 
                            .skeleton-image 
                            .skeleton-caption
                              .skeleton-name
                              .skeleton-desc
                              .skeleton-desc
                              .skeleton-desc
                  .card-body.product-wrapper-grid
                    .grid.grid-cols-12.card-gap.masonryComponent.my-gallery.gallery-with-description
                      figure(itemprop='associatedMedia', itemscope='' class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img(src='../assets/images/lightgallery/016.jpg', itemprop='thumbnail', alt='Image description')
                          .caption
                            h4 Comeren Diaz
                            p
                              | With a personalised activity feed that includes posts, images, and updates, you can stay in touch with friends and follow trends.
                      figure(itemprop='associatedMedia', itemscope='' class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img(src='../assets/images/lightgallery/02.jpg', itemprop='thumbnail', alt='Image description')
                          .caption
                            h4 Gwen Rice
                            p
                              | With just a few clicks, create thorough reports that provide insightful information about your business activities.
                      figure(itemprop='associatedMedia', itemscope='' class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img(src='../assets/images/lightgallery/03.jpg', itemprop='thumbnail', alt='Image description')
                          .caption
                            h4 Dev John
                            p
                              | Effectively manage users with our user-friendly dashboard, which includes customisable widgets and real-time data metrics.
                      figure(itemprop='associatedMedia', itemscope='' class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img(src='../assets/images/lightgallery/04.jpg', itemprop='thumbnail', alt='Image description')
                          .caption
                            h4 Cairo Tran
                            p
                              | Using a camera's lens to record moments in time is the art form known as photography. To produce aesthetically striking photos, it entails the deft use of light, composition, and subject matter.
                      figure(itemprop='associatedMedia', itemscope='' class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img(src='../assets/images/lightgallery/05.jpg', itemprop='thumbnail', alt='Image description')
                          .caption
                            h4 Bexley Cline
                            p
                              | The provision of tools for creating, modifying, and managing user accounts, the admin themes and templates enable effective user management. They also provide strong permission management, letting you set restrictions on features and access levels according to user roles.
                      figure(itemprop='associatedMedia', itemscope='' class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img(src='../assets/images/lightgallery/015.jpg', itemprop='thumbnail', alt='Image description')
                          .caption
                            h4 Johan Deo
                            p
                              | An admin theme is a visually beautiful and practical design template created especially for a website's or application's backend.
                      figure(itemprop='associatedMedia', itemscope='' class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img(src='../assets/images/lightgallery/01.jpg', itemprop='thumbnail', alt='Image description')
                          .caption
                            h4 Naya Curry
                            p
                              | Until the final content is ready, placeholders can be used to fill up spaces with text or images. Layout design can be facilitated by the usage of placeholders. Here are some pointers on the use of placeholders.
                      figure(itemprop='associatedMedia', itemscope='' class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img(src='../assets/images/lightgallery/013.jpg', itemprop='thumbnail', alt='Image description')
                          .caption
                            h4 Bucky Barnes
                            p
                              | With scheduled backup and simple restore options for important data, you can guarantee data security.
                      figure(itemprop='associatedMedia', itemscope='' class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img(src='../assets/images/lightgallery/012.jpg', itemprop='thumbnail', alt='Image description')
                          .caption
                            h4 Andew Jon
                            p
                              | Gather and handle user reviews straight from the administrative dashboard to ensure ongoing development.
                      figure(itemprop='associatedMedia', itemscope='' class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img(src='../assets/images/lightgallery/011.jpg', itemprop='thumbnail', alt='Image description')
                          .caption
                            h4 Brock Villa
                            p
                              | There are extensive billing and invoicing functions included in the admin themes/templates. Invoice generation, payment tracking, price plan management, and recurring billing process automation are all available.
                      figure(itemprop='associatedMedia', itemscope='' class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img(src='../assets/images/lightgallery/010.jpg', itemprop='thumbnail', alt='Image description')
                          .caption
                            h4 Sarah Loren
                            p
                              | Use our built-in live streaming function to go live and share experiences with your followers in real time.
                      figure(itemprop='associatedMedia', itemscope='' class="col-span-3 xxl:col-span-4 lg:col-span-6 sm:col-span-12 box-col-4")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img(src='../assets/images/lightgallery/09.jpg', itemprop='thumbnail', alt='Image description')
                          .caption
                            h4 Leo Macias
                            p
                              | Customise your accounts with cover photographs, biographies, and profile pictures to express who you are.
                    .pswp(tabindex='-1', role='dialog', aria-hidden='true')
                      //
                        Background of PhotoSwipe.
                        It's a separate element, as animating opacity is faster than rgba().
                      .pswp__bg
                      // Slides wrapper with overflow:hidden.
                      .pswp__scroll-wrap
                        // Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory.
                        // don't modify these 3 pswp__item elements, data is added later on.
                        .pswp__container
                          .pswp__item
                          .pswp__item
                          .pswp__item
                        // Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed.
                        .pswp__ui.pswp__ui--hidden
                          .pswp__top-bar
                            // Controls are self-explanatory. Order can be changed.
                            .pswp__counter
                            button.pswp__button.pswp__button--close(title='Close (Esc)')
                            button.pswp__button.pswp__button--share(title='Share')
                            button.pswp__button.pswp__button--fs(title='Toggle fullscreen')
                            button.pswp__button.pswp__button--zoom(title='Zoom in/out')
                            // Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR
                            // element will get class pswp__preloader-active when preloader is running
                            .pswp__preloader
                              .pswp__preloader__icn
                                .pswp__preloader__cut
                                  .pswp__preloader__donut
                          .pswp__share-modal.pswp__share-modal--hidden.pswp__single-tap
                            .pswp__share-tooltip
                          button.pswp__button.pswp__button--arrow--left(title='Previous (arrow left)')
                          button.pswp__button.pswp__button--arrow--right(title='Next (arrow right)')
                          .pswp__caption
                            .pswp__caption__center
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
