Hello everyone, you can learn how to create a beautiful Login Page using HTML and CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Login Page
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Login Form</title>
</head>
<body>
<div class="container">
<div class="title">
<h2>Login</h2>
</div>
<form>
<input type="text" placeholder="Username or Email">
<input type="password" placeholder="Password">
<div><a href="#">Forgot Password?</a></div>
<button><a href="#">Login</a></button>
</form>
<p>OR</p>
<div class="loginwith">
<div class="facebook">
<i class="fa fa-facebook-f"></i>
<p>Login With Facebook</p>
</div>
<div class="google">
<i class="fa fa-google"></i>
<p>Login With Google</p>
</div>
</div>
<div class="signup">
Don't have an account ? <a href="#">SignUp Here</a>
</div>
</div>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.container{
width: 400px;
text-align: center;
background-color: white;
border-radius: 10px;
box-shadow: 2px 5px 30px #000000;
}
.container::before{
content: "";
background: url(pic1.jpg) no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.9;
filter: blur(3px);
}
.container .title{
margin-bottom: 10px;
padding: 20px;
}
.container .title h2{
font-size: 30px;
}
.container form{
width: 75%;
margin: 15px auto;
position: relative;
}
.container form input{
width: 100%;
height: 45px;
margin: 8px 0;
padding-left: 15px;
font-size: 16px;
border-radius: 3px;
border: 1px solid gray;
outline: none;
}
.container form div{
position: absolute;
left: 5px;
margin-top: 5px;
}
.container form div a{
font-size: 14px;
}
.container form button{
width: 100%;
height: 45px;
font-size: 20px;
margin-top: 50px;
border-radius: 5px;
cursor: pointer;
border: 1px solid gray;
outline: none;
background: #429c0d;
}
.container form button a{
text-decoration: none;
color: white;
}
.container > p{
padding: 10px;
}
.container .loginwith{
width: 75%;
margin: 10px auto;
}
.container .loginwith .facebook,
.container .loginwith .google{
width: 100%;
display: flex;
justify-content: center;
padding: 10px;
border: 1px solid gray;
border-radius: 5px;
margin-bottom: 8px;
cursor: pointer;
}
.container .loginwith .facebook{
color: white;
background: #1877f2;
}
.container .loginwith .google{
color: white;
background: #EA4335;
}
.container .loginwith div i{
margin-right: 15px;
font-size: 20px;
line-height: 15px;
color: white;
justify-content: center;
}
.container .loginwith div p{
line-height: 15px;
}
.container .signup{
padding: 15px;
font-size: 15px;
margin-bottom: 10px;
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
