Merge pull request #6 from rko0211/Contact-Page-Update

Create updated  Contact page

contact.css

@@ -0,0 +1,78 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+.mcontainer {
+    animation: gradient-animation 18s ease infinite;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.formdescription {
+
+    font-size: 35px;
+    background: -webkit-linear-gradient(300deg, #03befd, #af01ff, #0263ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+}
+
+.contactul li a:hover {
+    text-decoration: none;
+}
+
+input[type=text],
+select,
+textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin-top: 6px;
+    margin-bottom: 16px;
+    resize: vertical;
+}
+
+input[type=email],
+select,
+textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin-top: 6px;
+    margin-bottom: 16px;
+    resize: vertical;
+}
+
+input[type=submit] {
+    background-color: #003ef8;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+input[type=submit]:hover {
+    background-color: #45a049;
+}
+
+.container1 {
+    border-radius: 5px;
+    background-color: #f2f2f2;
+    padding: 20px;
+    margin-bottom: 30px;
+}
+
+.container .contacthead {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    margin: 30px;
+    padding: 20px;
+}

contact.html

@@ -14,7 +14,11 @@
     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" >
 
     <link href="bootstrap/js/bootstrap.min.js" rel="stylesheet" >
-
+
+  <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+  <link rel="stylesheet" href="contact.css">
+
     <title>CONTACT US - APS PUBLIC SCHOOL - EDUCATION FOR ALL!</title>
 
 </head>
@@ -95,35 +99,49 @@
   </a>
 </div>
 
-<center>
-<h2 class="bg-primary">Send us a message to have a talk!</h2>
-</center>
-<div class="container">
-<div class="mb-3">
-  <label for="Name" class="form-label">Name</label>
-  <input type="text" class="form-control" id="Name" placeholder="John Doe">
-</div>
-<div class="mb-3">
-  <label for="Email" class="form-label">E-mail</label>
-  <input type="text" class="form-control" id="email" placeholder="[email protected]">
-</div>
-<div class="mb-3">
-  <label for="Phone" class="form-label">Phone</label>
-  <input type="text" class="form-control" id="phone" placeholder="+911234567890">
-</div>
-<div class="mb-3">
-  <label for="Message" class="form-label">Message</label>
-  <input type="text" class="form-control" id="message" placeholder="I want to tell you that ...................!">
-  <br>
-<center>
- <div class="col-auto">
- <button type="submit" class="btn btn-primary">Submit</button>
- </div>
- </center>
-</div>
-</div>
+ <div>
+      <div style="text-align: center; margin-top: 40px; display: flex;justify-content: center;padding: 10px;">
+        <h1 style="text-align: center;" class="formdescription">
+          Let's <span class="auto_typed">Get in Touch.</span>
+        </h1>
+      </div>
 
+      <div class="container container1">
+        <div class="contacthead">
+          <img src="images/contact-form.png" alt="Contact image" style="min-height: 128px;min-width: 128px;">
+        </div>
+        <form action="">
+          <label for="fname"><b>Name</b></label>
+          <input type="text" id="fname" name="firstname" placeholder="John Doe">
+
+          <label for="lname"><b>Email</b></label>
+          <input type="email" id="lname" name="lastname" placeholder="[email protected]">
+
+          <label for="phnum"><b>Phone</b></label>
+          <input type="text" id="phnum" name="phnumber" placeholder="+912345678910">
+
+          <label for="subject"><b>Subject</b></label>
+          <textarea id="subject" name="subject" placeholder="I want to tell you..........."
+            style="height:100px"></textarea>
+          <center>
+            <input type="submit" value="Submit">
+
+          </center>
+        </form>
+      </div>
+
+      <script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
+      <script>
+        var typed = new Typed('.auto_typed', {
+          strings: ["Send Message"],
+          typeSpeed: 170,
+          backSpeed: 260,
+          loop: true
+        })
+      </script>
+    </div>
 <br>
+
 <div class="d-flex flex-column bg-primary">
   <div id="page-content">
     <div class="container text-center">
@@ -176,4 +194,4 @@ <h1 class="font-weight-light mt-4 text-white">Contact Us</h1>
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5dc98bff555d3f93"></script>
 
   </body>
-</html>
+</html>