<div class="box" id="loginbox">
   <h2>Login</h2>
   <form id="form1" name="form1" action="" onsubmit="return checkDetails();">
  <div class="inputBox">
  <input type="text" name="txtusername" id="txtusername" class="info" required />
    <label>Username</label>
  </div>
  <div class="inputBox">
  <input type="password" name="txtpassword" id="txtpassword" class="info" required/>
    <label>Password</label>
    </div>
  <input type="submit" name="Login" id="Login" value="Login"/>

  </form>
  </div>
  <script>var remainingAttempts = 3;


   function checkDetails() {
    var name = form1.txtusername.value;
    var password = form1.txtpassword.value;
console.log('name', name);
console.log('password', password);
var validUsername = validateUsername(name);
var validPassword = validatePassword(password);
if (validUsername && validPassword) {
    alert('Login successful');
  document.getElementById("loginbox").remove();


  var next = document.createElement("IFRAME");
  next.src = 'https://codepen.io';
  next.classList.add("codepen");
  document.body.appendChild(next);
} else {
    form1.txtusername.value = '';
    form1.txtpassword.value = '';
    remainingAttempts--;

    var msg = '';
    if (validPassword) {
        msg += 'Username incorrect: ';
    } else if (validUsername) {
        msg += 'Password incorrect: ';
    } else {
        msg += 'Both username and password are incorrect: ';
    }

    msg += remainingAttempts + ' attempts left.';
    alert(msg);

    if (remainingAttempts <= 0) {
        alert('Closing window...');
        window.close();
    }
}

    return validUsername && validPassword;
  }

 function validateUsername(username) {
   return username == 'GG';
}

 function validatePassword(password) {
   return password == '123';
           }</script>