Skip to content

Commit 2b29906

Browse files
khsh13khsh13
authored
Added sliding registration form
here is the code for the frontend sliding registration form using HTML, CSS and JAVASCRIPT.
1 parent b7b9530 commit 2b29906

File tree

4 files changed

+345
-0
lines changed

4 files changed

+345
-0
lines changed

‎JS Projects/Sliding registration form/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Sliding Form
2+
3+
Sliding Form is sing-in and sign-up form with sliding animation.
4+
5+
[![Visits Badge](https://badges.pufler.dev/visits/kevinadhiguna/sliding-form)](https://github.com/kevinadhiguna)

‎JS Projects/Sliding registration form/css/styles.css

+258
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
2+
3+
4+
* {
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
10+
background: url(https://img.freepik.com/free-vector/network-mesh-wire-digital-technology-background_1017-27428.jpg?w=2000);
11+
background-size: 100% 100%;
12+
background-position: center;
13+
background-attachment: fixed;
14+
15+
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
flex-direction: column;
20+
font-family: 'Montserrat', sans-serif;
21+
height: 100vh;
22+
margin: -20px 0 50px;
23+
}
24+
25+
h1 {
26+
font-weight: bold;
27+
margin: 0;
28+
}
29+
30+
h2 {
31+
text-align: center;
32+
}
33+
34+
p {
35+
font-size: 14px;
36+
font-weight: 100;
37+
line-height: 20px;
38+
letter-spacing: 0.5px;
39+
margin: 20px 0 30px;
40+
}
41+
42+
span {
43+
font-size: 12px;
44+
}
45+
46+
a {
47+
color: #333;
48+
font-size: 14px;
49+
text-decoration: none;
50+
margin: 15px 0;
51+
}
52+
53+
button {
54+
border-radius: 20px;
55+
border: 1px solid #ADD8E6;
56+
background-color: #FF4B2B;
57+
color: #FFFFFF;
58+
font-size: 12px;
59+
font-weight: bold;
60+
padding: 12px 45px;
61+
letter-spacing: 1px;
62+
text-transform: uppercase;
63+
transition: transform 80ms ease-in;
64+
}
65+
66+
button:active {
67+
transform: scale(0.95);
68+
}
69+
70+
button:focus {
71+
outline: none;
72+
}
73+
74+
button.ghost {
75+
background-color: transparent;
76+
border-color: #FFFFFF;
77+
}
78+
79+
form {
80+
background-color: #FFFFFF;
81+
display: flex;
82+
align-items: center;
83+
justify-content: center;
84+
flex-direction: column;
85+
padding: 0 50px;
86+
height: 100%;
87+
text-align: center;
88+
}
89+
90+
input {
91+
background-color: #eee;
92+
border: none;
93+
padding: 12px 15px;
94+
margin: 8px 0;
95+
width: 100%;
96+
}
97+
98+
.container {
99+
background-color: #fff;
100+
border-radius: 10px;
101+
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
102+
0 10px 10px rgba(0,0,0,0.22);
103+
position: relative;
104+
overflow: hidden;
105+
width: 768px;
106+
max-width: 100%;
107+
min-height: 1000px;
108+
}
109+
110+
.form-container {
111+
position: absolute;
112+
top: 0;
113+
height: 100%;
114+
transition: all 0.6s ease-in-out;
115+
}
116+
117+
.sign-in-container {
118+
left: 0;
119+
width: 50%;
120+
z-index: 2;
121+
}
122+
123+
.container.right-panel-active .sign-in-container {
124+
transform: translateX(100%);
125+
}
126+
127+
.sign-up-container {
128+
left: 0;
129+
width: 50%;
130+
opacity: 0;
131+
z-index: 1;
132+
}
133+
134+
.container.right-panel-active .sign-up-container {
135+
transform: translateX(100%);
136+
opacity: 1;
137+
z-index: 5;
138+
animation: show 0.6s;
139+
}
140+
141+
@keyframes show {
142+
0%, 49.99% {
143+
opacity: 0;
144+
z-index: 1;
145+
}
146+
147+
50%, 100% {
148+
opacity: 1;
149+
z-index: 5;
150+
}
151+
}
152+
153+
.overlay-container {
154+
position: absolute;
155+
top: 0;
156+
left: 50%;
157+
width: 50%;
158+
height: 100%;
159+
overflow: hidden;
160+
transition: transform 0.6s ease-in-out;
161+
z-index: 100;
162+
}
163+
164+
.container.right-panel-active .overlay-container{
165+
transform: translateX(-100%);
166+
}
167+
168+
.overlay {
169+
background:palegoldenrod;
170+
background: -webkit-linear-gradient(to right,#1472be,#76eede);
171+
background: linear-gradient(to right,#76eede,#1472be);
172+
background-repeat: no-repeat;
173+
background-size: cover;
174+
background-position: 0 0;
175+
color:;
176+
position: relative;
177+
left: -100%;
178+
height: 100%;
179+
width: 200%;
180+
transform: translateX(0);
181+
transition: transform 0.6s ease-in-out;
182+
}
183+
184+
.container.right-panel-active .overlay {
185+
transform: translateX(50%);
186+
}
187+
188+
.overlay-panel {
189+
position: absolute;
190+
display: flex;
191+
align-items: center;
192+
justify-content: center;
193+
flex-direction: column;
194+
padding: 0 40px;
195+
text-align: center;
196+
top: 0;
197+
height: 100%;
198+
width: 50%;
199+
transform: translateX(0);
200+
transition: transform 0.6s ease-in-out;
201+
}
202+
203+
.overlay-left {
204+
transform: translateX(-20%);
205+
}
206+
207+
.container.right-panel-active .overlay-left {
208+
transform: translateX(0);
209+
}
210+
211+
.overlay-right {
212+
right: 0;
213+
transform: translateX(0);
214+
}
215+
216+
.container.right-panel-active .overlay-right {
217+
transform: translateX(20%);
218+
}
219+
220+
.social-container {
221+
margin: 20px 0;
222+
}
223+
224+
.social-container a {
225+
border: 1px solid #DDDDDD;
226+
border-radius: 50%;
227+
display: inline-flex;
228+
justify-content: center;
229+
align-items: center;
230+
margin: 0 5px;
231+
height: 40px;
232+
width: 40px;
233+
}
234+
235+
footer {
236+
background-color:black;
237+
color: #fff;
238+
font-size: 14px;
239+
bottom: 0;
240+
position: fixed;
241+
left: 0;
242+
right: 0;
243+
text-align: center;
244+
z-index: 999;
245+
}
246+
247+
footer p {
248+
margin: 10px 0;
249+
}
250+
251+
footer i {
252+
color: yellow;
253+
}
254+
255+
footer a {
256+
color: #3c97bf;
257+
text-decoration: none;
258+
}

‎JS Projects/Sliding registration form/index.html

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="css/styles.css">
8+
<title>Registration Form</title>
9+
</head>
10+
<body>
11+
<div class="container" id="container">
12+
<div class="form-container sign-up-container">
13+
<form action="#">
14+
<h1>FILL THE DETAILS</h1>
15+
<div class="social-container">
16+
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
17+
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
18+
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
19+
</div>
20+
<span>or use your email for registration</span>
21+
<input type="text" placeholder="First name" />
22+
<input type="text" placeholder="Last name" />
23+
<input type="number" placeholder="Contact no." />
24+
<input type="text" placeholder="ID proof type" />
25+
<input type="number" placeholder="ID Proof No." />
26+
<input type="text" placeholder="Address" />
27+
<input type="text" placeholder="Startup idea" />
28+
<input type="text" placeholder="Skillset required" />
29+
<input type="text" placeholder="Investment amount(in INR)" />
30+
<input type="checkbox" required> I am eligible according to above mentioned criteria.
31+
<button>SUBMIT</button>
32+
33+
</form>
34+
</div>
35+
<div class="form-container sign-in-container">
36+
<form action="#">
37+
<h1>Sign up</h1>
38+
<div class="social-container">
39+
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
40+
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
41+
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
42+
</div>
43+
<span>or use your account</span>
44+
<input type="email" placeholder="Email" />
45+
<input type="password" placeholder="Password" />
46+
<input type="password" placeholder="Confirm Password" />
47+
48+
<button>Sign Up</button>
49+
</form>
50+
</div>
51+
<div class="overlay-container">
52+
<div class="overlay">
53+
<div class="overlay-panel overlay-left">
54+
<h1>STEP-2</h1>
55+
<p>Enter your personal &professional details and complete profile now!</p>
56+
<button class="ghost" id="signIn">PREVIOUS</button>
57+
</div>
58+
<div class="overlay-panel overlay-right">
59+
<h1>CREATE ACCOUNT</h1>
60+
<p>Signup to connect with us!</p>
61+
<button class="ghost" id="signUp">NEXT</button>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
67+
68+
69+
<script src="js/main.js"></script>
70+
</body>
71+
</html>

‎JS Projects/Sliding registration form/js/main.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const signUpButton = document.getElementById('signUp');
2+
const signInButton = document.getElementById('signIn');
3+
const container = document.getElementById('container');
4+
5+
signUpButton.addEventListener('click', () => {
6+
container.classList.add('right-panel-active');
7+
});
8+
9+
signInButton.addEventListener('click', () => {
10+
container.classList.remove('right-panel-active');
11+
});

0 commit comments

Comments
 (0)