OneKind/index.html at main · valdo-d/OneKind · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OneKind</title>
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">
</head>
<!-- THE FUTURE: I intend to add pop up frame with very explanation - fields for personal info Name, email, phone# followed by check boxes with a SEND button-->


<body>
    <!-- GOOGLE PAGE TRANSLATE starts here -->
    <div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- GOOGLE PAGE TRANSLATE ends here -->

    <!-- Begining of NAV BAR -->
    <nav class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#"><b>OneKind</b></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About Us</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Services
                </a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Food</a></li>
                  <li><a class="dropdown-item" href="#">Housing</a></li>
                  <li><a class="dropdown-item" href="#">Finance</a></li>
                  <li><a class="dropdown-item" href="#">Health</a></li>
                  <li><a class="dropdown-item" href="#">Education</a></li>
                  <li><a class="dropdown-item" href="#">Work</a></li>
                  <li><a class="dropdown-item" href="#">Safety</a></li>
                  <li><a class="dropdown-item" href="#">Immigration</a></li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Languages
                </a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">English</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Arabic / العربية</a></li>
                  <li><a class="dropdown-item" href="#">Bengali / বাংলা</a></li>
                  <li><a class="dropdown-item" href="#">Bosnian / Bosanski</a></li>
                  <li><a class="dropdown-item" href="#">Croatian / Hrvatski</a></li>
                  <li><a class="dropdown-item" href="#">Dari / دری</a></li>
                  <li><a class="dropdown-item" href="#">Farsi / فارسي</a></li>
                  <li><a class="dropdown-item" href="#">Hindi / हिन्दी</a></li>
                  <li><a class="dropdown-item" href="#">Italian / Italiano</a></li>
                  <li><a class="dropdown-item" href="#">Punjabi / ਪੰਜਾਬੀ</a></li>
                  <li><a class="dropdown-item" href="#">Russian / Русский</a></li>
                  <li><a class="dropdown-item" href="#">Serbian / Srpski</a></li>
                  <li><a class="dropdown-item" href="#">Spanish / Español</a></li>
                  <li><a class="dropdown-item" href="#">Turkish / Türkçe</a></li>
                  <li><a class="dropdown-item" href="#">Ukrainian / Українська мова </a></li>
                </ul>
              </li>

              <!-- <li class="nav-item">
                <a class="nav-link disabled">LANGUAGES dropdown maybe?</a>
              </li> -->
            </ul>
            <form class="d-flex" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
      <!-- End of NAV BAR -->

      <!-- BACKGROUND IMAGE start, you divd it and classed it to be able to mold it in CSS-->
      <div class="Background_Image">
        <header>
          <div class="text-white">
          <p><h3>Welcome to OneKind</h3></p>
          <p><h1><b>Help is just fingertips away</b></h1></p>
          <p><h2>In today's uncertain world, full of conflicting information and oversaturation,<br>do you have found a space where you can find access to services you need - easily.</h2></p>
          <p><h5>We help to connect you to non-profit organizations, that offer FREE or low-cost services in the areas of life you seek assistnce.</h5></p>
        </header>
      </div>
      </div>
  <!-- BACKGROUND IMAGE end -->

  <!-- ACCORDION start -->

  <!-- ITEM #1 -->
  <div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingOne">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
         FOOD
        </button>
      </h2>
      <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">Without food life simply cannot be lived. If you are having trouble finding or providing food for yourself and those dearest to you, the right connection is just a click away.</div>
        <div>
          <button type="button" class="btn btn-primary btn-sm">Food Connect</button>
        </div>
        <div class="accordion-body"></div>

      </div>
    </div>
    <!-- ITEM #2 -->
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingTwo">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
          HOUSING
        </button>
      </h2>
      <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">It seems harder and harder to find shelter for ourselves and our loved ones. The services you will find here will guide you to secure a place you can call home.</div>
        <div>
          <button type="button" class="btn btn-primary btn-sm">Housing Connect</button></div>
      </div>
    </div>
    <!-- ITEM #3 -->
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingThree">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
          FINANCE
        </button>
      </h2>
      <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
        <div class="accordion-body">Without understanding finance and how to mange the money we earn can be difficult. The provided connections will help you clarify your financiual future.</div>
        <div>
          <button type="button" class="btn btn-primary btn-sm">Finance Connect</button></div>
      </div>
      </div>
      <!-- ITEM #4 -->
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingFour">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
          EDUCATION
        </button>
      </h2>
      <div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
        <div class="accordion-body"> Education is extremely valued around the world. It creates opportunities for us and our families to live out our aspirations, provide financial stability, and security. Follow the button below and select serivces you seek.</div>
        <div>
          <button type="button" class="btn btn-primary btn-sm">Education Connect</button></div>
      </div>
    </div>
    <!-- ITEM #5 -->
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingFive">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
          WORK
        </button>
      </h2>
      <div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample">
        <div class="accordion-body"> Jobs sustain our life and are very crucial to being able to provide for ourselves and our loved ones. Let's connect you to your local agencies that will bring resolve to your needs.</div>
        <div>
          <button type="button" class="btn btn-primary btn-sm">Work Connect</button></div>
      </div>
    </div>
    <!-- ITEM #6 -->
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingSix">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
          SAFETY
        </button>
      </h2>
      <div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix" data-bs-parent="#accordionFlushExample">
        <div class="accordion-body"> Safety and security for us and our loved ones is extremely important. We will get you in touch with emergency services, or local community organizations who are always there to help you.</div>
        <div>
          <button type="button" class="btn btn-primary btn-sm">Safety Connect</button></div>
      </div>
    </div>
    <!-- ITEM #7 -->
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingSeven">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
          IMMIGRATION
        </button>
      </h2>
      <div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven" data-bs-parent="#accordionFlushExample">
        <div class="accordion-body"> If you have any immigration needs or issues, which do happen sometimes in life, we will connect you with immigration lawyers and specialists who can assist you.</div>
        <div>
          <button type="button" class="btn btn-primary btn-sm">Immigration Connect</button></div>
      </div>
    </div>
    <!-- ITEM #8 -->
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingEight">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
        HEALTH
        </button>
      </h2>
      <div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight" data-bs-parent="#accordionFlushExample">
        <div class="accordion-body"> If you need to get in touch with services to help you or your loved ones with health matters please fill out the link below and mark which services you need.</div>
        <div>
          <button type="button" class="btn btn-primary btn-sm">Health Connect</button></div>
      </div>
    </div>
  </div>
  <!-- ACCORDION end -->

  <!-- MODAL service contact card START -->
  <div class="container mb-5">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">SEMI-WORKING concept</button>
      <div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
<h5 class="modal-title"><b>Contact Us</b></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  </div>
  <!-- Figure out how to put color in the header light gray for the body of the bottom of the modal
  TAKE A LOOK AT THE OVErALL SPACING ON THE MODAL
  HELP TEXT COULD BE REALLY SWEET IN THE TEXT BOXES!!!! -->
  <div class="modal-body">
    <form>
      <!-- Make sure the required fields work because so far they don't -->
      <div class="mb-3">
        <label class="form-label required">Name</label>
        <input type="text" class="form-control">
      </div>
      <div class="mb-3">
        <label class="form-label required">Mobile phone#</label>
        <input type="text" class="form-control">
      </div>
      <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="text" class="form-control">
      </div>
      <div class="mb-3">
        <label class="form-label">Zip Code</label>
        <input type="text" class="form-control">
      </div>
      <hr class="divider mt-5">
      <div><h5>Please check as many boxes as you need and submit the form.</h5></div>
      <div><h6>Appropirate agency staff will contact you within 24 hours (Mon-Fri).</h6></div>
      <!-- CHECKBOXES start -->
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
        <label class="form-check-label" for="defaultCheck1">
          Food banks
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
        <label class="form-check-label" for="defaultCheck2">
          Food panties
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
        <label class="form-check-label" for="defaultCheck3">
          School lunches
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck4">
        <label class="form-check-label" for="defaultCheck4">
          Food stamps
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck5">
        <label class="form-check-label" for="defaultCheck5">
          Hot meal
        </label>
      </div>
    </form>
    <div class="modal-footer">
      <button type="submit" class="btn btn-primary">Submit</button>
      <!-- CAREFUL - the reset button does not reset the form - it should but it doesn't -->
      <button type="reset" class="btn btn-light">Reset</button>
    </div>
  </div>
      </div>
</div>
  <div>
  </div>

</div>
</div>
   <!-- MODAL service contact card END -->


    <!-- If I comment the img below, the page stops panning or scrolling but I think
    that the image is displayed at full size but I cannot stretch the browser that big  -->
    <!-- AFTER COMMENTING OUT, LOOKS LIKE I DON'T NEED THIS IMG HERE... good to know -->
<!-- <img src="./pexels-alexander-grey-1428171.jpg" alt="Multicolored Hands"> -->

    <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

</body>
</html>