Skip to content

Commit bbd365e

Browse files
abstrxtInfinityabstrxtInfinity
committed
Login
1 parent 323cdb4 commit bbd365e

2 files changed

Lines changed: 285 additions & 0 deletions

File tree

‎Login_GlassMorph/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Login</title>
8+
<link rel="stylesheet" href="./style.css">
9+
</head>
10+
11+
<body>
12+
13+
<section>
14+
<div class="color"></div>
15+
<div class="color"></div>
16+
<div class="color"></div>
17+
<div class="color"></div>
18+
<div class="color"></div>
19+
<div class="box">
20+
<div class="square" style="--i:0"></div>
21+
<div class="square" style="--i:1"></div>
22+
<div class="square" style="--i:2"></div>
23+
<div class="square" style="--i:3"></div>
24+
<div class="square" style="--i:4"></div>
25+
<div class="square" style="--i:5"></div>
26+
<div class="square" style="--i:6"></div>
27+
28+
<div class="container">
29+
<div class="form">
30+
<h2>Login Form</h2>
31+
<form action="#">
32+
<div class="inputBox">
33+
<input type="text" placeholder="Username">
34+
</div>
35+
<div class="inputBox">
36+
<input type="password" placeholder="Password">
37+
</div>
38+
<div class="inputBox">
39+
<input type="submit" value="Login">
40+
</div>
41+
<p class="forget">Forgot Password ?<a href="#">Click Here</a></p>
42+
<p class="forget">Don't Have an account ? ?<a href="#">Sign Up</a></p>
43+
</form>
44+
</div>
45+
</div>
46+
</div>
47+
</section>
48+
49+
</body>
50+
51+
</html>

‎Login_GlassMorph/style.css‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: cursive;
6+
}
7+
8+
body {
9+
overflow: hidden;
10+
}
11+
12+
section {
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
min-height: 100vh;
17+
background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
18+
}
19+
20+
section .color {
21+
position: absolute;
22+
filter: blur(150px)
23+
}
24+
25+
section .color:nth-child(1) {
26+
top: -350px;
27+
width: 600px;
28+
height: 600px;
29+
background: #ff359b;
30+
31+
}
32+
33+
section .color:nth-child(2) {
34+
bottom: -150px;
35+
left: 100px;
36+
width: 500px;
37+
height: 500px;
38+
background: #fffd87;
39+
40+
}
41+
42+
section .color:nth-child(3) {
43+
bottom: -150px;
44+
right: 100px;
45+
width: 300px;
46+
height: 300px;
47+
background: #00d2ff;
48+
49+
}
50+
51+
section .color:nth-child(4) {
52+
top: 100px;
53+
left: 60px;
54+
width: 200px;
55+
height: 200px;
56+
background: #0e003f;
57+
58+
}
59+
60+
section .color:nth-child(5) {
61+
bottom: 150px;
62+
right: 60px;
63+
width: 350px;
64+
height: 350px;
65+
background: #ff820d;
66+
67+
}
68+
69+
.box {
70+
position: relative;
71+
}
72+
73+
.box .square {
74+
position: absolute;
75+
background: rgba(255, 255, 255, 0.1);
76+
backdrop-filter: blur(5px);
77+
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
78+
border: 1px solid rgba(255, 255, 255, 0.5);
79+
border-right: 1px solid rgba(255, 255, 255, 0.2);
80+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
81+
border-radius: 10px;
82+
animation: animate 10s linear infinite;
83+
animation-delay: calc(-1s*var(--i));
84+
}
85+
86+
@keyframes animate {
87+
88+
0%,
89+
100% {
90+
transform: translateY(-40px);
91+
}
92+
93+
50% {
94+
transform: translateY(40px);
95+
}
96+
}
97+
98+
.box .square:nth-child(1) {
99+
top: -50px;
100+
right: -60px;
101+
width: 100px;
102+
height: 100px;
103+
}
104+
105+
.box .square:nth-child(2) {
106+
top: 150px;
107+
left: -100px;
108+
width: 120px;
109+
height: 120px;
110+
z-index: 2;
111+
112+
}
113+
114+
.box .square:nth-child(3) {
115+
bottom: 50px;
116+
right: -60px;
117+
width: 80px;
118+
height: 80px;
119+
z-index: 2;
120+
}
121+
122+
.box .square:nth-child(4) {
123+
bottom: -80px;
124+
left: 100px;
125+
width: 50px;
126+
height: 50px;
127+
}
128+
129+
.box .square:nth-child(5) {
130+
top: -80px;
131+
right: 140px;
132+
width: 60px;
133+
height: 60px;
134+
z-index: 2;
135+
136+
}
137+
138+
.square:nth-child(6) {
139+
top: -80px;
140+
left: 30px;
141+
width: 100px;
142+
height: 100px;
143+
}
144+
145+
146+
147+
.container {
148+
position: relative;
149+
width: 400px;
150+
min-height: 400px;
151+
background: rgba(255, 255, 255, 0.1);
152+
border-radius: 10px;
153+
justify-content: center;
154+
align-items: center;
155+
display: flex;
156+
backdrop-filter: blur(5px);
157+
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
158+
border: 1px solid rgba(255, 255, 255, 0.5);
159+
border-right: 1px solid rgba(255, 255, 255, 0.2);
160+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
161+
}
162+
163+
.form {
164+
position: relative;
165+
width: 100%;
166+
height: 100%;
167+
padding: 40px;
168+
}
169+
170+
.form h2 {
171+
position: relative;
172+
color: #fff;
173+
font-size: 24px;
174+
font-weight: 600;
175+
letter-spacing: 1px;
176+
margin-bottom: 40px;
177+
}
178+
179+
.form h2::before {
180+
content: '';
181+
position: absolute;
182+
left: 0;
183+
bottom: -10px;
184+
width: 80px;
185+
height: 4px;
186+
background: #fff;
187+
}
188+
189+
.form .inputBox {
190+
width: 100%;
191+
margin-top: 20px;
192+
193+
}
194+
195+
.form .inputBox input {
196+
width: 100%;
197+
padding: 10px 20px;
198+
border-radius: 35px;
199+
border: none;
200+
outline: none;
201+
background: rgba(255, 255, 255, 0.2);
202+
border: 1px solid rgba(255, 255, 255, 0.5);
203+
border-right: 1px solid rgba(255, 255, 255, 0.2);
204+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
205+
font-size: 16px;
206+
letter-spacing: 1px;
207+
color: #fff;
208+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
209+
210+
}
211+
212+
.form .inputBox input::placeholder {
213+
color: #fff;
214+
}
215+
216+
.form .inputBox input[type="submit"] {
217+
background: #fff;
218+
color: #666;
219+
max-width: 100px;
220+
cursor: pointer;
221+
font-weight: 600;
222+
margin-bottom: 20px;
223+
}
224+
225+
.forget {
226+
margin-top: 5px;
227+
color: #fff;
228+
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
229+
}
230+
231+
.forget a {
232+
color: #fff;
233+
font-weight: 600;
234+
}

0 commit comments

Comments
 (0)