Hello friends, Today in this blog I’m going to create a Responsive Login Form using only HTML & CSS. Prior I have shared a responsive navigation menu and presently I’m planning to create a login form.
Simply, A login form is a form used to validate the user before giving entry to a particular page. The login form includes two input fields, one is used for an email address, phone, and username, and another one is used for the password.
In this program [Responsive Login Form], at first, on the webpage, there is a login form with a login title, two input fields with icons used for email and password, a login button, and two hyperlinks for forget password and signup [to making new account]. This form is created using only HTML & CSS and I have not added a JavaScript function in this program[log in form] so when you fill up your login details [email and password] and submit the form, it won’t submit your details anywhere.
If you are finding it difficult to understand then you can watch a full video tutorial on this program[Animated Login Form with Icons].
Video Tutorial Animated Login Form with Icons
In this video, you will see an animated login form that is created using only HTML & CSS. So if you are a beginner then you can also create this type of login form but if you know JavaScript then you can add advanced features in this login form like validating user email and password.
I hope you have liked this login form. If you like this program [Responsive Login Form] and want to get source codes for this program then you can easily copy the codes from the below boxes. You can also download all source code files from the download button for free.
You Might Like This:
Animated Login Form with Icons [Source Codes]
To create this program [Responsive Login Form], First, you would like to create two files one is an HTML file and another is the CSS file. After creating these files, just copy the following codes and paste them into your files. You can also download the source code files of this program [Responsive Login Form] from the given “Download Button”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Login Form HTML CSS | CodingNepal</title>
<link rel="stylesheet" href="style.css" />
<!-- Font Awesome CDN link for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
</head>
<body>
<div class="wrapper">
<div class="title"><span>Login Form</span></div>
<form action="#">
<div class="row">
<i class="fas fa-user"></i>
<input type="text" placeholder="Email or Phone" required />
</div>
<div class="row">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" required />
</div>
<div class="pass"><a href="#">Forgot password?</a></div>
<div class="row button">
<input type="submit" value="Login" />
</div>
<div class="signup-link">Not a member? <a href="#">Signup now</a></div>
</form>
</div>
</body>
</html>
/* Importing Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
padding: 15px;
background: #1abc9c;
overflow: hidden;
}
.wrapper {
max-width: 500px;
width: 100%;
background: #fff;
border-radius: 5px;
box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
}
.wrapper .title {
height: 120px;
background: #16a085;
border-radius: 5px 5px 0 0;
color: #fff;
font-size: 30px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper form {
padding: 25px 35px;
}
.wrapper form .row {
height: 60px;
margin-top: 15px;
position: relative;
}
.wrapper form .row input {
height: 100%;
width: 100%;
outline: none;
padding-left: 70px;
border-radius: 5px;
border: 1px solid lightgrey;
font-size: 18px;
transition: all 0.3s ease;
}
form .row input:focus {
border-color: #16a085;
}
form .row input::placeholder {
color: #999;
}
.wrapper form .row i {
position: absolute;
width: 55px;
height: 100%;
color: #fff;
font-size: 22px;
background: #16a085;
border: 1px solid #16a085;
border-radius: 5px 0 0 5px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper form .pass {
margin-top: 12px;
}
.wrapper form .pass a {
color: #16a085;
font-size: 17px;
text-decoration: none;
}
.wrapper form .pass a:hover {
text-decoration: underline;
}
.wrapper form .button input {
margin-top: 20px;
color: #fff;
font-size: 20px;
font-weight: 500;
padding-left: 0px;
background: #16a085;
border: 1px solid #16a085;
cursor: pointer;
}
form .button input:hover {
background: #12876f;
}
.wrapper form .signup-link {
text-align: center;
margin-top: 45px;
font-size: 17px;
}
.wrapper form .signup-link a {
color: #16a085;
text-decoration: none;
}
form .signup-link a:hover {
text-decoration: underline;
}
If you face any difficulties while creating your Responsive Login Form or your code is not working as expected, you can download the source code files for this Responsive Login Page for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
Can I use your code for learning?
I am very grateful to you,, allow me to use needs and take data that I don't know yet,, because I want to be sold or for personal use, once again I ask for your permission sir
You know you can edit it, right?
eeee
It looks awful, especially in landscape mode.
you are the best