Skip to content

Commit 63fc2a4

Browse files
BhalliBhaiBhalliBhai
committed
Form Wave
1 parent 9d4af82 commit 63fc2a4

File tree

3 files changed

+135
-0
lines changed

3 files changed

+135
-0
lines changed

‎30. Form Wave/app.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const allLables = document.querySelectorAll(".form-control label");
2+
3+
allLables.forEach((label) => {
4+
label.innerHTML = label.innerHTML
5+
.split("")
6+
.map(
7+
(letter, index) =>
8+
`<span style="transition-delay:${index * 50}ms">${letter}</span>`
9+
)
10+
.join("");
11+
});

‎30. Form Wave/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Form Wave</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<main class="container">
11+
<h1>Place <span class="special">Login</span></h1>
12+
<form>
13+
<section class="form-control">
14+
<input type="text" required />
15+
<label>Email</label>
16+
</section>
17+
<section class="form-control">
18+
<input type="password" required />
19+
<label>Password</label>
20+
</section>
21+
<button class="btn">Login</button>
22+
</form>
23+
</main>
24+
25+
<script src="app.js"></script>
26+
</body>
27+
</html>

‎30. Form Wave/style.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background-color: rgb(8, 8, 8);
7+
color: #000;
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
margin: 0;
14+
font-family: sans-serif;
15+
}
16+
17+
.container {
18+
background: white;
19+
padding: 5rem;
20+
border-radius: 5px;
21+
}
22+
23+
.container h1 {
24+
text-align: center;
25+
margin-bottom: 40px;
26+
}
27+
28+
.special {
29+
background: crimson;
30+
padding: 5px 20px;
31+
color: #fff;
32+
}
33+
34+
.form-control {
35+
position: relative;
36+
margin: 20px 0 40px;
37+
width: 300px;
38+
}
39+
40+
.form-control input {
41+
background: transparent;
42+
border: 0;
43+
border-bottom: 2px solid black;
44+
display: block;
45+
width: 100%;
46+
padding: 15px 0;
47+
font-size: 18px;
48+
color: #000;
49+
}
50+
51+
.form-control input:focus,
52+
.form-control input:valid {
53+
outline: 0;
54+
border-bottom-color: crimson;
55+
}
56+
57+
.btn {
58+
cursor: pointer;
59+
display: inline-block;
60+
width: 100%;
61+
background: crimson;
62+
padding: 15px;
63+
font-family: inherit;
64+
font-size: 16px;
65+
border: 0;
66+
border-radius: 5px;
67+
color: #fff;
68+
}
69+
70+
.btn:focus {
71+
outline: 0;
72+
}
73+
74+
.btn:active {
75+
transform: scale(0.98);
76+
}
77+
78+
.form-control label {
79+
position: absolute;
80+
top: 15px;
81+
left: 0;
82+
pointer-events: none;
83+
}
84+
85+
/* JavaScript */
86+
.form-control label span {
87+
display: inline-block;
88+
font-size: 18px;
89+
min-width: 5px;
90+
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
91+
}
92+
93+
.form-control input:focus + label span,
94+
.form-control input:valid + label span {
95+
color: crimson;
96+
transform: translateY(-30px);
97+
}

0 commit comments

Comments
 (0)