Learn web development- How To Create A Login & Registration Form in HTML & CSS.
In this video you are going to learn how to create the onlick login and registration form using the html and css........First you are going to create the navigation menu and then you are going to create the login and registration form. After creating these two we are going to connect the login and registration form to the login button in the navigation bar then you can see the beautiful click event
source code
Html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seek coding</title>
<link rel="stylesheet" href="style.css">
<!---we had linked our css file----->
</head>
<body>
<div class="full-page">
<div class="navbar">
<div>
<a href='website.html'>Seek Coding</a>
</div>
<nav>
<ul id='MenuItems'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
<li><button class='loginbtn' onclick="document.getElementById('login- form').style.display='block'" style="width:auto;">Login</button></li>
</ul>
</nav>
</div>
<div id='login-form'class='login-page'>
<div class="form-box">
<div class='button-box'>
<div id='btn'></div>
<button type='button'onclick='login()'class='toggle-btn'>Log In</button>
<button type='button'onclick='register()'class='toggle-btn'>Register</button>
</div>
<form id='login' class='input-group-login'>
<input type='text'class='input-field'placeholder='Email Id' required >
<input type='password'class='input-field'placeholder='Enter Password' required>
<input type='checkbox'class='check-box'><span>Remember Password</span>
<button type='submit'class='submit-btn'>Log in</button>
</form>
<form id='register' class='input-group-register'>
<input type='text'class='input-field'placeholder='First Name' required>
<input type='text'class='input-field'placeholder='Last Name ' required>
<input type='email'class='input-field'placeholder='Email Id' required>
<input type='password'class='input-field'placeholder='Enter Password' required>
<input type='password'class='input-field'placeholder='Confirm Password' required>
<input type='checkbox'class='check-box'><span>I agree to the terms and conditions</span>
<button type='submit'class='submit-btn'>Register</button>
</form>
</div>
</div>
</div>
<script>
var x=document.getElementById('login');
var y=document.getElementById('register');
var z=document.getElementById('btn');
function register()
{
x.style.left='-400px';
y.style.left='50px';
z.style.left='110px';
}
function login()
{
x.style.left='50px';
y.style.left='450px';
z.style.left='0px';
}
</script>
<script>
var modal = document.getElementById('login-form');
window.onclick = function(event)
{
if (event.target == modal)
{
modal.style.display = "none";
}
}
</script>
</body>
</html>
Css file
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.full-page
{
height: 100%;
width: 100%;
background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(images/bg-2.jpg);
background-position: center;
background-size: cover;
position: absolute;
}
.navbar
{
display: flex;
align-items: center;
padding: 20px;
padding-left: 50px;
padding-right: 30px;
padding-top: 50px;
}
nav
{
flex: 1;
text-align: right;
}
nav ul
{
display: inline-block;
list-style: none;
}
nav ul li
{
display: inline-block;
margin-right: 70px;
}
nav ul li a
{
text-decoration: none;
font-size: 20px;
color: white;
font-family: sans-serif;
}
nav ul li button
{
font-size: 20px;
color: white;
outline: none;
border: none;
background: transparent;
cursor: pointer;
font-family: sans-serif;
}
nav ul li button:hover
{
color: aqua;
}
nav ul li a:hover
{
color: aqua;
}
a
{
text-decoration: none;
color: palevioletred;
font-size: 28px;
}
#login-form
{
display: none;
}
.form-box
{
width:380px;
height:480px;
position:relative;
margin:2% auto;
background:rgba(0,0,0,0.3);
padding:10px;
overflow: hidden;
}
.button-box
{
width:220px;
margin:35px auto;
position:relative;
box-shadow: 0 0 20px 9px #ff61241f;
border-radius: 30px;
}
.toggle-btn
{
padding:10px 30px;
cursor:pointer;
background:transparent;
border:0;
outline: none;
position: relative;
}
#btn
{
top: 0;
left:0;
position: absolute;
width: 110px;
height: 100%;
background: #F3C693;
border-radius: 30px;
transition: .5s;
}
.input-group-login
{
top: 150px;
position:absolute;
width:280px;
transition:.5s;
}
.input-group-register
{
top: 120px;
position:absolute;
width:280px;
transition:.5s;
}
.input-field
{
width: 100%;
padding:10px 0;
margin:5px 0;
border-left:0;
border-top:0;
border-right:0;
border-bottom: 1px solid #999;
outline:none;
background: transparent;
}
.submit-btn
{
width: 85%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
background: #F3C693;
border: 0;
outline: none;
border-radius: 30px;
}
.check-box
{
margin: 30px 10px 34px 0;
}
span
{
color:#777;
font-size:12px;
bottom:68px;
position:absolute;
}
#login
{
left:50px;
}
#login input
{
color:white;
font-size:15;
}
#register
{
left:450px;
}
#register input
{
color:white;
font-size: 15;
}
First You create the html file with the .html file and another file with the .css file in the same folder and then you copy the html code in the .html file and css code in the .css file and the code....................
You can download the background image from the youtube video description ........
Please Subscribe to seek coding Youtube channel for more interesting projects .........
In future I am going to do projects on python and going to keep in the youtube. so please do subscribe to my channel and get ready......................
Thank You......