Halo temen-temen, kembali lagi dengan saya. Pada artikel kali ini saya akan membagikan kode lengkap dan sederhana menyambung dari artikel sebelumnya yaitu Desain Halaman Login Modern Elegan Keren menggunakan HTML dan CSS versi #1.

Pada versi #2 ini, desain lebih fokus ke responsive desain, jadi diakses pakai device apapun bakal otomatis mengikuti ukuran resolusi dari layar device tersebut.

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.

Untuk temen-temen yang kepo tentang konfigurasi dan extensi VS Code yang saya pakai silakan klik sitasi di bawah ini.

Full Konfigurasi & Ekstensi VS Code Saya
Tampilan Halaman Login

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 Responsive #2</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-box">
      <h1>Login</h1>

      <div class="form-control">
        <i class="fa fa-user" aria-hidden="true"></i>
        <input type="text" placeholder="Username" />
      </div>
      <div class="form-control">
        <i class="fa fa-lock" aria-hidden="true"></i>
        <input type="password" placeholder="Password" />
      </div>

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

style.css

/assets/css/style.css
* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: url("../images/bg.jpg");
  background-size: cover;
  height: 100vh;
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.login-box h1 {
  color: #fff;
  font-size: 40px;
  float: left;
  border-bottom: 4px solid #dd2c00;
  margin-bottom: 40px;
  padding-bottom: 20px;
}

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

.login-box .form-control i {
  width: 10%;
  text-align: center;
  color: #fff;
}

.login-box .form-control input {
  width: 85%;
  border: none;
  outline: none;
  background: none;
  color: #fff;
  font-size: 14px;
}

.login-box .form-control input::-webkit-input-placeholder,
.login-box .form-control input:-ms-input-placeholder,
.login-box .form-control input::-ms-input-placeholder,
.login-box .form-control input::placeholder {
  color: #bdbdbd;
}

.login-box .btn-submit {
  width: 100%;
  background: none;
  border: 1px solid #dd2c00;
  color: #fff;
  padding: 16px 24px;
  margin-top: 24px;
  cursor: pointer;
}

.login-box .btn-submit:hover {
  background: #dd2c00;
}

Assets External

Semoga Bermanfaat …