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.
@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;
}
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");
})
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