Foundation zurb snippet: Login form like google

designed to help people of all skill levels – designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: login,form

<div class="row"> <div class="large-4 small-12 medium-6 large-offset-4"> <img alt="Google" class="logo" src="//"/> <div class="account-wall"> <img class="profile-img" src="" alt=""> <form class="form-signin"> <input type="text" placeholder="Email" required autofocus> <input type="password" placeholder="Password" required> <button class="button expanded" type="submit">Sign in</button> <label> <input type="checkbox" value="remember-me"> Remember me <a href="#" class="pull-right need-help">Need help? </a> </label> </form> </div> <a href="#" class="text-center new-account">Create an account </a> </div> </div>
body{margin-top:20px;} .form-signin{ max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading, .form-signin .checkbox{ margin-bottom: 10px; } .form-signin .checkbox{ font-weight: normal; } .form-signin .form-control{ position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .form-signin .form-control:focus{ z-index: 2; } .form-signin input[type="text"]{ margin-bottom: -1px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .form-signin input[type="password"]{ margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .account-wall{ margin-top: 20px; padding: 40px 0px 20px 0px; background-color: #f7f7f7; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .login-title{ color: #555; font-size: 18px; font-weight: 400; display: block; } .logo { margin: 25px auto 20px; float: none; display: block; height: 38px; width: 116px; } .profile-img{ width: 96px; height: 96px; margin: 0 auto 10px; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } .new-account{ display: block; margin-top: 10px; } .pull-right { float: right !important; }

Login form like google

  May 13th, 22:04