<div class="container"><body>
<form class="logform" name="loginform" onSubmit="return validateForm();" action="main.html" method="post">
  <h2 class="text-center formHead animated bounceInDown">Please Login</h2><br>
    <input type="text" id="username" class="form-control" placeholder="username"/> 
    <input type="password" id="password" class="form-control" placeholder="password">
  <label class="checkbox">
    <input type="checkbox" value="rememberMe"> Remember me</label> 
  <button class="btn btn-lg btn-primary btn-block loginbtn" type="submit">Login</button><div class="reset-links text-center">
  <a href="#">Forgot Username? </a>
  <a href="#">Forgot Password?</a>
  
  </div>
</form>
</body>
body {
  background: #042037;
}

.logform {
  margin-top: 100px;
  max-width: 400px;
  padding: 15px 35px 10px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,0,.1);
}

.form-control
{
  margin-bottom: 15px;
}

.container {
  margin-top: 100px;
}
.reset-links {
  margin-top: 20px;
  margin-bottom: 10px;
  
}


 function validateForm() {
        var un = document.getElementById("username").value;
        var pw = document.getElementById("password").value;
        
        

    var unArray = ["Apple", "Google", "Microsoft"];
    var pwArray = ["AAPL", "GOOGL", "MSFT"];
        for (i=0; i < unArray.length; i++) {
          if (un=== unArray[i] && pw === pwArray[i]){
          window.location = "main.html";
          break;
        }
          else {
            alert("Invalid Login ID please try again.")
          }
        }
 }

External CSS

  1. //netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.