Untitled

<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <title>Getting Started: Handling Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        body, html{
          height: 100%;
     }

     .hero-image{
       height: 25%;
       background-color: darkgray;
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       position: relative;
      }

     .hero-text {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: black;
      }

     .hero-text button{
        padding: 10px;
        margin: 1px;
        font-family: Cambria;
    }

    .newContactsBtn:hover{
        color: red;
        background-color: black;
    }
    .container {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;
      width: 100%; /* Full width */
      height: 80%;
      padding: 12px; /* Some padding */
      border: 1px solid #ccc; /* Gray border */
      border-radius: 4px; /* Rounded borders */
      box-sizing: border-box; /* Make sure that padding and width stays in place */
      margin-top: 6px; /* Add a top margin */
      margin-bottom: 16px; /* Bottom margin */
      resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
    }
    .container2{
        text-align: center;
        position: absolute;
        top: 40%;
        left: 50%;
        padding-bottom: 100px;
        transform: translate(-50%, -50%);
    }

    #footer{
     height: 100px;
     width: 400px;
   }
   </style>
</head>
<body>
    <div class="hero-image">
        <div class="hero-text">
          <h1>Contact Form</h1>
          <button type="button" onclick="nextPage()" class="newContactsBtn">Create New Contact</button>
        </div>
      </div>
      <div class="container">
        <div class="container2">
            <h1>Result</h1>
        <p th:text="'id: ' + ${greeting.name}" />
        <p th:text="'content: ' + ${greeting.phone_no}" />
        <a href="/greeting"> Add another contact </a>
        </div>
      </div>

      <div id="footer"></div>

      <script type="text/javascript">
        function nextPage(e){
          window.location="contactsPage.html"
        }
        </script>
</body>
</html>