Skip to content

Commit 20a765d

Browse files
harshita2216harshita2216
authored
Merge pull request #164 from siddhi-244/form
Added Glassmorphism Animation Form
2 parents 32e8020 + 453a1f4 commit 20a765d

File tree

4 files changed

+269
-0
lines changed

4 files changed

+269
-0
lines changed

‎Glassmorphism-Form/README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
### Glassmorphism Animation Form
2+
A basic login form with Glassmorphism Animation.
3+
4+
### Use of the Project:
5+
We can add this login form at start of any website as it has a great look.
6+
7+
### Tech Stack
8+
* HTML5
9+
* CSS3
10+
11+
12+
#### Steps to Use:
13+
14+
---
15+
16+
- Download or clone the repository
17+
18+
```
19+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
20+
```
21+
22+
- Go to the directory
23+
- Run the index.html file
24+
25+
26+
---
27+
28+
### Demo
29+
30+
31+
https://user-images.githubusercontent.com/69195262/125109829-7808ed80-e101-11eb-8e38-e1a4118e0fcc.mp4
32+
33+
34+
35+

‎Glassmorphism-Form/index.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Form</title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
</head>
7+
<body>
8+
<section>
9+
<div class="color"></div>
10+
<div class="color"></div>
11+
<div class="color"></div>
12+
<div class="box">
13+
<div class="square" style="--i:0;"></div>
14+
<div class="square" style="--i:1;"></div>
15+
<div class="square" style="--i:2;"></div>
16+
<div class="square" style="--i:3;"></div>
17+
<div class="square" style="--i:4;"></div>
18+
<div class="container">
19+
<div class="form">
20+
<h2>Login Form</h2>
21+
<form>
22+
<div class="inputbox">
23+
<input type="text" placeholder="username">
24+
</div>
25+
<div class="inputbox">
26+
<input type="password" placeholder="password">
27+
</div>
28+
<div class="inputbox">
29+
<input type="submit" placeholder="username">
30+
</div>
31+
<p class="forget">Forgot Password? <a href="">Click Here</a></p>
32+
<p class="forget">Dont have an account ? <a href="">Sign Up here</a></p>
33+
</form>
34+
</div>
35+
</div>
36+
</div>
37+
</section>
38+
39+
40+
</body>
41+
</html>
42+

‎Glassmorphism-Form/style.css

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

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,4 @@
5353
| [Form Validation](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/form-validation) |A basic sign up page with all the validations in javascript. |
5454
| [Age Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/age-calculator) | A website which can be used to calculate age of a person in days,months and years . |
5555
| [BMI Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/bmi-calculator) | A basic website which can be used to calculate body mass index |
56+
| [Glassmorphism Animation Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Glassmorphism-Form) |A basic login page with Glassmorphism Animations |

0 commit comments

Comments
 (0)