index.html

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>RHU SIS</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="
        https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
</head>

<body id="loginBody">


    <div id="loginHeader">
        <nav id="loginNav">
            <img src="images/logo.png" alt="RHU LOGO" draggable="falseb">
            <div id="loginSocials">
                <a href="https://www.linkedin.com/school/rafik-hariri-university/" target="_blank"><img
                        src="images/linkedin.png" alt="Linkedin"></a>
                <a href="https://www.instagram.com/rhu.lebanon/" target="_blank"><img src="images/instagram.png"
                        alt="Instagram"></a>
            </div>
        </nav>
    </div>

    <div class="loginDesign">
        <div id="loginDesignHeader">
            <h1>Login</h1>
        </div>
        <form>
            <p id="text" style="display: none;">Caps lock is on!</p>
            <div class="txt_field">
                <input type="text" required id="txtLoginUsername" onkeypress="handle(event)">
                <span></span>
                <label>Username</label>
            </div>
            <div class="txt_field">
                <input type="password" required id="txtLoginPassword">
                <span></span>
                <label>Password</label>
            </div>
            <div class="loginForgotPassword" onclick="myFunction()">Forgot Password?</div>
            <input id="btnLogin" type="button" value="Login">
        </form>
        <script src="main.js"></script>
        <script>
            function myFunction() {
                alert('Well too bad! :P')
            }
            </script>
    </div>

</body>

</html>