gallery.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Samarth - Empowering the Youth</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link
      href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,700,800"
      rel="stylesheet"
    />
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/open-iconic-bootstrap.min.css" />
    <link rel="stylesheet" href="css/animate.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="css/owl.carousel.min.css" />
    <link rel="stylesheet" href="css/owl.theme.default.min.css" />
    <link rel="stylesheet" href="css/magnific-popup.css" />

    <link rel="stylesheet" href="css/aos.css" />

    <link rel="stylesheet" href="css/ionicons.min.css" />

    <link rel="stylesheet" href="css/bootstrap-datepicker.css" />
    <link rel="stylesheet" href="css/jquery.timepicker.css" />

    <link
      rel="shortcut icon"
      href="./images/SamarthWhite.png"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="css/flaticon.css" />
    <link rel="stylesheet" href="css/icomoon.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="/css/footer.css" />

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      rel="stylesheet"
    />
    <!--New loader Css-->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
      type="text/javascript"
    ></script>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
    />

    <script>
      window.console = window.console || function (t) {};
    </script>

    <script>
      if (document.location.search.match(/type=embed/gi)) {
        window.parent.postMessage("resize", "*");
      }
    </script>
    <!--New loader Css-->
  </head>

  <body>
    <!--New loader Css-->
    <div id="loader-wrapper">
      <div id="loader"></div>

      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
    </div>
    <!--New loader Css-->
    <nav
      class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light"
      id="ftco-navbar"
    >
      <div class="container">
        <div class="samarth_logo">
          <img
            style="
              width: 50px;
              width: 100%;
              height: 50px;
              border-radius: 50%;
              padding: right 5px;
              padding-top: 2px;
              cursor: pointer;
            "
            src="images/SamarthBlack.png"
          />
        </div>
        <div class="navbar-brand" style="cursor: pointer">Samarth</div>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#ftco-nav"
          aria-controls="ftco-nav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="oi oi-menu"></span>
        </button>

        <div class="collapse navbar-collapse" id="ftco-nav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="index.html" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="events.html" class="nav-link">Events</a>
            </li>
            <li class="nav-item active">
              <a href="gallery.html" class="nav-link">Gallery</a>
            </li>
            <li class="nav-item">
              <a href="team.html" class="nav-link">Our Team</a>
            </li>
            <li class="nav-item">
              <a href="sponsor.html" class="nav-link">Sponsors</a>
            </li>
            <li class="nav-item">
              <a href="resource.html" class="nav-link">Resources</a>
            </li>
            <li class="nav-item cta">
              <a href="contact.html" class="nav-link"
                ><span>Get in touch</span></a
              >
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- END nav -->

    <div class="hero-wrap js-fullheight">
      <div class="overlay"></div>
      <div id="particles-js" style="z-index: 1"></div>
      <div class="container" style="z-index: 2; position: relative">
        <div
          class="row no-gutters slider-text align-items-center justify-content-center"
          data-scrollax-parent="true"
          style="padding-top: 20%"
        >
          <div
            class="col-md-6 ftco-animate text-center"
            data-scrollax=" properties: { translateY: '70%' }"
          >
            <p
              class="breadcrumbs"
              data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"
            >
              <span class="mr-2"><a href="index.html">Home</a></span
              ><span>Gallery</span>
            </p>
            <h1
              class="mb-3 bread"
              data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"
            >
              Gallery
            </h1>
            <p
              style="margin-top: 3rem"
              data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"
            >
              <a
                href="#gallerystart"
                class="btn btn-primary btn-outline-white px-5 py-3"
                >See More↓</a
              >
            </p>
          </div>
        </div>
      </div>
    </div>

    <section style="padding: 1em 0" class="ftco-section bg-light" id="gallerystart">
      <div class="row justify-content-center mb-5 pb-5">
        <div class="col-md-7 text-center heading-section ftco-animate">
          <br /><br /><br /><br /><br /><br />
          <span class="subheading">Our Glorious Galleria</span>
          <h2 class="mb-4">IAS Mentorship Seminar</h2>
        </div>
      </div>
      <section id="gallery">
        <div class="container">
          <div id="image-gallery">
            <div class="row">
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/1.jpeg"
                    ><img src="images/gallery/1.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/2.jpeg"
                    ><img src="images/gallery/2.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/3.jpeg"
                    ><img src="images/gallery/3.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/4.jpeg"
                    ><img src="images/gallery/4.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/5.jpeg"
                    ><img src="images/gallery/5.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/6.jpeg"
                    ><img src="images/gallery/6.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/7.jpeg"
                    ><img src="images/gallery/7.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/9.jpeg"
                    ><img src="images/gallery/9.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/11.jpeg"
                    ><img src="images/gallery/11.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/12.jpeg"
                    ><img src="images/gallery/12.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/13.jpeg"
                    ><img src="images/gallery/13.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/14.jpeg"
                    ><img src="images/gallery/14.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
            <!-- End row -->
          </div>
          <!-- End image gallery -->
        </div>
        <!-- End container -->
      </section>
      <div class="row justify-content-center mb-5 pb-5">
        <div class="col-md-7 text-center heading-section ftco-animate">
          <br/><br/><br/><br/>
          <h2 class="mb-4">Titans of Situation</h2>
        </div>
      </div>
      <section id="gallery">
        <div class="container">
          <div id="image-gallery">
            <div class="row">
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/27.jpeg"
                    ><img src="images/gallery/27.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/28.jpeg"
                    ><img src="images/gallery/28.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/29.jpeg"
                    ><img src="images/gallery/29.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/30.jpeg"
                    ><img src="images/gallery/30.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/32.jpeg"
                    ><img src="images/gallery/32.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/26.jpeg"
                    ><img src="images/gallery/26.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/21.jpeg"
                    ><img src="images/gallery/21.jpeg" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image">
                <div class="img-wrapper">
                  <a href="images/gallery/53.JPG"
                    ><img src="images/gallery/53.JPG" class="img-responsive"
                  /></a>
                  <div class="img-overlay">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                  </div>
                </div>
              </div>
            </div>
            <!-- End row -->
          </div>
          <!-- End image gallery -->
        </div>
        <!-- End container -->
      </section>
    </section>

    <footer class="footer-section">
      <div class="container">
        <div class="footer-cta pt-5 pb-5">
          <div class="row">
            <div class="col-xl-4 col-md-4 mb-30">
              <div class="single-cta">
                <i class="fas fa-map-marker-alt"></i>
                <div class="cta-text">
                  <h4>Find us</h4>
                  <span
                    >Techno Main Salt Lake, <br />EM‐4/1, Sector‐V, Salt Lake,
                    <br />Kolkata : 700 091</span
                  >
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-md-4 mb-30">
              <div class="single-cta">
                <i class="fas fa-phone"></i>
                <div class="cta-text">
                  <h4>Call us</h4>
                  <span>+91 9330083219</span>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-md-4 mb-30">
              <div class="single-cta">
                <i class="far fa-envelope-open"></i>
                <div class="cta-text">
                  <h4>Mail us</h4>
                  <span
                    ><a href="mailto:samarth.tmsl.css@gmail.com" target="_blank"
                      >samarth.tmsl.css@gmail.com</a
                    ></span
                  ><br />
                  <h4>For Sponsorship, Reach out to</h4>
                  <span
                    ><a
                      href="mailto:business.samarth.tmsl@gmail.com"
                      target="_blank"
                      >business.samarth.tmsl@gmail.com</a
                    ></span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer-content pt-5 pb-5">
          <div class="row">
            <div class="col-xl-4 col-lg-4 mb-50">
              <div class="footer-widget">
                <div class="footer-logo">
                  <a href="index.html"
                    ><img
                      src="images/SamarthWhite.png"
                      class="img-fluid"
                      alt="logo"
                  /></a>
                </div>
                <div class="footer-social-icon">
                  <span>Follow us</span>
                  <a
                    href="https://m.facebook.com/SamarthTMSL?fref=nf&refid=52&__tn__=%7E-R"
                    target="blank"
                    ><i class="fa-brands fa-facebook-f"></i
                  ></a>
                  <a href="https://twitter.com/SamarthTmsl" target="blank"
                    ><i class="fa-brands fa-twitter"></i
                  ></a>
                  <a
                    href="https://www.instagram.com/samarth_tmsl_official/"
                    target="blank"
                    ><i class="fa-brands fa-instagram"></i
                  ></a>
                </div>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 mb-30">
              <div class="footer-widget">
                <div class="footer-widget-heading">
                  <h3>Useful Links</h3>
                </div>
                <ul>
                  <li><a href="index.html">Home</a></li>
                  <li><a href="#about" class="link">About</a></li>
                  <li><a href="events.html">Events</a></li>
                  <li><a href="team.html">Our Team</a></li>
                  <li><a href="#work">Works</a></li>
                  <li><a href="resource.html">Resources</a></li>
                  <li><a href="sponsor.html">Sponsors</a></li>
                  <li><a href="contact.html">Contact us</a></li>
                </ul>
              </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-6 mb-50">
              <div class="footer-widget">
                <div class="footer-widget-heading">
                  <h3>Subscribe</h3>
                </div>
                <div class="footer-text mb-25">
                  <p>
                    Don’t miss to subscribe to our new feeds, kindly fill the
                    form below.
                  </p>
                </div>
                <div class="subscribe-form">
                  <form action="#">
                    <input type="text" placeholder="Email Address" />
                    <button id="btnShowMsg" onclick="showMessage()">
                      <i class="fab fa-telegram-plane"></i>
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright-area">
        <div class="container">
          <div class="row">
            <div class="col-xl-6 col-lg-6 text-center text-lg-left">
              <div class="copyright-text">
                <p>Copyright &copy; 2023, All Right Reserved, Team Samarth</p>
              </div>
            </div>
            <div class="col-xl-6 col-lg-6 d-none d-lg-block text-right">
              <div class="footer-menu">
                <ul>
                  <li><a href="index.html">Home</a></li>
                  <li><a href="team.html">Our Team</a></li>
                  <li><a href="#work">Works</a></li>
                  <li><a href="contact.html">Contact us</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-migrate-3.0.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="js/jquery.stellar.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/aos.js"></script>
    <script src="js/jquery.animateNumber.min.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    <script src="js/jquery.timepicker.min.js"></script>
    <script src="js/particles.min.js"></script>
    <script src="js/particle.js"></script>
    <script src="js/scrollax.min.js"></script>
    <script src="js/main.js"></script>
    <!-- New Loader JS -->
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
    <script src="https://codepen.io/_fbrz/pen/KKEJOv/9a3e4ee2ef6dfd479ad33a2c85146fc1.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script id="rendered-js">
      $(document).ready(function () {
        // Fakes the loading setting a timeout
        setTimeout(function () {
          $("body").addClass("loaded");
        }, 3500);
      });
      //# sourceURL=pen.js
    </script>
    <script>
      // Gallery image hover
      $(".img-wrapper").hover(
        function () {
          $(this).find(".img-overlay").animate({ opacity: 1 }, 300);
        },
        function () {
          $(this).find(".img-overlay").animate({ opacity: 0 }, 300);
        }
      );

      // Lightbox
      var $overlay = $('<div id="overlay"></div>');
      var $image = $("<img>");
      var $prevButton = $(
        '<div id="prevButton"><i class="fa fa-chevron-left"></i></div>'
      );
      var $nextButton = $(
        '<div id="nextButton"><i class="fa fa-chevron-right"></i></div>'
      );
      var $exitButton = $(
        '<div id="exitButton"><i class="fa fa-times"></i></div>'
      );

      // Add overlay
      $overlay
        .append($image)
        .prepend($prevButton)
        .append($nextButton)
        .append($exitButton);
      $("#gallery").append($overlay);

      // Hide overlay on default
      $overlay.hide();

      // When an image is clicked
      $(".img-overlay").click(function (event) {
        // Prevents default behavior
        event.preventDefault();
        // Adds href attribute to variable
        var imageLocation = $(this).prev().attr("href");
        // Add the image src to $image
        $image.attr("src", imageLocation);
        // Fade in the overlay
        $overlay.fadeIn("fast");
      });

      // When the overlay is clicked
      $overlay.click(function () {
        // Fade out the overlay
        $(this).fadeOut("fast");
      });

      // When next button is clicked
      $nextButton.click(function (event) {
        // Hide the current image
        $("#overlay img").hide();
        // Overlay image location
        var $currentImgSrc = $("#overlay img").attr("src");
        // Image with matching location of the overlay image
        var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
        // Finds the next image
        var $nextImg = $($currentImg.closest(".image").next().find("img"));
        // All of the images in the gallery
        var $images = $("#image-gallery img");
        // If there is a next image
        if ($nextImg.length > 0) {
          // Fade in the next image
          $("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(300);
        } else {
          // Otherwise fade in the first image
          $("#overlay img").attr("src", $($images[0]).attr("src")).fadeIn(300);
        }
        // Prevents overlay from being hidden
        event.stopPropagation();
      });

      // When previous button is clicked
      $prevButton.click(function (event) {
        // Hide the current image
        $("#overlay img").hide();
        // Overlay image location
        var $currentImgSrc = $("#overlay img").attr("src");
        // Image with matching location of the overlay image
        var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
        // Finds the next image
        var $nextImg = $($currentImg.closest(".image").prev().find("img"));
        // Fade in the next image
        $("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(300);
        // Prevents overlay from being hidden
        event.stopPropagation();
      });

      // When the exit button is clicked
      $exitButton.click(function () {
        // Fade out the overlay
        $("#overlay").fadeOut("fast");
      });
    </script>
    <!--New Loader JS-->
  </body>
</html>