<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example with a side menu that hides on mobile, just like the Pure website.">
    <title>Evil Corp | Login</title>
    
    <link rel="stylesheet" href="/static/pure.css">    
    <link rel="stylesheet" href="/static/menu.css">

    <style>
        .login {
            margin-right: auto;
            margin-left: auto;
            width: 240px;
        }

        .pure-input {
            width: 240px;
        }
    </style>
</head>
<body>

<div id="layout">

    {% include 'nav.html' %}

    <div id="main">
        <div class="header">
            <h1>Evil Corp</h1>
            <h2>Login to access our corporate resources</h2>
        </div>
        <div class="login">
            <form class="pure-form" method="post" action="">
                <fieldset class="pure-group">
                    <input type="text" class="pure-input" placeholder="Username" name="username">
                    <input type="password" class="pure-input" placeholder="Password" name="password">
                </fieldset>
                <button type="submit" class="pure-button pure-input pure-button-primary">Sign in</button>
                <p><a href="/reset">Forgot password?</a></p>
            </form>
        </div>
    </div>
</div>




<script src="/static/ui.js"></script>

</body>
</html>
