Abir_Ahsan

Untitled

Oct 19th, 2021
982
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE HTML>
  2. <html xmlns:th="https://www.thymeleaf.org">
  3. <head>
  4.     <title>Getting Started: Handling Form Submission</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <style>
  7.         body, html{
  8.           height: 100%;
  9.      }
  10.  
  11.      .hero-image{
  12.        height: 25%;
  13.        background-color: darkgray;
  14.        background-position: center;
  15.        background-repeat: no-repeat;
  16.        background-size: cover;
  17.        position: relative;
  18.       }
  19.      
  20.      .hero-text {
  21.         text-align: center;
  22.         position: absolute;
  23.         top: 50%;
  24.         left: 50%;
  25.         transform: translate(-50%, -50%);
  26.         color: black;
  27.       }
  28.  
  29.      .hero-text button{
  30.         padding: 10px;
  31.         margin: 1px;
  32.         font-family: Cambria;
  33.     }
  34.  
  35.     .newContactsBtn:hover{    
  36.         color: red;
  37.         background-color: black;
  38.     }
  39.     .container {
  40.       border-radius: 5px;
  41.       background-color: #f2f2f2;
  42.       padding: 20px;
  43.       width: 100%; /* Full width */
  44.       height: 80%;
  45.       padding: 12px; /* Some padding */
  46.       border: 1px solid #ccc; /* Gray border */
  47.       border-radius: 4px; /* Rounded borders */
  48.       box-sizing: border-box; /* Make sure that padding and width stays in place */
  49.       margin-top: 6px; /* Add a top margin */
  50.       margin-bottom: 16px; /* Bottom margin */
  51.       resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  52.     }
  53.     .container2{
  54.         text-align: center;
  55.         position: absolute;
  56.         top: 40%;
  57.         left: 50%;
  58.         padding-bottom: 100px;
  59.         transform: translate(-50%, -50%);
  60.     }
  61.    
  62.     #footer{
  63.      height: 100px;
  64.      width: 400px;
  65.    }
  66.    </style>
  67. </head>
  68. <body>
  69.     <div class="hero-image">
  70.         <div class="hero-text">
  71.           <h1>Contact Form</h1>
  72.           <button type="button" onclick="nextPage()" class="newContactsBtn">Create New Contact</button>
  73.         </div>
  74.       </div>
  75.       <div class="container">
  76.         <div class="container2">
  77.             <h1>Result</h1>
  78.         <p th:text="'id: ' + ${greeting.name}" />
  79.         <p th:text="'content: ' + ${greeting.phone_no}" />
  80.         <a href="/greeting"> Add another contact </a>
  81.         </div>
  82.       </div>
  83.  
  84.       <div id="footer"></div>
  85.  
  86.       <script type="text/javascript">
  87.         function nextPage(e){
  88.           window.location="contactsPage.html"
  89.         }
  90.         </script>
  91. </body>
  92. </html>
RAW Paste Data