"form"
Bootstrap 3.3.0 Snippet by aniusk18

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- This file has been downloaded from http://bootsnipp.com/. Enjoy! --> <!--author:Aniuska Maita Aparicio--> <title>Formulario--bootsnipp</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <!-- Google fonts --> <link href='https://fonts.googleapis.com/css?family=Lobster|Abel' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'> </head> <body> <div class="container col-md-3"> <!--head form--> <section> <h1>Login</h1> </section> <!--end head form--> <!--body form--> <section class="col-md-12"> <form class="form-horizontal"> <div class="form-group barra"> <label for="inputEmail3" class="col-sm-4 control-label">Email</label> <div class="col-sm-8"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group barra"> <label for="inputPassword3" class="col-sm-4 control-label">Password</label> <div class="col-sm-8"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group barra"> <div class="col-md-12"> <button type="submit" class="btn center-block">Sign in</button> </div> </div> </form> </section> <!--end body form--> <!--foot form--> <section></section> <!--end foot form--> </div> </body> </html>
/**Contenedor**/ .container{ background: url('http://i1280.photobucket.com/albums/a487/Ani_Mai/15_zps9qpuzjxq.png'); background-repeat:no-repeat; background-size:cover; margin: 15px 15px 15px 15px; } /**Head form**/ h1{ text-align: center; background: #fff; padding: 15px 0 15px 0; font-family: 'Lobster', cursive; color: #000; letter-spacing: 2px; text-shadow: 2px 2px #eee; } /**body form**/ .barra{ background: #fff; padding: 15px 0 15px 0; font-family: 'Questrial', sans-serif; } .form-control :focus{ border-color: #66afe9; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); } .btn { color: #FFFFFF; background-color: #9C27B0; border-color: rgba(0,0,0,.075); background-image: none !import; }

Related: See More


Questions / Comments: