Form Login Vali Admin Untuk Website Anda

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
April 06, 2018


Kami biasanya menjalani proses login cukup banyak setiap hari dalam kehidupan digital kami. Sebagian besar aplikasi harus login untuk menggunakan layanan mereka. Untuk aplikasi semacam itu, Formulir masuk adalah elemen antarmuka pengguna pertama yang mungkin dialami pengguna. SO merancang layar login yang baik adalah suatu keharusan untuk aplikasi seperti itu. Merancang layar login adalah bagian yang sulit untuk desainer UI. Sebagian besar halaman login memiliki elemen yang mirip seperti nama pengguna, kata sandi, dll.

Desainer menggunakan pendekatan yang berbeda untuk membuat proses login sederhana dan nyaman. Hari ini kami telah mengumpulkan beberapa formulir masuk gratis yang dibuat dengan HTML dan CSS. Kami telah memilih formulir Login terbaik yang menggunakan praktik UI / UX terbaru. Semua formulir masuk ini gratis untuk digunakan dalam proyek Anda. Kami yakin ini akan menghemat waktu untuk Proyek Anda berikutnya.

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!-- Font-icon css-->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Login - Vali Admin</title>
  </head>
  <body>
    <section class="material-half-bg">
      <div class="cover"></div>
    </section>
    <section class="login-content">
      <div class="login-box">
        <form class="login-form" action="index.html">
          <h3 class="login-head"><i class="fa fa-lg fa-fw fa-user"></i>SIGN IN</h3>
          <div class="form-group">
            <label class="control-label">USERNAME</label>
            <input class="form-control" type="text" placeholder="Email" autofocus>
          </div>
          <div class="form-group">
            <label class="control-label">PASSWORD</label>
            <input class="form-control" type="password" placeholder="Password">
          </div>
          <div class="form-group">
            <div class="utility">
              <div class="animated-checkbox">
                <label>
                  <input type="checkbox"><span class="label-text">Stay Signed in</span>
                </label>
              </div>
              <p class="semibold-text mb-2"><a href="#" data-toggle="flip">Forgot Password ?</a></p>
            </div>
          </div>
          <div class="form-group btn-container">
            <button class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-lg fa-fw"></i>SIGN IN</button>
          </div>
        </form>
        <form class="forget-form" action="index.html">
          <h3 class="login-head"><i class="fa fa-lg fa-fw fa-lock"></i>Forgot Password ?</h3>
          <div class="form-group">
            <label class="control-label">EMAIL</label>
            <input class="form-control" type="text" placeholder="Email">
          </div>
          <div class="form-group btn-container">
            <button class="btn btn-primary btn-block"><i class="fa fa-unlock fa-lg fa-fw"></i>RESET</button>
          </div>
          <div class="form-group mt-3">
            <p class="semibold-text mb-0"><a href="#" data-toggle="flip"><i class="fa fa-angle-left fa-fw"></i> Back to Login</a></p>
          </div>
        </form>
      </div>
    </section>
    <!-- Essential javascripts for application to work-->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
    <!-- The javascript plugin to display page loading on top-->
    <script src="js/plugins/pace.min.js"></script>
    <script type="text/javascript">
      // Login Page Flipbox control
      $('.login-content [data-toggle="flip"]').click(function() {
       $('.login-box').toggleClass('flipped');
       return false;
      });
    </script>
  </body>
</html> 

Berhubungan kodingan Css dan Java Scripnyta panjnag sobat bisa sobat download pada link dibawah ini.


Sekian share kali ini semoga apa yang kami share di atas bermafaat bagi anda semu, Salam blogger.


Artikel Menarik Lainnya


SUBSCRIBE TO OUR NEWSLETTER