Skip to content

Commit 0d7cbd9

Browse files
SCodeGitSCodeGit
authored
Add files via upload
1 parent 52307be commit 0d7cbd9

File tree

5 files changed

+646
-0
lines changed

5 files changed

+646
-0
lines changed

‎donate.html‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Donate — Pacesetters Foundation</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<!-- ===== HEADER ===== -->
12+
<header class="header">
13+
<div class="container header-flex">
14+
<a href="index.html" class="brand">
15+
<div class="logo">PF</div>
16+
<div>
17+
<h1 class="title">Pacesetters Foundation</h1>
18+
<small class="tagline">Empowering communities across Ghana</small>
19+
</div>
20+
</a>
21+
22+
<nav class="nav">
23+
<a href="index.html">Home</a>
24+
<a href="programs.html">Programs</a>
25+
<a href="donate.html" class="active">Donate</a>
26+
</nav>
27+
28+
<button class="nav-toggle" aria-label="Menu">☰</button>
29+
</div>
30+
</header>
31+
32+
<!-- ===== HERO ===== -->
33+
<section class="hero small">
34+
<img src="images/hero-donate.jpg" alt="Donation banner" class="hero-img">
35+
<div class="overlay">
36+
<h2>Support Our Mission</h2>
37+
<p>Your contribution helps us educate, empower, and transform communities across Ghana.</p>
38+
</div>
39+
</section>
40+
41+
<!-- ===== DONATION OPTIONS ===== -->
42+
<section class="section container">
43+
<h3 class="section-title">Ways to Donate</h3>
44+
<p class="intro">Select your preferred method below — every donation counts.</p>
45+
46+
<div class="donate-tabs reveal">
47+
<div class="tab-buttons">
48+
<button class="tab-btn active" data-tab="bank">🏦 Bank</button>
49+
<button class="tab-btn" data-tab="momo">📱 MoMo</button>
50+
<button class="tab-btn" data-tab="visa">💳 Card / Online</button>
51+
</div>
52+
53+
<div class="tab-content active" id="bank">
54+
<h4>Bank Transfer</h4>
55+
<p><strong>Bank Name:</strong> GCB Bank</p>
56+
<p><strong>Account Name:</strong> Pacesetters Foundation</p>
57+
<p><strong>Account Number:</strong> 0123456789</p>
58+
<p><strong>Branch:</strong> Accra Main</p>
59+
<p>Please include your name as a reference when transferring.</p>
60+
</div>
61+
62+
<div class="tab-content" id="momo">
63+
<h4>Mobile Money (MoMo)</h4>
64+
<label for="momo-select">Select Network:</label>
65+
<select id="momo-select">
66+
<option value="mtn">MTN MoMo</option>
67+
<option value="vodafone">Vodafone Cash</option>
68+
<option value="airteltigo">AirtelTigo Money</option>
69+
</select>
70+
71+
<div id="momo-details" class="momo-box">
72+
<p><strong>Network:</strong> MTN MoMo</p>
73+
<p><strong>Name:</strong> Pacesetters Foundation</p>
74+
<p><strong>Number:</strong> 024 123 4567</p>
75+
</div>
76+
</div>
77+
78+
<div class="tab-content" id="visa">
79+
<h4>Donate Online (Card)</h4>
80+
<p>You can make a secure payment using your Visa or MasterCard via Paystack.</p>
81+
<!-- Replace # with your real Paystack or Flutterwave link -->
82+
<a href="#" target="_blank" class="btn">Donate via Paystack</a>
83+
</div>
84+
</div>
85+
</section>
86+
87+
<!-- ===== CONTACT SECTION ===== -->
88+
<section class="section pale">
89+
<div class="container contact-grid">
90+
<div class="reveal">
91+
<h3 class="section-title">Get in Touch</h3>
92+
<form class="contact-form" action="mailto:[email protected]" method="post" enctype="text/plain">
93+
<input type="text" name="name" placeholder="Your name" required>
94+
<input type="email" name="email" placeholder="Your email" required>
95+
<textarea name="message" rows="5" placeholder="Write your message..." required></textarea>
96+
<button type="submit" class="btn">Send Message</button>
97+
</form>
98+
</div>
99+
100+
<div class="map-box reveal delay-1">
101+
<h4>Our Office</h4>
102+
<p>Accra, Ghana</p>
103+
<iframe
104+
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3959.910174679781!2d-0.1969!3d5.6037!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x102079d564bc8e8f%3A0x4639b825f17ecf7e!2sAccra%2C%20Ghana!5e0!3m2!1sen!2sgh!4v1694700000000!5m2!1sen!2sgh"
105+
width="100%" height="250" style="border:0;" allowfullscreen loading="lazy"></iframe>
106+
</div>
107+
</div>
108+
</section>
109+
110+
<!-- ===== FOOTER ===== -->
111+
<footer class="footer">
112+
<div class="container footer-grid">
113+
<div>
114+
<strong>Pacesetters Foundation</strong><br>
115+
<small>© 2025 All Rights Reserved</small>
116+
</div>
117+
<nav class="footer-nav">
118+
<a href="index.html">Home</a>
119+
<a href="programs.html">Programs</a>
120+
<a href="donate.html" class="active">Donate</a>
121+
</nav>
122+
</div>
123+
</footer>
124+
125+
<button id="topBtn" title="Back to top">↑</button>
126+
<script src="script.js"></script>
127+
128+
<script>
129+
// ===== Donation Tabs =====
130+
const tabBtns = document.querySelectorAll('.tab-btn');
131+
const tabContents = document.querySelectorAll('.tab-content');
132+
tabBtns.forEach(btn => {
133+
btn.addEventListener('click', () => {
134+
tabBtns.forEach(b => b.classList.remove('active'));
135+
tabContents.forEach(c => c.classList.remove('active'));
136+
btn.classList.add('active');
137+
document.getElementById(btn.dataset.tab).classList.add('active');
138+
});
139+
});
140+
141+
// ===== MoMo Dropdown =====
142+
const momoSelect = document.getElementById('momo-select');
143+
const momoDetails = document.getElementById('momo-details');
144+
momoSelect.addEventListener('change', () => {
145+
const value = momoSelect.value;
146+
if (value === 'mtn') {
147+
momoDetails.innerHTML = `
148+
<p><strong>Network:</strong> MTN MoMo</p>
149+
<p><strong>Name:</strong> Pacesetters Foundation</p>
150+
<p><strong>Number:</strong> 024 123 4567</p>`;
151+
} else if (value === 'vodafone') {
152+
momoDetails.innerHTML = `
153+
<p><strong>Network:</strong> Vodafone Cash</p>
154+
<p><strong>Name:</strong> Pacesetters Foundation</p>
155+
<p><strong>Number:</strong> 050 987 6543</p>`;
156+
} else {
157+
momoDetails.innerHTML = `
158+
<p><strong>Network:</strong> AirtelTigo Money</p>
159+
<p><strong>Name:</strong> Pacesetters Foundation</p>
160+
<p><strong>Number:</strong> 027 555 7890</p>`;
161+
}
162+
});
163+
</script>
164+
</body>
165+
</html>

