537 lines
21 KiB
HTML
537 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Our Work - Schools Without Borders</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link href="css/styles.css" rel="stylesheet">
|
|
<style>
|
|
/* Our Work page specific styles */
|
|
.achievements {
|
|
padding: 5rem 0;
|
|
background-color: var(--gray-bg);
|
|
}
|
|
|
|
.achievements-stats {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.stat-box {
|
|
background-color: white;
|
|
padding: 2rem;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
|
text-align: center;
|
|
width: 220px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.stat-box:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
color: var(--orange);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.achievements-content {
|
|
max-width: 800px;
|
|
margin: 2rem auto 0;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Programs section */
|
|
.programs {
|
|
padding: 5rem 0;
|
|
}
|
|
|
|
.programs-intro {
|
|
max-width: 800px;
|
|
margin: 0 auto 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.program-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.program-card {
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
|
transition: transform 0.3s ease;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.program-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.program-image {
|
|
height: 200px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.program-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.program-card:hover .program-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.program-content {
|
|
padding: 1.5rem;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.program-content h3 {
|
|
margin-bottom: 1rem;
|
|
color: var(--dark-blue);
|
|
}
|
|
|
|
.program-content p {
|
|
margin-bottom: 1.5rem;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.program-link {
|
|
align-self: flex-start;
|
|
font-weight: 600;
|
|
color: var(--orange);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.program-link i {
|
|
margin-left: 0.5rem;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.program-link:hover i {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
/* Gallery section */
|
|
.gallery {
|
|
padding: 5rem 0;
|
|
background-color: var(--gray-bg);
|
|
}
|
|
|
|
.gallery-intro {
|
|
max-width: 800px;
|
|
margin: 0 auto 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.gallery-items {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.gallery-item {
|
|
height: 250px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.gallery-item:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
.gallery-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Impact stories */
|
|
.impact-stories {
|
|
padding: 5rem 0;
|
|
}
|
|
|
|
.stories-intro {
|
|
max-width: 800px;
|
|
margin: 0 auto 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.stories-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.story-card {
|
|
flex: 1;
|
|
min-width: 300px;
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
|
overflow: hidden;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.story-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.story-header {
|
|
padding: 1.5rem;
|
|
background-color: var(--dark-blue);
|
|
color: white;
|
|
}
|
|
|
|
.story-header h3 {
|
|
color: white;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.story-content {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.story-quote {
|
|
padding: 1rem;
|
|
background-color: rgba(242, 145, 0, 0.1);
|
|
border-left: 4px solid var(--orange);
|
|
margin: 1rem 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Future aspirations */
|
|
.future-aspirations {
|
|
padding: 5rem 0;
|
|
background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('images/future-vision.jpg') center/cover no-repeat;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.future-aspirations h2 {
|
|
color: white;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.future-aspirations p {
|
|
max-width: 800px;
|
|
margin: 0 auto 2rem;
|
|
}
|
|
|
|
/* Get involved */
|
|
.get-involved {
|
|
padding: 5rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.get-involved h2 {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.get-involved p {
|
|
max-width: 700px;
|
|
margin: 0 auto 2rem;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Responsive styles */
|
|
@media (max-width: 768px) {
|
|
.stat-box {
|
|
width: 100%;
|
|
}
|
|
|
|
.program-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.gallery-items {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header>
|
|
<div class="container">
|
|
<nav class="navbar">
|
|
<div class="logo">
|
|
<img src="images/logo.png" alt="Schools Without Borders Logo">
|
|
<span>Schools Without Borders</span>
|
|
</div>
|
|
<ul class="nav-links">
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="about.html">About Us</a></li>
|
|
<li><a href="work.html" class="active">Our Work</a></li>
|
|
<li><a href="support.html">Support Us</a></li>
|
|
<li><a href="contact.html">Contact</a></li>
|
|
</ul>
|
|
<div class="language-toggle">
|
|
<i class="fas fa-globe"></i>
|
|
<span>EN / عربي</span>
|
|
</div>
|
|
<div class="mobile-menu">
|
|
<i class="fas fa-bars"></i>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Page Banner -->
|
|
<section class="page-banner" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/banner-work.jpg') center/cover no-repeat;">
|
|
<div class="container">
|
|
<h1>Our Work</h1>
|
|
<p>Turning Challenges into Opportunities</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Achievements Section -->
|
|
<section class="achievements">
|
|
<div class="container">
|
|
<h2 class="text-center">What We've Achieved So Far</h2>
|
|
<div class="achievements-content">
|
|
<p>At Schools Without Borders, we are committed to addressing the educational crises faced by children in Gaza. With innovation, resilience, and a deep commitment to change, we have developed impactful programs that bring education and hope to the most vulnerable while addressing family needs across all sectors to create holistic family support.</p>
|
|
</div>
|
|
<div class="achievements-stats">
|
|
<div class="stat-box">
|
|
<div class="stat-number">1,500+</div>
|
|
<p>Children reached with educational opportunities</p>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-number">32</div>
|
|
<p>Camps receiving educational support</p>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-number">10</div>
|
|
<p>Educational centers established</p>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-number">28</div>
|
|
<p>Dedicated teachers trained</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Programs Section -->
|
|
<section class="programs">
|
|
<div class="container">
|
|
<div class="programs-intro">
|
|
<h2>Our Innovative Programs</h2>
|
|
<p>Through creative and adaptive educational solutions, we bring learning opportunities to children even in the most challenging environments.</p>
|
|
</div>
|
|
<div class="program-grid">
|
|
<div class="program-card">
|
|
<div class="program-image">
|
|
<img src="images/mobile-school.jpg" alt="Mobile Schools Program">
|
|
</div>
|
|
<div class="program-content">
|
|
<h3>Mobile Schools</h3>
|
|
<p>Our mobile classrooms bring education directly to children in displacement camps, temporary shelters, and areas where school buildings have been damaged. These adaptable spaces ensure learning continues regardless of circumstances.</p>
|
|
</div>
|
|
</div>
|
|
<div class="program-card">
|
|
<div class="program-image">
|
|
<img src="images/memory-revival.jpg" alt="Memory Revival Program">
|
|
</div>
|
|
<div class="program-content">
|
|
<h3>Memory Revival</h3>
|
|
<p>For children who have missed extended periods of schooling, our Memory Revival program provides targeted interventions to help rebuild academic foundations and restore confidence in previously learned skills.</p>
|
|
</div>
|
|
</div>
|
|
<div class="program-card">
|
|
<div class="program-image">
|
|
<img src="images/educational-drama.jpg" alt="Educational Drama Program">
|
|
</div>
|
|
<div class="program-content">
|
|
<h3>Educational Drama</h3>
|
|
<p>Using theater, arts, and creative expression as tools for learning and healing, our Educational Drama program helps children process trauma while developing academic and emotional skills in an engaging way.</p>
|
|
</div>
|
|
</div>
|
|
<div class="program-card">
|
|
<div class="program-image">
|
|
<img src="images/mobile-kindergarten.jpg" alt="Mobile Kindergarten Program">
|
|
</div>
|
|
<div class="program-content">
|
|
<h3>Mobile Kindergarten</h3>
|
|
<p>Our early childhood education program brings structured play-based learning to the youngest children affected by conflict, creating nurturing environments for developing foundational skills.</p>
|
|
</div>
|
|
</div>
|
|
<div class="program-card">
|
|
<div class="program-image">
|
|
<img src="images/hospital-learning.jpg" alt="Hospital-Based Learning Program">
|
|
</div>
|
|
<div class="program-content">
|
|
<h3>Hospital-Based Learning</h3>
|
|
<p>For children receiving medical treatment, our Hospital-Based Learning program brings educational activities directly to bedsides, ensuring hospitalization doesn't interrupt their learning journey.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Gallery Section -->
|
|
<section class="gallery">
|
|
<div class="container">
|
|
<div class="gallery-intro">
|
|
<h2>Our Impact in Pictures</h2>
|
|
<p>Images that tell the story of our work and the resilience of the children we serve.</p>
|
|
</div>
|
|
<div class="gallery-items">
|
|
<div class="gallery-item">
|
|
<img src="images/gallery-1.jpg" alt="Children in a learning circle">
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="images/gallery-2.jpg" alt="Mobile classroom in action">
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="images/gallery-3.jpg" alt="Teacher with students">
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="images/gallery-4.jpg" alt="Art activities with children">
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="images/gallery-5.jpg" alt="Outdoor learning space">
|
|
</div>
|
|
<div class="gallery-item">
|
|
<img src="images/gallery-6.jpg" alt="Children reading books">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Impact Stories Section -->
|
|
<section class="impact-stories">
|
|
<div class="container">
|
|
<div class="stories-intro">
|
|
<h2>Stories of Impact</h2>
|
|
<p>Real stories of children whose lives have been transformed through education</p>
|
|
</div>
|
|
<div class="stories-container">
|
|
<div class="story-card">
|
|
<div class="story-header">
|
|
<h3>Amira's Story</h3>
|
|
<p>12-year-old girl from Rafah</p>
|
|
</div>
|
|
<div class="story-content">
|
|
<p>After being out of school for over a year, Amira joined our mobile classroom. Initially withdrawn and struggling with basic skills she had previously mastered, she found her confidence through our Memory Revival program.</p>
|
|
<div class="story-quote">
|
|
"I thought I had forgotten everything. Now I remember not just what I learned before, but I'm learning new things too. I want to be a teacher someday."
|
|
</div>
|
|
<p>Today, Amira leads creative writing activities for younger children and has become an inspiration to her peers.</p>
|
|
</div>
|
|
</div>
|
|
<div class="story-card">
|
|
<div class="story-header">
|
|
<h3>Yassin's Story</h3>
|
|
<p>9-year-old boy in hospital recovery</p>
|
|
</div>
|
|
<div class="story-content">
|
|
<p>After being injured and spending three months in hospital, Yassin was isolated from his peers and education. Our Hospital-Based Learning program brought not just lessons, but connection and hope to his bedside.</p>
|
|
<div class="story-quote">
|
|
"The teachers make me forget I'm in hospital. When we have our lessons, I feel like I'm back at school with my friends."
|
|
</div>
|
|
<p>Upon discharge, Yassin seamlessly transitioned to our mobile classroom, where he continues to thrive academically despite his physical challenges.</p>
|
|
</div>
|
|
</div>
|
|
<div class="story-card">
|
|
<div class="story-header">
|
|
<h3>Leila and Layla's Story</h3>
|
|
<p>4-year-old twins in Al-Bureij camp</p>
|
|
</div>
|
|
<div class="story-content">
|
|
<p>Having never experienced formal education, these shy twins joined our Mobile Kindergarten program. Through songs, games, and age-appropriate activities, they've developed early literacy and numeracy skills along with crucial social abilities.</p>
|
|
<div class="story-quote">
|
|
"My daughters wake up excited every day for 'school time'. Even in our difficult situation, they're learning, playing, and staying children." - Father of Leila and Layla
|
|
</div>
|
|
<p>Their transformation from hesitant participants to enthusiastic learners demonstrates the power of early childhood education even in crisis settings.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Future Aspirations Section -->
|
|
<section class="future-aspirations">
|
|
<div class="container">
|
|
<h2>Looking to the Future</h2>
|
|
<p>As we build on our current work, we aim to expand our reach to 5,000 children by 2030, develop sustainable learning models that can be replicated globally, establish permanent learning centers, and enhance our psychosocial support services for children and families affected by conflict.</p>
|
|
<a href="about.html#vision" class="btn btn-primary">Learn About Our Vision</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Get Involved Section -->
|
|
<section class="get-involved">
|
|
<div class="container">
|
|
<h2>Be Part of Our Mission</h2>
|
|
<p>There are many ways you can contribute to bringing education to children in crisis-affected areas. Whether through volunteering, donating, spreading awareness, or forming partnerships, your support makes a difference.</p>
|
|
<div class="cta-buttons">
|
|
<a href="support.html" class="btn btn-primary">Support Us</a>
|
|
<a href="contact.html" class="btn btn-secondary">Contact Us</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h3>Schools Without Borders</h3>
|
|
<p>A non-profit organization supporting education and providing services to students affected by wars and conflicts.</p>
|
|
<div class="social-links">
|
|
<a href="https://www.tiktok.com/@tiktok.com/@schools_without_borders"><i class="fab fa-tiktok"></i></a>
|
|
<a href="https://x.com/Schools_W_B"><i class="fab fa-twitter"></i></a>
|
|
<a href="https://www.instagram.com/schools.without.borders/"><i class="fab fa-instagram"></i></a>
|
|
<a href="https://www.linkedin.com/in/schools-w-b-b62342311"><i class="fab fa-linkedin-in"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>Quick Links</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="about.html">About Us</a></li>
|
|
<li><a href="work.html">Our Work</a></li>
|
|
<li><a href="support.html">Support Us</a></li>
|
|
<li><a href="contact.html">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>Contact Us</h3>
|
|
<p><i class="fas fa-envelope"></i> info@schools-without-borders.org</p>
|
|
<p><i class="fas fa-phone"></i> +972 595 041 685</p>
|
|
</div>
|
|
</div>
|
|
<div class="copyright">
|
|
© 2025 Schools Without Borders. All Rights Reserved.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="js/translations.js"></script>
|
|
</body>
|
|
</html> |