Bootstrap simple Login With validation
Note: This Script is used for Validating the form (validator.min.js)
<![CDATA[
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js">
</script>
]]>
Select All--> double click on code
<![CDATA[
<html lang="en">
<head>
<title>Login</title>
<!-- Bootstrap CSS CDN -->
<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" rel="stylesheet"/>
<!--Form validation Script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js">
</script>
<!-- Our Custom CSS -->
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class=" container text-center">
<div class=" card login-form ">
<h2 class="text-center card-header">
Log in</h2>
<form class="card-body" method="post">
<div class="form-group">
<input class="form-control" placeholder="Username" required="" type="text" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" required="" type="password" />
</div>
<div class="form-group">
<button class="btn btn-block" type="submit">Log in</button>
</div>
</form>
</div>
<div class="card desc-card">
<div class="card-body ">
Message<br />
</div>
</div>
</div>
</body>
</html>
]]>
<![CDATA[ @import "https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700";
body {
font-family: 'Raleway', sans-serif;
background: #fafafa;
}
.login-form {
width: 400px;
margin: 20px auto;
}
.login-form form {
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.form-control, .btn {
min-height: 38px;
border-radius: 2px;
}
.btn {
font-size: 15px;
font-weight: bold;
background-color: #062F4F;
color: #fff;
}
.desc-card {
width: 400px;
float: none;
margin: 0 auto;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
]]>
No comments:
Post a Comment