‎index.html‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Pacesetters Foundation — Empowering Change</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<meta name="description" content="Pacesetters Foundation — advancing education, health, and empowerment across communities." />
9+
</head>
10+
<body>
11+
12+
<!-- ===== HEADER ===== -->
13+
<header class="header">
14+
<div class="container header-flex">
15+
<a href="index.html" class="brand">
16+
<div class="logo">PF</div>
17+
<div>
18+
<h1 class="title">Pacesetters Foundation</h1>
19+
<small class="tagline">Empowering communities across Ghana</small>
20+
</div>
21+
</a>
22+
23+
<nav class="nav">
24+
<a href="index.html" class="active">Home</a>
25+
<a href="programs.html">Programs</a>
26+
<a href="donate.html">Donate</a>
27+
</nav>
28+
29+
<button class="nav-toggle" aria-label="Menu">☰</button>
30+
</div>
31+
</header>
32+
33+
<!-- ===== HERO ===== -->
34+
<section class="hero">
35+
<img src="images/hero.jpg" alt="Community empowerment" class="hero-img">
36+
<div class="overlay">
37+
<h2 class="reveal">Together, We Empower Change</h2>
38+
<p class="reveal delay-1">Pacesetters Foundation builds sustainable futures through education, health, and youth empowerment.</p>
39+
<div class="hero-buttons reveal delay-2">
40+
<a href="programs.html" class="btn">Our Work</a>
41+
<a href="donate.html" class="btn alt">Support Us</a>
42+
</div>
43+
</div>
44+
</section>
45+
46+
<!-- ===== ABOUT SECTION ===== -->
47+
<section class="section about container">
48+
<h3 class="section-title">Who We Are</h3>
49+
<p class="intro">Founded in 2015, Pacesetters Foundation is a nonprofit organization dedicated to transforming lives through education, community health, and social inclusion.</p>
50+
51+
<div class="grid-2 reveal">
52+
<div>
53+
<h4>Our History</h4>
54+
<p>We began as a small initiative supporting rural schools in the Eastern Region. Over the years, our outreach has expanded to more than 120 communities nationwide, improving literacy, healthcare access, and livelihood opportunities.</p>
55+
</div>
56+
<div>
57+
<h4>Our Mission</h4>
58+
<p>To empower underserved communities through education, healthcare, and sustainable development programs that create long-term impact.</p>
59+
</div>
60+
</div>
61+
62+
<div class="grid-3 reveal delay-1">
63+
<div class="card">
64+
<h5>Aims</h5>
65+
<ul>
66+
<li>Enhance educational access for children and youth.</li>
67+
<li>Promote health awareness and well-being.</li>
68+
<li>Foster community participation and leadership.</li>
69+
</ul>
70+
</div>
71+
<div class="card">
72+
<h5>Objectives</h5>
73+
<ul>
74+
<li>Train teachers and youth leaders.</li>
75+
<li>Distribute educational materials annually.</li>
76+
<li>Host national community outreach events.</li>
77+
</ul>
78+
</div>
79+
<div class="card">
80+
<h5>Vision</h5>
81+
<p>A Ghana where every community thrives through opportunity, education, and empowerment.</p>
82+
</div>
83+
</div>
84+
</section>
85+
86+
<!-- ===== PROGRAM PREVIEW ===== -->
87+
<section class="section preview pale">
88+
<div class="container">
89+
<h3 class="section-title">Our Core Programs</h3>
90+
<div class="grid-3 reveal">
91+
<div class="program-card">
92+
<img src="images/education.jpg" alt="Education Program">
93+
<h4>Education & Literacy</h4>
94+
<p>Providing school resources, scholarships, and mentorship for students in underserved areas.</p>
95+
</div>
96+
<div class="program-card">
97+
<img src="images/health.jpg" alt="Health Outreach">
98+
<h4>Health & Well-being</h4>
99+
<p>Delivering medical screenings, hygiene campaigns, and maternal health programs.</p>
100+
</div>
101+
<div class="program-card">
102+
<img src="images/youth.jpg" alt="Youth Empowerment">
103+
<h4>Skills & Empowerment</h4>
104+
<p>Training youth in digital skills, entrepreneurship, and sustainable livelihoods.</p>
105+
</div>
106+
</div>
107+
<div class="center">
108+
<a href="programs.html" class="btn">Explore All Programs</a>
109+
</div>
110+
</div>
111+
</section>
112+
113+
<!-- ===== GALLERY PREVIEW ===== -->
114+
<section class="section gallery container">
115+
<h3 class="section-title">Gallery Highlights</h3>
116+
<div class="gallery-grid reveal">
117+
<img src="images/gallery1.jpg" alt="gallery 1">
118+
<img src="images/gallery2.jpg" alt="gallery 2">
119+
<img src="images/gallery3.jpg" alt="gallery 3">
120+
<img src="images/gallery4.jpg" alt="gallery 4">
121+
</div>
122+
<div class="center">
123+
<a href="programs.html" class="btn alt">View More</a>
124+
</div>
125+
</section>
126+
127+
<!-- ===== DONATION CTA ===== -->
128+
<section class="section cta pale">
129+
<div class="container reveal">
130+
<h3>Every Donation Counts</h3>
131+
<p>Your contribution enables us to reach more children, improve schools, and empower communities.</p>
132+
<a href="donate.html" class="btn">Donate Now</a>
133+
</div>
134+
</section>
135+
136+
<!-- ===== FOOTER ===== -->
137+
<footer class="footer">
138+
<div class="container footer-grid">
139+
<div>
140+
<strong>Pacesetters Foundation</strong><br>
141+
<small>© 2025 All Rights Reserved</small>
142+
</div>
143+
<nav class="footer-nav">
144+
<a href="index.html">Home</a>
145+
<a href="programs.html">Programs</a>
146+
<a href="donate.html">Donate</a>
147+
</nav>
148+
</div>
149+
</footer>
150+
151+
<!-- BACK TO TOP -->
152+
<button id="topBtn" title="Back to top">↑</button>
153+
154+
<script src="script.js"></script>
155+
</body>
156+
</html>

0 commit comments

Comments
 (0)