app/public/css/Contact-Form-Clean.css

@@ -0,0 +1,90 @@
+.contact-clean {
+  background: #f1f7fc;
+  padding: 80px 0;
+}
+
+@media (max-width:767px) {
+  .contact-clean {
+    padding: 20px 0;
+  }
+}
+
+.contact-clean form {
+  max-width: 480px;
+  width: 90%;
+  margin: 0 auto;
+  background-color: #ffffff;
+  padding: 40px;
+  border-radius: 4px;
+  color: #505e6c;
+  box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
+}
+
+@media (max-width:767px) {
+  .contact-clean form {
+    padding: 30px;
+  }
+}
+
+.contact-clean h2 {
+  margin-top: 5px;
+  font-weight: bold;
+  font-size: 28px;
+  margin-bottom: 36px;
+  color: inherit;
+}
+
+.contact-clean .form-group:last-child {
+  margin-bottom: 5px;
+}
+
+.contact-clean form .form-control {
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 1px 1px 1px rgba(0,0,0,0.05);
+  outline: none;
+  color: inherit;
+  padding-left: 12px;
+  height: 42px;
+}
+
+.contact-clean form .form-control:focus {
+  border: 1px solid #b2b2b2;
+}
+
+.contact-clean form textarea.form-control {
+  min-height: 100px;
+  max-height: 260px;
+  padding-top: 10px;
+  resize: vertical;
+}
+
+.contact-clean form .btn {
+  padding: 16px 32px;
+  border: none;
+  background: none;
+  box-shadow: none;
+  text-shadow: none;
+  opacity: 0.9;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 13px;
+  letter-spacing: 0.4px;
+  line-height: 1;
+  outline: none !important;
+}
+
+.contact-clean form .btn:hover {
+  opacity: 1;
+}
+
+.contact-clean form .btn:active {
+  transform: translateY(1px);
+}
+
+.contact-clean form .btn-primary {
+  background-color: #055ada !important;
+  margin-top: 15px;
+  color: #fff;
+}
+

app/public/css/Custom-File-Upload.css

@@ -0,0 +1,16 @@
+#user_group_label {
+  cursor: pointer;
+  margin-bottom: 0px;
+  padding: 12px;
+  border: 2px solid #d3394c;
+  color: #d3394c;
+  font-weight: bold;
+}
+
+input {
+  border: 1px solid transparent;
+  background-color: #f1f1f1;
+  padding: 10px;
+  font-size: 16px;
+}
+

app/public/new.php

@@ -8,7 +8,10 @@
     }
 ?>
 
-
+<link rel="stylesheet" href="fonts/fontawesome-all.min.css">
+<link rel="stylesheet" href="css/Contact-Form-Clean.css">
+<link rel="stylesheet" href="css/Custom-File-Upload.css">
+<link rel="stylesheet" href="css/styles.css">
 
 <!-- Begin page content -->
 <main role="main" class="flex-shrink-0">
@@ -23,7 +26,17 @@
   </section>
 
     <section>
-      <p>This page is currently under construction.</p>
+      <div class="contact-clean">
+          <form method="post">
+              <div class="form-group"><input class="form-control" type="text" name="subject" placeholder="Subject"></div>
+              <div class="form-group"><textarea class="form-control" name="message" placeholder="Message" rows="14"></textarea></div>
+              <div class="form-group"><input type="file" id="user_group_logo" class="custom-file-input" accept="*" name="user_group_logo"><label id="user_group_label" for="user_group_logo"><i class="fas fa-upload"></i>&nbsp;Choose file(s)...</label>
+                  <div class="text-center mt-2"><button class="btn btn-primary" type="submit">Upload</button></div>
+                  <div class="text-center mt-2"><button class="btn btn-primary" type="submit">send </button></div>
+              </div>
+          </form>
+      </div>
+      <script src="assets/js/Custom-File-Upload.js"></script>
     </section>
 
 </main>