"School Management System Login "
Bootstrap 4.0.0 Snippet by Sheikh Hashir

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet"> <link href="style.css" type="text/css" rel="stylesheet"> <title>Login | Page</title> </head> <body> <div class="container"> <h1>School Management System</h1> <section class="row justify-content-center"> <section class="row"> <form class="form-container"> <h2>Sign In | Admin</h2> <div class="form-group"> <label for="exampleInputEmail1">Username</label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Username"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label hash" for="exampleCheck1">Remember me</label> </div> <a href="#" >Forgot Password?</a> <button type="submit" class="btn btn-primary btn-block">Sign in</button> <hr> <button type="button" class="btn btn-light btn-sm has"><a href="parent.html">Parent</a></button> <button type="button" class="btn btn-light btn-sm has"><a href="admin.html">Admin</a></button> <button type="button" class="btn btn-light btn-sm has"><a href="teacher.html">Teacher</a></button> <button type="button" class="btn btn-light btn-sm has"><a href="student.html">Student</a></button> </form> </section> </section> </div> </body> </html>
*{ font-family: 'Comic Neue', cursive; } h1{ text-align: center; font-weight: 700; margin-top: 25px; } body{ background: linear-gradient(to bottom right, #33ccff 0%, #0099cc 100%); height: 800px; background-repeat: no-repeat; } a:hover{ text-decoration: none; } .form-container{ background-color: whitesmoke; border-radius: 10px; box-shadow: 0px 0px 10px 0px #000; padding: 30px; margin-top: 10%; } .has{ background-color:aquamarine; border: 1px solid black; border-radius: 15px; } h2{ font-family: 'Comic Neue', cursive; text-align: center; text-transform:capitalize; } button > a{ color: black; text-decoration: none; } button > a:hover{ color: black; text-decoration: none; } .hash{ font-size: 14px; }

Related: See More

Vue Argon Design System
School Form
login-form
Login Form

Questions / Comments: