Addressbook/index.html at main · jittyk/Addressbook · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Index Page</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body class="column min-vh-100">
     <nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
   <div class="container-fluid">
      <a class="navbar-brand" href="index.html"><b>Address Book</b></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav ms-auto align-items-center">
            <li class="nav-item"><a class="nav-link" href="#">Family</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Friends</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Colleagues</a></li>
            <li class="nav-item">
               <form class="d-inline-block">
                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
               </form>
            </li>
            <li class="nav-item">
               <a class="nav-link p-0" href="jitty.html">
                  <img src="photo.jpg" alt="Profile" class="rounded-circle" style="width: 40px; height: 40px;margin-left: 6px;">
               </a>
            </li>
         </ul>
      </div>
   </div>
</nav>

      <div class="container-xxl my-5">
         <div class="row">
            <div class="col-12">
               <h2 class="text-center"><b>What we provide...</b></h2>
               <p>Connections and Contacts is a personalized and comprehensive collection of important people in my life. This address book includes close friends and family members, professional colleagues and collaborators, acquaintances and neighbors, social connections and community members, business associates and clients, and mentors and role models. It serves as a quick reference guide for keeping track of contact information, important dates, personal notes and reminders, social media profiles, and relationships between contacts. By maintaining this address book, I aim to stay organized, nurture my relationships, and foster meaningful connections with the people who matter most in my life. It's a valuable tool for staying in touch, building stronger relationships, and celebrating important milestones and occasions.</p>
            </div>
            <div class="col-12 col-md-7 text-center">
               <a href="add.html"><img src="addcontact.jpg" alt="Add Contact" class="img-fluid"
                  title="Add Contact - Click to add a new contact"></a>
               <p>Add Contact</p>
               <p>Tap the Add Contact icon to add a new contact to your address book. This feature allows you to store essential information about people you know, including their full name, phone numbers (mobile, home, or work), email addresses (personal or professional), home or work addresses, birthdays, and any additional notes.</p>
            </div>
            <div class="col-12 col-md-5 text-center">
               <a href="contacts.html"><img src="contacts.jpg" alt="Contact" class="img-fluid rounded-circle"
                  title="Contact - Click to view contacts" style="width: 80px; height: 80px;"></a>
               <p>Contact</p>
               <p>Tap the Contact icon to view your list of contacts in your address book. This section provides an overview of the people you have stored, allowing you to easily access their information, update details, or remove contacts as needed. It helps you manage and organize your contacts efficiently.</p>
            </div>
         </div>
      </div>
<footer class="mt-auto bg-dark text-white py-3">
   <div class="container">
      <div class="row">
         <div class="col-12 mb-3">
            <ul class="list-unstyled d-flex flex-column flex-md-row justify-content-center mb-0">
               <li class="me-md-3 mb-2 mb-md-0"><a href="#" class="text-white text-decoration-none">Family</a></li>
               <li class="me-md-3 mb-2 mb-md-0"><a href="#" class="text-white text-decoration-none">Friends</a></li>
               <li><a href="#" class="text-white text-decoration-none">Colleagues</a></li>
            </ul>
         </div>
         <div class="col-12 mb-3 d-flex justify-content-center">
            <div class="col-10 col-md-6 col-lg-4">
               <input type="search" class="form-control" placeholder="Search">
            </div>
         </div>
         <div class="col-12 text-center text-md-end">
            <a class="navbar-brand" href="index.html"><b>Address Book</b></a>
         </div>
      </div>
   </div>
</footer>

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
   </body>
</html>