Advertisement
Abir_Ahsan

Untitled

Oct 19th, 2021
1,041
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>Contact Form</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <style>
  8.          body, html{
  9.            height: 100%;
  10.       }
  11.  
  12.       .hero-image{
  13.         height: 25%;
  14.         background-color: darkgray;
  15.         background-position: center;
  16.         background-repeat: no-repeat;
  17.         background-size: cover;
  18.         position: relative;
  19.        }
  20.        
  21.       .hero-text {
  22.          text-align: center;
  23.          position: absolute;
  24.          top: 50%;
  25.          left: 50%;
  26.          transform: translate(-50%, -50%);
  27.          color: black;
  28.        }
  29.  
  30.       .hero-text button{
  31.          padding: 10px;
  32.          margin: 1px;
  33.          font-family: Cambria;
  34.      }
  35.  
  36.      .contactsBtn:hover{    
  37.          color: red;
  38.          background-color: black;
  39.      }
  40.      .container {
  41.        border-radius: 5px;
  42.        background-color: #f2f2f2;
  43.        padding: 20px;
  44.      }
  45.      input[type=text], input[type=email] {
  46.        width: 100%; /* Full width */
  47.        padding: 12px; /* Some padding */
  48.        border: 1px solid #ccc; /* Gray border */
  49.        border-radius: 4px; /* Rounded borders */
  50.        box-sizing: border-box; /* Make sure that padding and width stays in place */
  51.        margin-top: 6px; /* Add a top margin */
  52.        margin-bottom: 16px; /* Bottom margin */
  53.        resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  54.      }
  55.      input[type=submit], input[type=reset]{
  56.         background-color: skyblue;
  57.         color: black;
  58.         padding: 12px 20px;
  59.         border: none;
  60.         border-radius: 4px;
  61.         cursor: pointer;
  62.         margin-left: 400px;
  63.       }
  64.      #footer{
  65.       height: 100px;
  66.       width: 400px;
  67.     }
  68.     </style>
  69. </head>
  70. <body>
  71.     <div class="hero-image">
  72.         <div class="hero-text">
  73.           <h1>Contact Form</h1>
  74.           <button type="button" onclick="nextPage()" class="contactsBtn">View all contacts</button>
  75.         </div>
  76.     </div>
  77.     <div class="container">
  78.         <form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post">
  79.             <p>Name: <input type="text" th:field="*{name}" /></p>
  80.             <p>E-mail: <input type="email" th:field="*{email}" /></p>
  81.             <p>Contact Number: <input type="text" th:field="*{phone_no}" /></p>
  82.             <p>Full Adress: <input type="text" th:field="*{address}" /></p>
  83.             <p>Note: <input type="text" th:field="*{note}" /></p>
  84.            
  85.             <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
  86.         </form>
  87.     </div>
  88.     <div id="footer"></div>
  89.  
  90. </body>
  91. </html>
  92.  
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement