Skip to content

Commit 03e0123

Browse files
Parth KadukarParth Kadukar
Parth Kadukar
authored and
Parth Kadukar
committed
login/signup page
1 parent d783e7a commit 03e0123

File tree

2 files changed

+149
-0
lines changed

2 files changed

+149
-0
lines changed

‎Login-Signup_page/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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>Login & Signup Portal</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="tabs">
12+
<input type="radio" name="tab" id="login-tab" checked>
13+
<label for="login-tab" class="tab-label">Login</label>
14+
15+
<input type="radio" name="tab" id="signup-tab">
16+
<label for="signup-tab" class="tab-label">Sign Up</label>
17+
18+
<div class="content">
19+
<div class="content-inner" id="login-content">
20+
<h2>Welcome Back</h2>
21+
<form>
22+
<input type="email" placeholder="Email" required>
23+
<input type="password" placeholder="Password" required>
24+
<button type="submit">Login</button>
25+
</form>
26+
</div>
27+
28+
<div class="content-inner" id="signup-content">
29+
<h2>Create Account</h2>
30+
<form>
31+
<input type="text" placeholder="Username" required>
32+
<input type="email" placeholder="Email" required>
33+
<input type="password" placeholder="Password" required>
34+
<button type="submit">Sign Up</button>
35+
</form>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
</body>
41+
</html>

‎Login-Signup_page/styles.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "Poppins", sans-serif;
6+
}
7+
8+
body {
9+
background: linear-gradient(135deg, #0a0a0a, #1f1f1f);
10+
color: #fff;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
height: 100vh;
15+
}
16+
17+
.container {
18+
background: rgba(255, 255, 255, 0.05);
19+
padding: 30px;
20+
border-radius: 20px;
21+
box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
22+
width: 340px;
23+
text-align: center;
24+
backdrop-filter: blur(10px);
25+
}
26+
27+
.tabs {
28+
position: relative;
29+
}
30+
31+
.tab-label {
32+
display: inline-block;
33+
width: 50%;
34+
padding: 10px;
35+
cursor: pointer;
36+
font-weight: bold;
37+
color: #ccc;
38+
background: transparent;
39+
border-bottom: 2px solid transparent;
40+
transition: 0.3s;
41+
}
42+
43+
input[type="radio"] {
44+
display: none;
45+
}
46+
47+
#login-tab:checked + .tab-label {
48+
color: #00eaff;
49+
border-bottom: 2px solid #00eaff;
50+
}
51+
52+
#signup-tab:checked + .tab-label {
53+
color: #00eaff;
54+
border-bottom: 2px solid #00eaff;
55+
}
56+
57+
.content {
58+
position: relative;
59+
overflow: hidden;
60+
margin-top: 20px;
61+
}
62+
63+
.content-inner {
64+
display: none;
65+
}
66+
67+
#login-tab:checked ~ .content #login-content {
68+
display: block;
69+
}
70+
71+
#signup-tab:checked ~ .content #signup-content {
72+
display: block;
73+
}
74+
75+
form {
76+
display: flex;
77+
flex-direction: column;
78+
gap: 15px;
79+
margin-top: 10px;
80+
}
81+
82+
input {
83+
padding: 10px;
84+
border-radius: 8px;
85+
border: none;
86+
outline: none;
87+
background: rgba(255, 255, 255, 0.1);
88+
color: white;
89+
}
90+
91+
input::placeholder {
92+
color: #aaa;
93+
}
94+
95+
button {
96+
padding: 10px;
97+
border-radius: 8px;
98+
border: none;
99+
cursor: pointer;
100+
background: #00eaff;
101+
color: #000;
102+
font-weight: bold;
103+
transition: 0.3s;
104+
}
105+
106+
button:hover {
107+
background: #00bcd4;
108+
}

0 commit comments

Comments
 (0)