<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>
<title>TALHA</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="container" >
<div class="col-md-6" >
<div id="logbox" >
<form id="signup" method="post" action="/signup" >
<h1>Log in to your account</h1>
<input name="user[email]" type="email" placeholder="Email address" class="input" />
<input name="user[password]" type="password" placeholder="Choose a password" required="required" class="input"/>
<input type="submit" value="Log In" class=" btn btn-success" />
<input type="button" value="Sign me up!" class="btn btn-primary"/>
</form>
</div>
</div>
<!--col-md-6-->
</div>
</div>
</body>
</html>
::selection {
background-color: #b5e2e7;
}
::-moz-selection {
background-color: #8ac7d8;
}
body {
background: #3CC;
}
.container {
display: -webkit-flex;
display: flex;
height: 100%;
}
#logbox {
padding: 10px;
margin: 50px auto;
width: 340px;
background-color: #fff;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
h1 {
text-align: center;
font-size: 175%;
color: #757575;
font-weight: 300;
}
h1, input {
font-family: "Open Sans", Helvetica, sans-serif;
}
.input {
margin-bottom:10px;
width: 75%;
height: 50px;
display: block;
margin: 0 auto 15px;
padding: 0 15px;
border: none;
border-bottom: 2px solid #ebebeb;
}
.input:focus {
outline: none;
border-bottom-color: #3CC !important;
}
.input:hover {
border-bottom-color: #dcdcdc;
}
.input:invalid {
box-shadow: none;
}
.pass:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
.inputButton {
position: relative;
width: 30%;
height: 20px;
display: block;
margin: 30px auto 30px;
color: white;
background-color: #3CC;
border: none;
-webkit-box-shadow: 0 5px 0 #2CADAD;
-moz-box-shadow: 0 5px 0 #2CADAD;
box-shadow: 0 5px 0 #2CADAD;
}
.inputButton:hover {
top: 2px;
-webkit-box-shadow: 0 3px 0 #2CADAD;
-moz-box-shadow: 0 3px 0 #2CADAD;
box-shadow: 0 3px 0 #2CADAD;
}
.inputButton:active {
top: 5px;
box-shadow: none;
}
.inputButton:focus {
outline: none;
}
.navbar-brand{
font-size: xx-large;
font-weight: bold;
font-family: cursive;
}
form-control{
display:block;
width:100%;
height:34px;padding:6px 12px;margin-bottom:10px;font-size:14px;line-height:5;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
