index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Metadata -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Title of the page -->
    <title>Login Form with HTML and CSS | @sauravxcode </title>
    
    <!-- External CSS file for styling -->
    <link rel="stylesheet" href="assets/css/styles.css">
    
    <!-- External library for icons -->
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>    
    <!-- Container for the login form -->
    <div class="container-box">
        <!-- Form for user input -->
        <form id="LoginForm" action="">
            <h1>Login</h1>

            <!-- Input box for username -->
            <div class="input-box">
                <input type="text" placeholder="Username" required>
                <i class='bx bxs-user'></i>
            </div>

            <!-- Input box for password -->
            <div class="input-box">
                <input type="password" placeholder="Password" required>
                <i class='bx bxs-lock-alt'></i>
            </div>

            <!-- Section for "Remember me" checkbox and "Forgot Password" link -->
            <div class="remember-forgot">
                <label><input type="checkbox"> Remember me </label>
                <a href="https://github.com/sauravxcode/beautiful-glass-login-form">Forgot Password?</a>
            </div>

            <!-- Button for form submission -->
            <button type="submit" class="btn">Login</button>

            <div class="register-link">
                <p>Don't have an acccount? 
                    <a href="https://github.com/sauravxcode/beautiful-glass-login-form">Register</a>
                </p>
            </div>
        </form>
    </div>
</body>
</html>