Abir_Ahsan

Untitled

Oct 19th, 2021
1,113
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.         .contactsBtn: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: 100%;
  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.  
  54.         #contacts {
  55.              font-family: Arial, Helvetica, sans-serif;
  56.              border-collapse: collapse;
  57.              width: 100%;
  58.             }
  59.         #contacts td, #contacts th {
  60.             border: 1px solid #ddd;
  61.             padding: 8px;
  62.         }
  63.         #contacts tr:hover {background-color: #ddd;}  
  64.  
  65.         #contacts th {
  66.           padding-top: 12px;
  67.           padding-bottom: 12px;
  68.           text-align: left;
  69.           background-color: #04AA6D;
  70.           color: white;
  71.         }
  72.         #footer{
  73.             height: 100px;
  74.             width: 400px;
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79. <div class="hero-image">
  80.     <div class="hero-text">
  81.         <h1>Contact Form</h1>
  82.         <button type="button" onclick="nextPage()" class="contactsBtn">Add new Contacts</button>
  83.     </div>
  84. </div>
  85. <div class="container">
  86.     <h1>All Contacts</h1>
  87.     <table id="contacts">
  88.       <tr>
  89.         <th>Name</th>
  90.         <th>E-mail</th>
  91.         <th>Contact Number</th>
  92.         <th>Address</th>
  93.       </tr>
  94.     <tr th:each="greeting : ${contacts}">
  95.         <div class="container2">
  96.              <td th:text= "${greeting.name}"> A</td>
  97.              <td th:text="${greeting.getEmail()}"> B</td>
  98.              <td th:text="${greeting.getEmail()}"> C</td>
  99.              <td th:text="${greeting.getEmail()}"> D</td>
  100.         </div>
  101.     </tr>
  102.     </table>
  103. </div>
  104.  
  105. <div id="footer"></div>
  106.  
  107. <script type="text/javascript">
  108.     function nextPage(e){
  109.         window.location="contactsPage.html"
  110.     }
  111. </script>
  112.  
  113. </body>
  114. </html>
RAW Paste Data