Sleek Modern Login Page with Social Media Authentication

Sleek Modern Login Page with Social Media Authentication Project by SudhuCodes Made with HTML & CSS Language

Project Creator

@SudhuCodes — A project contributor on SudhuCodes platform.

Category

HTML & CSS — This project belongs to the html & css category.

Upload Date

4/22/2025 — Uploaded to the SudhuCodes project library.

Project Description

Download free project assets built using html & css. This open-source project is part of the SudhuCodes initiative to support developers and learners.

1<!DOCTYPE html>
2<!-- --------Code with SudhuCodes----------- -->
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>Sleek Modern Login Page with Social Media Authentication | SudhuCodes</title>
9    <link rel="stylesheet" href="style.css" />
10</head>
11
12<body>
13    <div class="login_form">
14        <form action="#">
15            <h3>Log in with</h3>
16
17            <div class="login_option">
18                <div class="option">
19                    <a href="#">
20                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" width="25" height="25">
21                            <path fill="#fbc02d" d="M22.714 10.46h-.839v-.043H12.5v4.167h5.887A6.248 6.248 0 0 1 6.25 12.501a6.25 6.25 0 0 1 6.25-6.25c1.593 0 3.043.601 4.146 1.583l2.946-2.946A10.36 10.36 0 0 0 12.5 2.083C6.747 2.083 2.083 6.747 2.083 12.5S6.747 22.917 12.5 22.917 22.917 18.253 22.917 12.5c0-.698-.072-1.38-.203-2.04"/>
22                            <path fill="#e53935" d="m3.284 7.652 3.422 2.51A6.25 6.25 0 0 1 12.5 6.25c1.593 0 3.043.601 4.146 1.583l2.946-2.946A10.37 10.37 0 0 0 12.5 2.083a10.41 10.41 0 0 0-9.216 5.569"/>
23                            <path fill="#4caf50" d="M12.5 22.917a10.37 10.37 0 0 0 6.984-2.704l-3.224-2.728a6.2 6.2 0 0 1-3.76 1.265 6.25 6.25 0 0 1-5.877-4.139l-3.397 2.617c1.725 3.374 5.226 5.689 9.274 5.689"/>
24                            <path fill="#1565c0" d="m22.714 10.46-.008-.043H12.5v4.167h5.887a6.27 6.27 0 0 1-2.129 2.902l.002-.001 3.224 2.728c-.228.206 3.433-2.505 3.433-7.713 0-.698-.072-1.38-.203-2.04"/>
25                        </svg>
26                        <span>Google</span>
27                    </a>
28                </div>
29
30                <div class="option">
31                    <a href="#">
32                        <svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.847 2.847" xml:space="preserve">
33                            <path d="M1.971 0h0.02c0.016 0.201 -0.06 0.351 -0.153 0.459 -0.091 0.108 -0.216 0.212 -0.419 0.197 -0.013 -0.198 0.063 -0.337 0.156 -0.445C1.661 0.11 1.82 0.02 1.971 0m0.613 2.09v0.006c-0.057 0.172 -0.138 0.32 -0.237 0.457 -0.09 0.124 -0.201 0.292 -0.399 0.292 -0.171 0 -0.284 -0.11 -0.46 -0.113 -0.185 -0.003 -0.287 0.092 -0.457 0.116h-0.058c-0.124 -0.018 -0.225 -0.117 -0.298 -0.205 -0.216 -0.262 -0.382 -0.601 -0.413 -1.034v-0.127c0.013 -0.31 0.164 -0.563 0.364 -0.685 0.106 -0.065 0.251 -0.12 0.413 -0.096 0.069 0.011 0.14 0.035 0.202 0.058 0.059 0.023 0.133 0.063 0.202 0.061 0.047 -0.001 0.094 -0.026 0.142 -0.043 0.14 -0.05 0.276 -0.108 0.457 -0.081 0.217 0.033 0.37 0.129 0.465 0.278 -0.183 0.117 -0.328 0.292 -0.303 0.593 0.022 0.273 0.18 0.432 0.379 0.526"/>
34                        </svg>
35                        <span>Apple</span>
36                    </a>
37                </div>
38            </div>
39
40            <p class="separator">
41                <span>or</span>
42            </p>
43
44            <div class="input_box">
45                <label for="email">Email</label>
46                <input type="email" id="email" placeholder="Enter email address" required />
47            </div>
48
49            <div class="input_box">
50                <div class="password_title">
51                    <label for="password">Password</label>
52                    <a href="#">Forgot Password?</a>
53                </div>
54
55                <input type="password" id="password" placeholder="Enter your password" required />
56            </div>
57
58            <button type="submit">Log In</button>
59
60            <p class="sign_up">Don't have an account? <a href="#">Sign up</a></p>
61        </form>
62    </div>
63
64</body>
65
66</html>

You're free to use this code for your personal or educational projects. If you use it publicly, consider giving credit to @SudhuCodes.

Want more beginner-friendly and open-source projects like this one? Browse the full library on the SudhuCodes homepage.

Have suggestions or improvements? Contact us or contribute on GitHub.