Responsive Sign in and Sign Up Form Slider using HTML, CSS & JavaScript

Responsive Sign in and Sign Up Form Slider using HTML, CSS & JavaScript

Hello developers, today in this blog you’ll learn to create a Responsive Sign in and signup Form Slider using HTML, CSS & JavaScript.

You log in to officially record your presence as a returning user, whereas signing up simply registers your intent to be present officially in the system. Sign up means creating an account as a new user so that you can log in later with your credentials.

In this blog (Responsive Sign in and Sign Up Form Slider), on the webpage, at first, the sign in or login form is displayed and at the left, there is a title as Sign In with some icons such as GitHub, Google, LinkedIn and Gmail which is used to log in the account through those websites. If you are a registered user, you can use this login form where you can fill, your email id and password and can click the Sign In button. Whereas, if you are a new user, you can click the text, named Sign Up which is at the right side of the sign-in form.

When you click the button Sign Up, the form will slide and show you a Sign-Up form with the title Create Account, below this title there are some icons present as in the sign-in form and will view the Register form where you can fill in your name, your email I’d, and password and click the Sign-Up button. The Onclick function is used in JavaScript.

The source code of this Responsive Sign in and Sign Up Form Slider is given below, if you want the source code of this program, you can copy it. You can use this Responsive Sign in and Sign Up Form Slider on your projects.

Responsive Sign in and Sign Up Form Slider [Source Code]

