Login Page

by CrazyDave2345

HTML

<form class="login" action="/login/" method="post">{% csrf_token %}
    <div class="u-form-group">
        <input type="email" placeholder="Email" />
    </div>
    <div class="form-element">
        <input type="password" placeholder="Password" />
    </div>
    <div class="form-element">
        <button id='login'>Log in</button>
    </div>
</form>
<div class="form-element"> <a href="#" class="forgot-password">Forgot password?</a>

</div>

CSS

.login {
    position:relative;
    float: left;
    width: 100%;
    height:auto;
    margin-top: 20px;
    text-align:center;
}
.form-element {
    width:100%;
    margin-bottom: 10px;
    border-color: #358efb;
}
input[type="email"], input[type="password"] {
    width: calc(50% - 22px);
    height:45px;
    outline: none;
    border: 1px solid #ddd;
    padding: 0 10px;
    margin: 4px;
    border-radius: 2px;
    color: #333;
    font-size:0.8rem;
    -webkit-transition:all 0.1s linear;
    -moz-transition:all 0.1s linear;
    transition:all 0.1s linear;
}
button {
    width:50%;
    background-color: #1CB94E;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    padding: 14px 0;
    border-radius: 2px;
    text-transform: uppercase;
}
.forgot-password {
    width:50%;
    text-align: center;
    text-decoration: underline;
    color: #888;
    font-size: 0.75rem;
    font-family: sans-serif;
}