Skip to content

Commit 6d4d69d

Browse files
SCodeGitSCodeGit
authored
Add files via upload
1 parent 4630433 commit 6d4d69d

File tree

10 files changed

+746
-209
lines changed

10 files changed

+746
-209
lines changed

‎README.txt‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
Pacesetters Foundation - Multi-page website
2+
Files:
3+
- index.html, about.html, programs.html, stakeholders.html, gallery.html, donate.html, contact.html
4+
- style.css
5+
- script.js
6+
- /images/ (add hero.jpg, gallery1.jpg, etc.)
7+
8+
How to upload:
9+
1. Upload all files to repo root via "Add file -> Upload files".
10+
2. Commit changes.
11+
3. Enable GitHub Pages: Settings -> Pages -> Deploy from branch: main (root).
12+
4. Wait 1-2 minutes then open your Pages URL.
13+
14+
Edit tips:
15+
- Replace images in /images/ folder (keep filenames or update src).
16+
- Update email in contact and donate pages (search for [email protected]).
17+
- Replace donate online link in donate.html or via script.js.
18+

‎about.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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>About — Pacesetters Foundation</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<header class="site-header">
11+
<div class="container header-row">
12+
<div class="brand"><div class="logo">PF</div><div><h1 class="org-name">Pacesetters Foundation</h1></div></div>
13+
<nav class="nav">
14+
<a href="index.html">Home</a>
15+
<a href="about.html">About</a>
16+
<a href="programs.html">Programs</a>
17+
<a href="stakeholders.html">Stakeholders</a>
18+
<a href="gallery.html">Gallery</a>
19+
<a href="donate.html" class="btn small">Donate</a>
20+
<a href="contact.html">Contact</a>
21+
</nav>
22+
<button class="nav-toggle">☰</button>
23+
</div>
24+
</header>
25+
26+
<main class="container section">
27+
<h2>History</h2>
28+
<p><!-- EDIT: Full history text -->Pacesetters Foundation was established in 2015 to respond to gaps in education and health in underserved communities. We started with one school renovation and a scholarship program; today we work with district partners across regions.</p>
29+
30+
<h3>Our Aims</h3>
31+
<ul>
32+
<li>Increase access to inclusive quality education</li>
33+
<li>Improve maternal and child health outcomes</li>
34+
<li>Support youth employability</li>
35+
</ul>
36+
37+
<h3>Objectives</h3>
38+
<ol>
39+
<li>Reach 5,000 students with educational support by 2026</li>
40+
<li>Deliver 100 health outreaches annually</li>
41+
<li>Train 1,500 youth in vocational skills</li>
42+
</ol>
43+
44+
<h3>Mission</h3>
45+
<p><!-- EDIT: Mission -->To empower underserved communities to reach their potential through integrated education, health and livelihoods interventions.</p>
46+
</main>
47+
48+
<footer class="footer">
49+
<div class="container footer-grid">
50+
<div><strong>Pacesetters Foundation</strong></div>
51+
<div><nav class="footer-nav"><a href="index.html">Home</a><a href="programs.html">Programs</a></nav></div>
52+
<div><small class="muted">© 2025 Pacesetters Foundation</small></div>
53+
</div>
54+
</footer>
55+
56+
<button id="topBtn" title="Back to top">↑</button>
57+
<script src="script.js"></script>
58+
</body>
59+
</html>

