Skip to content

Commit 99c1894

Browse files
SCodeGitSCodeGit
authored
Add files via upload
0 parents  commit 99c1894

File tree

3 files changed

+239
-0
lines changed

3 files changed

+239
-0
lines changed

‎images/hero.jpg.jpeg‎

142 KB
Loading

‎index.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
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>Pacesetters Foundation</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
10+
<body>
11+
<header class="site-header">
12+
<div class="container">
13+
<div class="brand">
14+
<div class="logo">PF</div>
15+
<h1>Pacesetters Foundation</h1>
16+
</div>
17+
<nav class="nav-links">
18+
<a href="#about">About</a>
19+
<a href="#programs">Programs</a>
20+
<a href="#impact">Impact</a>
21+
<a href="#gallery">Gallery</a>
22+
<a href="#contact">Contact</a>
23+
<a class="donate" href="#donate">Donate</a>
24+
</nav>
25+
</div>
26+
</header>
27+
28+
<section class="hero">
29+
<div class="overlay">
30+
<h2>Empowering generations through knowledge and compassion</h2>
31+
<p>Creating opportunities, inspiring hope, and building sustainable communities across Ghana.</p>
32+
<a href="#donate" class="btn">Donate Now</a>
33+
</div>
34+
</section>
35+
36+
<section id="about" class="container">
37+
<h3>About Us</h3>
38+
<p>Pacesetters Foundation is a non-profit organization committed to improving lives through education, health initiatives, and youth empowerment.</p>
39+
</section>
40+
41+
<section id="programs" class="container">
42+
<h3>Our Programs</h3>
43+
<div class="grid">
44+
<div class="card">
45+
<h4>Education Support</h4>
46+
<p>Scholarships and resources for underprivileged students.</p>
47+
</div>
48+
<div class="card">
49+
<h4>Health Outreach</h4>
50+
<p>Community clinics and maternal care programs.</p>
51+
</div>
52+
<div class="card">
53+
<h4>Youth Empowerment</h4>
54+
<p>Training and mentorship for young leaders.</p>
55+
</div>
56+
</div>
57+
</section>
58+
59+
<section id="impact" class="container">
60+
<h3>Our Impact</h3>
61+
<div class="stats">
62+
<div><strong>5000+</strong><br>Students Supported</div>
63+
<div><strong>120</strong><br>Communities Reached</div>
64+
<div><strong>350</strong><br>Volunteers Engaged</div>
65+
</div>
66+
</section>
67+
68+
<section id="gallery" class="container">
69+
<h3>Gallery</h3>
70+
<div class="gallery">
71+
<img src="images/hero.jpg" alt="Foundation image 1">
72+
<img src="images/hero.jpg" alt="Foundation image 2">
73+
<img src="images/hero.jpg" alt="Foundation image 3">
74+
</div>
75+
</section>
76+
77+
<section id="contact" class="container">
78+
<h3>Contact & Support</h3>
79+
<form action="mailto:[email protected]" method="post" enctype="text/plain">
80+
<input type="text" name="Name" placeholder="Your name" required />
81+
<input type="email" name="Email" placeholder="Your email" required />
82+
<textarea name="Message" placeholder="Your message" required></textarea>
83+
<button type="submit">Send Message</button>
84+
</form>
85+
86+
<div id="donate" class="donate-section">
87+
<h3>Donate Now</h3>
88+
<p>Your support makes a difference. Every contribution helps us reach more communities.</p>
89+
<a href="#" class="btn">Donate via Flutterwave / Paystack</a>
90+
</div>
91+
</section>
92+
93+
<footer>
94+
<p>&copy; 2025 Pacesetters Foundation — Empowering Communities in Ghana</p>
95+
</footer>
96+
</body>
97+
</html>

‎style.css‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/* === GLOBAL STYLES === */
2+
:root {
3+
--primary: #0b61c3;
4+
--accent: #ffb100;
5+
--bg: #f6f7fb;
6+
--text: #0f1724;
7+
--muted: #6b7280;
8+
}
9+
10+
* {
11+
box-sizing: border-box;
12+
margin: 0;
13+
padding: 0;
14+
}
15+
16+
body {
17+
font-family: "Inter", Arial, sans-serif;
18+
color: var(--text);
19+
background: var(--bg);
20+
line-height: 1.6;
21+
}
22+
23+
/* === HEADER === */
24+
header.site-header {
25+
background: #fff;
26+
border-bottom: 1px solid rgba(15, 23, 36, 0.06);
27+
position: sticky;
28+
top: 0;
29+
z-index: 100;
30+
}
31+
32+
header .container {
33+
display: flex;
34+
justify-content: space-between;
35+
align-items: center;
36+
padding: 1rem 2rem;
37+
max-width: 1100px;
38+
margin: auto;
39+
}
40+
41+
.brand {
42+
display: flex;
43+
align-items: center;
44+
gap: 10px;
45+
}
46+
47+
.brand .logo {
48+
background: linear-gradient(135deg, var(--primary), #074a99);
49+
color: white;
50+
font-weight: 700;
51+
font-size: 1.1rem;
52+
width: 42px;
53+
height: 42px;
54+
border-radius: 8px;
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
58+
}
59+
60+
.nav-links a {
61+
margin-left: 1rem;
62+
text-decoration: none;
63+
color: var(--muted);
64+
font-weight: 600;
65+
transition: color 0.3s;
66+
}
67+
68+
.nav-links a:hover {
69+
color: var(--primary);
70+
}
71+
72+
.nav-links .donate {
73+
background: var(--primary);
74+
color: white;
75+
padding: 0.5rem 1rem;
76+
border-radius: 6px;
77+
}
78+
79+
/* === HERO SECTION === */
80+
.hero {
81+
background: url("images/hero.jpg") center/cover no-repeat;
82+
height: 80vh;
83+
display: flex;
84+
align-items: center;
85+
justify-content: center;
86+
position: relative;
87+
color: white;
88+
text-align: center;
89+
}
90+
91+
.hero::after {
92+
content: "";
93+
position: absolute;
94+
inset: 0;
95+
background: rgba(0, 0, 0, 0.45);
96+
}
97+
98+
.hero .overlay {
99+
position: relative;
100+
z-index: 2;
101+
max-width: 800px;
102+
padding: 0 20px;
103+
}
104+
105+
.hero h2 {
106+
font-size: 2rem;
107+
margin-bottom: 1rem;
108+
}
109+
110+
.hero p {
111+
font-size: 1.1rem;
112+
margin-bottom: 1.5rem;
113+
}
114+
115+
.hero .btn {
116+
background: var(--accent);
117+
color: #07203a;
118+
padding: 0.7rem 1.4rem;
119+
font-weight: 700;
120+
border-radius: 10px;
121+
text-decoration: none;
122+
transition: background 0.3s;
123+
}
124+
125+
.hero .btn:hover {
126+
background: #f1a400;
127+
}
128+
129+
/* === CONTAINERS === */
130+
.container {
131+
max-width: 1100px;
132+
margin: auto;
133+
padding: 4rem 2rem;
134+
}
135+
136+
.container h3 {
137+
color: var(--primary);
138+
font-size: 1.6rem;
139+
margin-bottom: 1rem;
140+
}
141+
142+
/* === PROGRAMS*

0 commit comments

Comments
 (0)