How are you friends, in today’s blog we are going to create a login form using HTML and CSS.
| Language Used | HTML & CSS |
| External Dependies | No |
| Coded By | Rahul |
Step 01 :- Create a html file in VS code .
VS Code = Visual Studio Code (VS Code) is a lightweight, powerful source code editor that’s available for Windows, macOS, and Linux.
HTML Code –
<link rel="stylesheet" href="style.css">
<body>
<div class="main">
<div class="login-box">
<div class="log-text">
<p class="wel">
<br /><span class="Wtext">Login Here</span>
</p>
</div>
<div class="form">
<form name="Logform" action="#">
<div class="UserName">
<input
id="name"
name="Uname"
type="text"
placeholder="Enter your name"
size="50"
/>
</div>
<div class="UserPass">
<input
type="password"
name="Upass"
id="pass"
placeholder="Enter your password"
size="50"
/>
</div>
<div class="ReUserPass">
<input
type="password"
name="reUpass"
id="repass"
placeholder="Enter your password again"
size="50"
/>
</div>
<br />
<button id="sub" onclick="submitForm()">Submit</button>
<button id="reset" type="reset">Reset</button>
<button id="show" onclick="showPass()">Show password</button>
</form>
</div>
</div>
</div>
</body>
Step 02 :- Create a css file in code editor and start styling.
CSS Code –
* {
margin: 0;
padding: 0;
font-family: "poppins", sans-serif;
}
.main {
height: 100vh;
width: 100%;
background-color: rgb(135, 177, 194);
display: flex;
justify-content: center;
align-items: center;
}
.login-box {
height: 600px;
width: 400px;
border: 2px solid black;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
background-color: rgb(238, 236, 232);
}
.log-text {
text-align: center;
font-size: 2em;
width: 100%;
height: 20%;
padding: 5px;
}
form {
height: 500px;
width: 400px;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
input {
height: 40px;
width: 100%;
text-align: center;
}
.UserName,
.UserPass,
.ReUserPass {
padding-top: 20px;
}
button {
cursor: pointer;
width: 100%;
height: 40px;
padding-bottom: 20px;
border-radius: 20px;
border-style: none;
border: 2px solid black;
font-weight: 800;
opacity: 70%;
padding: 0;
font-size: 16;
color: aliceblue;
}
#sub{
background-color: rgb(0, 186, 233);
}
#show{
background-color: blueviolet;
}
#reset{
background-color: rgb(158, 2, 15);
}
OutPut :-
