Abir_Ahsan

Untitled

Oct 18th, 2021
986
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Contact Form</title>
  8.     <style>
  9.       body, html{
  10.            height: 100%;
  11.       }
  12.  
  13.       .hero-image{
  14.         height: 25%;
  15.         background-color: darkgray;
  16.         background-position: center;
  17.         background-repeat: no-repeat;
  18.         background-size: cover;
  19.         position: relative;
  20.        }
  21.        
  22.       .hero-text {
  23.          text-align: center;
  24.          position: absolute;
  25.          top: 50%;
  26.          left: 50%;
  27.          transform: translate(-50%, -50%);
  28.          color: black;
  29.        }
  30.  
  31.       .hero-text button{
  32.          padding: 10px;
  33.          margin: 1px;
  34.          font-family: Cambria;
  35.      }
  36.  
  37.      .contactsBtn:hover{    
  38.          color: red;
  39.          background-color: black;
  40.      }
  41.  
  42.      input[type=text], input[type=email],input[type=tel], textarea {
  43.        width: 100%; /* Full width */
  44.        padding: 12px; /* Some padding */
  45.        border: 1px solid #ccc; /* Gray border */
  46.        border-radius: 4px; /* Rounded borders */
  47.        box-sizing: border-box; /* Make sure that padding and width stays in place */
  48.        margin-top: 6px; /* Add a top margin */
  49.        margin-bottom: 16px; /* Bottom margin */
  50.        resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  51.      }
  52.  
  53.      input[type=submit] {
  54.         background-color: skyblue;
  55.         color: black;
  56.         padding: 12px 20px;
  57.         border: none;
  58.         border-radius: 4px;
  59.         cursor: pointer;
  60.       }
  61.     .container {
  62.        border-radius: 5px;
  63.        background-color: #f2f2f2;
  64.        padding: 20px;
  65.      }
  66.  
  67.      #footer{
  68.       height: 100px;
  69.       width: 400px;
  70.     }
  71.  
  72.     </style>
  73. </head>
  74. <body>
  75.     <div class="hero-image">
  76.         <div class="hero-text">
  77.           <h1>Contact Form</h1>
  78.           <button type="button" onclick="nextPage()" class="contactsBtn">View all contacts</button>
  79.         </div>
  80.       </div>
  81.  
  82.       <div class="container">
  83.         <form action="#">
  84.  
  85.           <div>
  86.             <label>Full Name</label>
  87.             <input type="text" id="name" name="name" placeholder="Enter your name.." required>
  88.           </div>
  89.  
  90.           <div>
  91.             <label>Email</label>
  92.             <input type="email" id="email" name="email" placeholder="Enter your email.." required>
  93.           </div>
  94.  
  95.           <div>
  96.             <p>Contact number</p>
  97.             <small>Format: 01X-XXXXXXXX</small>
  98.             <input type="text" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
  99.            
  100.           </div>
  101.          
  102.           <div>
  103.             <label>Full Address</label>
  104.           <textarea id="address" name="address" placeholder="Example: Mohammadpur,Dhaka,Bangladesh"
  105.          style="height:200px"></textarea>
  106.           </div>
  107.  
  108.           <div>
  109.             <input type="submit" value="Submit">
  110.           </div>
  111.      
  112.         </form>
  113.       </div>
  114.  
  115.     <section>
  116.       <div id="footer"></div>
  117.     </section>
  118.    
  119.    
  120.        
  121.     <script type="text/javascript">
  122.       function nextPage(e){
  123.         window.location="contactsPage.html"
  124.       }
  125.       </script>  
  126.      
  127. </body>
  128. </html>
RAW Paste Data