-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathupdate2.html
More file actions
224 lines (203 loc) · 15.7 KB
/
update2.html
File metadata and controls
224 lines (203 loc) · 15.7 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
<!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="update2.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<div class="logo">
<img src="logo.png" alt="AKBIF Logo">
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#project">Project</a></li>
<li><a href="#sadaqah">Sadaqah Jariyah</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#updates">Updates</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
<button class="donate-btn">Donate Now</button>
</div>
</nav>
<!-- Updates Heading Section -->
<section class="updates-header">
<div class="updates-content">
<h1>Updates</h1>
<p>Updates / Events / Article</p>
</div>
</section>
<!-- Donor Spotlight Section -->
<section class="donor-spotlight">
<p class="intro-text">A story of intention, innocence, and impact</p>
<div class="spotlight-image">
<img src="./images/amina1.png" alt="Sister Amina">
<div class="meta-info">
<span>📅 20 July, 2025</span>
<span>❤ 1.1k</span>
<span>👁 2.3k</span>
</div>
</div>
<h1>Meet Sister Amina<br>Our Youngest Donor</h1>
</section>
<section class="article-section">
<!-- First section with text on left, image on right -->
<div class="content-block">
<div class="text-content">
<h2>A Small Girl With A Big Intention</h2>
<p>When people think of donors, they often picture adults with income, jobs, or businesses. But sometimes, the most powerful acts of giving come from the most unexpected places. That's exactly what happened when 8-year-old Sister Amina, a soft-spoken and curious child from Ikorodu, approached our outreach table during a local awareness campaign.</p>
<p>While most people were asking questions or scanning QR codes, Amina walked up quietly, clutching an envelope. Her eyes didn't say much, but her gesture spoke volumes. Inside the envelope was ₦1,200 – every last naira of her personal savings. It had taken her weeks of careful discipline to save up the money from leftover school snacks and her weekly ₦200 allowance. Along with the money was a handwritten note that read in pencil: <em>"I want Allah to build me a house in Jannah." – Amina</em></p>
</div>
<div class="image-content">
<img src="./images/amina1.png" alt="Sister Amina in hijab">
</div>
</div>
<!-- Second section with image on left, text on right -->
<div class="content-block reverse">
<div class="image-content">
<img src="./images/amina1.png" alt="Young girl reading">
</div>
<div class="text-content">
<h2>The Moment That Stopped Us All</h2>
<p>Our team paused. Some smiled. Some cried. Amina didn't fully understand the architectural plans, donation goals, or Zakat categories. But she understood intention, and that is the foundation of every act of worship.</p>
<p>In Islam, it is taught that even small acts of charity are deeply valued by Allah, especially when done with sincerity. Amina had unknowingly embodied this perfectly. She didn't just donate – she taught us what giving really means.</p>
</div>
</div>
<!-- Third section - text only -->
<div class="text-only-section">
<h2>Why Her Gift Is Powerful Beyond Measure</h2>
<p>Amina's donation, while small in amount, holds eternal weight. That's the beauty of Sadaqah Jariyah a continuous charity that earns reward for the giver long after they've given it. Her ₦1,200 might go towards a bag of cement, a prayer mat, or a single tile in the ablution area but it will also become part of something much bigger. Every time someone prays in the mosque... Every child that recites Qur'an... Every wudu made in the washroom... Amina will share in the reward over and over again, possibly for decades to come.</p>
</div>
</section>
<section class="legacy-section">
<div class="legacy-content">
<h2>Legacy Has No Age</h2>
<p>Amina doesn't fully realize what she's done. She's too young to see the foundations being poured or to read the progress reports. But one day, she'll walk past the completed AKB Mosque and hear the Adhan echoing across the grounds – and she'll know:</p>
<p class="quote">"I helped build this with my savings."</p>
<p>That's what legacy looks like. It doesn't begin with wealth or fame.</p>
<p>It begins with a heart that says, "Here, take this. Use it for something good."</p>
</div>
<div class="social-sharing">
<button class="share-btn" title="Copy link">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 1H4C2.9 1 2 1.9 2 3v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>
</button>
<button class="share-btn" title="Share on Facebook">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
</button>
<button class="share-btn" title="Share on X">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</button>
<button class="share-btn" title="Share on WhatsApp">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.465 3.488"/>
</svg>
</button>
<button class="share-btn" title="Share on Instagram">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
</svg>
</button>
<button class="share-btn" title="Share on LinkedIn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</button>
</div>
<div class="comment-section">
<h3>Leave a comment</h3>
<form class="comment-form">
<div class="comment-textarea">
<textarea placeholder="Write your comment here..." rows="6"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<input type="text" placeholder="Your Name*" required>
</div>
<div class="form-group">
<input type="email" placeholder="Email*" required>
</div>
</div>
<div class="checkbox-group">
<input type="checkbox" id="save-info">
<label for="save-info">Save my name, email, and website in this browser for the next time I comment.</label>
</div>
<button type="submit" class="submit-btn">Submit</button>
</form>
</div>
</section>
<section class="next-article-section">
<!-- Next Article Header -->
<div class="next-article-header">
<h2>Next Article</h2>
</div>
<!-- Featured Article -->
<div class="featured-article">
<div class="featured-content">
<span class="article-category">Projects</span>
<h3>Foundation Phase Complete</h3>
<p>The base of the mosque is now fully laid, a huge step forward in our mission! Photos, drone shots, and a message from the site engineer walk you through the process.</p>
<blockquote>"This foundation isn't just physical. It's spiritual. We built it with prayers and purpose."</blockquote>
<a href="#" class="read-more-btn">Read More</a>
</div>
<div class="featured-image">
<img src="https://images.unsplash.com/photo-1541888946425-d81bb19240f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Foundation Phase Complete">
</div>
</div>
<!-- Related Articles Grid -->
<div class="article-card">
<div class="card-image">
<img src="https://images.unsplash.com/photo-1541888946425-d81bb19240f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Foundation construction">
<span class="card-category">Projects</span>
</div>
<div class="card-content">
<h4>Foundation Phase Complete!</h4>
<p>The base of the mosque is now fully laid a huge step forward in our mission! Photos, drone shots, and a message from the site engineer walk you through the process.</p>
<a href="#" class="card-read-more">Read More</a>
</div>
</div>
<div class="article-card">
<div class="card-image">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Man with beard">
<span class="card-category">Event</span>
</div>
<div class="card-content">
<h4>Why Zakat Went to the AKB Mosque</h4>
<p>In this reflection, Brother Musa shares his decision to dedicate his Zakat to the AKB Mosque. He explains how it aligns with his values, the importance of building jamaah, and how it's been something he contributes due from his openness.</p>
<a href="#" class="card-read-more">Read More</a>
</div>
</div>
<div class="article-card">
<div class="card-image">
<img src="https://images.unsplash.com/photo-1591604466107-ec97de577aff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Kaaba and crowd">
<span class="card-category">Event</span>
</div>
<div class="card-content">
<h4>Meet Our Youngest Donor</h4>
<p>Sister Amina, only 8 years old, donated her savings to the mosque project. Her story went viral in the community, inspiring others to give, no matter how small. Her handwritten note to the project team brought tears to many eyes.</p>
<a href="#" class="card-read-more">Read More</a>
</div>
</div>
<div class="article-card">
<div class="card-image">
<img src="https://images.unsplash.com/photo-1544717297-fa95b6ee9643?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Young girl in hijab">
<span class="card-category">Projects</span>
</div>
<div class="card-content">
<h4>Meet Our Youngest Donor</h4>
<p>Sister Amina, only 8 years old, donated her savings to the mosque project. Her story went viral in the community, inspiring others to give, no matter how small. Her handwritten note to the project team brought tears to many eyes.</p>
<a href="#" class="card-read-more">Read More</a>
</div>
</div>
</div>
</section>