index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Page</title>
  <link rel="stylesheet" href="stylesheet.css">
  <script src="JS_file.js"></script>
</head>
<body>
  <div class="bg-image"></div>
  <div class="login-box">
    <h2>Login</h2>
    <form id="login-form">
      <input type="text" id="full name" placeholder="Full Name" required>
      <input type="password" id="password" placeholder="Password" required>
      <div class="dropdown-container">
        <label for = "Roles"> List of Roles: </label>
        <select name = "Role" id = "Roles">
          <option value = "Participant">Participant</option>
          <option value = "Organizer">Organizer</option>
          <option value = "Volunteer">Volunteer</option>
        </select>
        </div>
     <!--<button type="submit" href="Login.html"> Login </button> -->
     <button type="submit" onclick="window.location.href = 'Login.html' ">Login</button>

    </form>
    <p id="message"></p>
    <a href="options.php">Register</a>
    
  </div>

  
</body>
</html>