Abir_Ahsan

Untitled

Oct 20th, 2021
981
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-image: url('https://d2cx26qpfwuhvu.cloudfront.net/premier/wp-content/uploads/2018/02/10132831/contactus.jpg');
  15.             background-position: center;
  16.             background-repeat: no-repeat;
  17.             background-size: cover;
  18.             position: relative;
  19.         }
  20.         #caption{
  21.              background-color: white;
  22.              padding: 4px;
  23.          }
  24.  
  25.         .hero-text {
  26.             text-align: center;
  27.             position: absolute;
  28.             top: 50%;
  29.             left: 50%;
  30.             transform: translate(-50%, -50%);
  31.             color: black;
  32.         }
  33.  
  34.         .hero-text button{
  35.             padding: 10px;
  36.             margin: 1px;
  37.             font-family: Cambria;
  38.         }
  39.  
  40.         .contactsBtn:hover{
  41.             color: red;
  42.             background-color: black;
  43.         }
  44.         .container {
  45.             border-radius: 5px;
  46.             background-color: #f2f2f2;
  47.             padding: 20px;
  48.         }
  49.         input[type=text], input[type=email] {
  50.             width: 100%; /* Full width */
  51.             padding: 12px; /* Some padding */
  52.             border: 1px solid #ccc; /* Gray border */
  53.             border-radius: 4px; /* Rounded borders */
  54.             box-sizing: border-box; /* Make sure that padding and width stays in place */
  55.             margin-top: 6px; /* Add a top margin */
  56.             margin-bottom: 16px; /* Bottom margin */
  57.             resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  58.         }
  59.         input[type=submit]{
  60.             background-color: skyblue;
  61.             color: black;
  62.             padding: 12px 20px;
  63.             border: none;
  64.             border-radius: 4px;
  65.             cursor: pointer;
  66.             margin-left: 400px;
  67.         }
  68.          input[type=reset]{
  69.             background-color: red;
  70.             color: black;
  71.             padding: 12px 20px;
  72.             border: none;
  73.             border-radius: 4px;
  74.             cursor: pointer;
  75.             margin-left: 400px;
  76.         }
  77.         #footer{
  78.             height: 100px;
  79.             width: 400px;
  80.         }
  81.         *,
  82.         *::before,
  83.         *::after {
  84.             box-sizing: border-box;
  85.         }
  86.  
  87.         :root {
  88.             --select-border: #777;
  89.             --select-focus: blue;
  90.             --select-arrow: var(--select-border);
  91.         }
  92.  
  93.         select{
  94.             appearance: none;
  95.             background-color:whitesmoke;
  96.             padding: 10px;
  97.             margin: 0;
  98.             width: 100%;
  99.             font-family: inherit;
  100.             font-size: inherit;
  101.             cursor: inherit;
  102.             line-height: inherit;
  103.             z-index: 1;
  104.             border-width: 1px;
  105.             border-style: solid;
  106.  
  107.         }
  108.  
  109.         .select {
  110.             display: grid;
  111.             grid-template-areas: "select";
  112.             align-items: center;
  113.             position: relative;
  114.         }
  115.  
  116.         topnav{
  117.           background-color: #333;
  118.           overflow: hidden;
  119.         }
  120.        .topnav a {
  121.           float:none;
  122.           color: #f2f2f2;
  123.           text-align: center;
  124.           padding: 14px;
  125.           text-decoration: none;
  126.           font-size: 17px;
  127.           }
  128.  
  129.         .topnav a:hover {
  130.             background-color: #ddd;
  131.             color: black;
  132.           }
  133.  
  134.         .topnav a.active {
  135.              background-color: #04AA6D;
  136.              color: white;
  137.             }
  138.         .flex-container {
  139.             display: flex;
  140.             background-color: DodgerBlue;
  141.           }
  142.         .flex-container > div {
  143.             background-color: #f1f1f1;
  144.             margin: 10px;
  145.             padding: 21px;
  146.             font-size: 24px;
  147.           }
  148.  
  149.     </style>
  150. </head>
  151. <body>
  152. <div class="hero-image">
  153.     <div class="hero-text">
  154.         <h1 id="caption">Contact Form</h1>
  155.     </div>
  156. </div>
  157. <div class="flex-container">
  158.   <div><a class="active" onclick="nextPage()">View all contacts</a></div>
  159.   <div><a class="active" onclick="nextFamilyPage()">View all family contacts</a></div>
  160.   <div><a class="active" onclick="nextFreindsPage()">View all Friends contacts</a></div>
  161.   <div><a class="active" onclick="nextWorkPage()">View all Work contacts</a></div>
  162.   <div><a class="active" onclick="nextSearchPage()">Search contacts</a></div>
  163. </div>
  164. <div class="topnav" id="topnav">
  165.  
  166. </div>
  167.  
  168. <div class="container">
  169.     <form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post">
  170.         <p>Name: <input type="text" th:field="*{name}" /></p>
  171.         <p>E-mail: <input type="email" th:field="*{email}" /></p>
  172.         <p>Contact Number: <input type="text" th:field="*{phone_no}" /></p>
  173.         <p>Full Adress: <input type="text" th:field="*{address}" /></p>
  174.         <p>Note: <input type="text" th:field="*{note}" /></p>
  175.  
  176.         <label>Priority</label>
  177.         <div class="select">
  178.             <select th:field="*{category}" id="standard-select">
  179.                 <option value="family">Family</option>
  180.                 <option value="friend">Friend</option>
  181.                 <option value="work">Work</option>
  182.             </select>
  183.         </div>
  184.  
  185.         <p><input type="submit" value="Submit" onclick="showConfirmation()" /> <input type="reset" value="Reset" /></p>
  186.     </form>
  187. </div>
  188. <div id="footer"></div>
  189.  
  190. <script type="text/javascript">
  191.     function nextPage(e){
  192.         window.location="norml"
  193.  
  194.     }
  195.     function showConfirmation(e){
  196.         window.confirm("Contact added successfully");
  197.     }
  198.  
  199.  
  200.     function nextFamilyPage(e){
  201.         window.location="family"
  202.  
  203.     }
  204.  
  205.  
  206.     function nextFreindsPage(e){
  207.         window.location="friends"
  208.  
  209.     }
  210.  
  211.  
  212.     function nextWorkPage(e){
  213.         window.location="work"
  214.  
  215.     }
  216.  
  217.     function nextSearchPage(e){
  218.         window.location="search"
  219.  
  220.     }
  221.  
  222.  
  223.  
  224.  
  225.  
  226. </script>
  227.  
  228. </body>
  229. </html>
RAW Paste Data