Halo temen-temen, kembali lagi dengan saya. Pada artikel kali ini saya akan membagikan kode lengkap dan sederhana bagaimana cara membuat Halaman Login Modern Elegan Keren menggunakan HTML dan CSS versi #1.

Kode ini sangat sederhana sekali namun sudah memiliki fitur yang sangat elegan, keren dan modern. Di sini untuk text editornya saya menggunakan Visual Studio Code serta Firefox sebagai browsernya.

Tampilan Halaman Login #1

Berikut untuk script lengkapnya dan jika ada yang belum jelas bisa menonton videonya di atas.

index.html

/index.html
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Halaman Login Modern Elegan #1</title>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="assets/css/style.css" />
  </head>
  <body>
    <div class="login-page">
      <h1>Login</h1>

      <div class="form-control">
        <i class="fa fa-user"></i>
        <input type="text" placeholder="Username" />
      </div>

      <div class="form-control">
        <i class="fa fa-lock"></i>
        <input type="password" placeholder="Password" />
      </div>

      <input class="btn-submit" type="button" value="Masuk" />
    </div>
  </body>
</html>

style.css

/assets/css/style.css
body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(to right, #1a237e, #b71c1c);
  height: 100%;
}

.login-page {
  width: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.login-page h1 {
  font-size: 40px;
  float: left;
  border-bottom: 6px solid #b71c1c;
  margin-bottom: 48px;
  padding: 12px 0;
}

.form-control {
  width: 100%;
  margin: 8px 0;
  padding: 8px 0;
  border-bottom: 1px solid;
  overflow: hidden;
}

.form-control i {
  width: 28px;
  float: left;
  text-align: center;
}

.form-control input {
  border: none;
  outline: none;
  background: none;
  color: #fff;
  font-size: 16px;
  width: 80%;
  float: left;
  margin: 0 8px;
}

.btn-submit {
  background: none;
  border: 2px solid #b71c1c;
  color: #fff;
  font-size: 16px;
  width: 100%;
  margin: 12px 0;
  padding: 6px;
  cursor: pointer;
}

Semoga Bermanfaat …