Halaman Lupa Password . Reza Admin

Halaman Lupa Password

Membuat halaman Lupa Password, Pertama kamu bisa copy paste Struktur Dasar Template yang ada di bagian 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 element menggunakan tag <div> dengan class .container-fluid. Lalu didalam element <div class="container-fluid"> buat element menggunakan tag <div> dengan class .forgot-password, didalamnya ada tiga bagian yaitu, Lupa Password Konten, Button Buat Akun, dan Button Login. Untuk membuat Lupa Password Konten kamu perlu tag <div> dengan class .forgot-password__content. Untuk membuat Button Buat Akun dan Button Login, kamu perlu tag <a> dengan class .btn diikuti dengan class untuk style Buttonnya .btn--link, letakkan Button Buat Akun dan Button Login setelah Lupa Password Konten.

Ketiga, didalam Lupa Password Konten ada dua bagian yaitu Lupa Password Head (tempat logo dan keterangan Lupa Password) dan Lupa Password Form.

Untuk membuat Lupa Password Head kamu perlu tag <div> dengan class .forgot-password__head, lalu didalamnya kamu bisa memasukkan logo dengan menggunakan tag <img>, dan gunakan tag <p> untuk menambahkan keterangan Lupa Password.

Untuk membuat Lupa Password Form kamu perlu tag <div> dengan class .forgot-password__form didalamnya buat element menggunakan tag <form>, kemudian didalam tag <form> kamu bisa menambahkan Form seperti pada dokumentasi Form dan Button seperti pada dokumentasi Button. Letakkan Lupa Password Form setelah Lupa Password Head.

Lihat Demo

CopyHTML
<!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 Lupa Password . Reza Admin</title>

    <!-- pertama Bootstrap CSS -->
    <link rel="stylesheet" href="[host mu]/dist/css/bootstrap.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="forgot-password">
            <div class="forgot-password__content mt-3">
                <div class="forgot-password__head">
                    <a href=""><img src="[host mu]/dist/img/Reza_Admin.svg"></a>
                    <p class="mt-3">Tolong masukkan alamat Email kamu dibawah dan kami akan mengirim kamu sebuah link untuk membuat ulang password-mu!</p>
                </div>
                <div class="forgot-password__form">
                    <form>
                        <input type="email" name="email" placeholder="Email ..." class="form form--focus-blue mt-0">
                        <button class="btn btn--blue mt-3">Buat Ulang Password</button>
                    </form>
                </div>
            </div>
            <a href="" class="btn btn--link">Buat Akun</a>
            <a href="" class="btn btn--link mb-3 pt-0">Ingat Password mu? Login!</a>
        </div>
    </div>

</body>
</html>