How to create Login Page using HTML, CSS?
Here, we’ll tell you how to create a login page using “HTML, CSS?” You can easily create a login page using HTML, CSS in the following steps.
Step 1
First open any code editor, then select a new file. And save it by placing its name login.html then press shift 1 key, you will have a syntax of html in front of you, then set the title in it as you want. Then take the class inside the div and name it dot form. Then take the h2 heading and save it by inserting the user login title in it, then open your file on the browser, the title of the login form will appear in front of you.Step 2
Select the div again and give it a class and rename the class icon. Then go to the https://ionic.io/ionicons/v4 and copy its CDN link and paste it into the head section of your file, then you can easily use the icons of this website. After that you have to search the name of the icon by entering the name of the icon user and search. Then paste it into your icon’s div.Step 3
Then select 2 inputs and set them with and heights as per your wish, then set the checkbox with remember me and forgot password below the input, then take a button and save it by naming it LOG IN.
<!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">
<title>Login Form</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;1,100&family=Ubuntu:wght@300&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(54,54,71);
}
.form{
width: 300px;
height: 400px;
padding: 20px;
background-color: white;
border-radius: 10px;
}
.form h2{
margin-bottom: 20px;
text-align: center;
letter-spacing: 1px;
color: rgb(21,91,124);
}
.form .icon{
width: 50px;
height: 50px;
border-radius: 10px;
background-color: rgb(206, 206, 206);
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
.form .icon ion-icon{
font-size: 35px;
color: rgb(70, 70, 70);
}
.form input{
width: 100%;
height: 35px;
border: 0px;
border-bottom: 1px solid rgb(168, 168, 168);
outline: none;
padding-left: 5px;
font-size: 15px;
}
.form .first-input{
margin-top: 30px;
}
.form .small-icon-1{
position: relative;
top: -30px;
left: 92%;
font-size: 20px;
color: rgb(180,180,180);
}
.form .small-icon-2{
position: relative;
top: -30px;
left: 92%;
font-size: 20px;
color: rgb(180,180,180);
}
.form .base{
display: flex;
}
.form .base label{
position: absolute;
bottom: 36%;
left: 554px;
font-size: 12px;
}
.form .base label .checkbox{
width: 13px;
height: 13px;
}
.form .base a{
position: absolute;
bottom: 36%;
left: 710px;
font-size: 12px;
}
.form button{
width: 100px;
height: 30px;
margin: 40px 0 0 75px;
border: 0px;
border-radius: 10px;
transition: 0.5s;
letter-spacing: 1px;
font-weight: bold;
}
.form button:hover{
background-color: rgb(21,91,124);
color: rgb(219,219,219);
transform: translateY(-10px);
}
</style>
</head>
<body>
<div class="form">
<h2>USER LOGIN</h2>
<div class="icon">
<ion-icon name="person"></ion-icon>
</div>
<input class="first-input" type="text" placeholder="Username">
<span class="small-icon-1"><ion-icon name="person"></ion-icon></span>
<input class="second-input" type="password" placeholder="Password">
<span class="small-icon-2"><ion-icon name="lock"></ion-icon></span>
<div class="base">
<label>
<input type="checkbox" class="checkbox">
Remember me
</label>
<a href="#">Forgot Password</a>
</div>
<button>LOG IN</button>
</div>
<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
</body>
</html>