update

consumerWebsite/public/css/contact.css

@@ -7,6 +7,7 @@
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: 66%;
   }
 
   input,

consumerWebsite/public/css/sp.css

@@ -32,6 +32,7 @@ body {
       0.1
     );
   overflow: hidden;
+  margin-top: 85px;
 }
 
 .form.login {

consumerWebsite/routes/render.js

@@ -56,6 +56,11 @@ router.get('/login', function(req, res, next) {
     res.render('signuplogin'); 
 });
 
+//login / register page
+router.get('/contact', function(req, res, next) {
+  res.render('contact'); 
+});
+
 //404  page
 router.get('*', function(req, res, next) {
     res.render('404'); 

consumerWebsite/views/401.ejs

@@ -0,0 +1,37 @@
+<%- include('top') %>
+
+	<!-- full Title -->
+	<div class="full-title">
+		<div class="container">
+			<!-- Page Heading/Breadcrumbs -->
+			<h1 class="mt-4 mb-3">401
+				<small>Unauthorized Acess</small>
+			</h1>
+		</div>
+	</div>
+
+	<!-- Page Content -->
+	<div class="container">
+		<div class="breadcrumb-main">
+			<ol class="breadcrumb">
+				<li class="breadcrumb-item">
+					<a href="/">Home</a>
+				</li>
+				<li class="breadcrumb-item active">401</li>
+			</ol>
+		</div>
+
+		<div class="error-contents">
+			<h3>Unauthorized Access!</h3>
+			<div class="error-img">
+				<img class="img-fluid" src="images/401.png" alt="" />
+			</div>
+			<p>Sorry, you don't have permission to access this resource. Please log in or provide valid credentials.</p>
+			<a class="btn btn-primary" href="/"> Back To Homepage </a>
+		</div>
+		<!-- /.jumbotron -->
+
+	</div>
+	<!-- /.container -->
+
+<%- include('bot') %>

consumerWebsite/views/contact.ejs

@@ -0,0 +1,84 @@
+<%- include('top') %>
+
+  <!-- full Title -->
+  <div class="full-title">
+    <div class="container">
+      <!-- Page Heading/Breadcrumbs -->
+      <h1 class="mt-4 mb-3">Contact
+      </h1>
+    </div>
+  </div>
+
+  <!-- Page Content -->
+  <div class="container">
+    <div class="breadcrumb-main">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item">
+          <a href="/">Home</a>
+        </li>
+        <li class="breadcrumb-item active">Contact</li>
+      </ol>
+    </div>
+
+    <!-- Content Row -->
+    <div class="row">
+      <!-- Map Column -->
+      <div class="col-lg-8 mb-4">
+        <!-- Embedded Google Map -->
+        <iframe width="100%" height="300px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
+          src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;q=Singapore+408866&amp;t=m&amp;z=15&amp;output=embed"></iframe>
+      </div>
+      <!-- Contact Details Column -->
+      <div class="col-lg-4 mb-4 contact-right">
+        <h3>Contact Details</h3>
+        <p>
+          50 Ubi Ave 3
+          <br>S(408866)
+          <br>
+        </p>
+        <p>
+          <abbr title="Phone">P</abbr>: (+65) 90064959
+        </p>
+        <p>
+          <abbr title="Email">E</abbr>:
+          <a href="mailto:name@example.com">leongdingxuan@gmail.com
+          </a>
+        </p>
+        <p>
+          <abbr title="Hours">H</abbr>: Monday - Friday: 9:00 AM to 5:00 PM
+        </p>
+      </div>
+    </div>
+    <!-- /.row -->
+
+    <!-- Contact Form -->
+    <!-- In order to set the email address and subject line for the contact form go to the bin/contact_me.php file. -->
+    <div class="row">
+      <div class="col-lg-8 mb-4 contact-left">
+        <h3>Send us a Message</h3>
+        <form id="form">
+          <input type="hidden" name="access_key" value="">
+          <div class="mb-3">
+            <label for="name">Full Name</label>
+            <input type="text" name="name" id="name" required>
+          </div>
+          <div class="mb-3">
+            <label for="email">Email address</label>
+            <input type="email" name="email" id="email" required>
+          </div>
+          <div class="mb-3">
+            <label for="message">Message</label>
+            <textarea name="message" id="message" rows="3" required></textarea>
+          </div>
+          <button type="submit">Submit Form</button>
+        </form>
+      </div>
+    </div>
+    
+  </div>
+  <!-- /.row -->
+
+  </div>
+  <!-- /.container -->
+
+<%- include('bot') %>

consumerWebsite/views/logintop.ejs

@@ -14,6 +14,7 @@
 
     <!-- Custom styles for this template -->
     <link rel="stylesheet" href="css/sp.css" />
+    <link rel="stylesheet" href="css/contact.css" />
 
     <!-- jQuery library -->
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"

consumerWebsite/views/top.ejs

@@ -16,6 +16,7 @@
     <link href="css/all.css" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
     <link href="css/learnmore.css" rel="stylesheet">
+    <link href="css/contact.css" rel="stylesheet">