add: about, contact modals

index.html

@@ -16,8 +16,8 @@
     <div class="logo">Bites</div>
     <div class="menu">
       <a href="#home">Home</a>
-      <a href="#about">About</a>
-      <a href="#contact">Contact</a>
+      <a href="#" data-toggle="modal" data-target="#aboutModal">About</a>
+      <a href="#" data-toggle="modal" data-target="#contactModal">Contact</a>
     </div>
   </nav>
 
@@ -36,6 +36,61 @@
     <button id="saveTaskButton" class="btn btn-primary">Save</button>
   </div>
 
+  <!-- About Modal -->
+  <div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="aboutModalLabel">About Bites</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p>Bites is a task management application designed to help you organise and prioritise your tasks efficiently—because managing tasks shouldn’t break your flow!</p>
+            <p class="punchline mt-2 mb-2 font-weight-bold">Your tasks, your way... bite-sized.</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Contact Us Modal -->
+  <div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="contactModalLabel">Contact Us</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <form>
+            <div class="form-group">
+              <label for="contactName">Name</label>
+              <input type="text" class="form-control" id="contactName" placeholder="Enter your name">
+            </div>
+            <div class="form-group">
+              <label for="contactEmail">Email address</label>
+              <input type="email" class="form-control" id="contactEmail" placeholder="Enter your email">
+            </div>
+            <div class="form-group">
+              <label for="contactMessage">Message</label>
+              <textarea class="form-control" id="contactMessage" rows="3" placeholder="Enter your message"></textarea>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary">Send</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- Footer -->
   <footer class="footer">
     <a href="https://github.com" class="github-icon"><i class="fab fa-github"></i></a>