-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
160 lines (145 loc) · 5.83 KB
/
index.html
File metadata and controls
160 lines (145 loc) · 5.83 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pacesetters Foundation — Empowering Change</title>
<link rel="stylesheet" href="style.css" />
<meta name="description" content="Pacesetters Foundation — advancing education, health, and empowerment across communities." />
</head>
<body>
<!-- ===== HEADER ===== -->
<header class="header">
<div class="container header-flex">
<a href="index.html" class="brand">
<div class="logo">PF</div>
<div>
<h1 class="title">Pacesetters Foundation</h1>
<small class="tagline">Empowering communities across Ghana</small>
</div>
</a>
<nav class="nav">
<a href="index.html" class="active">Home</a>
<a href="programs.html">Programs</a>
<a href="donate.html">Donate</a>
</nav>
<button class="nav-toggle" aria-label="Menu">☰</button>
</div>
</header>
<!-- ===== HERO ===== -->
<section class="hero">
<img src="images/hero.jpg" alt="Community empowerment" class="hero-img">
<div class="overlay">
<h2 class="reveal">Together, We Empower Change</h2>
<p class="reveal delay-1">Pacesetters Foundation builds sustainable futures through education, health, and youth empowerment.</p>
<div class="hero-buttons reveal delay-2">
<a href="programs.html" class="btn">Our Work</a>
<a href="donate.html" class="btn alt">Support Us</a>
</div>
</div>
</section>
<!-- ===== ABOUT SECTION ===== -->
<section class="section about container">
<h3 class="section-title">Who We Are</h3>
<p class="intro">Founded in 2015, Pacesetters Foundation is a nonprofit organization dedicated to transforming lives through education, community health, and social inclusion.</p>
<div class="grid-2 reveal">
<div>
<h4>Our History</h4>
<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>
</div>
<div>
<h4>Our Mission</h4>
<p>To empower underserved communities through education, healthcare, and sustainable development programs that create long-term impact.</p>
</div>
</div>
<div class="grid-3 reveal delay-1">
<div class="card">
<h5>Aims</h5>
<ul>
<li>Enhance educational access for children and youth.</li>
<li>Promote health awareness and well-being.</li>
<li>Foster community participation and leadership.</li>
</ul>
</div>
<div class="card">
<h5>Objectives</h5>
<ul>
<li>Train teachers and youth leaders.</li>
<li>Distribute educational materials annually.</li>
<li>Host national community outreach events.</li>
</ul>
</div>
<div class="card">
<h5>Vision</h5>
<p>A Ghana where every community thrives through opportunity, education, and empowerment.</p>
</div>
</div>
</section>
<!-- ===== PROGRAM PREVIEW ===== -->
<section class="section preview pale">
<div class="container">
<h3 class="section-title">Our Core Programs</h3>
<div class="grid-3 reveal">
<div class="program-card">
<img src="images/education.jpg" alt="Education Program">
<h4>Education & Literacy</h4>
<p>Providing school resources, scholarships, and mentorship for students in underserved areas.</p>
</div>
<div class="program-card">
<img src="images/health.jpg" alt="Health Outreach">
<h4>Health & Well-being</h4>
<p>Delivering medical screenings, hygiene campaigns, and maternal health programs.</p>
</div>
<div class="program-card">
<img src="images/youth.jpg" alt="Youth Empowerment">
<h4>Skills & Empowerment</h4>
<p>Training youth in digital skills, entrepreneurship, and sustainable livelihoods.</p>
</div>
</div>
<div class="center">
<a href="programs.html" class="btn">Explore All Programs</a>
</div>
</div>
</section>
<!-- ===== GALLERY PREVIEW ===== -->
<section class="section gallery container">
<h3 class="section-title">Gallery Highlights</h3>
<div class="gallery-grid reveal">
<img src="images/gallery1.jpg" alt="gallery 1">
<img src="images/gallery2.jpg" alt="gallery 2">
<img src="images/gallery3.jpg" alt="gallery 3">
<img src="images/gallery4.jpg" alt="gallery 4">
</div>
<div class="center">
<a href="programs.html" class="btn alt">View More</a>
</div>
</section>
<!-- ===== DONATION CTA ===== -->
<section class="section cta pale">
<div class="container reveal">
<h3>Every Donation Counts</h3>
<p>Your contribution enables us to reach more children, improve schools, and empower communities.</p>
<a href="donate.html" class="btn">Donate Now</a>
</div>
</section>
<!-- ===== FOOTER ===== -->
<footer class="footer">
<div class="container footer-grid">
<div>
<strong>Pacesetters Foundation</strong><br>
<small>© 2025 All Rights Reserved — built by
<a href="https://scodegit.github.io/" target="_blank" rel="noopener noreferrer" class="dev-link">SCode</a>
</small>
</div>
<nav class="footer-nav">
<a href="index.html">Home</a>
<a href="programs.html">Programs</a>
<a href="donate.html">Donate</a>
</nav>
</div>
</footer>
<!-- BACK TO TOP -->
<button id="topBtn" title="Back to top">↑</button>
<script src="script.js"></script>
</body>
</html>