Simple Login Apss

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Acme|PT+Sans+Caption|Patua+One" rel="stylesheet">

    <title>Simple Apps</title>
  </head>
  <body>

 <div class="container-fluid">
     <div class="row">
       <div class="body">
         <h1><span>W</span>elcome Eki-Akmarullah</h1>
         <h4>Please login to continue</h4>
             <center>
              <p class="err-username" id="show-user">Harap Masukkan Username Anda</p>
              <p class="err-password" id="show-pass">Harap Masukkan Password Anda</p>
             <img src="img/ekiakmarullah2.jpg" class="profile-img">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam hic corrupti expedita repellat</p>
                <form name="form" method="POST">
                  <ul>
                    <li><img src="https://cdn1.iconfinder.com/data/icons/freeline/32/account_friend_human_man_member_person_profile_user_users-512.png" class="user"><input type="text" name="username" placeholder="Username" class="username"></li>
                    <li><img src="http://www.computerandphonerepairs.co.uk/wp-content/uploads/2017/12/knnvqiavpxkhqhhiuhmj.png" class="pass"><input type="password" name="password" placeholder="Password" class="password"></li>
                    <li><input type="submit" name="login" value="Login" class="login" onclick="check();"></li>
                  </ul>
                </form>
             </center>
           </div>
     </div>
 </div>

<script type="text/javascript">
  function check () {
    window.onbeforeunload = function () {return false;}
    var showUser = document.getElementById("show-user");
    var showPass = document.getElementById("show-pass");
    var username = form.username.value;
    var password = form.password.value;

    if (username == "")
    {
      showUser.style.display = "block";
    }

    else {
      showPass.style.display = "block";
    }
}
</script>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>