-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
415 lines (383 loc) · 20.6 KB
/
index.html
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
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="./static/styles.css">
<meta name="description"
content="ChangeMakers - Empowering individuals, transforming communities through sustainable initiatives.">
<meta name="keywords"
content="sustainability, empowerment, education, healthcare, climate action, community development">
<link rel="shortcut icon" href="./static/img/changemakers-logo.png" type="image/x-icon">
<title>ChangeMakers</title>
</head>
<body>
<header class="container-fluid d-flex align-items-center justify-content-between px-3 flex-wrap">
<div class="d-flex text-white flex-column flex-md-row">
<a href="mailto:contact@changemakers.org" aria-label="Email ChangeMakers"
class="nav-link d-flex align-items-center">
<i class="bi bi-envelope me-2"></i> contact@changemakers.org
</a>
<a href="tel:+25434567890" aria-label="Call ChangeMakers" class="nav-link d-flex align-items-center ms-0 ms-md-4">
<i class="bi bi-phone me-2"></i> +254 345 678 90
</a>
</div>
<div class="mt-2 mt-md-0">
<a href="#call-to-action" class="btn btn-dark text-light">Get Involved</a>
</div>
</header>
<nav class="navbar navbar-expand-lg bg-body-tertiary py-1 sticky-top">
<div class="container-fluid d-flex justify-content-between align-items-center px-3">
<a href="./index.html" class="text-decoration-none fs-2 navbar-brand">
<span class="montserrat-change">Change</span><span class="makers">Makers</span>
</a>
<button class="navbar-toggler p-1 border-0" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<i class="bi bi-menu-app" title="Menu"></i>
</button>
<div class="collapse navbar-collapse text-center" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a href="index.html" class="nav-link active" aria-current="page">Home</a>
</li>
<li class="nav-item">
<a href="#about-us" class="nav-link">About Us</a>
</li>
<li class="nav-item">
<a href="#impact" class="nav-link">Impact</a>
</li>
<li class="nav-item">
<a href="causes" class="nav-link">Causes</a>
</li>
<li class="nav-item">
<a href="news" class="nav-link">News</a>
</li>
<li class="nav-item">
<a href="contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<section class="hero-section">
<h1 class="hero-title animate__animated animate__fadeInDown">Welcome to ChangeMakers</h1>
<h2 class="hero-subtitle animate__animated animate__fadeInUp animate__delay-1s">Empowering individuals,
transforming communities</h2>
<div class="btn-group animate__animated animate__zoomIn animate__delay-2s">
<a href="#more" class="btn-item">Learn More</a>
<a href="#call-to-action" class="donate-btn">Donate Now</a>
</div>
</section>
<section id="about-us" class="container my-5 py-5 px-4">
<div class="row align-items-center flex-lg-row-reverse">
<div class="col-lg-6">
<h2 class="display-5 fw-bold mb-4 text-uppercase">Who We Are</h2>
<p class="lead text-muted mb-4">
At <strong>ChangeMakers</strong>, we believe in empowering communities and individuals to create lasting
positive change.
We are a passionate team of volunteers, activists, and partners working together to make the world a better
place, one step at a time.
</p>
<ul class="list-unstyled mb-4">
<li class="mb-2">
<i class="bi bi-check-circle-fill text-orange me-2"></i> Focused on sustainable development
</li>
<li class="mb-2">
<i class="bi bi-check-circle-fill text-orange me-2"></i> Active in over 50 countries
</li>
<li class="mb-2">
<i class="bi bi-check-circle-fill text-orange me-2"></i> Supporting education, healthcare, and climate
action
</li>
</ul>
<a href="#our-mission" class="btn btn-dark btn-lg px-4 my-3">Learn More</a>
</div>
<div class="col-lg-6 mb-4 mb-lg-0">
<img src="./static/img/diverse-volunteers-taking-selfie-together.jpg"
alt="Diverse group of volunteers taking a selfie together" class="img-fluid rounded shadow-lg"
loading="lazy">
</div>
</div>
</section>
<section id="mission-vision" class="container-fluid position-relative text-light py-5">
<div class="position-absolute top-0 start-0 w-100 h-100 overlay"></div>
<div class="container position-relative text-center">
<div class="row mb-5">
<div class="col">
<h2 class="display-4 fw-bold text-uppercase mb-3 text-orange" id="mission-title">Our Mission & Vision</h2>
<p class="lead text-light" id="mission-description">Driving change through empowerment and sustainable
initiatives.</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 mb-4 mb-lg-0">
<div class="p-4 rounded bg-dark bg-opacity-75 h-100" id="mission-content">
<i class="bi bi-bullseye display-3 text-orange"></i>
<h3 class="fw-bold mb-3 text-orange">Our Mission</h3>
<p class="text-light">Our mission is to empower individuals and communities to lead sustainable and
impactful changes, supporting education, healthcare, and climate resilience across the globe.</p>
</div>
</div>
<div class="col-lg-6">
<div class="p-4 rounded bg-dark bg-opacity-75 h-100" id="vision-content">
<i class="bi bi-lightbulb display-3 accent-color"></i>
<h3 class="fw-bold mb-3 accent-color">Our Vision</h3>
<p class="text-light">We envision a world where every individual has the opportunity to create positive
change, leading to a future full of hope, equality, and sustainability for all.</p>
</div>
</div>
</div>
</div>
</section>
<section id="impact" class="container py-5 text-center bg-body-tertiary px-5 my-3 shadow-lg rounded">
<h2 class="display-5 fw-bold mb-4 text-uppercase">Our Impact</h2>
<p class="lead mb-5">Real stories, real change. Here's how we're making a difference:</p>
<!-- Impact Stats -->
<div class="row text-center">
<div class="col-md-4 mb-4">
<div class="impact-box p-4 rounded shadow-sm h-100">
<i class="bi bi-people-fill display-3 text-orange mb-3"></i>
<h3 class="fw-bold"><span class="counter" data-target="5000">0</span>+ Lives Touched</h3>
<p class="text-muted">We've empowered thousands of individuals to create positive change in their
communities.</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="impact-box p-4 rounded shadow-sm h-100">
<i class="bi bi-globe display-3 text-secondary mb-3"></i>
<h3 class="fw-bold">20 Countries</h3>
<p class="text-muted">Our initiatives span across 20 countries, providing education, resources, and
opportunities.</p>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="impact-box p-4 rounded shadow-sm h-100">
<i class="bi bi-heart-fill display-3 text-danger mb-3"></i>
<h3 class="fw-bold">1,000 Volunteers</h3>
<p class="text-muted">Our mission is powered by over 1,000 volunteers committed to positive change.</p>
</div>
</div>
</div>
</section>
<section id="testimonials" class="container my-5">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<!-- Testimonial 1 -->
<div class="carousel-item active py-4">
<div class="testimonial-card card p-4 border-0 d-flex flex-column align-items-center h-100">
<div class="testimonial-image mb-3">
<img src="./static/img/khanh-Bui.jpg" alt="Khan Bui, Peru" class="rounded-circle img-fluid shadow"
width="80" height="80">
</div>
<blockquote class="blockquote text-center flex-grow-1">
<i class="bi bi-quote text-orange display-3 mb-3"></i>
<p class="lead">“ChangeMakers helped bring clean water to our village, transforming our health and
lives.”</p>
</blockquote>
<footer class="blockquote-footer text-muted">Khan Bui, <cite title="Kenya">Peru</cite></footer>
</div>
</div>
<!-- Testimonial 2 -->
<div class="carousel-item py-4">
<div class="testimonial-card card p-4 border-0 d-flex flex-column align-items-center h-100">
<div class="testimonial-image mb-3">
<img src="./static/img/john.jpg" alt="John, Brazil" class="rounded-circle img-fluid shadow" width="80"
height="80">
</div>
<blockquote class="blockquote text-center flex-grow-1">
<i class="bi bi-quote text-orange display-3 mb-3"></i>
<p class="lead">“I now have the education and resources to support my family and contribute to my
community.”</p>
</blockquote>
<footer class="blockquote-footer text-muted">John, <cite title="Brazil">Brazil</cite></footer>
</div>
</div>
<!-- Testimonial 3 -->
<div class="carousel-item py-4">
<div class="testimonial-card card p-4 border-0 d-flex flex-column align-items-center h-100">
<div class="testimonial-image mb-3">
<img src="./static/img/Lopez.jpg" alt="Lopez, Kenya" class="rounded-circle img-fluid shadow" width="80"
height="80">
</div>
<blockquote class="blockquote text-center flex-grow-1">
<i class="bi bi-quote text-orange display-3 mb-3"></i>
<p class="lead">“Thanks to ChangeMakers, I’ve been able to access education and change the future for my
children and community.”</p>
</blockquote>
<footer class="blockquote-footer text-muted">Lopez, <cite title="India">Kenya</cite></footer>
</div>
</div>
<!-- Testimonial 4 -->
<div class="carousel-item py-4">
<div class="testimonial-card card p-4 border-0 d-flex flex-column align-items-center h-100">
<div class="testimonial-image mb-3">
<img src="./static/img/sophia.jpg" alt="Sophia, South Africa" class="rounded-circle img-fluid shadow"
width="80" height="80">
</div>
<blockquote class="blockquote text-center flex-grow-1">
<i class="bi bi-quote text-orange display-3 mb-3"></i>
<p class="lead">“The training I received from ChangeMakers allowed me to start a small business, and now
I’m helping my community thrive.”</p>
</blockquote>
<footer class="blockquote-footer text-muted">Sophia, <cite title="South Africa">South Africa</cite>
</footer>
</div>
</div>
<!-- Testimonial 5 -->
<div class="carousel-item py-4">
<div class="testimonial-card card p-4 border-0 d-flex flex-column align-items-center h-100">
<div class="testimonial-image mb-3">
<img src="./static/img/ahmed.jpg" alt="Ahmed, Egypt" class="rounded-circle img-fluid shadow" width="80"
height="80">
</div>
<blockquote class="blockquote text-center flex-grow-1">
<i class="bi bi-quote text-orange display-3 mb-3"></i>
<p class="lead">“Because of ChangeMakers, we now have access to quality healthcare. It’s made an
incredible difference in our village.”</p>
</blockquote>
<footer class="blockquote-footer text-muted">Ahmed, <cite title="Egypt">Egypt</cite></footer>
</div>
</div>
<!-- Testimonial 6 -->
<div class="carousel-item py-4">
<div class="testimonial-card card p-4 border-0 d-flex flex-column align-items-center h-100">
<div class="testimonial-image mb-3">
<img src="./static/img/lucia.jpeg" alt="Lucia, Mexico" class="rounded-circle img-fluid shadow"
width="80" height="80">
</div>
<blockquote class="blockquote text-center flex-grow-1">
<i class="bi bi-quote text-orange display-3 mb-3"></i>
<p class="lead">“Thanks to the ChangeMakers scholarship program, I’m the first in my family to go to
college. My future is brighter than ever.”</p>
</blockquote>
<footer class="blockquote-footer text-muted">Lucia, <cite title="Mexico">Mexico</cite></footer>
</div>
</div>
</div>
<!-- Carousel Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<section id="call-to-action" class="container-fluid bg-orange text-light py-5 text-center">
<h2 class="display-5 fw-bold mb-4">Be a ChangeMaker Today</h2>
<p class="lead mb-4">Join us in making a real impact on the world. Whether you donate or volunteer, every
contribution counts in creating a better tomorrow.</p>
<div class="d-flex justify-content-center gap-3">
<button class="btn btn-light btn-lg animate__animated animate__pulse" data-bs-toggle="modal"
data-bs-target="#staticBackdrop" aria-label="Donate Now">
Donate Now
</button>
<button class="btn btn-outline-light btn-lg mx-2" data-bs-toggle="modal"
data-bs-target="#volunteerModal">Volunteer</button>
</div>
</section>
<!-- Modal Structure -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header border-0">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h2 class="donate-title">Support Our Mission</h2>
<p class="donate-subtitle">Every dollar helps us create lasting impact.</p>
<!-- Custom Donation Input -->
<div class="donation-amount">
<label for="donation-input" class="donation-label">Enter your donation amount:</label>
<input type="number" class="form-control mt-2" id="donation-input" placeholder="e.g., 50" min="1">
</div>
<!-- Suggested Donation Amounts -->
<div class="suggested-donations d-flex justify-content-center gap-3 my-4">
<button class="donate-amount-btn btn btn-outline-dark" data-amount="5">$5</button>
<button class="donate-amount-btn btn btn-outline-dark" data-amount="10">$10</button>
<button class="donate-amount-btn btn btn-outline-dark" data-amount="20">$20</button>
<button class="donate-amount-btn btn btn-outline-dark" data-amount="50">$50</button>
</div>
<!-- Payment Methods -->
<div class="payment-methods mt-3">
<h3>Select Payment Method:</h3>
<div class="row">
<button class="payment-btn paypal-btn col-md-4 btn btn-light" title="PayPal"><img
src="./static/img/icons8-paypal-logo.svg" alt="">PayPal</button>
<button class="payment-btn card-btn col-md-4 btn btn-light" title="Credit/Credit"><img
src="./static/img/credit-card.svg" alt="">Credit/Debit Card</button>
<button class="payment-btn applepay-btn col-md-4 btn btn-light" title="Apple Pay"><img
src="./static/img/icons8-apple-pay.svg" alt="">Apple
Pay</button>
<button class="payment-btn googlepay-btn rounded col-md-4 btn btn-light" title="Google Pay"><img
src="./static/img/icons8-google-pay.svg" alt=""> Google Pay</button>
<button class="payment-btn googlepay-btn col-md-4 btn btn-light" title="M-Pesa"><img
src="./static/img/mpesa-logo.png" alt="">M-Pesa</button>
</div>
</div>
</div>
<!-- Donate Button -->
<div class="submit-donation mt-3 modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button class="donate-submit-btn btn-item animate__pulse">Donate</button>
</div>
</div>
</div>
</div>
<!-- Volunteer modal -->
<div class="modal fade" id="volunteerModal" tabindex="-1" aria-labelledby="volunteerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content rounded-3 shadow-lg border-0">
<div class="modal-header border-0">
<h2 class="modal-title w-100 text-center fw-bold" id="volunteerModalLabel">Volunteer with ChangeMakers</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center">
<p class="lead text-muted">Join our team and make a difference. Fill out the form below to get started.</p>
<form>
<div class="mb-3">
<input type="text" class="form-control" id="volunteer-name" placeholder="Your Name" required>
</div>
<div class="mb-3">
<input type="email" class="form-control" id="volunteer-email" placeholder="Your Email" required>
</div>
<div class="mb-3">
<textarea class="form-control" id="volunteer-message" rows="3"
placeholder="Why do you want to volunteer?" required></textarea>
</div>
<button type="submit" class="btn btn-dark w-100">Submit</button>
</form>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-dark text-light py-4">
<div class="container text-center">
<p>© 2024 ChangeMakers. All Rights Reserved.</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#" class="text-light">Privacy Policy</a></li>
<li class="list-inline-item"><a href="#" class="text-light">Terms of Use</a></li>
</ul>
<div class="social-links mt-3">
<a href="#" class="text-light me-2" title="Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-light me-2" title="Twitter"><i class="bi bi-twitter"></i></a>
<a href="#" class="text-light me-2" title="Instagram"><i class="bi bi-instagram"></i></a>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="./static/scripts.js"></script>
</body>
</html>