Dark-Themed Professional Login Page Clone Inspired by Creatica (HTML & CSS)

Dark-Themed Professional Login Page Clone Inspired by Creatica (HTML & CSS) 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

7/1/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<!-- 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>Dark-Themed Professional Login Page Clone Inspired by Creatica (HTML & CSS) - SudhuCodes</title>
9    <link rel="stylesheet" href="style.css">
10</head>
11
12<body>
13    <div class="container">
14        <div class="form-container">
15            <div class="logo-container">
16                <a href="/">
17                    <svg width="86" height="67" viewBox="0 0 86 67" fill="none" xmlns="http://www.w3.org/2000/svg">
18                        <g clip-path="url(#a)">
19                            <path d="M57.313 1.26v64.176l26.635-32.088z" fill="#00B4D8" />
20                            <path d="M57.312 1.26 30.78 33.347h26.533z" fill="#000" />
21                            <path d="M1.695 33.348 30.78 65.436h26.533L30.78 33.348z" fill="#C5BEFF" />
22                            <path d="m30.78 33.348 26.532 32.088V33.348z" fill="#FF5263" />
23                            <path d="M30.78 1.26 1.695 33.347H30.78L57.313 1.259z" fill="#5A45FF" />
24                            <path
25                                d="M1.695 33.348 30.78 1.259h26.533M1.695 33.348 30.78 65.436h26.533M1.695 33.348H30.78M57.313 1.259 30.78 33.348M57.313 1.259v32.089m0-32.089 26.635 32.089-26.635 32.088m0 0L30.78 33.348m26.533 32.088V33.348m-26.533 0h26.533"
26                                stroke="#000" stroke-width="2" />
27                        </g>
28                        <defs>
29                            <clipPath id="a">
30                                <path fill="#fff" d="M0 0h86v67H0z" />
31                            </clipPath>
32                        </defs>
33                    </svg>
34                </a>
35            </div>
36            <h1>Create new account</h1>
37            <form>
38                <div class="input-group">
39                    <label for="email">Email</label>
40                    <input type="email" id="email" placeholder="name@example.com" autocomplete="email">
41                </div>
42                <div class="input-group">
43                    <label for="password">Password</label>
44                    <input type="password" id="password" placeholder="Password" autocomplete="new-password">
45                </div>
46                <a href="/reset-password" class="forgot-password">Forgot Password?</a>
47                <button type="submit">Create account</button>
48            </form>
49            <div class="separator">
50                <span>Or continue with</span>
51            </div>
52            <button type="button" class="social-login">
53                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
54                    <path
55                        d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
56                        fill="currentColor"></path>
57                </svg>
58                Github
59            </button>
60            <button type="button" class="social-login">
61                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="20" height="20">
62                    <path fill="#FFC107"
63                        d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917">
64                    </path>
65                    <path fill="#FF3D00"
66                        d="m6.306 14.691 6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691">
67                    </path>
68                    <path fill="#4CAF50"
69                        d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.9 11.9 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44">
70                    </path>
71                    <path fill="#1976D2"
72                        d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917">
73                    </path>
74                </svg>
75                Google
76            </button>
77            <p>By clicking on sign in, you agree to our <a href="/terms-and-conditions">Terms of Service</a> and <a
78                    href="/privacy-policy">Privacy Policy</a>.</p>
79        </div>
80    </div>
81
82</body>
83
84</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.