Access_New/gallery.php

<?php include('header.php')?>
<!--Page Hero Section-->
<section class="top-space-margin page-title-big-typography cover-background magic-cursor round-cursor" style="background-image: url(images/access-image/gallery-bg.jpg); margin-top: 141px;">
  <div class="container">
    <div class="row extra-very-small-screen align-items-center">
      <div class="col-lg-5 col-sm-8 position-relative page-title-extra-small appear anime-child anime-complete" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;opacity&quot;: [0, 1], &quot;translateX&quot;: [-30, 0], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
        <h1 class="mb-20px text-white text-shadow-medium" style=""><span class="w-30px h-2px bg-yellow d-inline-block align-middle position-relative top-minus-2px me-10px"></span>Access Education Network</h1>
        <h2 class="text-white text-shadow-medium fw-500 ls-minus-2px mb-0" style="">Gallery</h2>
      </div>
    </div>
  </div>
</section>
<!--Page Hero section End--> 

<!--Gallery Section-->
<section class="ps-5 pe-5 lg-ps-2 lg-pe-2 position-relative">
  <div class="h-110px position-absolute w-100 h-100 left-0px right-0px top-minus-70px" style="background-image:url('images/demo-travel-agency-about-bg-02.png')"></div>
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <ul class="image-gallery-style-02 gallery-wrapper grid grid-4col xxl-grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-large" style="position: relative; height: 784.218px;">
          <li class="grid-sizer"></li>
          <!-- start gallery item -->
          <li class="grid-item transition-inner-all atropos atropos-rotate-touch" data-atropos="" data-atropos-perspective="1150" style="position: absolute; left: 0%; top: 0px;">
            <div class="atropos-scale" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms;">
              <div class="atropos-rotate" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg);">
                <div class="atropos-inner" data-atropos-offset="3" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px);">
                  <div class="gallery-box"> <a href="images/access-image/dolraj-rijal.png" data-group="lightbox-group-gallery-item-2" title="Lightbox gallery image title">
                    <div class="position-relative gallery-image bg-slate-blue"> <img src="images/access-image/dolraj-rijal.png" alt="" data-no-retina="">
                      <div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top"> <i class="bi bi-camera icon-medium text-white"></i> </div>
                    </div>
                    </a> </div>
                  <span class="atropos-highlight" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms; opacity: 0;"></span></div>
                <span class="atropos-shadow" style="transform: translate3d(0px, 0px, -50px) scale(1); transition-duration: 300ms;"></span></div>
            </div>
          </li>
          <!-- end gallery item --> 
          
          <!-- start gallery item -->
          <li class="grid-item transition-inner-all atropos atropos-rotate-touch" data-atropos="" data-atropos-perspective="1150" style="position: absolute; left: 24.9995%; top: 0px;">
            <div class="atropos-scale" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms;">
              <div class="atropos-rotate" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg);">
                <div class="atropos-inner" data-atropos-offset="3" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px);">
                  <div class="gallery-box"> <a href="images/access-image/oniska-shrestha.png" data-group="lightbox-group-gallery-item-2" title="Lightbox gallery image title">
                    <div class="position-relative gallery-image bg-slate-blue"> <img src="images/access-image/oniska-shrestha.png" alt="" data-no-retina="">
                      <div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top"> <i class="bi bi-camera icon-medium text-white"></i> </div>
                    </div>
                    </a> </div>
                  <span class="atropos-highlight" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms; opacity: 0;"></span></div>
                <span class="atropos-shadow" style="transform: translate3d(0px, 0px, -50px) scale(1); transition-duration: 300ms;"></span></div>
            </div>
          </li>
          <!-- end gallery item --> 
          
          <!-- start gallery item -->
          <li class="grid-item transition-inner-all atropos atropos-rotate-touch" data-atropos="" data-atropos-perspective="1150" style="position: absolute; left: 49.999%; top: 0px;">
            <div class="atropos-scale" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms;">
              <div class="atropos-rotate" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg);">
                <div class="atropos-inner" data-atropos-offset="3" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px);">
                  <div class="gallery-box"> <a href="images/access-image/priya-pandey.png" data-group="lightbox-group-gallery-item-2" title="Lightbox gallery image title">
                    <div class="position-relative gallery-image bg-slate-blue"> <img src="images/access-image/priya-pandey.png" alt="" data-no-retina="">
                      <div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top"> <i class="bi bi-camera icon-medium text-white"></i> </div>
                    </div>
                    </a> </div>
                  <span class="atropos-highlight" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms; opacity: 0;"></span></div>
                <span class="atropos-shadow" style="transform: translate3d(0px, 0px, -50px) scale(1); transition-duration: 300ms;"></span></div>
            </div>
          </li>
          <!-- end gallery item --> 
          
          <!-- start gallery item -->
          <li class="grid-item transition-inner-all atropos atropos-rotate-touch" data-atropos="" data-atropos-perspective="1150" style="position: absolute; left: 74.9986%; top: 0px;">
            <div class="atropos-scale" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms;">
              <div class="atropos-rotate" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg);">
                <div class="atropos-inner" data-atropos-offset="3" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px);">
                  <div class="gallery-box"> <a href="images/access-image/sabin-chaulagain.png" data-group="lightbox-group-gallery-item-2" title="Lightbox gallery image title">
                    <div class="position-relative gallery-image bg-slate-blue"> <img src="images/access-image/sabin-chaulagain.png" alt="" data-no-retina="">
                      <div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top"> <i class="bi bi-camera icon-medium text-white"></i> </div>
                    </div>
                    </a> </div>
                  <span class="atropos-highlight" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms; opacity: 0;"></span></div>
                <span class="atropos-shadow" style="transform: translate3d(0px, 0px, -50px) scale(1); transition-duration: 300ms;"></span></div>
            </div>
          </li>
          <!-- end gallery item --> 
          
          <!-- start gallery item -->
          <li class="grid-item transition-inner-all atropos atropos-rotate-touch" data-atropos="" data-atropos-perspective="1150" style="position: absolute; left: 0%; top: 392.109px;">
            <div class="atropos-scale" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms;">
              <div class="atropos-rotate" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg);">
                <div class="atropos-inner" data-atropos-offset="3" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px);">
                  <div class="gallery-box"> <a href="images/access-image/sadikshya-karki.png" data-group="lightbox-group-gallery-item-2" title="Lightbox gallery image title">
                    <div class="position-relative gallery-image bg-slate-blue"> <img src="images/access-image/sadikshya-karki.png" alt="" data-no-retina="">
                      <div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top"> <i class="bi bi-camera icon-medium text-white"></i> </div>
                    </div>
                    </a> </div>
                  <span class="atropos-highlight" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms; opacity: 0;"></span></div>
                <span class="atropos-shadow" style="transform: translate3d(0px, 0px, -50px) scale(1); transition-duration: 300ms;"></span></div>
            </div>
          </li>
          <!-- end gallery item --> 
          
          <!-- start gallery item -->
          <li class="grid-item transition-inner-all atropos atropos-rotate-touch" data-atropos="" data-atropos-perspective="1150" style="position: absolute; left: 24.9995%; top: 392.109px;">
            <div class="atropos-scale" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms;">
              <div class="atropos-rotate" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg);">
                <div class="atropos-inner" data-atropos-offset="3" style="transition-duration: 300ms; transform: translate3d(0px, 0px, 0px);">
                  <div class="gallery-box"> <a href="images/access-image/sagar-lama.png" data-group="lightbox-group-gallery-item-2" title="Lightbox gallery image title">
                    <div class="position-relative gallery-image bg-slate-blue"> <img src="images/access-image/sagar-lama.png" alt="" data-no-retina="">
                      <div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top"> <i class="bi bi-camera icon-medium text-white"></i> </div>
                    </div>
                    </a> </div>
                  <span class="atropos-highlight" style="transform: translate3d(0px, 0px, 0px); transition-duration: 300ms; opacity: 0;"></span></div>
                <span class="atropos-shadow" style="transform: translate3d(0px, 0px, -50px) scale(1); transition-duration: 300ms;"></span></div>
            </div>
          </li>
          <!-- end gallery item -->
        </ul>
      </div>
    </div>
  </div>
</section>
<!--Gallery Section End-->
<?php include('footer.php')?>