Hello readers, today in this vdieo we will learn how to create Responsive login form using HTML and CSS. You easily create this login form using HTML & CSS by follow these tutorials and steps. You will build this awesome login form design by just following this video tutorial or these steps which i given bellow. In addition, common HTML and CSS programming codes have been used. It is designed in a completely modern way.
Some information about this login form
This Login form design, which uses beautiful colors & image has gained the best of beauty. On this design, there is show on full web page. there are left side two images and right side login form with avator icon.
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 this design step by step. So you can learn how to make this beautiful 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 login form. 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:
Shiney Glass Social Media Icon Hover Effects
Personal Portfolio Website using HTML & CSS
Responsive Login Form | 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>
<meta charset="UTF-8">
<title>Product Card Design</title>
<!----css custom file 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 class="wave" src="https://i.postimg.cc/sDG8zyXM/wave.png">
<div class="container">
<div class="img">
<img src="https://svgshare.com/i/JcM.svg">
</div>
<div class="login-content">
<form action="index.html">
<img src="https://svgshare.com/i/Jcf.svg">
<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>
<a href="#">Forgot Password?</a>
<input type="submit" class="btn" value="Login">
</form>
</div>
</div>
</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:
* {
padding: 0;
margin: 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;
}
.login-content h2 {
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: 0.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: 0.3s;
}
.input-div:before,
.input-div:after {
content: "";
position: absolute;
bottom: -2px;
width: 0%;
height: 2px;
background-color: #38d39f;
transition: 0.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: #38d39f;
}
.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;
font-family: "poppins", sans-serif;
}
.input-div.pass {
margin-bottom: 4px;
}
a {
display: block;
text-align: right;
text-decoration: none;
color: #999;
font-size: 0.9rem;
transition: 0.3s;
}
a:hover {
color: #38d39f;
}
.btn {
display: block;
width: 100%;
height: 50px;
border-radius: 25px;
outline: none;
border: none;
background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f);
background-size: 200%;
font-size: 1.2rem;
color: #fff;
font-family: "Poppins", sans-serif;
text-transform: uppercase;
margin: 1rem 0;
cursor: pointer;
transition: 0.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;
}
.login-content h2 {
font-size: 2.4rem;
margin: 8px 0;
}
.img img {
width: 400px;
}
}
@media screen and (max-width: 900px) {
.container {
grid-template-columns: 1fr;
}
.img {
display: none;
}
.wave {
display: none;
}
.login-content {
justify-content: center;
}
}
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 parent = this.parentNode.parentNode;
parent.classList.add("focus");
}
function remcl() {
let parent = this.parentNode.parentNode;
if (this.value == "") {
parent.classList.remove("focus");
}
}
inputs.forEach((input) => {
input.addEventListener("focus", addcl);
input.addEventListener("blur", remcl);
});
now you’ve successfully created this Login Form design using HTML, CSS and JS. If your code does not work or faced any error/problem to comment down or contact us through the contact page.
Saved as a favorite, I really like your blog!