signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Signup</title>
    <link rel="stylesheet" href="signup_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="signup-container">
        <h2>Signup <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="email" id="email" placeholder="abcd@email.com" required>
            </div>
            <div class="input-field">
                <i class="fa fa-unlock-alt" aria-hidden="true"></i>
                <label>Password</label>
                <input type="text" id="password" placeholder="Password" required>
            </div>
            <i class="fa fa-unlock-alt" aria-hidden="true"></i>
            <label>Confirm Password</label>
            <div class="input-field">
                <input type="password" id="confirmPassword" placeholder="Password" required>
                <span class="show-password" onclick="togglePassword()">&#128065;</span>
            </div>
            
            <p>Already have an account ? <a href="index.html" id="login">Login</a>
            </p>
            <button class="login-btn" type="submit" onclick="login()">Signup</button>
        </form>
        
    </div>

    <script src="signup_script.js"></script>
</body>
</html>