Untitled

<!DOCTYPE html>

<title>TruckIt</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="author" content="Ashton Fedler">
<meta name="application-name" content="TruckIt">
<meta name="keywords" content="">
<meta name="description" content="">

<style>
    body {
        display: flex;
        margin: 0;
        padding: 2rem 0 0 0;
        border: 1px solid transparent;
        min-height: 100vh;
        min-width: 100vw;
        justify-content: center;
        align-items: flex-start;
        box-sizing: border-box;
        font: 16px Arial;
        color: #333;
    }
    #loginForm {
        width: 20rem;
        padding: 2rem;
        font-size: 0;
    }
    #loginHeader {
        font-size: 0;
        padding: 0.5rem;
        text-align: center;
    }
    #loginContent {
        display: flex;
        flex-direction: column;
        font-size: 0;
        border-radius: 5px;
        margin: 1rem 0;
        overflow: hidden;
        box-shadow:
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12),
                0 3px 1px -2px rgba(0, 0, 0, 0.2);
    }
    #loginFooter {
        font-size: 0;
        padding: 0.5rem;
        text-align: center;
    }
    #loginTitle {
        font-size: 1.1rem;
        font-weight: bold;
        margin: 0;
    }
    #loginForgotCredentials {
        font-size: 0.9rem;
        font-weight: lighter;
        text-decoration: none;
    }
    #loginForgotCredentials:hover {
        text-decoration: underline;
    }
    #loginSubmit {
        display: none;
    }
    .login-field {
        font-size: 0;
    }
    .login-field:first-child {
        border-bottom: 1px solid #f3f3f3;
    }
    .login-field:nth-child(2) {
        border-top: 1px solid #f3f3f3;
    }
    .login-label { display: none; }
    .login-tooltip { display: none; }
    .login-input {
        display: block;
        box-sizing: border-box;
        width: 100%;
        font-size: 1rem;
        border: 0;
        padding: 1rem 0.5rem;
        background-color: #fff;
    }
    .login-input:focus {
        outline: 3px ridge rgba(0,151,240,.7);
    }
</style>

<form id="loginForm">
    <header id="loginHeader">
        <h2 id="loginTitle">Sign in</h2>
    </header>
    <section id="loginContent">
        <div class="login-field">
            <label id="loginIdLabel" class="login-label" for="loginIdInput">Id</label>
            <input id="loginIdInput" class="login-input" name="id" type="text" placeholder="TruckIt ID" aria-describedby="loginIdTooltip" required autofocus>
            <div id="loginIdTooltip" class="login-tooltip" role="tooltip">Id tooltip</div>
        </div>
        <div class="login-field">
            <label id="loginPasswordLabel" class="login-label" for="loginPasswordInput">Password</label>
            <input id="loginPasswordInput" class="login-input" name="password" type="password" placeholder="Password" aria-describedby="loginPasswordTooltip" required>
            <div id="loginPasswordTooltip" class="login-tooltip" role="tooltip">Password tooltip</div>
        </div>
        <input id="loginSubmit" type="submit" value="Login">
    </section>
    <footer id="loginFooter">
        <a id="loginForgotCredentials" href="javascript: void 0">Forgot TruckIt ID or password?</a>
    </footer>
</form>