In this example below you will see how to do a 3 with some HTML / CSS and Javascript

This awesome code was written by MGK_888, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MGK_888 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
      <link rel="stylesheet" href="css/style.css">



  <!DOCTYPE html>
  <title>Log in - Sch&uuml;ler f&uuml;r Sch&uuml;ler!</title>
  <link rel="stylesheet" type="text/css" href="3.css">

<h1>Log in!</h1>

<div class="form">
      <div class="line"><label for="username">Username *: </label><input type="text" id="username" /></div>
      <div class="line"><label for="pwd">Password *: </label><input type="password" id="pwd" /></div>





/*Downloaded from https://www.codeseek.co/MGK_888/3-PWmREJ */
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Overpass');

* {
  padding: 0;
  margin: 0;

body {
  font-family:Arial, Sans-Serif;
  background-image: url(http://wallpapershome.com/images/pages/pic_h/4748.jpg);

.form {
  font-family: 'Overpass', sans-serif;
  margin:0 auto;
  background-color: white;
  text-align: center;
  border: 5px solid white;
  border-radius: 25px;
  padding: 150px 5px 20px 5px;
  margin-top: 50px;
  z-index: 1;

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 100px;
  text-align: center;
  text-shadow: 2px 2px black;
  padding-top: 50px;
  width: 100%;
  position: fixed;
  color: rgb(211, 228, 255);
  top: 0;
  z-index: 2;

/* Nicely lines up the labels. */
form label {display:inline-block;

/* You could add a class to all the input boxes instead, if you like. That would be safer, and more backwards-compatible */
form input[type="text"],
form input[type="password"],
form input[type="email"] {width:160px;}

form .line {clear:both;}
form .line.submit {text-align:right;}