In this tutorial we will build Login Form using HTML and CSS. You will learn about modern CSS including CSS grid, flexbox and responsive media queries.
Hello Viewers, today in this tutorial, you’ll learn How To Make Login Form using HTML and CSS.
This Post is about making a Login Form using HTML and CSS.
To create this project (Login Form using HTML and CSS). First, you need to create two Files one HTML File and one is CSS File.
First, create an HTML file with the name of index.html and paste the code given in HTML file.
{
<!DOCTYPE html>
<!-- Created By Amit Tutorial - www.amittutorial.com -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Login Form Using HTMl & CSS | Amit Tutorial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<form action="#">
<h2>Login</h2>
<div class="input-field">
<input type="text" required>
<label for="">Enter Your Email</label>
</div>
<div class="input-field">
<input type="password" name="" id="" required>
<label for="">Enter Your Password</label>
</div>
<div class="forget">
<label for="remember">
<input type="checkbox" name="" id="remember">
<p>Remember me</p>
</label>
<a href="#">Forgot Password?</a>
</div>
<button type="submit">Log In</button>
<div class="register">
<p>Don't have an account <a href="#">Register</a></p>
</div>
</form>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the code given in CSS file.
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
padding: 0 10px;
}
body::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url(images/hero-bg.jpg), #000;
background-position: center;
background-size: cover;
}
.wrapper{
width: 400px;
border-radius: 8px;
padding: 30px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
}
form{
display: flex;
flex-direction: column;
}
h2{
font-size: 2rem;
margin-bottom: 20px;
color: #000
}
.input-field{
position: relative;
border-bottom: 2px solid #ccc;
margin: 15px 0;
}
.input-field label{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #fff;
font-size: 16px;
pointer-events: none;
transition: 0.15s ease;
}
.input-field input{
width: 100%;
height: 40px;
background: transparent;
border: none;
outline: none;
font-size: 16px;
color: #fff;
}
.input-field input:focus~label,
.input-field input:valid~label{
font-size: 0.8rem;
top: 10px;
transform: translateY(-120%);
}
.forget{
display: flex;
align-items: center;
justify-content: space-between;
margin: 25px 0 35px 0;
color: #fff;
}
#remember{
accent-color: #fff;
}
.forget label{
display: flex;
align-items: center;
}
.forget label p{
margin-left: 8px;
}
.wrapper a{
color: #efefef;
text-decoration: none;
}
.wrapper a:hover{
text-decoration: underline;
}
button{
background: #fff;
color: #000;
font-weight: 600;
border: none;
padding: 12px 20px;
cursor: pointer;
border-radius: 3px;
font-size: 16px;
border: 2px solid transparent;
transition: 0.3s ease;
}
button:hover{
color: #fff;
border-color: #fff;
background: rgba(255, 255, 255, 0.15);
}
.register{
text-align: center;
margin-top: 30px;
color: #fff;
}
That’s all in this post, you’ve successfully created Login Form using HTML and CSS. If your code does not work or you’ve faced any problem then comment down your problem.
If you’re feeling difficult to understand what I am saying in this post.You can watch a full video tutorial on this project(Login Form using HTML and CSS).
Download Source Code: