You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
5.4 KiB
132 lines
5.4 KiB
@layout AuthLayout
|
|
@page "/"
|
|
<style>
|
|
.gradient-custom-2 {
|
|
/* fallback for old browsers */
|
|
background: #fccb90;
|
|
/* Chrome 10-25, Safari 5.1-6 */
|
|
background: -webkit-linear-gradient(to right, rgb(20 158 132 / 76%), rgb(10 10 56/100%));
|
|
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
background: linear-gradient(to right, rgb(20 158 132 / 76%), rgb(10 10 56/100%));
|
|
}
|
|
|
|
.login-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.button-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.facebook-button, .twitter-button, .google-button, .apple-button, .microsoft-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
}
|
|
|
|
.facebook-button {
|
|
background-color: #3B5998;
|
|
}
|
|
|
|
.twitter-button {
|
|
background-color: #1DA1F2;
|
|
}
|
|
|
|
.google-button {
|
|
background-color: #DB4437;
|
|
}
|
|
|
|
.apple-button {
|
|
background-color: #000;
|
|
}
|
|
|
|
.microsoft-button {
|
|
background-color: #00A4EF;
|
|
}
|
|
|
|
</style>
|
|
<section class="h-100 gradient-form" style="background-color: #eee;">
|
|
<div class="container py-5 h-100">
|
|
<div class="row d-flex justify-content-center align-items-center h-100">
|
|
<div class="col-xl-10">
|
|
<div class="card rounded-3 text-black">
|
|
<div class="row g-0">
|
|
<div class="col-lg-6">
|
|
<div class="card-body p-md-5 mx-md-4">
|
|
|
|
<div class="text-center">
|
|
<img src="icon-512.png"
|
|
style="width: 185px;" alt="logo">
|
|
<h4 class="mt-1 mb-5 pb-1">Biskilog Accounting</h4>
|
|
</div>
|
|
|
|
<form>
|
|
<p>Please login to your account</p>
|
|
|
|
<div class="form-outline mb-4">
|
|
<input type="email" id="form2Example11" class="form-control"
|
|
placeholder="Phone number or email address" />
|
|
<label class="form-label" for="form2Example11">Username</label>
|
|
</div>
|
|
|
|
<div class="form-outline mb-4">
|
|
<input type="password" id="form2Example22" class="form-control" />
|
|
<label class="form-label" for="form2Example22">Password</label>
|
|
</div>
|
|
|
|
<div class="text-center pt-1 mb-5 pb-1">
|
|
<button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="button">
|
|
Log
|
|
in
|
|
</button>
|
|
<a class="text-muted" href="#!">Forgot password?</a>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center justify-content-center pb-4">
|
|
<div class="login-buttons">
|
|
<div class="button-row">
|
|
<a href="#" class="facebook-button"><i class="fab fa-facebook-f"></i></a>
|
|
<a href="#" class="twitter-button"><i class="fab fa-twitter"></i></a>
|
|
<a href="#" class="google-button"><i class="fab fa-google"></i></a>
|
|
</div>
|
|
<div class="button-row">
|
|
<a href="#" class="apple-button"><i class="fab fa-apple"></i></a>
|
|
<a href="#" class="microsoft-button"><i class="fab fa-windows"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 d-flex align-items-center gradient-custom-2">
|
|
<div class="text-white px-3 py-4 p-md-5 mx-md-4">
|
|
<h4 class="mb-4">We are more than just a company</h4>
|
|
<p class="small mb-0">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
|
|
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|