In this article, we’ll show you how to create a Complete Responsive Login Form Design using HTML & CSS. This type of Responsive Login Form is used on the websites for the webpage for Login. One of the most beautiful and good-looking designs of a Responsive Login Page Template.
You easily create this Responsive Login Form with Icons Using HTML & CSS. then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Responsive Login Form
In this Responsive Login Form, at first, on the webpage, there is a login form with a login title, two input fields with icons used for username and password, a login button, and hyperlinks for forget password. As you can see on the image right side two image for modern look. The mobile device will hide right side two image. This form is created using only HTML & CSS and I have used some JavaScript function in this Responsive login form so when you focus input filled then font & border color show with transition. If you are feeling difficult to understand then you can watch a full video tutorial on this Responsive login form design.
Watch the video tutorial to create Responsive Login Form
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Responsive Login Form Design step by step completely beautifully. So you can learn how to make these Responsive Login Form Design. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Responsive Login Form Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Neumorphism Calculator Using HTML, CSS & JS
- Automatic Image Slider Using HTML, CSS & JS
- 30 Free CSS Login Forms For Your Website 2021
Responsive Login Form Design | Source Codes
You have to create HTML, CSS, and JS File For this Site. After creating these files just paste the following codes into your file.
First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Form</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
<!----FontAwesome CDN Link---->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
</head>
<body>
<img src="https://i.ibb.co/XWdPc2X/wave-01.png" class="wave">
<div class="container">
<div class="img">
<img src="https://i.ibb.co/JvXP8rW/phone.png">
</div>
<div class="login-content">
<form action="index.html" class="form-login">
<img src="https://i.ibb.co/H4f3Hkv/profile.png">
<h2 class="title">Welcome</h2>
<div class="input-div one">
<div class="i">
<i class="fas fa-user"></i>
</div>
<div class="div">
<h5>Username</h5>
<input type="text" class="input">
</div>
</div>
<div class="input-div pass">
<div class="i">
<i class="fas fa-lock"></i>
</div>
<div class="div">
<h5>Password</h5>
<input type="password" class="input">
</div>
</div>
<input type="submit" class="btn" value="Login">
<a href="#">Forgot Password?</a>
</form>
</div>
</div>
<!---JS CDN Link---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--Custom File Link--->
<script src="js.js"></script>
</body>
</html>
Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];600;700;800&display=swap');
*{
margin: 0;
padding:0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
overflow: hidden;
}
.wave{
position: fixed;
bottom: 0;
left: 0;
height: 100%;
z-index: -1;
}
.container{
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 7rem;
padding: 0 2rem;
}
.img{
display: flex;
justify-content: flex-end;
align-items: center;
}
.login-content{
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.img img{
width: 500px;
}
form{
width: 360px;
}
.login-content img{
height: 100px;
}
.title{
margin: 15px 0;
color: #333;
text-transform: uppercase;
font-size: 2.9rem;
}
.login-content .input-div{
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin: 25px 0;
padding: 5px 0;
border-bottom: 2px solid #d9d9d9;
}
.login-content .input-div.one{
margin-top: 0;
}
.i{
color: #d9d9d9;
display: flex;
justify-content: center;
align-items: center;
}
.i i{
transition: .3s;
}
.input-div > div{
position: relative;
height: 45px;
}
.input-div > div > h5{
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
font-size: 18px;
transition: .3s;
}
.input-div:before, .input-div:after{
content: '';
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #6b5cff;
transition: .4s;
}
.input-div:before{
right: 50%;
}
.input-div:after{
left: 50%;
}
.input-div.focus:before, .input-div.focus:after{
width: 50%;
}
.input-div.focus > div > h5{
top: -5px;
font-size: 15px;
}
.input-div.focus > .i > i{
color: #6b5cff;
}
.input-div > div > input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.7rem;
font-size: 1.2rem;
color: #555;
}
.input-div.pass{
margin-bottom: 4px;
}
a{
display: block;
text-align: center;
text-decoration: none;
color: #999;
font-size: 0.9rem;
transition: .3s;
}
a:hover{
color: #6b5cff;
}
.btn{
display: block;
width: 100%;
height: 50px;
border-radius: 25px;
outline: none;
border: none;
background-image: linear-gradient(to right, #6b5cff, #5d51c7, #6b5cff);
background-size: 200%;
font-size: 1.2rem;
color: #fff;
text-transform: uppercase;
margin: 1rem 0;
cursor: pointer;
transition: .5s;
}
.btn:hover{
background-position: right;
}
@media screen and (max-width: 1050px){
.container{
grid-gap: 5rem;
}
}
@media screen and (max-width: 1000px){
form{
width: 290px;
}
.title{
margin: 8px 0;
font-size: 2.4rem;
}
.img img{
width: 400px;
}
}
@media screen and (max-width: 900px){
body{
background-color: #6b5cff;
}
.container{
grid-template-columns: 1fr;
}
.img{
display:none;
}
.wave{
display:none;
}
.login-content{
justify-content: center;
color: #6b5cff;
}
.form-login{
padding: 40px;
background-color: #fff;
width: 420px;
border-radius: 8px;
box-shadow: 3px 3px 15px rgba(88, 34, 160, 0.2);
}
}Third Step, you have to create a JS file with the name of js.js and paste the given codes in your JS file. Remember, you’ve to create a file with .js extension.
JS CODE:
const inputs=document.querySelectorAll(".input");
function addCl() {
let par=this.parentNode.parentNode;
par.classList.add("focus");
}
function remC1() {
let par=this.parentNode.parentNode;
if(this.value=="")
par.classList.remove("focus");
}
inputs.forEach(input=>{
input.addEventListener("focus",addCl);
input.addEventListener("blur",remC1);
})now you’ve successfully created these Responsive Login Form. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
