Create Responsive Login Form using Bootstrap.
<![CDATA[
<!--DOCTYPE html-->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.btnw{width:49%;}
.login-or {
position: relative;
font-size: 18px;
color: #aaa;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
}
.hr-or {
background-color: #cdcdcd;
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.btn-primary{
background-image: -webkit-linear-gradient(top,#e85b54 0,#b22520 100%);
}
.btn-info{
background-image: -webkit-linear-gradient(top,#295fa0 0,#4c95d6 100%);
}
.btn-success{
background-image: -webkit-linear-gradient(top,#58e854 0,#70b245 100%);
}
</style>
</head>
<body>
<br><br>
<div class="row">
<div class="container">
<div class="col-sm-offset-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-heading text-center"><strong>Login Form</strong></div>
<div class="panel-body">
<form class="form-horizontal" action="#">
<div class="form-group">
<div class="col-sm-12">
<a href="#" class="btn btn-primary btnw">Facebook</a>
<a href="#" class="btn btn-info btnw">Google</a>
</div>
</div>
<div class="login-or">
<hr class="hr-or">
<span class="span-or">or</span>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class=" col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-success btn-block">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
]]>
agyanadda
Author & Editor
Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.
0 $type={blogger}:
Post a Comment