"Demo_Login"
Bootstrap 4.0.0 Snippet by GaneshGeeDee

<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 ----------> <div class="container"> <div class="row"> <div class="col-md-4 col-xs-12 col-md-12"></div> <div class="col-md-4 col-xs-12 col-md-12"> <div class=" login_wrapper"> <div class='logo_div'> <img src='img/gd_logo.png' class='gd_logo'> <h4 class='logo_name'>Gee Dee Technologies</h4> </div> <form> <div class="form-group"> <input class="form-control login_input" id="username" type="text" placeholder="User name or Email"> </div> <div class="form-group"> <input class="form-control login_input" id="password" type="text" placeholder="Password"> </div> <div class="checkbox"> <label class="login_label"><input type="checkbox" value="">Remember me</label> </div> <button type="button" class="btn btn-success btn-lg btn-block">Login</button> <p class="frgt_pwd login_label"><a href="#" class="link_label">Forgot your password?</a></p> <p class="Sign_up login_label"><a href="#" class="link_label">Sign up here</a></p> </form> </div> </div> <div class="col-md-4 col-xs-12 col-md-12"></div> </div> </div> <div class="footer"> <p class='footer_txt'>© Gee Dee Technologies Private Limited. </p> </div>
body { } .bg_layer{ position:fixed; height:1000px; width:1800px; background-image: url('../img/login_bg.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); z-index: -1; } .container{ z-index:100; } .login_wrapper { background-color: #3f500bd9; opacity: 0.7; margin: 50px 10px; padding: 30px; } .logo_name { color: #fff; } .gd_logo { height: 80px; width: 80px; opacity: 1; } .login_input{ border-radius: 0px; opacity: 1; } .btn-block { border-radius: 0px; opacity: 1; } .logo_div { text-align: center; padding: 30px; opacity: 1; } .link_label{ color: #fff; padding: 10px 0px; opacity: 1; } .link_label:hover{ color: #fff; text-decoration: underline; } .login_label { color: #fff; padding: 10px 0px 0px 0px; opacity: 1; } .footer{ text-align: center; position: fixed; bottom: 0px; background-color: #89c7619c; color: #fff; width: 100%; } .footer_txt { margin: 0 0 10px; padding: 5px; }

Related: See More


Questions / Comments: