diff options
Diffstat (limited to 'site/content/docs/5.3/examples/sign-in')
-rw-r--r-- | site/content/docs/5.3/examples/sign-in/index.html | 32 | ||||
-rw-r--r-- | site/content/docs/5.3/examples/sign-in/sign-in.css | 25 |
2 files changed, 57 insertions, 0 deletions
diff --git a/site/content/docs/5.3/examples/sign-in/index.html b/site/content/docs/5.3/examples/sign-in/index.html new file mode 100644 index 0000000..8420c45 --- /dev/null +++ b/site/content/docs/5.3/examples/sign-in/index.html @@ -0,0 +1,32 @@ +--- +layout: examples +title: Signin Template +extra_css: + - "sign-in.css" +body_class: "d-flex align-items-center py-4 bg-body-tertiary" +--- + +<main class="form-signin w-100 m-auto"> + <form> + <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> + <h1 class="h3 mb-3 fw-normal">Please sign in</h1> + + <div class="form-floating"> + <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> + <label for="floatingInput">Email address</label> + </div> + <div class="form-floating"> + <input type="password" class="form-control" id="floatingPassword" placeholder="Password"> + <label for="floatingPassword">Password</label> + </div> + + <div class="form-check text-start my-3"> + <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault"> + <label class="form-check-label" for="flexCheckDefault"> + Remember me + </label> + </div> + <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button> + <p class="mt-5 mb-3 text-body-secondary">© 2017–{{< year >}}</p> + </form> +</main> diff --git a/site/content/docs/5.3/examples/sign-in/sign-in.css b/site/content/docs/5.3/examples/sign-in/sign-in.css new file mode 100644 index 0000000..641f6d9 --- /dev/null +++ b/site/content/docs/5.3/examples/sign-in/sign-in.css @@ -0,0 +1,25 @@ +html, +body { + height: 100%; +} + +.form-signin { + max-width: 330px; + padding: 1rem; +} + +.form-signin .form-floating:focus-within { + z-index: 2; +} + +.form-signin input[type="email"] { + margin-bottom: -1px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.form-signin input[type="password"] { + margin-bottom: 10px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} |