<div class="screen">
  <form action="">
  <img class="logo" src="https://images.unsplash.com/photo-1521146764736-56c929d59c83?q=80&w=200&h=200&auto=format&fit=crop" alt="">
  <h1>James Smith</h1>
  <div class="login">
  <input type="password" placeholder="Enter Password" value="123">
  <button type="submit" class="hidden"><i class="fa-solid fa-circle-arrow-right"></i></button>
</div>
    </form>
<div class="cancel">
  <button><i class="fa-regular fa-circle-xmark"></i></button>
  <p>Cancel</p>
</div>

html, body {
  height:100%;
  width: 100%;
}

.screen {
  height: 100%;
  background: url(https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920) no-repeat center center fixed; 
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

form {
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
}

input {
  margin: auto;
  width: 15rem;
  border-radius: 999px;
  border:none;
  background: transparent;
  backdrop-filter: blur(300px) contrast(150%);
  padding: .5rem 1rem;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #fff;
  appearance:none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  outline:none;
    filter: brightness(95%);
  box-shadow: 0 0 20px 0 #0002;
}
input[type=password]::-webkit-contacts-auto-fill-button,
input[type=password]::-webkit-credentials-auto-fill-button {
   visibility: hidden;
   display: none !important;
   pointer-events: none;
   height: 0;
   width: 0;
   margin: 0;
}
.login {
  display: flex;
  justify-content: flex-end;
  align-items:center;
}
.login button {
  display:none;
  position: absolute;
  border:none;
  background:none;
  font-size: 2.2rem;
  color: #fff;
  margin: -2px;
  filter: brightness(95%);
}

input:not(:placeholder-shown) ~ button {
  display:block;
}

input::placeholder {
  color: #fffa;
  font-weight: 300;
}

h1 {
  font-size: 1.8rem;
  padding: 1rem;
  color: white;
  text-shadow: 0 0 2px #000;
  font-family: sans-serif;
}

.logo {
  border-radius: 100%;
  border: 1px solid #0001;
}

.cancel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cancel button {
  font-family: Fontawesome Free;
  appearance: none;
  padding: 0;
  margin: 0;
  font-size: 1.5rem;
  border-radius: 999px;
  border:none;
  background: transparent;
  backdrop-filter: blur(300px) contrast(150%);
  // padding: rem;
  margin: 0;
  // mix-blend-mode: difference;
  box-shadow: 0 0 5px 0 #0005;
}
.cancel i {
  padding: .2rem;
  margin: 0;
  background: transparent;
  backdrop-filter: blur(300px) contrast(150%);
  border-radius: 999px;
  color: #fff;
    filter: brightness(80%);
  // mix-blend-mode: difference;
  // box-shadow: 0 0 1px 0 #000;
}

.cancel p {
  font-family: sans-serif;
  font-size: .9rem;
  color: #fff;
  text-shadow: 0 0 2px #000;
}

document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault();
});