Skip to content

Commit dbb7d9e

Browse files
rohitmane01rohitmane01
committed
Added SignUp page with floating Inputs and Error Msg feedBack
1 parent 0229ffb commit dbb7d9e

File tree

3 files changed

+253
-0
lines changed

3 files changed

+253
-0
lines changed

‎floating Label/floating Label SignUppage/FLSignUp.css‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
:root {
2+
--bg: #f7f8fb;
3+
--surface: #fff;
4+
--text: #afb9c4;
5+
--muted: #6b7280;
6+
--accent: #2563eb;
7+
--danger: #dc2626;
8+
--success: #16a34a;
9+
--radius: 8px;
10+
--transition: 0.28s cubic-bezier(.2, .9, .2, 1);
11+
--label-scale: 0.78;
12+
}
13+
14+
/* Layout */
15+
body {
16+
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
17+
background: var(--bg);
18+
color: var(--text);
19+
margin: 0;
20+
padding: 2rem;
21+
display: flex;
22+
justify-content: center;
23+
}
24+
25+
.demo-page {
26+
background: var(--surface);
27+
padding: 2rem;
28+
border-radius: 12px;
29+
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
30+
max-width: 400px;
31+
width: 100%;
32+
}
33+
34+
h1 {
35+
font-size: 1.25rem;
36+
margin-bottom: 1.5rem;
37+
text-align: center;
38+
}
39+
40+
/* Form */
41+
.form {
42+
display: flex;
43+
flex-direction: column;
44+
gap: 1.5rem;
45+
}
46+
47+
/* Input Group */
48+
.input-group {
49+
position: relative;
50+
display: flex;
51+
flex-direction: column;
52+
}
53+
54+
/* Input */
55+
.input-group input {
56+
color : white;
57+
font-size: 16px;
58+
padding: 14px 12px 6px;
59+
border: 1px solid #ccc;
60+
border-radius: var(--radius);
61+
background: transparent;
62+
outline: none;
63+
transition: border-color var(--transition), box-shadow var(--transition);
64+
}
65+
66+
/* Hide placeholder text */
67+
.input-group input::placeholder {
68+
color: transparent;
69+
}
70+
71+
/* Label */
72+
.input-group label {
73+
position: absolute;
74+
top: 14px;
75+
left: 12px;
76+
color: var(--muted);
77+
font-size: 16px;
78+
pointer-events: none;
79+
background: var(--surface);
80+
transition: all var(--transition);
81+
padding: 0 4px;
82+
}
83+
84+
/* Floating effect */
85+
.input-group input:focus + label,
86+
.input-group input:not(:placeholder-shown) + label {
87+
top: -8px;
88+
left: 8px;
89+
font-size: 12px;
90+
color: var(--accent);
91+
}
92+
93+
/* Bar effect */
94+
.bar {
95+
position: absolute;
96+
left: 12px;
97+
right: 12px;
98+
bottom: 8px;
99+
height: 2px;
100+
background: rgba(0, 0, 0, 0.1);
101+
border-radius: 2px;
102+
overflow: hidden;
103+
}
104+
.bar::after {
105+
content: "";
106+
position: absolute;
107+
left: 0;
108+
top: 0;
109+
height: 100%;
110+
width: 0%;
111+
background: var(--accent);
112+
transition: width var(--transition);
113+
}
114+
115+
/* Focus underline animation */
116+
.input-group input:focus ~ .bar::after {
117+
width: 100%;
118+
}
119+
120+
/* Validation Messages */
121+
.validation-msg {
122+
font-size: 13px;
123+
margin: 6px 0 0 12px;
124+
padding: 4px 8px;
125+
border-radius: 4px;
126+
line-height: 1.4;
127+
display: none;
128+
transition: all 0.3s ease;
129+
}
130+
131+
.validation-msg.success {
132+
background: rgba(22, 163, 74, 0.15);
133+
color: var(--success);
134+
}
135+
136+
.validation-msg.error {
137+
background: rgba(220, 38, 38, 0.15);
138+
color: var(--danger);
139+
}
140+
141+
/* Show validation feedback below input */
142+
.input-group input:valid ~ .validation-msg.success {
143+
display: block;
144+
animation: fadeIn 0.3s ease forwards;
145+
}
146+
147+
.input-group input:invalid:not(:placeholder-shown) ~ .validation-msg.error {
148+
display: block;
149+
animation: fadeIn 0.3s ease forwards;
150+
}
151+
152+
/* Helper Text */
153+
.helper {
154+
margin: 6px 0 0 12px;
155+
font-size: 13px;
156+
color: var(--muted);
157+
}
158+
159+
/* Fade animation */
160+
@keyframes fadeIn {
161+
from {
162+
opacity: 0;
163+
transform: translateY(-2px);
164+
}
165+
to {
166+
opacity: 1;
167+
transform: translateY(0);
168+
}
169+
}
170+
171+
/* Submit Button */
172+
.btn {
173+
padding: 10px 16px;
174+
font-size: 16px;
175+
color: white;
176+
background: var(--accent);
177+
border: none;
178+
border-radius: var(--radius);
179+
cursor: pointer;
180+
transition: background 0.3s ease;
181+
}
182+
183+
.btn:hover {
184+
background: #1e40af;
185+
}
186+
187+
/* Dark Mode */
188+
@media (prefers-color-scheme: dark) {
189+
:root {
190+
--bg: #0b1220;
191+
--surface: #071127;
192+
--text: #e6eef8;
193+
--muted: #9aa7bd;
194+
}
195+
196+
.demo-page {
197+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
198+
}
199+
200+
.bar {
201+
background: rgba(255, 255, 255, 0.1);
202+
}
203+
}

‎floating Label/floating Label SignUppage/FLSignUp.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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>Floating Label Input with Validation</title>
7+
<link rel="stylesheet" href="FLSignUp.css".css">
8+
</head>
9+
<body>
10+
11+
<main class="demo-page">
12+
<h1>Floating Label Input- Sign Up </h1>
13+
14+
<form class="form" novalidate>
15+
<!-- Email Field -->
16+
<div class="input-group">
17+
<input id="email" type="email" placeholder=" " required>
18+
<label for="email">Email address</label>
19+
<div class="bar"></div>
20+
21+
<!-- Validation messages -->
22+
<div class="validation-msg success">Looks good!</div>
23+
<div class="validation-msg error">Please enter a valid email.</div>
24+
<br>
25+
26+
<p class="helper">We'll never share your email.</p>
27+
<br>
28+
29+
</div>
30+
31+
<!-- Password Field -->
32+
<div class="input-group">
33+
<input id="password" type="password" placeholder=" " minlength="8" required>
34+
<label for="password">Password</label>
35+
<div class="bar"></div>
36+
37+
<!-- Validation messages -->
38+
<div class="validation-msg success">Strong password!</div>
39+
<div class="validation-msg error">Must be at least 8 characters.</div>
40+
<br>
41+
<p class="helper">Use a mix of letters and numbers.</p>
42+
<br>
43+
</div>
44+
45+
<button type="submit" class="btn">Sign Up</button>
46+
</form>
47+
</main>
48+
49+
</body>
50+
</html>

‎floating Label/floating Label SignUppage/FloatingLabelSignUpDemo.gif‎

8.14 MB
Loading

0 commit comments

Comments
 (0)