<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <style type="text/css"> body { background-image: url("/files/background.png"); } .vertical-center { min-height: 100%; /* Fallback for browsers do NOT support vh unit */ min-height: 100vh; /* These two lines are counted as one :-) */ display: flex; align-items: center; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col"></div> <div class="col"> <div class="vertical-center"> <div class="card card-body"> <h1> Obtain a Companion </h1> <form method="POST"> <div class="form-group"> <label for="nameInput">Please enter your Name:</label> <input type="text" class="form-control" id="nameInput" placeholder="Name" name="username" autofocus> </div> <button type="submit" class="btn btn-primary">Proceed</button> </form> </div> </div> </div> <div class="col"></div> </div> </div> </body> </html>