Attractive login form with css and bootstrap
Bootstrap online link :
...................................................................................................................................................................
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
...................................................................................................................................................................
index.html :
...................................................................................................................................................................
<body class="login">
<div id="wrapper">
<div class="form-login">
<div class="form-login-cnt" id='box'>
<div id="error"></div>
<h1 style='font-size:26px;text-transform:capitalize;'>login to access</h1>
<form method = "POST" action="">
<input type="text" class="form-control" name = "uname" id='uname' placeholder="Username"><br>
<input type="password" class="form-control" name = "pwd" id='pwd' placeholder="Password">
<div class="clear"></div>
<input type="submit" name = "login" id='login' value="login" class="btn btn-warning" style='float:left; margin:10px 0px 0px 0px; text-transform:uppercase;'>
<p style="float:right;padding:5px 0px 0px 0px;"><a href="forgot_password.php" style="color:#114105; font-size:14px; text-decoration: none;">Forgot Password ?</a></p>
</form>
</div>
</div>
</div>
</body>...................................................................................................................................................................
css file :
...................................................................................................................................................................
.form-login-cnt {
background: #fff;
padding: 20px;
box-shadow: 1px 4px 5px #C5BEBE;
border-radius: 15px;
margin: 10px 0px 0px 0px;
overflow: hidden;
}
.form-login {
text-align: center;
width: 430px;
margin: auto;
}
.logo-cnt
{
margin: 10px 0px 0px 0px;
}
.logo-cnt h1
{
font-size: 24px;
margin: 0px;
}
.logo-cnt p
{
font-size: 12px;
margin: 0px;
}
#box{
text-align: center;
}
body{
background: url(images/tree4.jpg) no-repeat;
background-size: cover;
}...................................................................................................................................................................
0 comments