Skip to content

Commit ad01955

Browse files
Anjuli08Anjuli08
authored
Add files via upload
1 parent ca98dd0 commit ad01955

File tree

3 files changed

+262
-0
lines changed

3 files changed

+262
-0
lines changed

‎Animation CSS/bg.png

566 KB
Loading

‎Animation CSS/index.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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.8" />
7+
<title>Animation login</title>
8+
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
9+
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
10+
<link href='https://fonts.googleapis.com/css?family=Advent Pro' rel='stylesheet'>
11+
<link rel="stylesheet" href="style.css">
12+
</head>
13+
14+
<body>
15+
<section>
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="container">
26+
<div class="form">
27+
<h2>Login Form</h2>
28+
<form>
29+
<div class="inputbox">
30+
<input type="text" placeholder="Username">
31+
</div>
32+
<div class="inputbox">
33+
<input type="password" placeholder="Password">
34+
</div>
35+
36+
<button type="submit">Login</button>
37+
38+
<p class="forget">Forgot Password ?</p>
39+
<p class="forget">Don't have an account ?
40+
<a href="#"> <span>Sign Up</span></a>
41+
</p>
42+
</form>
43+
</div>
44+
</div>
45+
</div>
46+
</section>
47+
</body>
48+
49+
</html>

‎Animation CSS/style.css

+213
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'roboto';
6+
}
7+
8+
body {
9+
overflow: hidden;
10+
font-family: 'roboto';
11+
}
12+
13+
section {
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
min-height: 100vh;
18+
background-image: url('bg.png');
19+
}
20+
21+
section .color {
22+
position: absolute;
23+
filter: blur(230px);
24+
}
25+
26+
section .color:nth-child(1) {
27+
top: -350px;
28+
width: 600px;
29+
height: 600px;
30+
background: #ec489a;
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+
section .color:nth-child(3) {
42+
bottom: 50px;
43+
right: 100px;
44+
width: 300px;
45+
height: 300px;
46+
background: #00d2ff;
47+
}
48+
49+
.box {
50+
position: relative;
51+
}
52+
53+
.box .square {
54+
position: absolute;
55+
backdrop-filter: blur(5px);
56+
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
57+
border: 1px solid rgba(255, 255, 255, 0.2);
58+
border-right: 1px solid rgba(255, 255, 255, 0.2);
59+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
60+
background: rgba(255, 255, 255, 0.283);
61+
border-radius: 10px;
62+
animation: animate 10s linear infinite;
63+
animation-delay: calc(-1s * var(--i));
64+
}
65+
66+
@keyframes animate {
67+
0%,
68+
100% {
69+
transform: translate(-60px);
70+
}
71+
50% {
72+
transform: translate(60px);
73+
}
74+
}
75+
76+
.box .square:nth-child(1) {
77+
top: -50px;
78+
right: -60px;
79+
width: 100px;
80+
height: 100px;
81+
}
82+
83+
.box .square:nth-child(2) {
84+
top: 150px;
85+
left: -100px;
86+
width: 120px;
87+
height: 120px;
88+
/* z-index: 2; */
89+
}
90+
91+
.box .square:nth-child(3) {
92+
bottom: 50px;
93+
right: -60px;
94+
width: 80px;
95+
height: 80px;
96+
/* z-index: 2; */
97+
}
98+
99+
.box .square:nth-child(4) {
100+
bottom: -80px;
101+
left: 100px;
102+
width: 50px;
103+
height: 50px;
104+
}
105+
106+
.box .square:nth-child(5) {
107+
top: -80px;
108+
left: 140px;
109+
width: 60px;
110+
height: 60px;
111+
}
112+
113+
.container {
114+
position: relative;
115+
width: 400px;
116+
min-height: 400px;
117+
background: rgba(255, 255, 255, 0.322);
118+
border-radius: 10px;
119+
display: flex;
120+
justify-content: center;
121+
align-items: center;
122+
backdrop-filter: blur(5px);
123+
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
124+
border: 1px solid rgba(255, 255, 255, 0.2);
125+
border-right: 1px solid rgba(255, 255, 255, 0.2);
126+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
127+
}
128+
129+
.form {
130+
position: relative;
131+
width: 100%;
132+
height: 100%;
133+
padding: 40px;
134+
}
135+
136+
.form h2 {
137+
position: relative;
138+
color: #fff;
139+
font-size: 55px;
140+
font-family: 'Advent Pro';
141+
/* font-weight: 600; */
142+
letter-spacing: 5px;
143+
margin-bottom: 55px;
144+
}
145+
146+
.form h2::before {
147+
content: '';
148+
position: absolute;
149+
left: 0;
150+
bottom: -10px;
151+
width: 80px;
152+
height: 4px;
153+
background: #fff;
154+
}
155+
156+
.form .inputbox {
157+
width: 100%;
158+
margin-top: 20px;
159+
}
160+
161+
.form .inputbox input {
162+
width: 100%;
163+
background: rgba(255, 255, 255, 0.2);
164+
border: none;
165+
outline: none;
166+
padding: 10px 20px;
167+
border-radius: 5px;
168+
border: 1px solid rgba(255, 255, 255, 0.5);
169+
border-right: 1px solid rgba(255, 255, 255, 0.2);
170+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
171+
font-size: 16px;
172+
letter-spacing: 1px;
173+
color: #fff;
174+
box-shadow: 0 5px 8px rgba(46, 46, 46, 0.5);
175+
}
176+
177+
.form .inputbox input::placeholder {
178+
color: #fff;
179+
}
180+
181+
button {
182+
background-color: #ffffffe7;
183+
color: #514f4f;
184+
/* max-width: 100px; */
185+
border: 1px solid rgba(255, 255, 255, 0.683);
186+
box-shadow: 0 5px 8px rgba(225, 223, 223, 0.331);
187+
border-radius: 5px;
188+
padding: 10px 20px;
189+
cursor: pointer;
190+
margin-bottom: 20px;
191+
margin-top: 15px;
192+
font-weight: 550;
193+
}
194+
195+
.form button:hover {
196+
background-color: rgb(249, 244, 244);
197+
/* box-shadow: 0 5px 10px #cdcbcb7a;s */
198+
/* opacity: 0.8; */
199+
}
200+
201+
.forget {
202+
margin-top: 5px;
203+
color: #fff;
204+
}
205+
206+
.forget a {
207+
color: #fdf1f1e8;
208+
font-weight: 550;
209+
}
210+
211+
.forget a:hover {
212+
color: whitesmoke;
213+
}

0 commit comments

Comments
 (0)