Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <style>
      body, html{
           height: 100%;
      }

      .hero-image{
        height: 25%;
        background-color: darkgray;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
       }

      .hero-text {
         text-align: center;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         color: black;
       }

      .hero-text button{
         padding: 10px;
         margin: 1px;
         font-family: Cambria;
     }

     .contactsBtn:hover{
         color: red;
         background-color: black;
     }

     input[type=text], input[type=email],input[type=tel], textarea {
       width: 100%; /* Full width */
       padding: 12px; /* Some padding */
       border: 1px solid #ccc; /* Gray border */
       border-radius: 4px; /* Rounded borders */
       box-sizing: border-box; /* Make sure that padding and width stays in place */
       margin-top: 6px; /* Add a top margin */
       margin-bottom: 16px; /* Bottom margin */
       resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
     }

     input[type=submit] {
        background-color: skyblue;
        color: black;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
    .container {
       border-radius: 5px;
       background-color: #f2f2f2;
       padding: 20px;
     }

     #footer{
      height: 100px;
      width: 400px;
    }

    </style>
</head>
<body>
    <div class="hero-image">
        <div class="hero-text">
          <h1>Contact Form</h1>
          <button type="button" onclick="nextPage()" class="contactsBtn">View all contacts</button>
        </div>
      </div>

      <div class="container">
        <form action="#">

          <div>
            <label>Full Name</label>
            <input type="text" id="name" name="name" placeholder="Enter your name.." required>
          </div>

          <div>
            <label>Email</label>
            <input type="email" id="email" name="email" placeholder="Enter your email.." required>
          </div>

          <div>
            <p>Contact number</p>
            <small>Format: 01X-XXXXXXXX</small>
            <input type="text" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>

          </div>

          <div>
            <label>Full Address</label>
          <textarea id="address" name="address" placeholder="Example: Mohammadpur,Dhaka,Bangladesh"
          style="height:200px"></textarea>
          </div>

          <div>
            <input type="submit" value="Submit">
          </div>

        </form>
      </div>

    <section>
      <div id="footer"></div>
    </section>


    <script type="text/javascript">
      function nextPage(e){
        window.location="contactsPage.html"
      }
      </script>

</body>
</html>