Membuat Form Master Login Keren dan Elegan

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

Kembali lagi bersama kami kali ini kami akan share form master login keren dan elegan dengan sentuhan sedikit animasi. Form login yang kami share menggunakan bootsrap. Form dibawah berasal dari salah satu template comingsoon yang kami edit sehingga menjadi form master login yang bagus dan elegan untuk dilihat.

Smartphone


Form ini juga mempunyai dua tampilan yaitu tampilan untuk smartphone anda dan tampilan untuk pc atau laptop anda. Langsung saja berikut form master login dan elegan yang kami maksud.


 <!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="Awaiken Theme">
  <!-- Page Title -->
  <title>MASTER LOGIN</title>
  <!-- Google Fonts css-->
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
  <!-- Bootstrap css -->
  <link href="css/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <!-- Font Awesome icon css-->
  <link href="css.css/font-awesome.min.css" rel="stylesheet" media="screen">
  <!-- Main custom css -->
  <link href="css/css/custom.css" rel="stylesheet" media="screen">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- Coming Soon Wrapper starts -->
    <div class="comming-soon">
      <div id="particles-js"></div>
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div class="coming-soon-box">
              <!-- Logo start -->
              <div class="logo">
                <img class="img-fluid mb-5 d-block mx-auto" src="css/images/profile.png" width="250" height="250" alt="">
              </div>
              <!-- Logo end -->             
              <div class="coming-text">
                <h2>FORM MASTER LOGIN</h2>
                </div>
                <!-- Social Media start -->
                <div class="social-link">
                  <a href="#"><img class="img-fluid mb-5 d-block mx-auto" src="css/images/student.png" width="30" height="30" alt="" data-toggle="tooltip" data-placement="top" title="User">
                  </a>
                  <a href="#"><img class="img-fluid mb-5 d-block mx-auto" src="css/images/lecture.png" width="30" height="30" alt="" data-toggle="tooltip" data-placement="top" title="Teknisi">
                  </a>
                  <a href="#"><img class="img-fluid mb-5 d-block mx-auto" src="css/images/manager.png" width="30" height="30" alt="" data-toggle="tooltip" data-placement="top" title="Admin">
                  </a>
                </div>
                <!-- Social Media end -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Coming Soon Wrapper ends -->
      <!-- Jquery Library File -->
      <script src="css/js/jquery-1.12.4.min.js"></script>
      <!-- SmoothScroll -->
      <script src="css/js/SmoothScroll.js"></script>
      <!-- Bootstrap js file -->
      <script src="css/js/bootstrap.min.js"></script>
      <!-- particles js file -->
      <script src="css/js/particles.js"></script>
      <script src="css/js/app.js"></script>
      <!-- Main Custom js file -->
      <script src="css/js/function.js"></script>
      <script>
        $(function () {
          $('[data-toggle="tooltip"]').tooltip()
        })
      </script>
    </body>
    </html> 

Pc


Form di atas sangat cocok bagi yang sedang mengertjakan suatu project aplikasi berbasis web yang multi user, dan kami sangat menyarankan kalian untuk menggunakannya.

Untuk lebih jelasnya berikut fitur lengkap yang dimiliki oleh form master login di atas.

Fitur :
  1. Mempunyai design yang bersih
  2. Sangat Responsive
  3. FrameworkBootstrap 
  4. CSS3 dan Animasi J-Query 
  5. Support dengan semua Browser
  6. Background Partikel

Jika kalian berminat silahkan download pada link dibawah ini.


Sekian share kali ini semoga apa yang kmai share bermanfaat bagi anda semua, janga lupa share keteman kalian terutama yang yang mempunyai kesenangan dengan sebuah website.

 https://awaikenthemes.com/template/minimal-coming-soon-html-template/ 


Artikel Menarik Lainnya

SUBSCRIBE TO OUR NEWSLETTER