index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header id="table">
      <h1 style="color: rgb(255, 255, 255);">CHARITY & FUNDRAISING</h1>
    </header>
    <br />
    <main>
  
      <nav class="navbar">
        <div class="logo">CHARITY & FUNDRAISING</div>
        <div class="hamburger" onclick="toggleMenu()">☰</div>
        <ul class="nav-links" id="navLinks">
          <li><a href="index.html">HOME</a></li>
          <li><a href="aboutUs.html">ABOUT US</a></li>
          <li><a href="Campaign.html">CAMPAIGNS</a></li>
          <li><a href="GetInvolved.html">GET INVOLVED</a></li>
          <li><a href="contactUs.html">CONTACT US</a></li>
        </ul>
      </nav>
      

      <br />
      <!DOCTYPE html>
      <html>
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <style>
            * {
              box-sizing: border-box;
            }
            body {
              font-family: Verdana, sans-serif;
              margin: 0;
            }
            .mySlides {
              display: none;
            }
            img {
              vertical-align: middle;
            }

            .slideshow-container {
              max-width: 1000px;
              position: relative;
              margin: auto;
            }

            .prev,
            .next {
              cursor: pointer;
              position: absolute;
              top: 50%;
              width: auto;
              padding: 16px;
              margin-top: -22px;
              color: white;
              font-weight: bold;
              font-size: 18px;
              transition: 0.6s ease;
              border-radius: 0 3px 3px 0;
              user-select: none;
            }

         
            .next {
              right: 0;
              border-radius: 3px 0 0 3px;
            }

           
            .next:hover {
              background-color: rgba(0, 0, 0, 0.8);
            }


            .text {
              color: #f2f2f2;
              font-size: 15px;
              padding: 8px 12px;
              position: absolute;
              bottom: 8px;
              width: 100%;
              text-align: center;
            }


            .numbertext {
              color: #f2f2f2;
              font-size: 12px;
              padding: 8px 12px;
              position: absolute;
              top: 0;
            }

            .dot {
              cursor: pointer;
              height: 15px;
              width: 15px;
              margin: 0 2px;
              background-color: #bbb;
              border-radius: 50%;
              display: inline-block;
              transition: background-color 0.6s ease;
            }

            .active,
            .dot:hover {
              background-color: #717171;
            }

            .fade {
              animation-name: fade;
              animation-duration: 1.5s;
            }

            @keyframes fade {
              from {
                opacity: 0.4;
              }
              to {
                opacity: 1;
              }
            }

            @media only screen and (max-width: 300px) {
              .prev,
              .next,
              .text {
                font-size: 11px;
              }
            }
          </style>
        </head>
        <body>
          <div class="slideshow-container">
            <div class="mySlides fade">
              <div class="numbertext">1 / 3</div>
              <img src="charity.jpg" style="width: 100%" height="100%" />
            </div>

            <div class="mySlides fade">
              <div class="numbertext">2 / 3</div>
              <img src="fund.jpg" style="width: 100%" height="100%"/>
            </div>

            <div class="mySlides fade">
              <div class="numbertext">3 / 3</div>
              <img src="sympathy.jpg" style="width: 100%" height="100%" />
            </div>

            <a class="prev" onclick="plusSlides(-1)">❮</a>
            <a class="next" onclick="plusSlides(1)">❯</a>
          </div>
          <br />

          <div style="text-align: center">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
          </div>

          <script>
            let slideIndex = 1;
            showSlides(slideIndex);

            function plusSlides(n) {
              showSlides((slideIndex += n));
            }

            function currentSlide(n) {
              showSlides((slideIndex = n));
            }

            function showSlides(n) {
              let i;
              let slides = document.getElementsByClassName("mySlides");
              let dots = document.getElementsByClassName("dot");
              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";
}
</script>
      <hr />
      <p>
        A vision of a world where everyone has access to essential resources
        drives Charity Fundraising. Focused on empowering youth through
        education, providing disaster relief, and advocating for social justice,
        we rely on your support to make this vision a reality. Your donations
        help launch initiatives, assist those in crisis, and strengthen our
        community. Join us in making a meaningful impact—together, we can create
        a better tomorrow for all.
      </p>
    </main>

    <a href="contactUs.html">
      <img
        style="display: block; margin: auto"
        src="join us.jpg"
        alt="Join Us"
        height="150"
      />
    </a>
    <hr />
    <p>
      We are grateful for the support of our donors, volunteers, and partners
      who make our work possible. If you share our passion for creating a better
      world, we invite you to join us. Whether through donations, volunteering,
      or spreading the word, every action makes a difference.
    </p>
    <p>Together, we can build a brighter future for all.</p>
    <p>Thank you for being a part of our journey.</p>
    <p>Charity & Fundraising Team</p>
  </body>
  <br />
  <footer>
    <h3>ChrFnd © 2025 All Right Reserved</h3>
  </footer>

  <script>
    function toggleMenu() {
      const navLinks = document.getElementById("navLinks");
      navLinks.classList.toggle("show");
    }
  </script>
</html>