Skip to content

Commit 97f1d11

Browse files
Prabhsingh0401Prabhsingh0401
committed
login page
A beautifully designed login page with glassmorphism effect and great wave animation in the background !
1 parent b591985 commit 97f1d11

File tree

8 files changed

+433
-0
lines changed

8 files changed

+433
-0
lines changed

‎Login Page/Assests/APPLE2.png‎

15.3 KB
Loading

‎Login Page/Assests/EMAIL.png‎

38.9 KB
Loading

‎Login Page/Assests/Gmail Icon.png‎

6.61 KB
Loading

‎Login Page/Assests/PASSWORD.png‎

4.95 KB
Loading

‎Login Page/Script/Script.json‎

Whitespace-only changes.

‎Login Page/Script/script1.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
let loginForm = document.querySelector(".my-form");
2+
3+
loginForm.addEventListener("submit", (e) => {
4+
e.preventDefault();
5+
let email = document.getElementById("email");
6+
let password = document.getElementById("password");
7+
8+
console.log('Email:', email.value);
9+
console.log('Password:', password.value);
10+
// process and send to API
11+
});

‎Login Page/signin.css‎

Lines changed: 334 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,334 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
2+
3+
:root {
4+
--primary: #4978F0;
5+
--primary-light: #E1EEF5;
6+
--secondary: #1D1D1D;
7+
--background: #F4F1FF;
8+
--text: #1F2346;
9+
}
10+
11+
body{
12+
margin: auto;
13+
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
14+
overflow: auto;
15+
background: linear-gradient(315deg, rgb(252, 208, 158) 3%, rgb(144, 200, 255) 38%, rgb(104, 245, 250) 68%, rgb(45, 151, 250) 98%);
16+
animation: gradient 25s ease infinite;
17+
background-size: 400% 400%;
18+
background-attachment: fixed;
19+
}
20+
21+
@keyframes gradient {
22+
0% {
23+
background-position: 0% 0%;
24+
}
25+
50% {
26+
background-position: 100% 100%;
27+
}
28+
100% {
29+
background-position: 0% 0%;
30+
}
31+
}
32+
33+
.wave {
34+
background: rgba(255, 255, 255, 0.25);
35+
border-radius: 1000% 1000% 0 0;
36+
position: fixed;
37+
width: 200%;
38+
height: 12em;
39+
animation: wave 20s -3s linear infinite;
40+
transform: translate3d(0, 0, 0);
41+
opacity: 0.8;
42+
bottom: 0;
43+
left: 0;
44+
z-index: -1;
45+
}
46+
47+
.wave:nth-of-type(2) {
48+
bottom: -1.25em;
49+
animation: wave 18s linear reverse infinite;
50+
opacity: 0.8;
51+
}
52+
53+
.wave:nth-of-type(3) {
54+
bottom: -2.5em;
55+
animation: wave 20s -1s reverse infinite;
56+
opacity: 0.9;
57+
}
58+
59+
@keyframes wave {
60+
2% {
61+
transform: translateX(1);
62+
}
63+
64+
25% {
65+
transform: translateX(-25%);
66+
}
67+
68+
50% {
69+
transform: translateX(-50%);
70+
}
71+
72+
75% {
73+
transform: translateX(-25%);
74+
}
75+
76+
100% {
77+
transform: translateX(1);
78+
}
79+
}
80+
81+
82+
body {
83+
font-size: 16px;
84+
}
85+
86+
* {
87+
margin: 0;
88+
padding: 0;
89+
box-sizing: border-box;
90+
font-family: Mulish;
91+
}
92+
93+
.socials-row {
94+
display: flex;
95+
gap: 16px;
96+
flex-wrap: wrap;
97+
}
98+
99+
.socials-row img {
100+
width: 22px;
101+
height: 22px;
102+
}
103+
img.apple {
104+
width: 32px;
105+
height: 32px;
106+
}
107+
108+
.text-field.lock{
109+
width:15px;
110+
height:20px;
111+
}
112+
113+
.socials-row > a {
114+
padding: 8px;
115+
border-radius: 8px;
116+
width: 100%;
117+
min-height: 48px;
118+
display: flex;
119+
gap: 12px;
120+
justify-content: center;
121+
align-items: center;
122+
text-decoration: none;
123+
font-size: 1.1rem;
124+
color: var(--text);
125+
padding: 8px;
126+
border: 1px solid var(--primary-light);
127+
font-weight: 700;
128+
}
129+
130+
.socials-row > a:hover {
131+
border: 1px solid var(--primary);
132+
}
133+
134+
.email{
135+
height: 30px;
136+
width: 40px;
137+
padding-left: -20px;
138+
}
139+
140+
.lock{
141+
height: 27px;
142+
width: 27px;
143+
}
144+
145+
.divider {
146+
display: flex;
147+
flex-direction: row;
148+
color: var(--secondary);
149+
gap: 16px;
150+
align-items: center;
151+
}
152+
153+
.divider-line {
154+
width: 100%;
155+
height: 1px;
156+
background-color: var(--secondary);
157+
opacity: .2;
158+
}
159+
160+
.login-wrapper {
161+
position: relative;
162+
display: grid;
163+
grid-template-columns: 4fr 3fr;
164+
max-width: 1200px;
165+
margin: 0 auto;
166+
margin-right: -180px;
167+
}
168+
169+
170+
.login-side {
171+
padding: 20px 32px 48px 32px;
172+
display: flex;
173+
justify-content: center;
174+
align-items: start;
175+
}
176+
177+
.logo {
178+
height: 48px;
179+
position: absolute;
180+
top: 20px;
181+
left: 20px;
182+
}
183+
184+
.my-form__wrapper {
185+
display: flex;
186+
flex-direction: column;
187+
align-items: center;
188+
gap: 32px;
189+
max-width: 460px;
190+
width: 100%;
191+
padding: 48px 32px;
192+
height: fit-content;
193+
box-shadow:
194+
rgba(100, 100, 111, 0.2)
195+
0px 7px 29px 0px;
196+
}
197+
198+
.my-form {
199+
display: flex;
200+
flex-direction: column;
201+
justify-content: start;
202+
position: relative;
203+
gap: 16px;
204+
}
205+
206+
.login-welcome {
207+
height: 80px;
208+
width: 80px;
209+
border-radius: 50%;
210+
object-fit: cover;
211+
}
212+
213+
.login-welcome-row {
214+
display: flex;
215+
width: 100%;
216+
flex-direction: column;
217+
gap: 8px;
218+
}
219+
220+
.my-form__button {
221+
background-color: var(--primary);
222+
color: white;
223+
white-space: nowrap;
224+
border: none;
225+
display: flex;
226+
justify-content: center;
227+
align-items: center;
228+
margin-top: 16px;
229+
line-height: 50px;
230+
outline: none;
231+
font-size: 18px;
232+
letter-spacing: .025em;
233+
text-decoration: none;
234+
cursor: pointer;
235+
font-weight: 800;
236+
min-height: 50px;
237+
width: 100%;
238+
border-radius: 8px;
239+
box-shadow: 0 5px 10px rgba(0,0,0,.15);
240+
transition: all .3s ease;
241+
-webkit-transition: all .3s ease;
242+
}
243+
244+
.my-form__actions {
245+
display: flex;
246+
flex-direction: column;
247+
color: var(--secondary);
248+
gap: 16px;
249+
margin-top: 8px;
250+
}
251+
252+
.my-form__actions a {
253+
color: var(--secondary);
254+
font-weight: 600;
255+
text-decoration: none;
256+
}
257+
258+
.my-form__actions a:hover {
259+
text-decoration: underline;
260+
}
261+
262+
.my-form__row {
263+
display: flex;
264+
justify-content: space-between;
265+
}
266+
267+
.my-form__signup {
268+
display: flex;
269+
justify-content: center;
270+
}
271+
272+
.my-form__signup a {
273+
color: var(--primary);
274+
font-weight: 800;
275+
text-decoration: none;
276+
font-size: 18px;
277+
}
278+
279+
.my-form__signup a:hover {
280+
text-decoration: underline;
281+
}
282+
283+
.text-field input {
284+
color: var(--secondary);
285+
font-size: 16px;
286+
font-weight: 500;
287+
max-width: 100%;
288+
width: 100%;
289+
border: 1px solid var(--secondary);
290+
height: 50px;
291+
letter-spacing: .03rem;
292+
background-color: transparent;
293+
outline: none;
294+
transition: .25s;
295+
border-radius: 8px;
296+
text-indent: 20px;
297+
margin-top: 8px;
298+
}
299+
300+
.text-field {
301+
position: relative;
302+
}
303+
304+
.text-field img {
305+
position: absolute;
306+
right: -2px;
307+
bottom: -4px;
308+
transform: translate(-50%,-50%);
309+
transform-origin: center;
310+
}
311+
312+
.text-field input:focus {
313+
border: 1px solid var(--primary);
314+
}
315+
316+
.text-field label {
317+
color: var(--secondary);
318+
font-size: 14px;
319+
font-weight: 600;
320+
letter-spacing: .03rem;
321+
z-index: 10;
322+
}
323+
324+
@media (max-width: 640px) {
325+
.login-wrapper {
326+
grid-template-columns: 1fr;
327+
height: 100vh;
328+
}
329+
330+
.info-side {
331+
flex-direction: column-reverse;
332+
padding: 48px 48px 48px 32px;
333+
}
334+
}

0 commit comments

Comments
 (0)