Slide Sign In Form / Slide Sign Up Form

Forms Bootstrap 5Free+ CSS+ JS

Slide Sign In Form / Slide Sign Up Form: a hand-crafted, open-source Bootstrap 5 form. HTML, CSS & JS included, ready to copy.

1.9k views41 downloads4 years ago

gosnippets.com/preview/slide-sign-in-form-/-slide-sign-up-form

Source Code

1<div class="container right-panel-active">
2	<!-- Sign Up -->
3	<div class="container__form container--signup">
4		<form action="#" class="form" id="form1">
5			<h2 class="form__title">Sign Up</h2>
6			<input type="text" placeholder="User" class="input" />
7			<input type="email" placeholder="Email" class="input" />
8			<input type="password" placeholder="Password" class="input" />
9			<button class="btn">Sign Up</button>
10		</form>
11	</div>
12
13	<!-- Sign In -->
14	<div class="container__form container--signin">
15		<form action="#" class="form" id="form2">
16			<h2 class="form__title">Sign In</h2>
17			<input type="email" placeholder="Email" class="input" />
18			<input type="password" placeholder="Password" class="input" />
19			<a href="#" class="link">Forgot your password?</a>
20			<button class="btn">Sign In</button>
21		</form>
22	</div>
23
24	<!-- Overlay -->
25	<div class="container__overlay">
26		<div class="overlay">
27			<div class="overlay__panel overlay--left">
28				<button class="btn" id="signIn">Sign In</button>
29			</div>
30			<div class="overlay__panel overlay--right">
31				<button class="btn" id="signUp">Sign Up</button>
32			</div>
33		</div>
34	</div>
35</div>

More Forms snippets

Bootstrap 5 simple login form with social login

Free Bootstrap 5 form snippet — Bootstrap 5 simple login form with social login. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

FormsView →

Bootstrap 5 Login Form UI Design snippets

Bootstrap 5 Login Form UI Design snippets: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.

FormsView →

Bootstrap 5 Fancy user login form snippets

Free Bootstrap 5 form snippet — Bootstrap 5 Fancy user login form snippets. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

FormsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="container right-panel-active"> 2  3 <div class="container__form container--signup"> 4 <form action="#" class="form" id="form1"> 5 <h2 class="form__title">Sign Up</h2> 6 <input type="text" placeholder="User" class="input" /> 7 <input type="email" placeholder="Email" class="input" /> 8 <input type="password" placeholder="Password" class="input" /> 9 <button class="btn">Sign Up</button> 10 </form> 11 </div> 12 13  14 <div class="container__form container--signin"> 15 <form action="#" class="form" id="form2"> 16 <h2 class="form__title">Sign In</h2> 17 <input type="email" placeholder="Email" class="input" /> 18 <input type="password" placeholder="Password" class="input" /> 19 <a href="#" class="link">Forgot your password?</a> 20 <button class="btn">Sign In</button> 21 </form> 22 </div> 23 24  25 <div class="container__overlay"> 26 <div class="overlay"> 27 <div class="overlay__panel overlay--left"> 28 <button class="btn" id="signIn">Sign In</button> 29 </div> 30 <div class="overlay__panel overlay--right"> 31 <button class="btn" id="signUp">Sign Up</button> 32 </div> 33 </div> 34 </div> 35</div>