Bootstrap framework snippet DeyNote like login

This bootstrap framework snippet "DeyNote like login" was 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,profile,social network,form

<div class="container bootstrap snippet"> <div class="row login-page"> <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4"> <img src="" class="user-avatar"> <h1></h1> <form role="form" class="ng-pristine ng-valid"> <div class="form-content"> <div class="form-group"> <input type="text" class="form-control input-underline input-lg" placeholder="Email"> </div> <div class="form-group"> <input type="password" class="form-control input-underline input-lg" placeholder="Password"> </div> </div> <button class="btn btn-info btn-lg"> Log in </button> &nbsp; <button type="submit" class="btn btn-info btn-lg">Register</button> </form> </div> </div> </div>
body{ margin-top:20px; color:#fff; } .login-page { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; background: #3ca2e0; text-align: center; color: #fff; padding: 3em; } .user-avatar { width: 125px; height: 125px; } .login-page h1 { font-weight: 300; } .login-page .form-content { padding: 40px 0; } .login-page .form-content .input-underline { background: 0 0; border: none; box-shadow: none; border-bottom: 2px solid rgba(255,255,255,.4); color: #FFF; border-radius: 0; } .login-page .form-content .input-underline:focus { border-bottom: 2px solid #fff; } .input-lg { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 0; } .btn-info{ border-radius: 50px; box-shadow: 0 0 0 2px rgba(255,255,255,.8)inset; color: rgba(255,255,255,.8); background: 0 0; border-color: transparent; font-weight: 400; } input[type='text']::-webkit-input-placeholder, input[type='password']::-webkit-input-placeholder { color: #fff; } input[type='text']:-moz-placeholder, input[type='password']:-moz-placeholder { color: #fff; } input[type='text']::-moz-placeholder, input[type='password']::-moz-placeholder { color: #fff; } input[type='text']:-ms-input-placeholder, input[type='password']:-ms-input-placeholder { color: #fff; }

Creator of this snippet

Dey Dey

Bootstrap version: 3.3.4

Created: Sep 6th 2015, 19:31

Views: 2.9K