SCSS

by Manju06

HTML

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/923b4d30ed.js" crossorigin="anonymous"></script>
  <h1>Pineapple</h1>
  <body>
    <div class="keys">
      <span class="press"><i class="fas fa-fingerprint"></i><h2>Log In</h2></span>
      <span id="inputType" style="display:none;"><input placeholder="Password"/></span>
    </div>
  </body>

SCSS

h1{
  font-family: 'Libre Baskerville', serif;
  text-align: center;
  font-size: 4em;
  color:#e0e4ec
}
html{
  background: #556c9a
}
.keys{
  text-align:center;

}
.fa-fingerprint{
  text-align:center;
  padding-left:2%;
  padding-right:2%;
  font-size:3rem;
}
h2{
  position:relative;
  text-align:center;
}
.press:hover{
  color:yellow;
}

JavaScript

document.addEventListener('click', function (event) {
 var type = document.getElementById('inputType'); // the type you want to hide/show
    if (type.style.display !== 'none') {
        type.style.display = 'none';
    }
    else {
        type.style.display = 'block';
    }
});