Login component - 3
COPY
<main class="h-100v bg-light">
<div class="container-fluid">
<div class="row justify-content-between p-4">
<div class="col">
<img src="/component/images/logo/saltUI.svg" width="80" alt="saltUI">
</div>
<div class="col text-end">
<h3 class="fs-5">Office management</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-5 col-md-6 d-lg-flex align-items-center">
<div class="bg-white rounded-4 border shadow-sm p-5 mt-5 w-100">
<form class="px-0 px-md-5">
<h2 class="mb-5">Sign In</h2>
<!-- Email input -->
<div class="form-outline mb-4">
<label class="form-label" for="form1Example1">Email address</label>
<input type="email" id="form1Example1" class="form-control">
</div>
<!-- Password input -->
<div class="form-outline mb-4">
<label class="form-label" for="form1Example2">Password</label>
<input type="password" id="form1Example2" class="form-control">
</div>
<div class="row mb-4">
<div class="col d-flex justify-content-start">
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked>
<label class="form-check-label" for="form1Example3">
Remember me
</label>
</div>
</div>
<div class="col text-end">
<a href="#!">Forgot password?</a>
</div>
</div>
<!-- Submit button -->
<div class="">
<button type="submit" class="btn btn-dark btn-lg">Sign in</button>
</div>
<p class="mt-2">Don't have an account yet? <a href="#">Register here!</a></p>
</form>
</div>
</div>
</div>
</div>
</main>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-gray: #1f1f1f;
--bs-gray-dark: #000000;
--bs-primary: var(--bs-gray);
--bs-primary-dark: var(--bs-gray-dark);
--bs-primary-rgb: 31, 31, 31;
}
body {
font-size: .9rem;
}
a {
color: var(--bs-primary);
}
.h-100v {
height: 100vh;
}
.fs-xs {
font-size: 0.75rem !important;
}
.btn-lg {
font-size: 0.9375rem;
padding: 12px 40px;
text-align: center;
font-weight: 500;
border-radius: 5rem;
}
.form-control {
font-size: 0.95rem;
padding: 13px 15px;
border-radius: 5rem;
border: 1px solid rgba(var(--bs-primary-rgb), .50);
box-shadow: 2px 2px #e9e9e9;
--bs-text-color: var(--bs-primary-dark);
color: var(--bs-text-color);
}
.form-label {
font-weight: 500 !important;
}
.form-control:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 0.2rem rgba(0, 57, 180, 0.15);
}
Login component - 1
COPY
<main class="page-wrapper">
<!-- Page content-->
<div class="position-absolute w-100">
<div class="row g-0 justify-content-between p-4">
<div class="col-6">
<img src="/component/images/logo/saltUI.svg" width="80" alt="saltUI">
</div>
<div class="col-6 text-end">
<h3 class="fs-5 text-white">saltUI Admin</h3>
</div>
</div>
</div>
<div class="row g-0" style="height: 100vh !important;">
<div class="col-md-6 d-lg-flex align-items-center">
<div class="p-4 p-md-5 w-100">
<div class="m-md-5">
<h1 class="mt-md-5 fs-3">Sign In</h1>
<p class="pb-3 mb-3 mb-lg-4">
Don't have an account yet?
<a href="#">Register here!</a>
</p>
<form class="validation-on" novalidate="" pb-autologin="true" autocomplete="off">
<div class="pb-3 mb-3">
<input class="form-control form-control-lg fs-6 rounded-1 shadow-sm" type="email" placeholder="Email address" required="">
</div>
<div class="mb-4">
<input class="form-control form-control-lg fs-6 rounded-1 shadow-sm" type="password" placeholder="Password" required="">
</div>
<div class="d-flex flex-wrap align-items-center justify-content-between pb-4">
<form-check class="my-1">
<input class="form-check-input" type="checkbox" id="keep-signedin">
<label class="form-check-label ms-1" for="keep-signedin">Keep me signed in</label>
</form-check>
<a class="fs-sm fw-semibold text-decoration-none my-1" href="#">Forgot password?</a>
</div>
<button class="btn btn-lg btn-primary mb-4 shadow rounded-1 px-5" type="submit" pb-role="submit">Sign
in</button>
</form>
</div>
</div>
</div>
<div class="col-md-6" style="background-image:url(/component/images/nature/road-in-jangol.jpg); background-size: cover; background-position: bottom;">
</div>
</div>
</main>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-green: #059b00;
--bs-green-dark: #016615;
--bs-black: #000000;
--bs-red: #d11800;
--bs-red-dark: #a01300;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
}
body {
font-size: .9rem;
}
h1 {
color: var(--bs-secondary);
}
.text-primary,
a {
color: var(--bs-primary);
}
.btn-primary {
background-color: var(--bs-primary);
border-color: var(--bs-green-dark);
}
.btn-primary:hover {
background-color: var(--bs-green-dark);
border-color: var(--bs-green-dark);
}
.form-control {
font-size: 0.95rem;
padding: 13px 15px;
border-radius: .25rem;
box-shadow: 2px 2px #e9e9e9;
--bs-text-color: var(--bs-primary);
color: var(--bs-text-color);
}
.form-label {
font-weight: 500 !important;
}
.form-control:focus {
border-color: var(--bs-primary);
box-shadow: 0 0 0 0.2rem rgba(0, 57, 180, 0.15);
}
.btn-lg {
font-size: 0.9375rem;
padding: 12px 40px;
}
.fs-xs {
font-size: 0.75rem !important;
}
Login component - 1
COPY
<main class="h-100v" style="background-image:url(/component/images/nature/dreem-evening-2.jpg); background-size: cover; background-position: bottom;">
<div class="container-fluid">
<div class="row justify-content-between p-4">
<div class="col">
<img src="/component/images/logo/saltUI.svg" width="80" alt="saltUI">
</div>
<div class="col text-end">
<h3 class="fs-5">saltUI Admin</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-5 col-md-6 d-lg-flex align-items-center">
<div class="bg-white rounded-3 shadow-lg p-5 mt-5 w-100">
<form class="px-0 px-md-5">
<h2 class="mb-5 text-primary">Sign In</h2>
<!-- Email input -->
<div class="form-outline mb-4">
<label class="form-label" for="form1Example1">Email address</label>
<input type="email" id="form1Example1" class="form-control">
</div>
<!-- Password input -->
<div class="form-outline mb-4">
<label class="form-label" for="form1Example2">Password</label>
<input type="password" id="form1Example2" class="form-control">
</div>
<div class="row mb-4">
<div class="col d-flex justify-content-start">
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" checked>
<label class="form-check-label" for="form1Example3">
Remember me
</label>
</div>
</div>
<div class="col text-end">
<a href="#!">Forgot password?</a>
</div>
</div>
<!-- Submit button -->
<div class="">
<button type="submit" class="btn btn-primary btn-lg">Sign in</button>
</div>
<p class="mt-2">Don't have an account yet? <a href="#">Register here!</a></p>
</form>
</div>
</div>
</div>
</div>
</main>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-green: #0033c0;
--bs-green-dark: #002791;
--bs-black: #000000;
--bs-red: #d11800;
--bs-red-dark: #a01300;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
}
body {
font-size: .9rem;
}
h1 {
color: var(--bs-primary);
}
.btn-primary {
background-color: var(--bs-primary);
border-color: var(--bs-green-dark);
}
.btn-primary:hover {
background-color: var(--bs-green-dark);
border-color: var(--bs-green-dark);
}
.h-100v {
height: 100vh;
}
.fs-xs {
font-size: 0.75rem !important;
}
.btn-lg {
font-size: 0.9375rem;
padding: 12px 40px;
text-align: center;
font-weight: 500;
border-radius: 4px;
background-color: var(--bs-primary);
border-color: var(--bs-green-dark);
}
.btn-lg:hover {
background-color: var(--bs-green-dark);
}
.form-control {
font-size: 0.95rem;
padding: 13px 15px;
border-radius: .25rem;
border: 1px solid rgba(var(--bs-primary-rgb), .50);
box-shadow: 2px 2px #e9e9e9;
--bs-text-color: #0d6efd;
color: var(--bs-text-color);
}
.form-label {
font-weight: 500 !important;
}
.form-control:focus {
border-color: #0060eb;
box-shadow: 0 0 0 0.2rem rgba(0, 57, 180, 0.15);
}
More coming soon