Abir_Ahsan

Untitled

Oct 19th, 2021
962
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: 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.  
  54.     p{
  55.         font-family: Arial, Helvetica, sans-serif;
  56.         font-weight: 500;
  57.     }
  58.      #footer{
  59.       height: 100px;
  60.       width: 400px;
  61.     }
  62.     </style>
  63. </head>
  64. <body>
  65.     <div class="hero-image">
  66.         <div class="hero-text">
  67.           <h1>Contact Form</h1>
  68.           <button type="button" onclick="nextPage()" class="contactsBtn">Add new Contacts</button>
  69.         </div>
  70.     </div>
  71.     <div class="container">
  72.         <ul th:each="greeting : ${contacts}">
  73.             <div class="container2">
  74.                <label>Name: <li th:text= ${greeting.name}"></li> </label>
  75.                <label>Email:  <li th:text="${greeting.getEmail()}"></li> </label>
  76.                
  77.             </div>
  78.         </ul>
  79.     </div>
  80.    
  81.     <div id="footer"></div>
  82.  
  83.     <script type="text/javascript">
  84.         function nextPage(e){
  85.           window.location="contactsPage.html"
  86.         }
  87.     </script>
  88.  
  89. </body>
  90. </html>
RAW Paste Data