gallery.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Join Us Foundation
    </title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" type="image/x-icon" href="./logo.png">
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./jquery_effects.js"></script>
</head>

<body>


  <a href="./index.html"><img src="./logo.png" alt="logo" class="toplogo"></a>
    <ul>
        <li><a id="home" style="display: none;" href="./index.html">Home</a></li>
        <li><a id="news" style="display: none;" href="./news.html">News</a></li>
        <li><a id="projects" style="display: none;" href="./projects.html">Our Projects</a></li>
        <li><a id="gallery" style="display: none;" class="active" href="./gallery.html">Gallery</a></li>
        <li><a id="contact" style="display: none;" href="./contact.html">Contact</a></li>
        <li><a id="sign" style="display: none;" href="./sign.html">Sign in</a></li>
      </ul>  
    <div class="container" id="cont">
        <div class="mySlides">
          <div class="numbertext">1 / 6</div>
          <img class="galleryPhoto" src="p1.jpeg" alt="p1" >
        </div>
      
        <div class="mySlides">
          <div class="numbertext">2 / 6</div>
          <img class="galleryPhoto" src="work.jpg" alt="work" >
        </div>
      
        <div class="mySlides">
          <div class="numbertext">3 / 6</div>
          <img class="galleryPhoto" src="kids.jpg" alt="kids">
        </div>
          
        <div class="mySlides">
          <div class="numbertext">4 / 6</div>
          <img class="galleryPhoto" src="prod.jpg" alt="prod">
        </div>
      
        <div class="mySlides">
          <div class="numbertext">5 / 6</div>
          <img class="galleryPhoto" src="graph.jpg" alt="graph" >
        </div>
          
        <div class="mySlides">
          <div class="numbertext">6 / 6</div>
          <img class="galleryPhoto" src="mans.jpg" alt="mans">
        </div>
          
        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>
      
        <div class="caption-container">
          <p id="caption"></p>
        </div>
      
        <div class="row">
          <div class="column">
            <img class="demo cursor" src="p1.jpeg" style="width:100%" onclick="currentSlide(1)" alt="Hands">
          </div>
          <div class="column">
            <img class="demo cursor" src="work.jpg" style="width:100%" onclick="currentSlide(2)" alt="Workplace">
          </div>
          <div class="column">
            <img class="demo cursor" src="kids.jpg" style="width:100%" onclick="currentSlide(3)" alt="Kids">
          </div>
          <div class="column">
            <img class="demo cursor" src="prod.jpg" style="width:100%" onclick="currentSlide(4)" alt="Productivity">
          </div>
          <div class="column">
            <img class="demo cursor" src="graph.jpg" style="width:100%" onclick="currentSlide(5)" alt="Enhancement">
          </div>    
          <div class="column">
            <img class="demo cursor" src="mans.jpg" style="width:100%" onclick="currentSlide(6)" alt="Working">
          </div>
        </div>
      </div>
      
      <script>
        
      var slideIndex = 1;
      showSlides(slideIndex);
      
      function plusSlides(n) {
        showSlides(slideIndex += n);
      }
      
      function currentSlide(n) {
        showSlides(slideIndex = n);
      }
      
      function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
        captionText.innerHTML = dots[slideIndex-1].alt;
      }
      </script>
      <div class="footer">
        <p style="font-size: small;" >2021 Join Us Foundation <br> All Rights Reserved©</p>
        <p></p>
      </div>
</body>

</html>