Skip to content

Commit ae4c082

Browse files
HuXn-WebDevHuXn-WebDev
committed
Two Sided Form In HTML, CSS and JAVASCRIPT
1 parent 396901c commit ae4c082

File tree

3 files changed

+186
-0
lines changed

3 files changed

+186
-0
lines changed

‎65. Two Sided Form/app.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const loginForm = document.querySelector(".login-form");
2+
const signupForm = document.querySelector(".signup-form");
3+
const loginBtn = document.querySelector(".login button");
4+
const signupBtn = document.querySelector(".signup button");
5+
const backLayer = document.querySelector(".back-layer");
6+
7+
signupBtn.addEventListener("click", () => {
8+
loginForm.classList.remove("active");
9+
signupForm.classList.add("active");
10+
backLayer.style.clipPath = "inset(0 0 0 50%)";
11+
});
12+
13+
loginBtn.addEventListener("click", () => {
14+
signupForm.classList.remove("active");
15+
loginForm.classList.add("active");
16+
backLayer.style.clipPath = "";
17+
});

‎65. Two Sided Form/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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>New Form</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<main>
11+
<div class="signup">
12+
<span>Not a member?</span>
13+
<button type="button" class="sign-up-btn">Sign Up</button>
14+
</div>
15+
<div class="login">
16+
<span>Already have an account?</span>
17+
<button type="button">Login</button>
18+
</div>
19+
20+
<div class="back-layer">
21+
<form action="" class="login-form active">
22+
<h2 class="login-label">Login</h2>
23+
<input type="email" id="lemail" placeholder="Email" />
24+
<input type="password" id="lpassword" placeholder="Password" />
25+
<button type="button">Login</button>
26+
</form>
27+
28+
<form action="" class="signup-form">
29+
<h2>Sign Up</h2>
30+
<input type="text" id="f-name" placeholder="First Name" />
31+
<input type="text" id="l-name" placeholder="last Name" />
32+
<input type="email" id="semail" placeholder="Email" />
33+
<input type="password" id="spassword" placeholder="Password" />
34+
<button type="button">Sign Up</button>
35+
</form>
36+
</div>
37+
</main>
38+
39+
<script src="app.js"></script>
40+
</body>
41+
</html>

‎65. Two Sided Form/style.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
margin: 0;
7+
padding: 0;
8+
background-color: #111933;
9+
font-family: sans-serif;
10+
}
11+
12+
a {
13+
text-decoration: none;
14+
}
15+
16+
main {
17+
display: grid;
18+
grid-template-columns: 1fr 1fr;
19+
align-items: center;
20+
margin: 100px auto 0;
21+
max-width: 800px;
22+
overflow: hidden;
23+
}
24+
25+
main > * {
26+
grid-row: 1 / 2;
27+
}
28+
29+
.login,
30+
.signup {
31+
display: flex;
32+
flex-direction: column;
33+
justify-content: center;
34+
align-items: center;
35+
gap: 10px;
36+
padding: 40% 0;
37+
color: #fff;
38+
font-size: 30px;
39+
background: #cf0b4c;
40+
}
41+
42+
.login > button,
43+
.signup > button {
44+
border: none;
45+
background-color: #fff;
46+
}
47+
48+
.login {
49+
grid-column: 1 / 2;
50+
}
51+
.signup {
52+
grid-column: 2 / 3;
53+
}
54+
.login-form {
55+
grid-column: 1 / 2;
56+
transform: translateX(-100%);
57+
}
58+
.signup-form {
59+
grid-column: 2 / 3;
60+
transform: translateX(100%);
61+
}
62+
63+
form {
64+
padding: 30px 20px;
65+
max-width: 500px;
66+
height: 520px;
67+
z-index: 10;
68+
display: flex;
69+
flex-direction: column;
70+
justify-content: center;
71+
transition: transform 0.5s;
72+
}
73+
74+
form.active {
75+
transform: translateX(0);
76+
}
77+
78+
.back-layer {
79+
display: grid;
80+
grid-column: 1 / 3;
81+
grid-template-columns: 1fr 1fr;
82+
clip-path: inset(0 50% 0 0);
83+
background: #fff;
84+
z-index: 5;
85+
transition: clip-path 0.3s;
86+
}
87+
88+
.login-label {
89+
text-align: center;
90+
font-size: 40px;
91+
}
92+
93+
input {
94+
display: block;
95+
height: 40px;
96+
width: 300px;
97+
padding-left: 15px;
98+
margin: 30px 0;
99+
border: 2px solid #ccc;
100+
margin-bottom: 20px;
101+
margin-top: 5px;
102+
outline: none;
103+
}
104+
105+
input:focus {
106+
border-color: #cf0b4c;
107+
}
108+
109+
label {
110+
font-weight: normal;
111+
}
112+
113+
button {
114+
background: transparent;
115+
border: 2px solid;
116+
color: #cf0b4c;
117+
width: 120px;
118+
height: 40px;
119+
text-transform: uppercase;
120+
/* font-weight: 600; */
121+
font-size: 16px;
122+
cursor: pointer;
123+
}
124+
125+
form button:hover {
126+
background-color: #cf0b4c;
127+
color: #fff;
128+
}

0 commit comments

Comments
 (0)