Responsive Login and Registration Form
Hello Friends, Today in this blog you will learn How to make Login and Registration form in HTML CSS JavaScript.
In the earlier blog, I have shared to Create a Responsive Toggle Menu Using jQuery HTML CSS, Now it's time to learn How to make Login and Registration form in HTML CSS JavaScript.
In this blog we learn How to make Login and Registration form in HTML CSS and JavaScript.
So Here is the code and my work. I hope you are gonna love this and share whit your friends too. So let's Start learning How to make Login and Registration form in HTML CSS JavaScript from scratch. So Let's start..
STEP 1: Open any code editor
STEP 2: Create a index.html file with html extension
STEP 3: Create a style.css file with css extension
STEP 4: Connect style.css file to the index.html file code below
<link rel="stylesheet" type="text/css" href="style.css">
STEP 5: Add this Code in index.html page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animated Login and Registration form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="main-box">
<div class="btn-box">
<div id="btn"></div>
<button id="signIn">Login</button>
<button id="signUp">Sign Up</button>
</div>
<form id="login">
<h1>Login</h1>
<input type="text" placeholder="Ussername">
<input type="password" placeholder="Password">
<button id="btn-btn">Login</button>
</form>
<form id="sign">
<h1>Sign Up</h1>
<input type="text" placeholder="Full Name">
<input type="text" placeholder="Email">
<input type="password" placeholder="Password">
<button id="btn-btn">Sign Up</button>
</form>
</div>
</div>
<script type="text/javascript">
var btn = document.getElementById('btn');
var signIn = document.getElementById('signIn');
var signUp = document.getElementById('signUp');
var button = document.querySelector('button');
var login = document.querySelector('#login');
var sign = document.querySelector('#sign');
signUp.addEventListener('click',function(){
btn.style.left = '100px';
sign.style.left = '0%';
login.style.left = '-100%';
sign.style.left = '0%';
})
signIn.addEventListener('click',function(){
btn.style.left = '0px';
login.style.left = '0%';
sign.style.left = '100%';
})
</script>
</body>
</html>
STEP 6: Add this Code in style.css page
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
}
.container{
width: 100%;
height: 100vh;
background-color: #95a5a6;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.main-box{
width: 400px;
max-width: 90%;
height: 420px;
background-color: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 0 1px 1px #fff;
border-radius: 3px;
}
.btn-box{
text-align: center;
margin: 30px auto;
width: 203px;
position: relative;
z-index: 1;
box-shadow: 0 0 20px 9px #ff61241f;
border-radius: 20px;
}
#signIn,#signUp{
padding: 12px 25px;
outline: none;
border: 0;
background-color: transparent;
cursor: pointer;
border-radius: 20px;
}
#btn{
width: 50%;
height: 100%;
background: linear-gradient(to right, #ff105f, #ffad06);
position: absolute;
left: 0px;
border-radius: 20px;
z-index: -1;
transition: .5s;
}
input[type='text'],input[type='password']{
width: 100%;
padding: 10px 5px;
margin: 10px 0;
align-content: center;
}
#btn-btn{
width: 100%;
padding: 16px 0px;
background: linear-gradient(to right, #ff105f, #ffad06);
border: 0;
border-radius: 3px;
cursor: pointer;
color: #fff;
margin: 10px 0;
}
#btn-btn:hover{
background: linear-gradient(to right, #ffad06, #ff105f);
}
form{
margin: auto;
width: 100%;
position: absolute;
transition: .5s;
padding: 25px;
}
form h1{
text-align: center;
font-size: 20px;
margin: -26px 0px 25px 0px;
}
#sign{
left: 100%;
}
Step 7) Now Copy File Path and pate it any browser.
Step 8) See magic.....😊
Thank you...........
You can also read: How to creating an image slider using JavaScript HTML and CSS
0 Comments