In this example below you will see how to do a 2 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
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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



  <!DOCTYPE html>
    <link rel="stylesheet" type="text/css" href="2.css">
			<h1>Create Account</h1>
        <div id="container">
                <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>
                <!-- You may want to consider adding a "confirm" password box also -->
                <div class="line"><label for="surname">Surname *: </label><input type="text" id="surname" /></div>
                <div class="line"><label for="other_names">Other Names *: </label><input type="text" id="names" /></div>
                <div class="line"><label for="dob">Date of Birth *: </label><input type="text" id="dob" /></div>
                <div class="line"><label for="email">Email *: </label><input type="email" id="email" /></div>
                <!-- Valid input types: https://www.w3schools.com/html5/html5_form_input_types.asp -->
                <div class="line"><label for="tel">Telephone: </label><input type="text" id="tel" /></div>
                <div class="line"><label for="add">Address *: </label><input type="text" id="add" /></div>
                <div class="line"><label for="ptc">Post Code *: </label><input type="text" id="ptc" /></div>
                <div class="line submit"><input type="submit" value="Submit" /></div>

    <script  src="js/index.js"></script>



/*Downloaded from https://www.codeseek.co/MGK_888/2-dNWmJX */
@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);

#container {
  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;}

/*Downloaded from https://www.codeseek.co/MGK_888/2-dNWmJX */