Light-Themed Login Page with User Profile Display (HTML & CSS)

Light-Themed Login Page with User Profile Display (HTML & CSS) Project by SudhuCodes Made with HTML & CSS Language

@SudhuCodes

Category - HTML & CSS

Uploaded At - 6/9/2025

1<!DOCTYPE html>
2<!-- Coding By SudhuCodes - www.sudhucodes.com -->
3<html lang="en">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Login Page Example - SudhuCodes</title>
9    <link rel="stylesheet" href="style.css">
10</head>
11
12<body>
13    <div class="login-container">
14        <div class="profile-section">
15            <img src="images/profile.png" alt="Profile Icon">
16            <h2>Welcome Back</h2>
17        </div>
18        <div class="form-fields">
19            <div class="input-group">
20                <img src="images/user.png" alt="User Icon">
21                <div class="input-wrapper">
22                    <input type="text" placeholder="Username">
23                </div>
24            </div>
25            <div class="input-group">
26                <img src="images/key.png" alt="Key Icon">
27                <div class="input-wrapper">
28                    <input type="password" id="password" placeholder="Password">
29                    <span id="togglePassword" class="password-toggle">
30                        <img src="images/show.png" alt="View Icon" id="viewIcon">
31                        <img src="images/hide.png" alt="Hide Icon" id="hideIcon" style="display:none;">
32                    </span>
33                </div>
34            </div>
35            <div class="forgot-password">
36                <a href="#">Forgot password?</a>
37            </div>
38            <div class="account-prompt">
39                <p>Already have an account? <a href="#">Sign In</a></p>
40            </div>
41        </div>
42    </div>
43
44    <script src="script.js"></script>
45</body>
46
47</html>