"Login Form"
Bootstrap 2.3.2 Snippet by sudhanshu2013

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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 http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Login-Signup-Registration -Page</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content="Sudhanshu Pandey (sudhanshu.pandey159@gmail.com)"> <!-- Le styles --> <link href="bootstrap.min.css" rel="stylesheet"> <link href="bootstrap-responsive.min.css" rel="stylesheet"> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Le favicon --> <link rel="shortcut icon" href="http://www.streetindustry.co/images/favicon.png"> <style type="text/css"></style></head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="http://www.streetindustry.co/"><img src="http://www.streetindustry.co/images/logo.png" alt="Street Industries LTD"></a> </div> </div> </div> <div class="container"> <div id="login-wraper"> <form class="form login-form"> <legend>Login To <span class="blue">Continue</span></legend> <div class="body"> <label>Email</label><input type="email"> <label>Password</label><input type="password"> </div> <div class="footer"> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> Remember me </label> <button type="submit" class="btn btn-success">Login</button> </div> </form> </div> </div> <footer class="white navbar-fixed-bottom"> Don't have an account yet? <a href="register.html" class="btn btn-black">Register</a> </footer> <!-- load javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="jquery.js"></script> <script src="bootstrap.js"></script> <script src="backstretch.min.js"></script> <div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 600px; width: 1366px; z-index: -999999; position: fixed;"></div></body></html>
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700|Lato:100,300,400); /* ############################### */ /* Sudhanshu Pandey */ /* ############################# */ html { height: 100%; } /* line 13, */ body { background: url(http://www.streetindustry.co/assets/img/backgrounds/1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (min-width: 979px) { /* line 13, */ body { padding-top: 80px; } } /* line 21, */ .blue { color: #447fc8; } /* line 25, */ .btn-black { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 5px 20px; background-color: #222222; background-image: none; color: white; text-shadow: none; } /* line 33, */ .btn-black:hover { background: #333333; color: white; } /* ########### */ /* $NAVIGATION */ /* ########### */ /* line 43, */ .navbar .brand { margin-top: 20px; padding-bottom: 8px; max-height: 40px; width: auto; } /* line 49, */ .navbar .navbar-inner { height: 80px; background: white; filter: none; } /* line 54, */ .navbar .nav { margin-top: 20px; } /* line 56, */ .navbar .nav > li > a { padding: 10px 10px 11px; color: #333; text-shadow: none; } /* line 63, */ .navbar .nav > li > a:hover { color: #111; } /* line 67, */ .navbar .nav > li.active > a { background: none; color: #111; } /* line 70, */ .navbar .nav > li.active > a:hover { background: none; color: #111; } /* ####### */ /* $LOGIN */ /* ####### */ /* line 80, */ #login-wraper { -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); position: absolute; top: 50%; left: 50%; margin-top: -185px; margin-left: -235px; padding: 25px; width: 700px; height: 350px; background: white; text-align: center; } /* line 97, */ .login-form legend { margin-top: 5px; margin-bottom: 30px; padding-bottom: 25px; } /* line 102, */ .login-form .body { padding-bottom: 30px; border-bottom: 1px solid #eeeeee; } /* line 106, */ .login-form .footer { margin-top: 20px; } /* line 108, */ .login-form .footer .checkbox.inline { display: inline; } /* line 110, */ .login-form .footer .checkbox.inline input[type="checkbox"] { float: none; margin-top: -4px; } /* line 115, */ .login-form .footer .btn { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-left: 15px; padding: 7px 25px; background-image: none; } /* ######### */ /* $REGISTER */ /* ######### */ /* line 127, */ #register-wraper { -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); margin-top: 25px; margin-bottom: 70px; padding-top: 25px; padding-bottom: 25px; background: white; text-align: center; } /* line 137, */ #register-form { margin: 0 auto; width: 350px; } /* line 140, */ #register-form .control-inline { display: inline-block; } /* line 143, */ #register-form legend { margin-bottom: 15px; border-bottom: none; } /* line 147, */ #register-form input.input-huge { width: 318px; } /* line 150, */ #register-form .control-group { margin-bottom: 0; } /* line 153, */ #register-form .checkbox.inline { margin-bottom: 10px; padding: 0; font-size: 98%; } /* line 157, */ #register-form .checkbox.inline input { margin-right: 10px; } /* line 161, */ #register-form .body { overflow-y: auto; height: auto; } /* line 165, */ #register-form .btn { padding: 10px 40px; background-image: none; box-shadow: none; } /* line 171, */ .register-info-wraper { background: rgba(0, 0, 0, 0.2); } /* line 174, */ #register-info { position: relative; padding: 25px; } /* line 177, */ #register-info ul { margin-right: 25px; } /* line 179, */ #register-info ul li { margin-bottom: 25px; } /* ####### */ /* $FOOTER */ /* ####### */ /* line 185, */ footer.white { padding-top: 20px; height: 50px; background: white; text-align: center; } /* ###### */ /* $FONTS */ /* ###### */ /* navigation */ /* line 7, */ .navbar { font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } /* login form */ /* line 17, */ .login-form legend { font-family: 'Lato', Helvetica, sans-serif; font-size: 36px; font-weight: 300; color: #333333; -webkit-font-smoothing: subpixel-antialiased; } /* line 24, */ .login-form label { font-family: 'Lato', Helvetica, sans-serif; font-size: 20px; color: #333333; font-weight: 300; } /* register form */ /* line 32, */ #register-form legend { font-family: 'Lato', Helvetica, sans-serif; font-size: 36px; font-weight: 300; color: #333333; -webkit-font-smoothing: subpixel-antialiased; } /* line 39, */ #register-form label { font-family: 'Lato', Helvetica, sans-serif; font-size: 18px; color: #333333; font-weight: 300; } /* register info */ /* line 48, */ #register-info h1 { font-size: 42px; font-family: "PT Sans", Arial, Helvetica, sans-serif; line-height: 55px; font-weight: 700; text-align: right; padding-bottom: 50px; color: white; } /* line 57, */ #register-info ul { text-align: right; color: white; font-size: 24px; font-family: "PT Sans", Arial, Helvetica, sans-serif; } /* footer */ /* line 66, */ footer.navbar-fixed-bottom { font-size: 16px; font-family: "PT Sans", Arial, Helvetica, sans-serif; line-height: 18px; font-weight: 400; } /* ######## */ /* $QUERIES */ /* ######## */ /* Portrait tablet*/ @media (max-width: 980px) { /* logo margin fix */ /* line 8, */ .navbar { height: auto; margin-bottom: 0; } /* line 9, */ .navbar .brand { margin-top: 0; } /* line 14, */ .navbar .navbar-inner { height: auto; } /* line 18, */ .navbar .nav > li > a:hover { color: white; } /* line 21, */ #login-wraper { position: relative; top: 0; margin-top: 25px; } } @media (max-width: 495px) { /* line 29, */ #login-wraper { width: auto; height: auto; margin-left: 0; margin-right: 0; left: 0; } /* line 36, */ #register-form { width: auto; } /* line 38, */ #register-form .control-inline { display: block; } /* line 41, */ #register-form input { display: block; margin: 0 auto; } /* line 44, */ #register-form input.input-huge, #register-form input.input-medium { width: auto; display: block; } /* line 49, */ #register-form .btn { display: block; margin: 0 auto; }

Related: See More


Questions / Comments: