<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="assets/css/login.css">

	<!-- Fonts -->

	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
	<link rel='stylesheet' href='httsp://fonts.googleapis.com/css?family=Lato:400,700'>
	<link href='https://fonts.googleapis.com/css?family=Cabin:600' rel='stylesheet' type='text/css'>
</head>	
<body>
  <div class="loginwrapper">
		<div class="loginbox">
			<div class="loginhead">
				<span class="logo"><em>Westchester's myChef</em></span>
			</div>
			<div class="loginform">
				<form method="post" action="login" novalidate>
					<div class="userinputs">
						<div class="inputwrap">
							<i class="fa fa-envelope-o"></i>
							<input type="email" placeholder="Email" name="email" value="" required><br>
						</div>
						<div class="inputwrap">
							<i class="fa fa-key"></i>
							<input type="password" placeholder="Password" name="pass" required><br>
						</div>
					</div>
					<div id="formerror"></div>
					<div class="copyright">
						<small>&copy; Copyright 2015 <em>myChef</em>. All rights reserved.</small>
					</div>
					<input type="submit" value="Login">
				</form>
			</div>
		</div>
	</div>
</body>
.loginwrapper {
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

* {
    margin: 0;
    padding: 0;
}

em {
    font-family: Lobster;
    font-style:normal;
    color: #e5e5e5;
}

body {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    color: #000;
    cursor:default;
    max-height: 100%;
    height: 100vh;
    overflow: hidden;
}

a, a:hover, a:active{
    text-decoration:none;
    color: #E5E5E5;
}

body p {
    margin: 0;
}

input[type='text'], input[type='password'], input[type='email'] {
    padding-left: 30px;
    color: #000;
    font-size: 16px;
    outline: none !important;
    -o-transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s; transition: all .2s;
}

.loginbox {
    width: 450px;
    margin: auto;
    height: 341px;
    position: relative;
    /*top: 50%;
    transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -o-transform:translateY(-50%);*/
    color: #E5E5E5;
    border-radius: 10px;
    padding:0px 0px 60px 0px;
}

.loginhead {
    height: auto;
    width: 100%;
    background-color: rgba(15,40,52,.6);
    padding: 20px 0;
    overflow: hidden;
    text-align: center;
}

.logo {
    font-size: 32px;
}

#formerror {
    padding-top:8px;
    color: red;
    font-size: 12px;
    height:35px;
}

.loginform{
    width: 100%;
    background-color: rgba(255,255,255,.6);
    text-align: center;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.loginform input {
    margin-bottom: 10px;
    width: 300px;
    height:30px;
    background-color: rgba(255,255,255,.85);
    border:1px solid rgba(0,0,0,0.38);
}

.loginform input[type="submit"]{
    width: 100%;
    height: 64.5px;
    color: #fff;
    margin-bottom: 0px;
    background-color: rgba(15,40,52,.6);
    outline: none !important;
    border: none !important;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

input:focus { 
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.38);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.38);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.38);
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

.loginform input[type="submit"]:hover{
    background-color: rgba(231,89,103,.8);
    -o-transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s; transition: all .2s;
}

input[type="password"] {
    margin-bottom: 0;
}

.userinputs {
    display: inline-block;
    position:relative;
    margin-top: 30px;
}

small em {
    color: #0F2834;
    font-size: 20px;
    letter-spacing: .6px;
}

small {
    color: #0F2834;
    font-size: 12px;
    margin-top: 5px;
    display: inline-block;
    letter-spacing: 1px;
}

.copyright {
    padding-bottom:15px;
    background-color: rgba(101,101,101,.2);
}

.inputwrap {
    position: relative;
}

i.fa {
    position: absolute;
    top: 7.5px;
    left: 10px;
    color: rgba(15,40,52,.6);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.