"login form"
Bootstrap 4.1.1 Snippet by csshint

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="form-wrap"> <div class="form-wrap-inn"> <div class="frame"> <div class="form-content"> <div class="header"> <i class="fa fa-eye"></i> <h2>Login</h2> <p>If you don't have a user account yet, <a href="http://csshint.com/22-free-stylish-html5-and-css3-login-forms-templates/" target="_blank">please register.</a> </p> </div> <div class="login-form"> <form action="" class="form"> <div class="form-group"> <input id="first" class="form-input" type="text" placeholder="What is your name?"> </div> <div class="form-group"> <input id="last" class="form-input" type="text" placeholder="What is your name?"> </div> <div class="form-group"> <input id="color" class="form-input" type="password" placeholder="Password"> </div> </form> </div> </div> </div> </div> </div> </div>
body { font-family: "sofia-pro","Sofia Pro",sans-serif; background-color: #fefcee; } @media screen and (min-width: 1020px){ .form-wrap{ -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); margin-top: -450px; padding-top: 30px; } .form-wrap { top: 50%; left: 50%; } .form-wrap-inn{ padding: 20px; -webkit-box-shadow: 0px 10px 122px 0px rgba(170,102,255,0.23); box-shadow: 0px 10px 122px 0px rgba(170,102,255,0.23); } .form-content { padding: 20px 20px 30px 20px; } } .form-wrap { position: absolute; margin: 0 auto; max-width: 650px; width: 100%; } .form-wrap-inn{ position: relative; background-color: #fff; background-repeat: repeat; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .frame { position: relative; border:3px solid #a6f; -webkit-transition: border-color 300ms ease; transition: border-color 300ms ease; } .header{ text-align:center; } .header i{ color: #a6f; font-size: 30px; } .header h2{ color: #a6f; font-size: 30px; text-transform: uppercase; } .header p{ color: #333; font-size: 18px; } .header p a{ color: #a6f; } .form-group { position: relative; } .login-form { max-width: 412px; margin: 30px auto; } .form-label { position: absolute; left: 0; top: 10px; color: #999; background-color: #fff; z-index: 10; transition: font-size 150ms ease-out, -webkit-transform 150ms ease-out; transition: transform 150ms ease-out, font-size 150ms ease-out; transition: transform 150ms ease-out, font-size 150ms ease-out, -webkit-transform 150ms ease-out; } .form-input { position: relative; padding: 12px 0px 5px 0; width: 100%; outline: 0; border: 0; box-shadow: 0 1px 0 0 #e5e5e5; transition: box-shadow 150ms ease-out; }
$('input').focus(function(){ $(this).parents('.form-group').addClass('focused'); }); $('input').blur(function(){ var inputValue = $(this).val(); if ( inputValue == "" ) { $(this).removeClass('filled'); $(this).parents('.form-group').removeClass('focused'); } else { $(this).addClass('filled'); } })

Related: See More


Questions / Comments: