Flat Login Form by Andy Tran

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.




Index.html
 <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Flat Login Form 3.0</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'>
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="pen-title">
    <h1>Flat Login Form</h1><span>Pen <i class='fa fa-paint-brush'></i> + <i class='fa fa-code'></i> by <a href='http://andytran.me'>Andy Tran</a></span>
  </div>
  <!-- Form Module-->
  <div class="module form-module">
    <div class="toggle"><i class="fa fa-times fa-pencil"></i>
      <div class="tooltip">Click Me</div>
    </div>
    <div class="form">
      <h2>Login to your account</h2>
      <form>
        <input type="text" placeholder="Username"/>
        <input type="password" placeholder="Password"/>
        <button>Login</button>
      </form>
    </div>
    <div class="form">
      <h2>Create an account</h2>
      <form>
        <input type="text" placeholder="Username"/>
        <input type="password" placeholder="Password"/>
        <input type="email" placeholder="Email Address"/>
        <input type="tel" placeholder="Phone Number"/>
        <button>Register</button>
      </form>
    </div>
    <div class="cta"><a href="#">Forgot your password?</a></div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://codepen.io/andytran/pen/vLmRVp.js'></script>
  <script  src="js/index.js"></script>
</body>
</html>
 

Style.Css
 body {
  background: #e9e9e9;
  color: #666666;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Pen Title */
.pen-title {
  padding: 50px 0;
  text-align: center;
  letter-spacing: 2px;
}
.pen-title h1 {
  margin: 0 0 20px;
  font-size: 48px;
  font-weight: 300;
}
.pen-title span {
  font-size: 12px;
}
.pen-title span .fa {
  color: #33b5e5;
}
.pen-title span a {
  color: #33b5e5;
  font-weight: 600;
  text-decoration: none;
}

/* Form Module */
.form-module {
  position: relative;
  background: #ffffff;
  max-width: 320px;
  width: 100%;
  border-top: 5px solid #33b5e5;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}
.form-module .toggle {
  cursor: pointer;
  position: absolute;
  top: -0;
  right: -0;
  background: #33b5e5;
  width: 30px;
  height: 30px;
  margin: -5px 0 0;
  color: #ffffff;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
}
.form-module .toggle .tooltip {
  position: absolute;
  top: 5px;
  right: -65px;
  display: block;
  background: rgba(0, 0, 0, 0.6);
  width: auto;
  padding: 5px;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
}
.form-module .toggle .tooltip:before {
  content: '';
  position: absolute;
  top: 5px;
  left: -5px;
  display: block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid rgba(0, 0, 0, 0.6);
}
.form-module .form {
  display: none;
  padding: 40px;
}
.form-module .form:nth-child(2) {
  display: block;
}
.form-module h2 {
  margin: 0 0 20px;
  color: #33b5e5;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.form-module input {
  outline: none;
  display: block;
  width: 100%;
  border: 1px solid #d9d9d9;
  margin: 0 0 20px;
  padding: 10px 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-wieght: 400;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.form-module input:focus {
  border: 1px solid #33b5e5;
  color: #333333;
}
.form-module button {
  cursor: pointer;
  background: #33b5e5;
  width: 100%;
  border: 0;
  padding: 10px 15px;
  color: #ffffff;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.form-module button:hover {
  background: #178ab4;
}
.form-module .cta {
  background: #f2f2f2;
  width: 100%;
  padding: 15px 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #666666;
  font-size: 12px;
  text-align: center;
}
.form-module .cta a {
  color: #333333;
  text-decoration: none;
}

Index.js
 // Toggle Function
$('.toggle').click(function(){
  // Switches the Icon
  $(this).children('i').toggleClass('fa-pencil');
  // Switches the forms  
  $('.form').animate({
    height: "toggle",
    'padding-top': 'toggle',
    'padding-bottom': 'toggle',
    opacity: "toggle"
  }, "slow");
}); 

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