"SHADOWS "
Bootstrap 3.3.0 Snippet by Cainhos

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="pt"> <meta charset="utf-8"> <title>Workcloud</title> <meta name="Workcloud" content="workcloud.pt"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <body> <div class="container"> <div class="row" id="pwd-container"> <div class="col-md-4"></div> <div class="col-md-4"> <section class="login-form"> <form class="shadow" method="post" action="checkpass.php" role="login"> <img src="http://orig09.deviantart.net/1f7d/f/2011/290/8/e/batman_logo_circleless_by_machsabre-d4d6s56.png" class="img-responsive" alt="" /> <input type="username" name="username" placeholder="username" required class="form-control input-lg" value="" /> <input type="password" name="password" class="form-control input-lg" id="password" placeholder="Password" required="" /> <div class="pwstrength_viewport_progress"></div> <button type="submit" name="go" class="btn btn-lg btn-primary btn-block shadow">Ligar</button> <div> <a href="#">Criar Conta</a> ou <a href="#">Reset password</a> </div> </form> <div class="form-links"> <a href="https://www.workcloud.pt">Criado por Workcloud</a> </div> </section> </div> <div class="col-md-4"></div> </div> <p> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FW00op" target="_blank"><small>HTML</small><sup>5</sup></a> <br> <br> </p> </div> </body> </html>
@CHARSET "UTF-8"; /* over-ride "Weak" message, show font in dark grey */ .progress-bar { color: #333; } /* Reference: http://www.bootstrapzen.com/item/135/simple-login-form-logo/ */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; @include box-sizing(border-box); &:focus { z-index: 2; } } body { background: url(http://wallpapers55.com/wp-content/uploads/2013/11/Nature-Desktop-Wallpaper-HD.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .login-form { margin-top: 60px; } form[role=login] { color: #5d5d5d; background: #f2f2f2; padding: 26px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } form[role=login] img { display: block; margin: 0 auto; margin-bottom: 35px; } form[role=login] input, form[role=login] button { font-size: 18px; margin: 16px 0; } form[role=login] > div { text-align: center; } .form-links { text-align: center; margin-top: 1em; margin-bottom: 50px; } .form-links a { color: #fff; } .shadow { -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.5); -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.5); box-shadow: 5px 5px 5px rgba(68,68,68,0.5); }

Related: See More

Vue Now UI Kit

Questions / Comments: