GetInvolved.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Get Involved</title>
    <link rel="stylesheet" href="style.css" />
    <script src="validation.js"></script>
    <style>
      .form-container {
        max-width: 500px;
        margin: 20px auto;
        background: #ffffff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
      }

      .form-container h2 {
        text-align: center;
        color: #331900;
      }

      .input-group {
        margin-bottom: 15px;
      }

      .input-group label {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
        color: #331900;
      }

      .input-group input {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        transition: 0.3s;
      }

      .input-group input:focus {
        border-color: #5aaf00;
        outline: none;
        box-shadow: 0px 0px 5px rgba(90, 175, 0, 0.5);
      }

      .submit-btn {
        text-align: center;
      }

      .submit-btn input {
        background-color: #5aaf00;
        color: white;
        font-size: 18px;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
      }

      .submit-btn input:hover {
        background-color: #469000;
        box-shadow: 0px 0px 10px rgba(90, 175, 0, 0.7);
      }

      @media (max-width: 600px) {
        .form-container {
          width: 90%;
        }
      }
    </style>
  </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>

      <h2>GET INVOLVED</h2>
      <hr />

      <ul>
        <li>
          <div id="Para1">Volunteers:</div>
          <p>Join our dedicated team to support our initiatives.</p>
        </li>
        <br />
        <li>
          <div id="Para1">Donate:</div>
          <p>Your contributions directly fund our campaigns—every bit helps!</p>
          <a href="donate.html" target="_blank">
            <button>Donate Now</button>
          </a>
        </li>
        <br />
        <li>
          <div id="Para1">Partner with Us:</div>
          <p>Collaborate on impactful projects that align with our mission.</p>
        </li>
      </ul>

      <hr />

      <div class="form-container">
        <h2>Volunteer Your Time</h2>
        <form
          name="volunteerForm"
          method="get"
          onsubmit="return validateVolunteerForm()"
        >
          <div class="input-group">
            <label for="name">Full Name:</label>
            <input
              type="text"
              id="name"
              name="name"
              placeholder="Enter your name"
            />
          </div>

          <div class="input-group">
            <label for="phone">Phone Number:</label>
            <input
              type="tel"
              id="phone"
              name="phone"
              placeholder="e.g. 012-3456789"
            />
          </div>

          <div class="input-group">
            <label for="email">Email Address:</label>
            <input
              type="email"
              id="email"
              name="email"
              placeholder="e.g. yourname@example.com"
            />
          </div>

          <div class="input-group">
            <label for="area">Area You Can Volunteer In:</label>
            <input
              type="text"
              id="area"
              name="area"
              placeholder="E.g. Kuala Lumpur, Penang"
            />
          </div>

          <div class="input-group">
            <label for="availability"
              >Availability (Weekends/Weekdays & Time):</label
            >
            <input
              type="text"
              id="availability"
              name="availability"
              placeholder="E.g. Saturdays, 2PM-6PM"
            />
          </div>

          <div class="submit-btn">
            <input type="submit" value="Volunteer Now" />
          </div>
        </form>
      </div>

      <br />

    <br /><br />
    <footer>
      <h3>ChrFnd © 2025 All Right Reserved</h3>
    </footer>

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