<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;
}