‎contact.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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>Contact — Pacesetters Foundation</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<header class="site-header">
11+
<div class="container header-row">
12+
<div class="brand"><div class="logo">PF</div><div><h1 class="org-name">Pacesetters Foundation</h1></div></div>
13+
<nav class="nav"><a href="index.html">Home</a><a href="contact.html">Contact</a><a href="donate.html" class="btn small">Donate</a></nav>
14+
<button class="nav-toggle">☰</button>
15+
</div>
16+
</header>
17+
18+
<main class="container section">
19+
<h2>Contact Us</h2>
20+
<p class="lead">For partnership enquiries, media or donations, use the form below or reach us directly.</p>
21+
22+
<div class="contact-grid">
23+
<div>
24+
<form action="mailto:[email protected]" method="post" enctype="text/plain">
25+
<input name="name" placeholder="Your name" required>
26+
<input type="email" name="email" placeholder="Your email" required>
27+
<textarea name="message" placeholder="How can we help?" required></textarea>
28+
<button type="submit" class="btn primary">Send Message</button>
29+
</form>
30+
</div>
31+
32+
<aside>
33+
<div class="card">
34+
<h4>Contact Info</h4>
35+
<p><strong>Address:</strong> Accra, Ghana</p>
36+
<p><strong>Email:</strong> <a href="mailto:[email protected]">[email protected]</a></p>
37+
<p><strong>Phone:</strong> +233 24 000 0000</p>
38+
</div>
39+
40+
<div class="card" style="margin-top:12px">
41+
<h4>Office Hours</h4>
42+
<p>Mon–Fri: 9:00am – 5:00pm</p>
43+
</div>
44+
</aside>
45+
</div>
46+
</main>
47+
48+
<footer class="footer"><div class="container footer-grid"><div><strong>Pacesetters Foundation</strong></div><div><small class="muted">© 2025</small></div></div></footer>
49+
<button id="topBtn" title="Back to top">↑</button>
50+
<script src="script.js"></script>
51+
</body>
52+
</html>

‎donate.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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>Donate — Pacesetters Foundation</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<header class="site-header">
11+
<div class="container header-row">
12+
<div class="brand"><div class="logo">PF</div><div><h1 class="org-name">Pacesetters Foundation</h1></div></div>
13+
<nav class="nav"><a href="index.html">Home</a><a href="donate.html" class="btn small">Donate</a><a href="contact.html">Contact</a></nav>
14+
<button class="nav-toggle">☰</button>
15+
</div>
16+
</header>
17+
18+
<main class="container section">
19+
<h2>Support Our Work</h2>
20+
<p class="lead">Choose a convenient method to give — Bank transfer, Mobile Money (MTN, Vodafone, etc.) or Card payments.</p>
21+
22+
<div class="donate-tabs">
23+
<button class="tab-btn active" data-tab="bank">Bank Transfer</button>
24+
<button class="tab-btn" data-tab="momo">Mobile Money (MoMo)</button>
25+
<button class="tab-btn" data-tab="card">Card / Online</button>
26+
</div>
27+
28+
<div class="tab-content" id="bank">
29+
<div class="card">
30+
<h4>Bank Details</h4>
31+
<p><strong>Bank:</strong> GCB Bank Ghana</p>
32+
<p><strong>Account Name:</strong> Pacesetters Foundation</p>
33+
<p><strong>Account Number:</strong> 1234567890</p>
34+
<p><strong>Branch:</strong> Accra Main</p>
35+
<p>Use your name as reference and email proof of payment to <a href="mailto:[email protected]">[email protected]</a></p>
36+
</div>
37+
</div>
38+
39+
<div class="tab-content hidden" id="momo">
40+
<div class="card">
41+
<h4>Mobile Money</h4>
42+
<p>Select your network to see the number to send to:</p>
43+
<select id="momoNetwork">
44+
<option value="">-- Select Network --</option>
45+
<option value="MTN">MTN Mobile Money</option>
46+
<option value="Vodafone">Vodafone Cash</option>
47+
<option value="AirtelTigo">AirtelTigo Money</option>
48+
</select>
49+
50+
<div id="momoDetails" style="margin-top:12px">
51+
<!-- Will be populated by JS -->
52+
<p class="muted">Pick a network to see the number and instructions.</p>
53+
</div>
54+
</div>
55+
</div>
56+
57+
<div class="tab-content hidden" id="card">
58+
<div class="card">
59+
<h4>Card / Online Payment</h4>
60+
<p>Use our secure online checkout to donate by Visa, Mastercard or mobile card.</p>
61+
<!-- EDIT: Replace the href with your Paystack/Flutterwave checkout URL -->
62+
<a id="payBtn" class="btn primary" href="#" target="_blank" rel="noopener">Donate Online (Paystack/Flutterwave)</a>
63+
</div>
64+
</div>
65+
</main>
66+
67+
<footer class="footer"><div class="container footer-grid"><div><strong>Pacesetters Foundation</strong></div><div><small class="muted">© 2025</small></div></div></footer>
68+
69+
<button id="topBtn" title="Back to top">↑</button>
70+
<script src="script.js"></script>
71+
72+
<script>
73+
// Simple tab logic (also in script.js but keep local to ensure immediate functionality)
74+
const tabBtns = document.querySelectorAll('.tab-btn');
75+
const tabContents = document.querySelectorAll('.tab-content');
76+
tabBtns.forEach(btn => btn.addEventListener('click', () => {
77+
tabBtns.forEach(b => b.classList.remove('active'));
78+
btn.classList.add('active');
79+
const tab = btn.dataset.tab;
80+
tabContents.forEach(c => c.id === tab ? c.classList.remove('hidden') : c.classList.add('hidden'));
81+
}));
82+
83+
// MoMo networks data
84+
const momoData = {
85+
"MTN": {number:"+233 24 000 0001", name:"Pacesetters Foundation (MTN MoMo)"},
86+
"Vodafone": {number:"+233 20 000 0002", name:"Pacesetters Foundation (Vodafone Cash)"},
87+
"AirtelTigo": {number:"+233 24 000 0003", name:"Pacesetters Foundation (AirtelTigo Money)"}
88+
};
89+
90+
const momoNetwork = document.getElementById('momoNetwork');
91+
const momoDetails = document.getElementById('momoDetails');
92+
momoNetwork.addEventListener('change', () => {
93+
const v = momoNetwork.value;
94+
if (!v) { momoDetails.innerHTML = '<p class="muted">Pick a network to see the number and instructions.</p>'; return; }
95+
const data = momoData[v];
96+
momoDetails.innerHTML = `<p><strong>${data.name}</strong></p><p>Number: <strong>${data.number}</strong></p><p>Send your donation and SMS proof to <a href="mailto:[email protected]">[email protected]</a> or upload proof via our contact page.</p>`;
97+
});
98+
</script>
99+
</body>
100+
</html>

