Skip to content

Commit 50cc7f0

Browse files
solygambassolygambas
committed
add sliding form
1 parent 893fc3b commit 50cc7f0

File tree

4 files changed

+410
-88
lines changed

4 files changed

+410
-88
lines changed

‎87-sliding signin signup form/index.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!-- Based on Sliding Sign In & Sign Up Form by Brad Traversy (2019)
2+
see: https://www.youtube.com/watch?v=mUdo6w87rh4 -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
12+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
13+
crossorigin="anonymous"
14+
/>
15+
<link rel="stylesheet" href="style.css" />
16+
<title>Sliding Sign In & Sign Up Form</title>
17+
</head>
18+
<body>
19+
<div class="container" id="container">
20+
<div class="form-container sign-up-container">
21+
<form>
22+
<h1>Create Account</h1>
23+
<div class="social-container">
24+
<a href="#" class="social"><i class="fab fa-instagram"></i></a>
25+
<a href="#" class="social"><i class="fab fa-google"></i></a>
26+
<a href="#" class="social"><i class="fab fa-tiktok"></i></a>
27+
</div>
28+
<span>or use your email for registration</span>
29+
<input type="text" placeholder="Name" />
30+
<input type="email" placeholder="Email" />
31+
<input type="password" placeholder="Password" />
32+
<button onclick="return false;">Sign Up</button>
33+
</form>
34+
</div>
35+
<div class="form-container sign-in-container">
36+
<form>
37+
<h1>Sign in</h1>
38+
<div class="social-container">
39+
<a href="#" class="social"><i class="fab fa-instagram"></i></a>
40+
<a href="#" class="social"><i class="fab fa-google"></i></a>
41+
<a href="#" class="social"><i class="fab fa-tiktok"></i></a>
42+
</div>
43+
<span>or use your account</span>
44+
<input type="email" placeholder="Email" />
45+
<input type="password" placeholder="Password" />
46+
<a href="#">Forgot your password?</a>
47+
<button onclick="return false;">Sign In</button>
48+
</form>
49+
</div>
50+
<div class="overlay-container">
51+
<div class="overlay">
52+
<div class="overlay-panel overlay-left">
53+
<h1>Welcome Back!</h1>
54+
<p>Please login with your personal info</p>
55+
<button class="ghost" id="signIn">Sign In</button>
56+
</div>
57+
<div class="overlay-panel overlay-right">
58+
<h1>Hello, Friend!</h1>
59+
<p>Enter your personal details and start your journey with us</p>
60+
<button class="ghost" id="signUp">Sign Up</button>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
<script src="script.js"></script>
66+
</body>
67+
</html>

‎87-sliding signin signup form/script.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+
});

‎87-sliding signin signup form/style.css

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

0 commit comments

Comments
 (0)