Untitled

<html>

<head>
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
    <link rel="stylesheet" href="/static/css/material.min.css">
    <script defer src="/static/js/material.min.js"></script>
    <title>Login - Mobifly Ltd.</title>
    <style>
        .demo-card-wide.mdl-card {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        .demo-card-wide > .mdl-card__title {
          color: #fff;
          height: 163px;
          background: url('../static/images/logo.png') center / cover;
        }
        .submit-btn {
            color: rgb(255,255,255);
            background-color: rgb(255,0,0);
        }
    </style>
</head>
<body>
    <div class="demo-card-wide mdl-card">
        <div class="mdl-card__title">
            <!-- logo image -->
        </div>
        <form method="POST" action="/gridlock/">
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input type="text" class="mdl-textfield__input" id="email" name="email" required>
                <label class="mdl-textfield__label" for="email">Email...</label>
                <div class="mdl-line-ripple"></div>
            </div>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input type="password" class="mdl-textfield__input" id="password" name="password" required>
                <label class="mdl-textfield__label" for="password">Password...</label>
                <div class="mdl-line-ripple"></div>
            </div>
            <center>
                <button type="submit"
                    class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect submit-btn">
                        Log In
                </button>
            </center>
            </div>
        </form>
    </div>
</body>
</html>