‎gallery.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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>Gallery — Pacesetters Foundation</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<header class="site-header">
11+
<div class="container header-row">
12+
<div class="brand"><div class="logo">PF</div><div><h1 class="org-name">Pacesetters Foundation</h1></div></div>
13+
<nav class="nav"><a href="index.html">Home</a><a href="gallery.html">Gallery</a><a href="donate.html" class="btn small">Donate</a><a href="contact.html">Contact</a></nav>
14+
<button class="nav-toggle">☰</button>
15+
</div>
16+
</header>
17+
18+
<main class="container section">
19+
<h2>Gallery</h2>
20+
<p class="lead">Click any image to enlarge</p>
21+
22+
<div class="gallery-grid">
23+
<img src="images/gallery1.jpg" class="gallery-item reveal" data-full="images/gallery1.jpg" alt="gallery1">
24+
<img src="images/gallery2.jpg" class="gallery-item reveal delay-1" data-full="images/gallery2.jpg" alt="gallery2">
25+
<img src="images/gallery3.jpg" class="gallery-item reveal delay-2" data-full="images/gallery3.jpg" alt="gallery3">
26+
<img src="images/gallery4.jpg" class="gallery-item reveal delay-3" data-full="images/gallery4.jpg" alt="gallery4">
27+
</div>
28+
</main>
29+
30+
<div id="lightbox" class="lightbox" aria-hidden="true"><div class="lightbox-inner"><button class="lightbox-close">✕</button><img id="lightboxImg" src="" alt=""></div></div>
31+
<footer class="footer"><div class="container footer-grid"><div><strong>Pacesetters Foundation</strong></div><div><small class="muted">© 2025</small></div></div></footer>
32+
<button id="topBtn" title="Back to top">↑</button>
33+
<script src="script.js"></script>
34+
</body>
35+
</html>

0 commit comments

Comments
 (0)