Halaman Login
Membuat halaman Login, Pertama kamu bisa copy paste Struktur Dasar Template yang ada dibagian Instalasi, lalu cocokkan url yang ada dengan struktur aplikasi atau web kamu, dan untuk membuat halaman Login, standarnya kamu tidak perlu meload javascript apapun.
Kedua, didalam tag <body> buat tag <div> dengan class .container-fluid. Lalu didalam element <div class="container-fluid"> buat element menggunakan tag <div> dengan class .login, didalamnya ada dua bagian yaitu, Login Konten dan Button Buat Akun. Untuk membuat Login Konten kamu perlu tag <div> dengan class .login__content. Untuk membuat Button Buat Akun, kamu perlu tag <a> dengan class .btn diikuti dengan class untuk style Buttonnya .btn--link, letakkan Button Buat Akun setelah Login Konten.
Ketiga, didalam Login Konten ada tiga bagian yaitu, Login Head (tempat logo dan keterangan login), Login Form, dan Login Alt (tempat button login dengan Facebook atau Google).
Untuk membuat Login Head kamu perlu tag <div> dengan class .login__head, didalamnya kamu bisa memasukkan logo dengan menggunakan tag <img>, dan dibawah logo gunakan tag <p> untuk menambahkan keterangan login.
Untuk membuat Login Form kamu perlu tag <div> dengan class .login__form lalu didalamnya buat element menggunakan tag <form>, kemudian didalam tag <form> kamu bisa menambahkan Form Group seperti pada dokumentasi Form dan menambahkan Button seperti pada dokumentasi Button, namun kamu harus membungkus button-nya menggunakan tag <div> dengan class .login__form-action. Letakkan Login Form setelah Login Head.
Untuk membuat Login Alt, kamu perlu tag <div> dengan class .login__alt, lalu didalamnya kamu bisa membuat 'Button Login dengan Facebook' menggunakan tag <a> dengan class .btn lalu diikuti dengan class untuk style Button-nya .btn--login-alt-facebook. Untuk membuat 'Button Login dengan Google' caranya hampir sama dengan membuat 'Button Login dengan Facebook' hanya saja kamu perlu merubah class style untuk Buttonnya menjadi class .btn--login-alt-google. Letakkan Login Alt setelah Login Form.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tag wajib -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Halaman Login . Reza Admin</title>
<!-- Pertama Bootstrap CSS -->
<link rel="stylesheet" href="[host mu]/dist/css/bootstrap.min.css">
<!-- Kemudian Font awesome -->
<link rel="stylesheet" type="text/css" href="[host mu]/plugins/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- dan Reza Admin CSS -->
<link rel="stylesheet" type="text/css" href="[host mu]/dist/css/reza-admin.min.css">
<!-- Favicon -->
<link rel="icon" href="[host mu]/dist/img/Reza_Admin.ico">
</head>
<body>
<div class="container-fluid">
<div class="login">
<div class="login__content mt-3">
<div class="login__head">
<a href=""><img src="[host mu]/dist/img/Reza_Admin.svg"></a>
<p class="mt-3">Selamat datang di Reza Admin</p>
</div>
<div class="login__form">
<form>
<div class="input-group mt-0">
<div class="input-group__prepend">
<div class="input-group__text"><span class="fa fa-envelope"></span></div>
</div>
<input type="email" name="email" placeholder="Email ..." class="form form--focus-blue">
</div>
<div class="input-group">
<div class="input-group__prepend">
<div class="input-group__text"><span class="fa fa-lock"></span></div>
</div>
<input type="password" name="password" placeholder="Password ..." class="form form--focus-blue">
</div>
<div class="login__form-action mt-3">
<a href="" class="btn btn--link">Lupa password?</a>
<button type="submit" class="btn btn--blue mb-2 mb-sm-0">Login</button>
</div>
</form>
</div>
<div class="login__alt">
<a href="" class="btn btn--login-alt-google mb-2"><span class="fa fa-google"></span> Login dengan Google</a>
<a href="" class="btn btn--login-alt-facebook"><span class="fa fa-facebook"></span> Login dengan Facebook</a>
</div>
</div>
<a href="" class="btn btn--link mb-3">Buat Akun</a>
</div><!-- login -->
</div>
</body>
</html>