BrodScholl
☰
Creating a Responsive Login Form & Registration form
Hello friend, I hope you are doing great. Today you will learn how to create an Responsive Login Registration Form using HTML CSS and Javascript.
The interesting thing about this form is that when the user enters
When you click on signup, it automatically changes to the same form. And when you open it on any device, it automatically adjusts.
Basic Style
Shape : The shape of this box is a slightly rounded rectangle, giving it a soft and modern look. Color : This button uses Multi backgroun color .
Output
Other
HTML
< !DOCTYPE html>
< html lang ="en" >
< head>
< meta charset ="UTF-8" >
< meta name ="viewport" content
="width=device-width, initial-scale=1.0" >
< title> Login & Signup Form </title>
< /head>
< body>
<div class ="container"id ="container">
<div class ="form-container sign-up" >
<form action ="#" >
<h1 >Creat account </h1>
<div class ="social-icons" >
<a href ="#" class ="icon"><i class ="fa-brands fa-facebook-f" > </i> </a>
<a href ="#" class ="icon"><i class ="fa-brands fa-google-plus-g" > </i> </a>
<a href ="#" class ="icon"><i class ="fa-brands fa-linkedin-in" > </i> </a>
<a href ="#" class ="icon"><i class ="fa-brands fa-github" > </i> </a>
</div>
<span> or use your email for registeration </span>
<input type ="text"placeholder ="Enter your name">
<input type ="email"placeholder ="Enter your email">
<input type ="password"placeholder ="Enter your password">
<button> Sign Up </button>
</form>
</div>
<div class ="form-container sign-in" >
<form action ="#" >
<h1 >Sign In </h1>
<div class ="social-icons" >
<a href ="#" class ="icon"><i class ="fa-brands fa-facebook-f" > </i> </a>
<a href ="#" class ="icon"><i class ="fa-brands fa-google-plus-g" > </i> </a>
<a href ="#" class ="icon"><i class ="fa-brands fa-linkedin-in" > </i> </a>
<a href ="#" class ="icon"><i class ="fa-brands fa-github" > </i> </a>
</div>
<span> or use your email or Password </span>
<input type ="text"placeholder ="Enter your name">
<input type ="email"placeholder ="Enter your email">
<input type ="password"placeholder ="Enter your password">
<button> Sign Up </button>
</form>
</div>
<div class ="form-container sign-in">
<h1 >Login </h1>
<form action ="#" >
<input type ="text"placeholder ="Email Address" required>
<input type ="password"placeholder ="Password" required>
<a href ="#" > Forgot Password ? </a>
</form>
<div class ="signup">
<div class ="signup" > Not a Member ? </a>
<a href ="#" > Signup Now </a>
<input type ="submit"value ="Login">
</form>
</div>
</body>
</html>
CSS
/*Style the box items */
* {
padding : 0 ;
margin : 0 ;
box-sizing : border-box ;
font-family : sans-serif ;
}
body {
backgroun-color : #6433f9 ;
min-height : 100vh ;
flex-direction : column ;
justify-content : center ;
align-items : center ;
display : flex ;
height : 100vh ;
}
.container {
background-color : #fff ;
overflow : hidden ;
position : relative ;
width : 769px ;
max-width : 100% ;
min-height : 480px ;
box-shadow : 0 5px 15px rgba (0, 0, 0, 0.1) ;
border-radius : 30px ;
}
.container p {
margin : 20px 0px ;
font-size : 18px ;
line-height : 21px ;
font-weight : 600 ;
}
.container a {
margin : 10px 0px 10px ;
color : #fff ;
font-size : 15px ;
text-decoration : none ;
}
. container button {
color : #fff ;
margin-top : 10px ;
padding : 10px 48px ;
font-weight : 600 ;
border-radius : 10px ;
background-color : #512da8 ;
font-size : 15px ;
text-transform : uppercase ;
cursor : pointer ;
}
.container form {
display : flex ;
flex-direction : column ;
gap : 20px ;
position : relative ;
margin-top : 40px ;
}
.form-container {
position : absolute ;
top : 0 ;
height : 100% ;
transition : all 0.6s ease-in-out ;
}
form . checkbox {
display : flex ;
align-items : center ;
gap : 12px ;
}
Javascript
/*JavaScript*/
<script>
const container=document.getElementById('container' ) ;
registerBtn=document.getElementById('register' ) ;
loginBtn=document.getElementById('login ' ) ; registerBtn.addEventListener ("click" , ()=>{
container.classList.add("active") ;
}) ;
loginBtn.addEventListener ("click" , ()=>{
container.classList.remove("active") ;
}) ;
</script>
Download Files
BrodSchool
Jagatpur,Amresh Kumar (Founder ) Phone: +91 9198 26 3500Email: suportucracker@gmail.com
