Anmeldeseite

Die Anmeldeseite wird ohne Header und Inhaltsbereich ausgespielt (<div class="site-header">, <div class="site-content">).

Der Fuß wird wie gewohnt ausgegeben.

<body>
    <div class="login-page d-flex flex-grow-1 justify-content-center align-items-center p-3">
        […]
    </div>
    <footer class="site-footer">
        […]
    </footer>
</body>

Beispielhafte Umsetzung

.login-page {
    background: #fff url('/resources/images/coast-bg.jpg') center/cover;

    > .container {
        background-color: rgba($gray-300, 50%);
        width: 640px;
    }

    label {
        color: $primary;
        font-family: 'Roboto Condensed', serif;
        font-weight: 500;
        letter-spacing: .1em;
    }

    a {
        font-size: $font-size-sm;
    }
}

Varianten

Standard

<div class="login-page d-flex flex-grow-1 justify-content-center align-items-center p-3">
    <form class="container p-4">
        <div class="row mb-5">
            <div class="col text-center">
                <img src="https://dev-design.corespot-manager.com/build/assets/core-spot-logo-DeQtP4Bo.svg" width="300px" alt>
            </div>
        </div>
        <div class="row mb-3 px-5">
            <label for="username" class="col-4 col-form-label text-uppercase fw-medium">Benutzername</label>
            <div class="col-8">
                <input type="username" class="form-control" id="username">
            </div>
        </div>
        <div class="row mb-3 px-5">
            <label for="password" class="col-4 col-form-label text-uppercase fw-medium">Passwort</label>
            <div class="col-8">
                <input type="password" class="form-control" id="password">
            </div>
        </div>
        <div class="row mb-4 px-5">
            <div class="col-8 offset-4">
                <a href="#">Passwort vergessen</a>
            </div>
        </div>
        <div class="row">
            <div class="col text-center">
                <button type="submit" class="btn btn-primary">Anmelden</button>
            </div>
        </div>
    </form>
</div>

Varianten