Skip to content

Commit bb99355

Browse files
EPSOFTEPSOFT
authored
Add files via upload
1 parent 16f89bd commit bb99355

File tree

2 files changed

+203
-0
lines changed

2 files changed

+203
-0
lines changed

‎index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Animated Login Form</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<div class="box">
10+
<form autocomplete="off">
11+
<h2>Sign in</h2>
12+
<div class="inputBox">
13+
<input type="text" required="required">
14+
<span>Userame</span>
15+
<i></i>
16+
</div>
17+
<div class="inputBox">
18+
<input type="password" required="required">
19+
<span>Password</span>
20+
<i></i>
21+
</div>
22+
<div class="links">
23+
<a href="#">Forgot Password ?</a>
24+
<a href="#">Signup</a>
25+
</div>
26+
<input type="submit" value="Login">
27+
</form>
28+
</div>
29+
</body>
30+
</html>

‎style.css

+173
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
2+
*
3+
{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
}
9+
body
10+
{
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
min-height: 100vh;
15+
flex-direction: column;
16+
background: #000;
17+
}
18+
.box
19+
{
20+
position: relative;
21+
width: 380px;
22+
height: 420px;
23+
background: #1c1c1c;
24+
border-radius: 8px;
25+
overflow: hidden;
26+
}
27+
.box::before
28+
{
29+
content: '';
30+
z-index: 1;
31+
position: absolute;
32+
top: -50%;
33+
left: -50%;
34+
width: 380px;
35+
height: 420px;
36+
transform-origin: bottom right;
37+
background: linear-gradient(0deg,transparent,#58D797,#58D797);
38+
animation: animate 6s linear infinite;
39+
}
40+
.box::after
41+
{
42+
content: '';
43+
z-index: 1;
44+
position: absolute;
45+
top: -50%;
46+
left: -50%;
47+
width: 380px;
48+
height: 420px;
49+
transform-origin: bottom right;
50+
background: linear-gradient(0deg,transparent,#58D797,#58D797);
51+
animation: animate 6s linear infinite;
52+
animation-delay: -3s;
53+
}
54+
@keyframes animate
55+
{
56+
0%
57+
{
58+
transform: rotate(0deg);
59+
}
60+
100%
61+
{
62+
transform: rotate(360deg);
63+
}
64+
}
65+
form
66+
{
67+
position: absolute;
68+
inset: 2px;
69+
background: #28292d;
70+
padding: 50px 40px;
71+
border-radius: 8px;
72+
z-index: 2;
73+
display: flex;
74+
flex-direction: column;
75+
}
76+
h2
77+
{
78+
color: #58D797;
79+
font-weight: 500;
80+
text-align: center;
81+
letter-spacing: 0.1em;
82+
}
83+
.inputBox
84+
{
85+
position: relative;
86+
width: 300px;
87+
margin-top: 35px;
88+
}
89+
.inputBox input
90+
{
91+
position: relative;
92+
width: 100%;
93+
padding: 20px 10px 10px;
94+
background: transparent;
95+
outline: none;
96+
box-shadow: none;
97+
border: none;
98+
color: #23242a;
99+
font-size: 1em;
100+
letter-spacing: 0.05em;
101+
transition: 0.5s;
102+
z-index: 10;
103+
}
104+
.inputBox span
105+
{
106+
position: absolute;
107+
left: 0;
108+
padding: 20px 0px 10px;
109+
pointer-events: none;
110+
font-size: 1em;
111+
color: #8f8f8f;
112+
letter-spacing: 0.05em;
113+
transition: 0.5s;
114+
}
115+
.inputBox input:valid ~ span,
116+
.inputBox input:focus ~ span
117+
{
118+
color: #58D797;
119+
transform: translateX(0px) translateY(-34px);
120+
font-size: 0.75em;
121+
}
122+
.inputBox i
123+
{
124+
position: absolute;
125+
left: 0;
126+
bottom: 0;
127+
width: 100%;
128+
height: 2px;
129+
background: #58D797;
130+
border-radius: 4px;
131+
overflow: hidden;
132+
transition: 0.5s;
133+
pointer-events: none;
134+
z-index: 9;
135+
}
136+
.inputBox input:valid ~ i,
137+
.inputBox input:focus ~ i
138+
{
139+
height: 44px;
140+
}
141+
.links
142+
{
143+
display: flex;
144+
justify-content: space-between;
145+
}
146+
.links a
147+
{
148+
margin: 10px 0;
149+
font-size: 0.75em;
150+
color: #8f8f8f;
151+
text-decoration: beige;
152+
}
153+
.links a:hover,
154+
.links a:nth-child(2)
155+
{
156+
color: #58D797;
157+
}
158+
input[type="submit"]
159+
{
160+
border: none;
161+
outline: none;
162+
padding: 11px 25px;
163+
background: #58D797;
164+
cursor: pointer;
165+
border-radius: 4px;
166+
font-weight: 600;
167+
width: 100px;
168+
margin-top: 10px;
169+
}
170+
input[type="submit"]:active
171+
{
172+
opacity: 0.8;
173+
}

0 commit comments

Comments
 (0)