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</title>
    <link rel="stylesheet" href="login_styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="login-container">
        <h2>Login <i class="fa fa-sign-in" aria-hidden="true"></i></h2>
        <form>
            <div class="input-field">
                <i style="font-size:24px" class="fa">&#xf0e0;</i>
                <label>Email</label>
                <input type="text" id="email" placeholder="Email" required>
            </div>
            <i class="fa fa-unlock-alt" aria-hidden="true"></i>
            <label>Password</label>
            <div class="input-field">
                <input type="password" id="password" placeholder="Password" required>
                <span class="show-password" onclick="togglePassword()">&#128065;</span>
            </div>
            <p>New User ? <a href="signup.html" id="signup">SignUp</a>
            <br> <a href="signup.html">Forgot Password</a>
            </p>
            <button class="login-btn" onclick="login()">Login</button>
        </div>
        </form>

    <script src="login_script.js"></script>
</body>
</html>