1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / projects / card /
Filename : doc
back
    <script>
 $(document).ready(function() {
	$('.zoom-gallery').magnificPopup({
		delegate: 'a',
		type: 'image',
		closeOnContentClick: false,
		closeBtnInside: false,
		mainClass: 'mfp-with-zoom mfp-img-mobile',
		image: {
			verticalFit: true,
			titleSrc: function(item) {
				return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
			}
		},
		gallery: {
			enabled: true
		},
		zoom: {
			enabled: true,
			duration: 300, // don't foget to change the duration also in CSS
			opener: function(element) {
				return element.find('img');
			}
		}
		
	});
});
    </script>




	/* CSS for the popup */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
  }
  
  .popup-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  
  .popup-img {
    max-width: 80%;
    max-height: 80%;
  }

  .popup-gallery img{
    display: flex;
    justify-content: center;
  }
  

/* .close-btn {
    position: absolute;
    top: 0;
    right: 36px;
    color: #fff;
    font-size: 33px;
    cursor: pointer;
  } */




  <!-- GALLERY SECTION START -->
    <section id="gallery" class="p-2 ">
      <div class="container mt-3 p-4  rounded position-relative">
        <div class="position-absolute top-0 end-0 rounded mx-4 mt-4" style="width: 8%; height: auto;">
          <img src="./images/svg/SVG/corner-1.svg" alt="" class="rounded img-fluid">
        </div>
        <div class="row">
          <div class="about-content">
            
            <div class="pb-2 mb-3">
              <div class="organization-name">
                <h5> <b>GALLERY</b> </h5>
              </div>
            </div>
          
          
        </div>

        
  <div class="row">

  <div class="popup-gallery col-lg-4 col-4 mb-4">
   <img src="images/audit.jpg" class="gallery-img w-100 shadow-1-strong rounded mb-4" alt="Boat on Calm Water" onclick="openPopup(this)"/>

    <img
    src="images/genral.jpg"
    class="gallery-img w-100 shadow-1-strong rounded mb-4"
    alt="Wintry Mountain Landscape" onclick="openPopup(this)"
    />

    <img
      src="https://t4.ftcdn.net/jpg/04/57/33/23/240_F_457332397_zQN6g0LLq8e4ErzjojcINj1zwkWIjPEC.jpg"
      class="gallery-img w-100 shadow-1-strong rounded mb-4"
      alt="Mountains in the Clouds" onclick="openPopup(this)"
    />

    <img
      src="https://i.pinimg.com/originals/86/a7/4b/86a74b951543653e9c05ade7d4a914f5.jpg"
      class="gallery-img w-100 shadow-1-strong rounded mb-4"
      alt="Boat on Calm Water" onclick="openPopup(this)"
    />
  </div>

  <div class="popup-gallery col-lg-4 col-4 mb-4">
    <img
      src="https://t4.ftcdn.net/jpg/04/57/33/23/240_F_457332397_zQN6g0LLq8e4ErzjojcINj1zwkWIjPEC.jpg"
      class="gallery-img w-100 shadow-1-strong rounded mb-4"
      alt="Mountains in the Clouds" onclick="openPopup(this)"
    />

    <img
      src="https://i.pinimg.com/originals/86/a7/4b/86a74b951543653e9c05ade7d4a914f5.jpg"
      class="gallery-img w-100 shadow-1-strong rounded mb-4"
      alt="Boat on Calm Water" onclick="openPopup(this)"
    />

    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(18).webp"
      class="gallery-img w-100 shadow-1-strong rounded mb-4"
      alt="Waves at Sea" onclick="openPopup(this)"
    />

    <img
      src="images/audit.jpg"
      class="gallery-img w-100 shadow-1-strong rounded mb-4"
      alt="Boat on Calm Water" onclick="openPopup(this)"
    />
  </div>

  <div class="popup-gallery col-lg-4 col-4 mb-4">
    <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(18).webp"
      class="gallery-img w-100 shadow-1-strong rounded mb-4"
      alt="Waves at Sea" onclick="openPopup(this)"
    />

   <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
      class="gallery-img w-100 shadow-1-strong rounded mb-4"
      alt="Yosemite National Park" onclick="openPopup(this)"
    />

   <img
      src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
      class="gallery-img w-100 shadow-1-strong rounded mb-4"
      alt="Yosemite National Park" onclick="openPopup(this)"
    />
  </div>
   
  <div class="popup" onclick="closePopup()">
    <div class="popup-content">
      <img class="popup-img">
      <span class="close-btn" onclick="closePopup()">&times;</span>
    </div>
  </div>
</div>
      
</section>
    <!-- GALLERY SECTION END -->