From 628fba15cd0696f77a1a0dd9533d4b79273c4e84 Mon Sep 17 00:00:00 2001 From: Amy Richardson <amyloumc@gmail.com> Date: Sun, 6 Oct 2024 20:23:42 +0000 Subject: [PATCH] add: about, contact modals --- index.html | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 57 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 963489c..c4adee5 100644 --- a/index.html +++ b/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">×</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">×</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>