Untitled

<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <title>Contact Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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;
     }

     .contactsBtn:hover{
         color: red;
         background-color: black;
     }
     .container {
       border-radius: 5px;
       background-color: #f2f2f2;
       padding: 20px;
     }
     input[type=text], input[type=email] {
       width: 100%; /* Full width */
       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) */
     }
     input[type=submit], input[type=reset]{
        background-color: skyblue;
        color: black;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin-left: 400px;
      }
     #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="contactsBtn">View all contacts</button>
        </div>
    </div>
    <div class="container">
        <form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post">
            <p>Name: <input type="text" th:field="*{name}" /></p>
            <p>E-mail: <input type="email" th:field="*{email}" /></p>
            <p>Contact Number: <input type="text" th:field="*{phone_no}" /></p>
            <p>Full Adress: <input type="text" th:field="*{address}" /></p>
            <p>Note: <input type="text" th:field="*{note}" /></p>

            <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
        </form>
    </div>
    <div id="footer"></div>

</body>
</html>