Creating Log In and Registration Form Using HTML & CSS
 |
| Log In and Registration Form |
In This tutorial, you are going to learn how to create a login and registration/sign in and sign up form using HTML and CSS.
Here is a new dark mode is applied with social media icons. You can slide the form by clicking on the register or login button. You can also log in with social media platforms like Facebook, Twitter, and google plus.
*Note: Create two files 1st one is an HTML file and 2nd one is a CSS file and save these two files with their extensions as,
HTML file : index.html
CSS file : style.css
HTML code: (index.html)
<!DOCTYPE html>
<html lang="en">
<head> <!--created by 8bit-code-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css ">
</head>
<body>
<!--created by 8bit-code-->
<div class="main">
<div class="form-box">
<div class="btn-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>
<div class="social-media">
<a href="#"><i class="fa fa-facebook-square"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
</div>
<form id="login" class="input-group">
<input type="text" class="input-field" placeholder="Username" required>
<input type="password" class="input-field" placeholder="Enter Password" required>
<h5 style="color: #fff;text-align: center;margin-top: 20px;">New Here? Register First</h5>
<button type="submit" class="submit-btn">Log In</button>
</form>
<form id="register" class="input-group">
<input type="text" class="input-field" placeholder="Username" required>
<input type="email" class="input-field" placeholder="email" required>
<input type="password" class="input-field" placeholder="Enter Password" required>
<h5 style="color: #fff;text-align: center;margin-top: 20px;">Already Have An Account? Log In Here</h5>
<button type="submit" class="submit-btn">Register</button>
</form>
</div>
</div>
<!--created by 8bit-code-->
<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>
</body>
</html>
CSS Code : (style.css)
*{
margin: 0;
padding: 0;
} /* created by 8bit-code*/
.main{
height: 100%;
width: 100%;
background-image: url(pexels-mark-mccammon-1080953.jpg);
background-size: cover;
background-position: center;
position: absolute;
}
.form-box{
width: 380px;
height: 480px;
position: relative;
margin: 70px auto;
background: rgb(29, 29, 29);
padding: 10px;
border-radius: 10px;
overflow: hidden;
}
.btn-box{
width: 220px;
margin: 35px auto;
position: relative;
box-shadow: 0 0 5px 0 #03a9f4;
border-radius: 30px;
}
.toggle-btn{
padding: 10px 30px;
cursor: pointer;
background: transparent;
border: none;
outline: none;
position: relative;
color: aqua;
}
#btn{
top: 0;
left: 0;
position: absolute;
width: 110px;
height: 100%;
background: #1b1b1b;
border-radius: 30px;
}
.input-group{
top: 210px;
position:absolute;
width: 280px;
}
.input-field{
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #999;
background: transparent;
outline: none;
color: #03a9f4;
}
.submit-btn{
width: 80%;
padding: 10px 30px;
display: block;
cursor: pointer;
margin: auto;
background: #1b1b1b;
border-radius: 30px;
justify-content: center;
margin-top: 30px;
color: aqua;
box-shadow: 0 0 5px 0 #03a9f4;
border: 0;
} /* created by 8bit-code*/
#login{
left: 50px;
}
#register{
left: 450px;
}
.social-media{
text-align: center;
}
a{
color: white;
font-size: 15px;
}
i{
background: #3b3c36;
padding: 10px;
margin: 5px;
}
.fa.fa-facebook-square{
background: #3b5998;
}
.fa.fa-twitter{
background: #1da1f2;
}
.fa.fa-google-plus{
background: #db4a39;
}
If you have any problems while creating these login and Registration Form you can watch this video.
we are done here, I hope you love this tutorial. Thank you for showing interest in this blog.
0 Comments