Skip to content

Commit abc8b2e

Browse files
author
devunlok
committed
A beautiful login page ui
1 parent b591985 commit abc8b2e

File tree

4 files changed

+397
-0
lines changed

4 files changed

+397
-0
lines changed

‎AuthPage/README.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Basic Contact Form
2+
3+
A Basic Contact Form written in **HTML**, **CSS**, and **JavaScript**.
4+
5+
### Use of the Project:
6+
7+
This basic contact form can be added to any website to make it more interactive and attractive.
8+
9+
### Used Technologies:
10+
11+
- HTML5
12+
- CSS3
13+
- JavaScript
14+
15+
### Steps to Use:
16+
17+
- Download or clone the repository:
18+
19+
```bash
20+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
21+
```
22+
23+
- Go to the directory
24+
- Run the index.html file
25+
- Result is here!!!
26+
27+
- Go to the directory
28+
- Run the index.html file
29+
- Result is here!!!
30+
31+
## Screenshot
32+
33+
<img src="https://github.com/xshshahab/LoginPage/blob/main/images/Auth.png" alt="Screenshot" style="max-width:100%;">
34+
35+
## Live Preview
36+
37+
<a target="_blank" href="https://xshshahab.github.io/LoginPage/">Click Here!!</a>
38+
39+
## Connect with Me
40+
41+
[![GitHub](https://img.shields.io/badge/GitHub-%2312100E.svg?style=for-the-badge&logo=github&logoColor=white)](https://github.com/xshshahab)
42+
[![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mdshahbuddin82/)
43+
[![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/xsh_shahab)
44+
45+
Feel free to reach out and connect with me!
46+
47+
## Thank You!
48+
49+
Thank you for visiting my profile! I truly appreciate your time and interest in my work. Let's stay connected and keep building great things together! 🚀

‎AuthPage/images/Auth.png

25 KB
Loading

‎AuthPage/index.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Unlok Dev | Login Page</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<nav class="navbar">
11+
<h2 class="logo">UNLOK DEV</h2>
12+
<a
13+
href="https://github.com/devunlok/unlokdev"
14+
class="custom-btn"
15+
target="_blank"
16+
rel="noopener noreferrer"
17+
>
18+
<img
19+
width="15"
20+
src="https://img.icons8.com/ios-filled/50/ffffff/star--v1.png"
21+
alt="White Star Icon"
22+
/>
23+
<p>Star</p>
24+
</a>
25+
</nav>
26+
27+
<div class="container">
28+
<!-- Centered login form -->
29+
<div class="login-container">
30+
<h2>Welcome Back!</h2>
31+
<form>
32+
<label for="username">Username</label>
33+
<input
34+
type="text"
35+
id="username"
36+
placeholder="Enter your username"
37+
required
38+
/>
39+
40+
<label for="password">Password</label>
41+
<input
42+
type="password"
43+
id="password"
44+
placeholder="Enter your password"
45+
required
46+
/>
47+
48+
<button type="submit">Login</button>
49+
</form>
50+
51+
<!-- Divider with 'OR' text -->
52+
<div class="or-divider">
53+
<span>or</span>
54+
</div>
55+
56+
<!-- Social login buttons side by side -->
57+
<div class="social-login">
58+
<div class="social-btn google-btn">
59+
<img
60+
src="https://img.icons8.com/color/24/000000/google-logo.png"
61+
alt="Google Logo"
62+
/>
63+
Google
64+
</div>
65+
<div class="social-btn github-btn">
66+
<img
67+
src="https://img.icons8.com/ios-glyphs/30/ffffff/github.png"
68+
alt="GitHub Logo"
69+
/>
70+
GitHub
71+
</div>
72+
</div>
73+
74+
<!-- Signup link -->
75+
<div class="signup-text">
76+
<p>Don't have an account? <a href="#">Sign up</a></p>
77+
</div>
78+
</div>
79+
</div>
80+
<footer class="footer">
81+
<p>
82+
Made by
83+
<a
84+
href="https://github.com/xshshahab"
85+
target="_blank"
86+
rel="noopener noreferrer"
87+
>
88+
@xshshahab
89+
</a>
90+
</p>
91+
</footer>
92+
</body>
93+
</html>

‎AuthPage/style.css

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
/* Resetting and basic styles */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: Arial, sans-serif;
10+
background-color: #fafafa;
11+
color: #333;
12+
height: 100vh;
13+
display: flex;
14+
flex-direction: column;
15+
}
16+
17+
/* Navbar styling */
18+
.navbar {
19+
width: 100%;
20+
display: flex;
21+
justify-content: space-between;
22+
align-items: center;
23+
background-color: #fff;
24+
padding: 10px 50px;
25+
border-bottom: 2px solid #eaeaea;
26+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
27+
position: fixed;
28+
top: 0;
29+
left: 0;
30+
right: 0;
31+
}
32+
33+
.navbar p {
34+
font-size: 15px;
35+
font-weight: 500;
36+
}
37+
38+
.logo {
39+
font-size: 24px;
40+
font-weight: bold;
41+
color: #333;
42+
}
43+
44+
.custom-btn {
45+
display: inline-flex;
46+
align-items: center;
47+
background-color: #1a1a1a;
48+
color: #e5e5e5;
49+
padding: 8px 12px;
50+
border-radius: 8px;
51+
border: none;
52+
cursor: pointer;
53+
font-weight: 500;
54+
transition: background-color 0.3s ease;
55+
text-decoration: none;
56+
}
57+
58+
.custom-btn:hover {
59+
background-color: #333;
60+
}
61+
62+
.custom-btn img {
63+
margin-right: 8px;
64+
}
65+
66+
/* Login form styling */
67+
.container {
68+
flex-grow: 1;
69+
display: flex;
70+
justify-content: center;
71+
align-items: center;
72+
padding-top: 100px; /* Ensures space from the fixed navbar */
73+
}
74+
75+
.login-container {
76+
width: 100%;
77+
max-width: 380px;
78+
background-color: #fff;
79+
padding: 30px;
80+
border-radius: 8px;
81+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
82+
text-align: center;
83+
}
84+
85+
.login-container h2 {
86+
font-size: 28px;
87+
margin-bottom: 20px;
88+
}
89+
90+
.login-container form {
91+
display: flex;
92+
flex-direction: column;
93+
margin-bottom: 20px;
94+
}
95+
96+
.login-container label {
97+
text-align: left;
98+
margin-bottom: 5px;
99+
font-weight: 500;
100+
color: #1a1a1a;
101+
}
102+
103+
.login-container input {
104+
padding: 10px;
105+
margin-bottom: 15px;
106+
border-radius: 4px;
107+
border: 1px solid #ccc;
108+
font-size: 14px;
109+
}
110+
111+
.login-container input:focus {
112+
outline: none;
113+
border-color: #1a1a1a;
114+
}
115+
116+
.login-container button {
117+
padding: 10px;
118+
background-color: #1a1a1a;
119+
color: white;
120+
border: none;
121+
border-radius: 4px;
122+
cursor: pointer;
123+
font-size: 16px;
124+
}
125+
126+
.login-container button:hover {
127+
background-color: #333;
128+
}
129+
130+
/* OR Divider */
131+
.or-divider {
132+
display: flex;
133+
align-items: center;
134+
justify-content: center;
135+
margin: 12px 0;
136+
}
137+
138+
.or-divider span {
139+
background-color: #fff;
140+
padding: 0 10px;
141+
}
142+
143+
.or-divider::before,
144+
.or-divider::after {
145+
content: "";
146+
flex: 1;
147+
height: 1px;
148+
background-color: #ccc;
149+
}
150+
151+
/* Social login buttons - Google and GitHub */
152+
.social-login {
153+
display: flex;
154+
justify-content: space-between;
155+
margin-top: 20px;
156+
}
157+
158+
.social-login .social-btn {
159+
display: flex;
160+
align-items: center;
161+
justify-content: center;
162+
width: 48%;
163+
padding: 10px;
164+
border-radius: 4px;
165+
cursor: pointer;
166+
font-size: 16px;
167+
font-weight: bold;
168+
transition: transform 0.3s ease, box-shadow 0.3s ease;
169+
}
170+
171+
.social-login .social-btn:hover {
172+
transform: translateY(-3px);
173+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
174+
}
175+
176+
.google-btn {
177+
background-color: #fff;
178+
border: 1px solid #ccc;
179+
}
180+
181+
.github-btn {
182+
background-color: #333;
183+
color: white;
184+
}
185+
186+
.social-login img {
187+
margin-right: 10px;
188+
}
189+
190+
.signup-text {
191+
margin-top: 20px;
192+
font-size: 14px;
193+
}
194+
195+
.signup-text a {
196+
color: #1a1a1a;
197+
text-decoration: none;
198+
font-weight: bold;
199+
}
200+
201+
.signup-text a:hover {
202+
text-decoration: underline;
203+
}
204+
205+
/* Responsive Design */
206+
@media (max-width: 768px) {
207+
.navbar {
208+
flex-direction: row;
209+
align-items: center;
210+
padding: 10px 30px;
211+
}
212+
213+
.login-container {
214+
width: 90%;
215+
}
216+
217+
.social-login {
218+
flex-direction: column;
219+
gap: 10px;
220+
}
221+
222+
.social-login .social-btn {
223+
width: 100%;
224+
}
225+
}
226+
227+
/* Footer styling */
228+
.footer {
229+
background-color: #fafafa;
230+
color: #151515;
231+
text-align: center;
232+
padding: 10px;
233+
margin-top: 10px;
234+
position: relative;
235+
bottom: 0;
236+
width: 100%;
237+
}
238+
239+
.footer p {
240+
font-size: 14px;
241+
font-weight: 600;
242+
margin: 0;
243+
}
244+
245+
.footer a {
246+
color: #1a1919;
247+
text-decoration: none;
248+
font-weight: bold;
249+
transition: color 0.3s ease;
250+
}
251+
252+
.footer a:hover {
253+
color: #0b0b0b;
254+
text-decoration: underline;
255+
}

0 commit comments

Comments
 (0)