To make this website (Responsive Sign in and Sign Up Form Slider), you need to create three files: an HTML file, a CSS file, and a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Sign In or Sign Up Form slider|| Learningrobo</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"> </head> <body> <div class="container" id="container"> <div class="form signup"> <form action="#"> <h1>Create Account</h1> <div class="social-container"> <a href="#" class="social"><i class="fab fa-github"></i></a> <a href="#" class="social"><i class="fab fa-google"></i></a> <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="social"><i class="far fa-envelope"></i></a> </div> <span>or use email for register</span> <input type="text" placeholder="Name"> <input type="email" placeholder="Email"> <input type="password" placeholder="Password"> <button>Sign Up</button> </form> </div> <div class="form signin"> <form action="#"> <h1>Sign In</h1> <div class="social-container"> <a href="#" class="social"><i class="fab fa-github"></i></a> <a href="#" class="social"><i class="fab fa-google"></i></a> <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="social"><i class="far fa-envelope"></i></a> </div> <span>or use your account</span> <input type="email" placeholder="Email"> <input type="password" placeholder="Password"> <button>Sign In</button> </form> </div> <div class="overlay-container"> <div class="overlay"> <div class="panel overlay-left"> <h1>Welcome To<br> Learning Robo</h1> <p>Please Subscribe</p> <button class="press" id="signIn">Sign In</button> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> <div class="panel overlay-right"> <h1>Learning Robo</h1> <p>HTML, CSS & JS Projects</p> <button class="press" id="signUp">Sign Up</button> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </div> </div> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page responsive and attractive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
    	*{
    		margin: 0;
    		padding: 0;
    		box-sizing: border-box;
    	}
    	body{
    		background: #202124;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		font-family: 'Mortserrat',sans-serif;
    		height: 100vh;
    		margin: 0 auto;
    	}
    	.container{
    		background: #fff;
    		border-radius: 10px;
    		width: 768px;
    		max-width: 100%;
    		min-height: 480px;
    		position: relative;
    		overflow: hidden;
    	}
    	.form{
    		position: absolute;
    		top: 0%;
    		height: 100%;
    		transition: all 0.6 ease-in-out;
    	}
    	.signup{
    		left: 0;
    		width: 50%;
    		z-index: 1; 
    		opacity: 0;
    	}
    	form{
    		background: #fff;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		flex-direction: column;
    		padding: 0 50px;
    		height: 100%;
    		text-align: center;
    	}
    	h1{
    		font-family: bold;
    		margin: 0;
    	}
    	.social-container{
    		margin: 20px 0;
    	}
    	.social-container a{
    		border: 1px solid #000;
    		border-radius: 50%;
    		display: inline-flex;
    		justify-content: center;
    		align-items: center;
    		margin: 0 5px;
    		height: 40px;
    		width: 40px;
    	}
    	a{
    		color: #333;
    		font-size: 14px;
    		text-decoration: none;
    		margin: 15px 0;
    	}
    	span{
    		font-size: 12px;
    	}
    	input{
    		background: #eee;
    		border: none;
    		text-decoration: none;
    		width: 100%;
    		margin: 8px 0;
    		padding: 12px 15px;
    	}
    	button{
    		border-radius: 20px;
            margin-top: 10px;
    		border: 1px solid #fff;
    		background: #4ffbdf;
    		font-size: 12px;
    		padding: 12px 45px;
    		font-weight: bold;
    		letter-spacing: 1px;
    		text-decoration: uppercase;
    		transition: transform .8s ease-in;
    	}
    	.signin{
    		left: 0;
    		width: 50%;
    		z-index: 2;
    	}
    	.overlay-container{
    		position: absolute;
    		top: 0;
    		left: 50%;
    		width: 50%;
    		height: 100%;
    		z-index: 100;
    		overflow: hidden;
    		transition: transform .6s ease-in-out;
    	}
    	.overlay{
    		background-image: linear-gradient(290deg, #08AEEA 0%, #2AF598 100%);
    		background-repeat: no-repeat;
    		background-size: cover;
    		background-position: 0 0;
    		color: #fff;
    		position: relative;
    		left: -100%;
    		height: 100%;
    		width: 200%;
    		transform: translateX(0);
    		transition: transform .6s ease-in-out;
    	}
    	.panel{
    		position: absolute;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		flex-direction: column;
    		padding: 0px 40px;
    		text-align: center;
    		top: 0;
    		height: 100%;
    		width: 50%;
    		transform: translateX(0);
    		transition: transform .6s ease-in-out;
    	}
    	.overlay-left{
    		transform: translateX(-20%);
    	}
    	.overlay-right{
    		right: 0;
    		transform: translateX(0);
    	}
    	button:active{
    		transform: scale(.95);
    	}
    	button.press{
    		background: transparent;
    		border-color: #fff;

    	}
    	p{
    		font-size: 14px;
    		font-weight: 100;
    		line-height: 20px;
    		letter-spacing: .5px;
    		margin: 20px 0 30px;
    	}
    	.container.right-panel-active .signin{
    		transform: translateX(100%);
    	}
    	.container.right-panel-active .signup{
    		transform: translateX(100%);
    		opacity: 1;
    		z-index: 5;
    		animation: slide 0.6s;
    	}
    	@keyframes slide{
    		0%,49.99%{
    			opacity: 0;
    			z-index: 1;
    		}
    		50%,100%{
    			opacity: 1;
    			z-index: 5;
    		}
    	}
    	.container.right-panel-active .overlay-container{
    		transform: translateX(-100%);
    	}
    	.container.right-panel-active .overlay{
    		transform: translateX(50%);
    	}
    	.container.right-panel-active .overlay-left{
    		transform: translateX(0);
    	}
    	.container.right-panel-active .overlay-right{
    		transform: translateX(20%);
    	}
        .credit{
            margin: 35px;
        }
        .credit a{
            font-weight: bold;
        }
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js and remember that you've got need to make a file with a .js extension.


const signUpButton = document.getElementById("signUp");
		const signInButton = document.getElementById("signIn");
		const container = document.getElementById("container");
		
		signUpButton.addEventListener('click',()=>{
			container.classList.add("right-panel-active");
		})

		signInButton.addEventListener('click',()=>{
			container.classList.remove("right-panel-active");
		})
We hope you would like this Responsive Sign in and Sign Up Form Slider using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this Responsive Sign in and Sign Up Form Slider using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome