How to Create Login Form In Html And CSS – Best Design Login Form – Login Form Create Karne Ke Liye Hamne HTML And CSS Ka Istemal Kiya Hai |
Yadi Aapne HTML Full Course And CSS Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |
How to Create Login Form In Html And CSS
Login Form Create Karne Ke Liye Hamne 2 Files [ HTML File, CSS FIle ] And Ek Background Image ka Istemal Kiya |
Sabse Pahle Ham HTML File Ko Create Karte Hai |
<html>
<head>
<meta charset="utf-8">
<title>Master Programming Login Panel</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="modal-body">
<h2>Login Panel</h2>
<div class="login">
<form name="loginform" id="loginform" action="https://masterprograming.com/" method="post">
<div class="form-group">
<input type="text" name="log" id="user_login" class="input" value="" size="20" autocapitalize="off" placeholder="User ID ( Mobile No )" /></label>
</div>
<div class="form-group">
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password"/></label>
</div>
<div class="form-group col-md-12 text-center mb0">
<button class="btn btn-cr-bg" type="submit" name="btn_submit" value='submit'>Login</button>
</div>
</form>
<div class="danish" style="text-align:center">
<a href="https://masterprograming.com/">Lost your password?</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div role="alert" class="alert alert-danger alert-dismissible">
<marquee><strong><h3>Welcome to Master Programming Login Panel<h3></strong></marquee>
</div>
</div>
</div>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add font awesome icons -->
<a href="https://https://www.facebook.com/masterprogrammingbydanish/" class="fa fa-facebook"></a>
<a href="https://twitter.com/MasterProgrami2" class="fa fa-twitter"></a>
<a href="https://www.youtube.com/channel/UCbsVWeymfqS8yCfDmTgex4A" class="fa fa-youtube"></a>
<a href="https://masterprograming.com/" class="fa fa-rss"></a>
</div>
</body>
</html>Aap Upper Dekh Sakte Hai ki Hamne HTML File Ko Create Kar Liya Hai And Ab Ham CSS File Ko Create Karte Hai |
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(background.jpg);
background-size: cover;
}
.modal-body
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
padding: 40px;
background: rgba(0,0,50,2);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,.50,2);
border-radius: 10px;
}
.modal-body h2
{
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.modal-body .login
{
position: relative;
}
.modal-body .login input
{
width: 100%;
padding: 10px;
font-size: 16;
color: #fff;
letter-spacing: 1px;
margin-bottom: 30px;
border: none;
border-bottom: : 1px solid #fff;
outline: none;
background: transparent;
}
.modal-body [type="submit"]
{
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.modal-body [type="submit"]:hover {background-color: #3e8e41}
.modal-body [type="submit"]:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
/* Style all font awesome icons */
.fa {
margin-top: 30px;
padding: 10px;
font-size: 20px;
width: 50px;
text-align: center;
text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-android {
background: #a4c639;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-rss {
background: #ff6600;
color: white;
}
.modal-body .danish
{
margin-top: 30px;
margin-left: 10px;
}
.modal-body .row{
color: white;
}Aap Upper Dekh Sakte Hai ki Hamne CSS File Ko Create Kar Liya Hai And Ab Ham Background Image Ko Add Karte Hai |
AB Ham 1 Image And 2 File Ko Ek Sath Mila Inka Output Check Karte Hai |
Output:
Aap Dekh Sakte Hai, Ki Hamne Ek Login Form In HTML And CSS Ko Create Kar Liya Hai |
Waise Aap Niche Diye Gaye Download Button Par Click Karke Ye Files Ko Download Kar Sakte Hai |
Also Read – PAN Stutas Check Project
Dosto mujhe ummed hai ki aap Login Form In HTML In Hindi ko acchi tarah se samanj gye honge agar aap ko ye post acchi lage to mere is website ko jarur follow kre or ha agar aap video bhi dekhna chahte hai to aap mere channel ko bhi subscribe kar sakte hai. channel ka link aapko home page par mil jayega |
Friends Jo Ham HTML And CSS Ka Tutorial Read Kar Rahe Hai Ye Uska Hi Part Hai, Agar Aapne Abhi Tak Wo Read Nhi Kiya Hai To Aap Un Tutorial Ko Read Karle , Thanks |
