Pastebin

<div class="container">
  <div id="login">
    <div class="output">
      <p id="output"></p>
    </div>
    <div>
      <h2>Login</h2>
    </div>
    <form>
      <div class="input-container">
        <label for="email">Email</label>
        <input type="text" name="email" id="email" placeholder="">
      </div>
      <div class="input-container">
        <label for="password">Password</label>
        <input placeholder="" type="password" name="password" id="password">
      </div>
      <div>
        <button id="submitBtn" type="button" class="submitBtn">Login</button>
      </div>
    </form>
  </div>
  <div id="content">
    <p>You are logged into a (not very) secure site!</p>
    <button id="logout">Logout</button>
  </div>
</div>
<style>
body {
  background:#222;
  background-image: url('https://static.vecteezy.com/system/resources/previews/008/311/935/non_2x/the-illustration-graphic-consists-of-abstract-background-with-a-blue-gradient-dynamic-shapes-composition-eps10-perfect-for-presentation-background-website-landing-page-wallpaper-vector.jpg');
  margin:1em;
}

.container {
  width:400px;  
  margin: 40px auto;
  padding: 60px;
  text-align:center;
  border:none;
  border-radius:15px;
  color:#fff;
  // background:#141336;
  font-family:monospace;
  box-shadow:2px 2px 5px 2px #000;
}

input {
  padding:1em;
  border:solid 1px #fff;
  color:#fff;
  border-radius:5px;
  margin:1em auto;
  width: 100%;
  box-sizing:border-box;
  background:transparent;
  outline:none;
}
input:focus {
  border:solid 2px #fff;
  opacity:0.7;
  box-shadow:2px 2px 5px 2px #fff;
}

button {
  margin:1em;
  padding:1em;
  width:150px;
  border:solid 1px #ccc;
  border-radius:5px;
  color:#fff;
  background:transparent;
  cursor:pointer;
  transition: 0.2s;
}

button:hover {
  background:#fff;
  border:solid 1px #fff;
  color:#000;
}

button:active {
  transform:scale(0.95);
}

.input-container {
  text-align:left;
  margin-bottom:2em;
}

.hidden {
  display:none;
}
</style>
<script>
var btn = document.getElementById('submitBtn');
var output = document.getElementById('output');
var content = document.getElementById('content');
var login = document.getElementById('login');
var logout = document.getElementById('logout');
content.classList.add('hidden');

var correct_user = 'jfencott@outlook.com';
var correct_pass = '123abc';

btn.addEventListener('click', function() {
  var user = document.getElementById('email').value;
  var pass = document.getElementById('password').value;

  if (user == correct_user) {
     if (pass == correct_pass) {
       login.classList.add('hidden');
       content.classList.remove('hidden');
     } else {
       output.innerHTML = 'Password is incorrect.';
       document.getElementById('password').value = "";
     }
  } else {
    output.innerHTML = 'Email not found.';
  }
});

logout.addEventListener('click', function() {
  content.classList.add('hidden');  
  login.classList.remove('hidden');
  output.innerHTML = "You have logged out!";
  document.getElementById('email').value = "";
  document.getElementById('password').value = "";
});

document.addEventListener('keyup', (e) => {
  if (e.key === "Enter") {
    btn.click();
    e.preventDefault();
  }
});
</script>