-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprogram.html
More file actions
219 lines (219 loc) · 9.45 KB
/
Copy pathprogram.html
File metadata and controls
219 lines (219 loc) · 9.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html{
font-family: Arial, sans-serif;
background: #0a0c1b;
color: #ffffff;
}
header{
text-align: center;
padding: 40px 0;
background: #006400;
color: white;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
font-size: 36px;
font-weight: bold;
animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(-50px); }
100% { opacity: 1; transform: translateY(0); }
}
nav{
background: #141629;
display: flex;
justify-content: center;
padding: 10px 0;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
nav a{
color: #ffffff;
text-decoration: none;
margin: 0 15px;
font-size: 18px;
transition: color 0.3s, transform 0.3s;
}
nav a:hover{
color: #228b22;
transform: scale(1.1);
}
.container{
padding: 20px;
}
.program-section{
margin: 40px 0;
padding: 20px;
background: rgba(10, 12, 27, 0.9);
border-radius: 15px;
box-shadow: 0 0 15px rgba(0, 100, 0, 0.5);
}
.program-section h2{
margin-bottom: 20px;
text-shadow: 0 0 10px #059f05;
color: rgb(12, 177, 12);
}
.program{
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 20px;
align-items: center;
}
.program img{
width: 100%;
height: auto;
max-width: 400px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 100, 0, 0.3);
transition: transform 0.3s ease;
}
.program img:hover{
transform: scale(1.05);
}
.program-info{
flex: 1;
padding: 15px;
background: rgb(1, 95, 1);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 100, 0, 0.3);
}
.program-info h3{
margin-bottom: 10px;
font-size: 24px;
color: white;
}
.program-info p{
color: white;
line-height: 1.5;
}
.donation{
background-color: #228b22;
padding: 20px;
margin-top: 30px;
text-align: center;
border-radius: 10px;
animation: fadeIn 2s ease-in-out;
}
.donation h2{
font-size: 24px;
color: white;
}
.donation button{
background-color: #006400;
color: white;
padding: 12px 30px;
border-radius: 25px;
border: none;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
}
.donation button:hover{
background-color: #228b22;
}
.program:nth-child(even){
flex-direction: row-reverse;
}
.b1{
background: linear-gradient(90deg, #063c18, #228b22);
color: white;
padding: 12px 25px;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 5px 10px rgba(0, 204, 68, 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #034303;
}
</style>
</head>
<body>
<header>
<br>
Behtar Mustaqbil - Our Programs
<br><br>
</header>
<nav>
<a href="main.html">Home</a>
<a href="about.html">About Us</a>
<a href="program.html">Our Programs</a>
<a href="donate.html">Donate</a>
<a href="contact.html">Contact Us</a>
</nav>
<div class="container">
<div class="program-section">
<h2>Our Education Program</h2>
<div class="program">
<img src="C:\Users\Admin\OneDrive\Desktop\ICT Project\ngo6.jfif" alt="Education Program">
<div class="program-info">
<h3>Education for All</h3>
<p>Our Education Program aims to provide access to quality education for underprivileged children in rural and urban areas. Through donations and partnerships with local schools and NGOs, we offer free textbooks, learning materials, and after-school tutoring to ensure that every child has the opportunity to learn and succeed. This program focuses on reducing educational inequalities and empowering youth with the skills needed for a brighter future.</p>
<p><strong>Impact:</strong> Since its launch, over 500 children have benefitted from our education program, with many continuing their studies in higher education and contributing to their communities.</p>
</div>
</div>
</div>
<div class="program-section">
<h2>Health and Wellness Program</h2>
<div class="program">
<div class="program-info">
<h3>Health for All</h3>
<p>Our Health and Wellness Program focuses on improving the health and well-being of families in low-income communities. We provide free health check-ups, distribute medications, and raise awareness about preventive health measures such as vaccinations, sanitation, and hygiene. In partnership with local hospitals and clinics, we aim to reduce the burden of diseases and ensure better access to healthcare services for marginalized groups.</p>
<p><strong>Impact:</strong> The program has served over 10,000 individuals, providing them with critical healthcare services and improving the overall quality of life in the targeted areas.</p>
</div>
<img src="C:\Users\Admin\OneDrive\Desktop\ICT Project\WhatsApp Image 2024-11-23 at 6.46.55 PM.jpeg" alt="Health and Wellness Program">
</div>
</div>
<div class="program-section">
<h2>Women Empowerment Program</h2>
<div class="program">
<img src="C:\Users\Admin\OneDrive\Desktop\ICT Project\imges.jfif" alt="Women Empowerment Program">
<div class="program-info">
<h3>Empowering Women</h3>
<p>Our Women Empowerment Program is designed to uplift women in disadvantaged communities by providing them with opportunities to improve their economic and social status. We offer vocational training in skills such as sewing, handicrafts, and small business management. Additionally, the program focuses on raising awareness about gender equality, women’s rights, and providing legal assistance to women in need.</p>
<p><strong>Impact:</strong> Over 1,000 women have been trained through this program, many of whom have gone on to start their own businesses or find sustainable employment, significantly improving their financial independence.</p>
</div>
</div>
</div>
<div class="program-section">
<h2>Clean Water Initiative</h2>
<div class="program">
<div class="program-info">
<h3>Access to Clean Water</h3>
<p>The Clean Water Initiative focuses on providing clean, safe drinking water to communities with limited access to fresh water sources. By building wells, installing filtration systems, and educating the public on water conservation, we aim to reduce waterborne diseases and ensure better health outcomes for families living in underserved areas.</p>
<p><strong>Impact:</strong> To date, we have constructed over 50 water wells and filtration systems, benefitting more than 15,000 individuals with reliable access to clean water.</p>
</div>
<img src="C:\Users\Admin\OneDrive\Desktop\ICT Project\ngo3.jpg" alt="Clean Water Initiative">
</div>
</div>
<div class="program-section">
<h2>Youth Development Program</h2>
<div class="program">
<img src="C:\Users\Admin\OneDrive\Desktop\ICT Project\WhatsApp Image 2024-11-22 at 4.39.11 PM.jpeg" alt="Youth Development Program">
<div class="program-info">
<h3>Developing Future Leaders</h3>
<p>Our Youth Development Program aims to build leadership skills among young people in underserved areas. We organize workshops, mentorship programs, and community service activities to empower the youth and provide them with the tools necessary to become leaders in their communities. Our goal is to help young people gain confidence, career skills, and a strong sense of social responsibility.</p>
<p><strong>Impact:</strong> Hundreds of young people have participated in our workshops, gaining leadership skills and building strong networks that will help them navigate their careers and communities.</p>
</div>
</div>
</div>
<div class="donation">
<h2>Support Our Programs</h2>
<div style="text-align: center; margin-top: 20px;">
<a href="donate.html" style="text-decoration: none;">
<button type="button" class="b1">Support</button>
</a>
</div>
</div>
</div>
</body>
</html>