-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhomepage.html
More file actions
265 lines (254 loc) · 12.8 KB
/
homepage.html
File metadata and controls
265 lines (254 loc) · 12.8 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AKBIF - Building a Legacy of Faith</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar" id="navbar">
<div class="nav-container">
<div class="logo">
<img src="logo.png" alt="AKBIF Logo">
</div>
<ul class="nav-links" id="navLinks">
<li style="--i: 0"><a href="homepage.html" class="active">Home</a></li>
<li style="--i: 1"><a href="about.html">About Us</a></li>
<li style="--i: 2"><a href="mosqueproject.html">Project</a></li>
<li style="--i: 3"><a href="sadaqah.html">Sadaqah Jariyah</a></li>
<li style="--i: 4"><a href="gallerypage.php">Gallery</a></li>
<li style="--i: 5"><a href="blogpost.php">Updates</a></li>
<li style="--i: 6"><a href="contactUs.html">Contact Us</a></li>
</ul>
<button class="donate-btn">Donate Now</button>
<button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-content">
<h1>"Whoever builds a mosque for the sake of Allah, Allah will build for him a house in Paradise." - Prophet Muhammad ﷺ</h1>
<h2>Join us in building a legacy of faith.</h2>
<button class="cta-btn">Donate Now</button>
</div>
</section>
<!-- Welcome Section -->
<section class="welcome fade-in-up" id="about">
<div class="container">
<div class="welcome-content">
<div class="welcome-text">
<h2>Welcome to the<br>Abdulkareem Bello<br>Islamic Foundation</h2>
<p>
Rooted in faith, inspired by legacy — the
<strong>Abdulkareem Bello Islamic Foundation (AKBIF)</strong> was founded by
<strong>Alhaja Kareema Olanrelle</strong> to honor the memory of her beloved father
<strong>Alhaji Abdul Kareem Bello</strong>, through a lasting act of charity: the construction of a masjid and community center that will serve generations to come.
</p>
</div>
<div class="founder-image"></div>
</div>
</div>
</section>
<!-- Current Highlights -->
<section class="highlights fade-in-up">
<div class="container">
<h2>Current Highlights</h2>
<div class="highlight-cards">
<div class="highlight-card" style="--i: 0">
<div class="highlight-image">
<img src="project1.png" alt="Project 1">
</div>
<div class="highlight-content">
<h3>Phase 2 of AKB Mosque underway</h3>
</div>
</div>
<div class="highlight-card" style="--i: 1">
<div class="highlight-image">
<img src="project2.png" alt="Project 2">
</div>
<div class="highlight-content">
<h3>₦1M raised out of 20M goal</h3>
</div>
</div>
<div class="highlight-card" style="--i: 2">
<div class="highlight-image">
<img src="project3.png" alt="Project 3">
</div>
<div class="highlight-content">
<h3>Over 200 donors worldwide</h3>
</div>
</div>
</div>
<div class="page-center">
<div class="mission-cta">
<p>Support our mission to complete the mosque. Every naira counts.</p>
<button class="cta-btndonate">Donate Now</button>
</div>
</div>
</div>
</section>
<!-- Mission Section -->
<section class="mission fade-in-up">
<div class="header-text">Welcome To The AKBIF Foundation</div>
<div class="container">
<h2>WE BELIEVE THAT TOGETHER WE CAN BUILD<br>LASTING LEGACIES FOR THE UMMAH</h2>
<div class="mission-cards">
<div class="mission-card" style="--i: 0">
<div class="mission-icon">
<img src="icon1.png" alt="Refer a Community">
</div>
<h3>Refer A Community</h3>
<p>Know a community in urgent need of a mosque? Help us extend the mercy of Allah to millions of them.</p>
</div>
<div class="mission-card" style="--i: 1">
<div class="mission-icon">
<img src="icon2.png" alt="Partner With Us">
</div>
<h3>Partner With Us</h3>
<p>Be a part of something greater. When you partner with AKBIF Foundation, you become part of the fabric of giving and receiving that serves a noble cause with your skills, hands, and prayer from allah.</p>
</div>
<div class="mission-card" style="--i: 2">
<div class="mission-icon">
<img src="icon3.png" alt="Volunteer">
</div>
<h3>Volunteer</h3>
<p>Don't just donate, dedicate your time. Become a part of our volunteer team and help us carry out our noble cause with your skills, hands, and prayer from our network.</p>
</div>
<div class="mission-card" style="--i: 3">
<div class="mission-icon">
<img src="icon4.png" alt="Fund A Project">
</div>
<h3>Fund A Project</h3>
<p>Sponsor the building of a mosque and gain continuous Sadaqah Jariyah. Help preserve the legacy of Islamic learning, da'wah, and peace.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials - Stacked vertically on right -->
<section class="testimonials fade-in-up">
<div class="container">
<div class="testimonials-content">
<div class="testimonials-left">
<h2>What Our<br>Donors Are Saying</h2>
<p>Each donation tells a story of love, remembrance, and faith. From honoring loved ones to fulfilling a lifelong dream of building a mosque, these heartfelt testimonials reflect the deep spiritual impact of giving for the sake of Allah.</p>
<button class="cta-btn">View More</button>
</div>
<div class="testimonials-right">
<div class="testimonial-item" style="--i: 0">
<div class="testimonial-avatar avatar-1"></div>
<div class="testimonial-content">
<h4>Kafayat I.</h4>
<p>Contributing in memory of my late mother was the most meaningful tribute I could offer. It brings me comfort knowing her legacy lives on through this mosque.</p>
</div>
</div>
<div class="testimonial-item" style="--i: 1">
<div class="testimonial-avatar avatar-2"></div>
<div class="testimonial-content">
<h4>Yusuf K.</h4>
<p>The process was transparent and easy to support. May Allah accept it.</p>
</div>
</div>
<div class="testimonial-item" style="--i: 2">
<div class="testimonial-avatar avatar-3"></div>
<div class="testimonial-content">
<h4>Zainab A.</h4>
<p>Contributing in memory of my late mother was the most meaningful tribute I could offer. It brings me comfort knowing her legacy lives on through this mosque</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Interactive Section -->
<section class="interactive-section fade-in-up">
<div class="container">
<div class="tab-buttons">
<button class="tab-btn active" style="--i: 0" onclick="showTab('educate')">We Educate</button>
<button class="tab-btn" style="--i: 1" onclick="showTab('empower')">We Empower</button>
<button class="tab-btn" style="--i: 2" onclick="showTab('encourage')">We Encourage</button>
</div>
<div id="educate" class="tab-content active">
<div class="content-text">
<h3>Learn and Inspire Action</h3>
<p>At AKBIF, we prioritize teaching communities about the spiritual significance of building a mosque and the immense blessings Sadaqah Jariyah provides.</p>
<p>We raise awareness about the roles of masjids in spiritual development, education, and social unity.</p>
<ul>
<li>We help individuals and families understand the lifelong value of supporting mosque projects.</li>
<li>Every Muslim deserves access to a mosque close to home: a space for prayer, peace, and growth.</li>
</ul>
</div>
<div class="content-media">
<img src="empower1.jpg" alt="Educate Image">
</div>
</div>
<div id="empower" class="tab-content">
<div class="content-text">
<h3>Give People the Tools to Help</h3>
<p>We equip donors, volunteers, and communities with the knowledge and resources they need to contribute meaningfully from fundraising ideas to guiding new campaigners.</p>
<p>AKBIF believes empowerment starts with knowledge and ends with action.</p>
</div>
<div class="content-media">
<img src="empower3.jpg" alt="Empower Image">
</div>
</div>
<div id="encourage" class="tab-content">
<div class="content-text">
<h3>Be Part of Something Bigger</h3>
<p>We inspire people to take part in noble causes that outlive them. Whether it's donating, volunteering, or simply spreading the word, your involvement matters.</p>
<p>Together, we are building more than structures we're building spiritual homes.</p>
</div>
<div class="content-media">
<img src="empower2.jpg" alt="Encourage Image">
</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="final-cta fade-in-up">
<div class="container">
<h2>Be Part of the Legacy</h2>
<p>Every brick, every prayer mat, every smile: you can help make it happen.</p>
<button class="cta-btn-donate">Donate Now</button>
</div>
</section>
<!-- Footer -->
<footer class="footer fade-in-up">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>JOIN US IN BUILDING A LEGACY OF FAITH</h3>
<button class="cta-btn-footer" style="margin-top: 1rem;">Donate Now</button>
</div>
<div class="footer-section">
<h3>Organization</h3>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#story">Our Story</a></li>
<li><a href="#sadaqah">Sadaqah Jariyah</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Links</h3>
<ul>
<li><a href="#media">Media</a></li>
<li><a href="#policies">Policies</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Contact</h3>
<p>info@akbifoundation.org.ng</p>
<p>Ibadan, Lagos State, Nigeria</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 AKBIF. All rights reserved.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>