a

frontend/signup.html

@@ -36,24 +36,34 @@
           <li class="nav-item">
             <a class="nav-link" href="./support.html">Support</a>
           </li>
+          <div class="d-flex gap-2 d-none d-lg-block ms-3">
+            <a class="btn btn-primary" href="./login.html">Login</a>
+            <a class="btn btn-outline-light" href="./signup.html">Signup</a>
+          </div>
         </ul>
       </div>
     </div>
   </nav>
 
-  <!-- ↓ Page not ready ↓ -->
-  <section class="bg-img d-flex justify-content-center align-items-center support py-5">
-    <div class="container text-center text-white py-5">
-      <img src="./images/Construction.svg" alt="Under Construction" height="150px" width="auto" />
-
-      <h2 class="mt-5">Page under construction. Check back later!</h2>
-
-      <div class="mt-5">
-        <a href="./index.html" class="btn btn-primary px-4">Go Home</a>
+  <section class="d-flex justify-content-center flex-column align-items-center bg-img">
+      <div class="rounded shadow bg-translucent p-4">
+          <h2 class="mb-3 text-white">Create Account</h2>
+          <form id="signupForm">
+              <input id="firstName" placeholder="First Name" required type="text" class="mb-3 form-control shadow-sm">
+              <input id="lastName" placeholder="Last Name" required type="text" class="mb-3 form-control shadow-sm">
+              <input id="email" placeholder="Email Address" required type="email" class="mb-3 form-control shadow-sm">
+              <input id="password" placeholder="Password" required type="password" class="form-control shadow-sm">
+              <div class="d-flex justify-content-between align-items-center gap-3 mt-3">
+                  <button type="submit" class="btn btn-primary shadow-sm">Sign Up</button>
+                  <div class="text-end">
+                      <a href="./login.html">Already have an account?</a>   
+                      <br> 
+                      <a href="./dashboard.html">Try without an account</a> 
+                  </div>
+              </div>
+          </form>
       </div>
-    </div>
   </section>
-  <!-- ↑ Page not ready ↑ -->
 
   <!-- ↓ Footer ↓ -->
   <footer>
@@ -91,4 +101,4 @@
     crossorigin="anonymous"></script>
 </body>
 
-</html>
+</html>