clean up css, add in translation scripts
This commit is contained in:
parent
f6ffd37f30
commit
edb3163382
797
about.html
797
about.html
|
|
@ -1,644 +1,157 @@
|
||||||
<!-- Header -->
|
<!DOCTYPE html>
|
||||||
<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">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-about.jpg') center/cover no-repeat;">
|
|
||||||
<div class="container">
|
|
||||||
<h1>About Us</h1>
|
|
||||||
<p>Know Our Story & Vision</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Our Story Section -->
|
|
||||||
<section class="our-story">
|
|
||||||
<div class="container">
|
|
||||||
<h2 class="text-center">Nour and Abdullah: A Story of Hope and Renewal</h2>
|
|
||||||
<div class="story-content">
|
|
||||||
<div class="story-text">
|
|
||||||
<p>In the heart of Gaza, Nour, a 24-year-old aspiring lawyer, and Abdullah, a 25-year-old biomedical engineer and community activist, recognized the devastating impact of war and displacement on children's education. Both grew up witnessing how conflicts disrupted education, leaving children vulnerable to an uncertain future.</p>
|
|
||||||
<p>Inspired by their experiences and shared belief in the transformative power of education, Nour and Abdullah founded "Schools Without Borders." Their goal was simple yet profound: to ensure that every child, even in the darkest circumstances, has access to quality education to build a brighter future.</p>
|
|
||||||
<p>Through their efforts, Nour and Abdullah created a network of field classrooms, mobile kindergartens, and innovative educational programs that make learning an enjoyable adventure. Their leadership has inspired a community of teachers and volunteers united around the vision of nurturing a generation of children who think critically, dream boldly, and rebuild their communities with confidence.</p>
|
|
||||||
<p>Today, "Schools Without Borders" is more than an organization—it's a movement of hope, resilience, and renewal, led by two young visionaries who believed in education's power to change lives, supported by a global network of teachers, innovators, and civil society leaders.</p>
|
|
||||||
</div>
|
|
||||||
<div class="story-image">
|
|
||||||
<img src="images/founders.jpg" alt="Nour and Abdullah, Founders of Schools Without Borders">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Our Vision Section -->
|
|
||||||
<section class="vision">
|
|
||||||
<div class="container">
|
|
||||||
<h2 class="text-center">Our Vision</h2>
|
|
||||||
<div class="vision-content">
|
|
||||||
<div class="vision-text">
|
|
||||||
<p>We aim to provide a safe and inclusive learning environment that allows students to continue their education under all circumstances. Our institution aspires to be an incubator for various schools and educational initiatives, both locally and internationally, recognized by global organizations.</p>
|
|
||||||
<p>We believe that education is the foundation of sustainable social and economic development. Through it, we empower students to become future leaders and active contributors to their communities.</p>
|
|
||||||
<p>Our vision extends beyond immediate educational needs. We are working towards establishing permanent learning centers equipped with modern facilities to foster innovation and long-term development. These centers will not only provide education but also serve as community hubs for creativity, empowerment, and healing.</p>
|
|
||||||
</div>
|
|
||||||
<div class="vision-image">
|
|
||||||
<img src="images/children-classroom.png" alt="Children in a learning environment">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Our Team Section -->
|
|
||||||
<section class="team">
|
|
||||||
<div class="container">
|
|
||||||
<h2 class="text-center">Meet Our Team</h2>
|
|
||||||
<p class="text-center">The dedicated individuals bringing education to children in crisis zones</p>
|
|
||||||
<div class="team-members">
|
|
||||||
<div class="team-member">
|
|
||||||
<img src="images/nour-nassar.jpg" alt="Nour Nassar" class="member-image">
|
|
||||||
<div class="member-info">
|
|
||||||
<h3 class="member-name">Nour Nassar</h3>
|
|
||||||
<div class="member-role">Co-Founder & Teacher</div>
|
|
||||||
<p class="member-bio">An aspiring lawyer who has dedicated her life to ensuring children have access to quality education even in the most challenging circumstances.</p>
|
|
||||||
<div class="social-links-member">
|
|
||||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
|
||||||
<a href="#"><i class="fab fa-linkedin-in"></i></a>
|
|
||||||
<a href="#"><i class="fab fa-facebook-f"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="team-member">
|
|
||||||
<img src="images/abdullah-elbaba.jpg" alt="Abdullah Elbaba" class="member-image">
|
|
||||||
<div class="member-info">
|
|
||||||
<h3 class="member-name">Abdullah Elbaba</h3>
|
|
||||||
<div class="member-role">Co-Founder & Program Director</div>
|
|
||||||
<p class="member-bio">A biomedical engineer and community activist who believes in the power of education to rebuild communities and create lasting change.</p>
|
|
||||||
<div class="social-links-member">
|
|
||||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
|
||||||
<a href="#"><i class="fab fa-linkedin-in"></i></a>
|
|
||||||
<a href="#"><i class="fab fa-facebook-f"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="team-member">
|
|
||||||
<img src="images/muhammad-elbaba.jpg" alt="Muhammad El-Baba" class="member-image">
|
|
||||||
<div class="member-info">
|
|
||||||
<h3 class="member-name">Muhammad El-Baba</h3>
|
|
||||||
<div class="member-role">Communications Director</div>
|
|
||||||
<p class="member-bio">A journalist committed to sharing the stories of children and educators in crisis zones, raising awareness about the importance of education.</p>
|
|
||||||
<div class="social-links-member">
|
|
||||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
|
||||||
<a href="#"><i class="fab fa-linkedin-in"></i></a>
|
|
||||||
<a href="#"><i class="fab fa-facebook-f"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Our Values Section -->
|
|
||||||
<section class="values">
|
|
||||||
<div class="container">
|
|
||||||
<h2 class="text-center">Our Core Values</h2>
|
|
||||||
<div class="values-content">
|
|
||||||
<div class="value">
|
|
||||||
<i class="fas fa-users"></i>
|
|
||||||
<h3>Education for All</h3>
|
|
||||||
<p>Ensuring equal learning opportunities for every child, regardless of circumstances.</p>
|
|
||||||
</div>
|
|
||||||
<div class="value">
|
|
||||||
<i class="fas fa-lightbulb"></i>
|
|
||||||
<h3>Flexibility & Creativity</h3>
|
|
||||||
<p>Adapting to challenges with innovative solutions and creative teaching methods.</p>
|
|
||||||
</div>
|
|
||||||
<div class="value">
|
|
||||||
<i class="fas fa-tachometer-alt"></i>
|
|
||||||
<h3>Speed & Quality</h3>
|
|
||||||
<p>Delivering timely and effective education that meets high standards.</p>
|
|
||||||
</div>
|
|
||||||
<div class="value">
|
|
||||||
<i class="fas fa-seedling"></i>
|
|
||||||
<h3>Sustainability</h3>
|
|
||||||
<p>Establishing long-term educational initiatives that create lasting impact.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Join Us Section -->
|
|
||||||
<section class="join-us">
|
|
||||||
<div class="container">
|
|
||||||
<div class="join-us-content">
|
|
||||||
<h2>Join Our Mission</h2>
|
|
||||||
<p>Become part of our team and help bring education to children in crisis zones. Whether you're an educator, healthcare worker, or have skills in logistics, administration, or any other field, your contribution can make a difference.</p>
|
|
||||||
<a href="#" class="btn btn-primary">Volunteer With 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="#"><i class="fab fa-facebook-f"></i></a>
|
|
||||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
|
||||||
<a href="#"><i class="fab fa-instagram"></i></a>
|
|
||||||
<a href="#"><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 Us</a></li>
|
|
||||||
<li><a href="#">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><!DOCTYPE html>
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>About Us - Schools Without Borders</title>
|
<title>About Us - 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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||||
<style>
|
<link href="css/styles.css" rel="stylesheet">
|
||||||
/* Global styles */
|
</head>
|
||||||
:root {
|
<body>
|
||||||
--navy-blue: #1B1E3B;
|
<!-- Header -->
|
||||||
--orange: #F29100;
|
<header>
|
||||||
--dark-blue: #115C94;
|
<div class="container">
|
||||||
--light-blue: #259ED5;
|
<nav class="navbar">
|
||||||
--gray-bg: #f5f5f5;
|
<div class="logo">
|
||||||
--white: #ffffff;
|
<img src="images/logo.png" alt="Schools Without Borders Logo">
|
||||||
}
|
<span>Schools Without Borders</span>
|
||||||
|
</div>
|
||||||
* {
|
<ul class="nav-links">
|
||||||
margin: 0;
|
<li><a href="index.html">Home</a></li>
|
||||||
padding: 0;
|
<li><a href="about.html" class="active">About Us</a></li>
|
||||||
box-sizing: border-box;
|
<li><a href="work.html">Our Work</a></li>
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
<li><a href="support.html">Support Us</a></li>
|
||||||
}
|
<li><a href="contact.html">Contact</a></li>
|
||||||
|
</ul>
|
||||||
body {
|
<div class="language-toggle" onclick="toggleLanguage()">
|
||||||
line-height: 1.6;
|
<i class="fas fa-globe"></i>
|
||||||
color: #333;
|
<span>EN / عربي</span>
|
||||||
}
|
</div>
|
||||||
|
<div class="mobile-menu">
|
||||||
.container {
|
<i class="fas fa-bars"></i>
|
||||||
width: 90%;
|
</div>
|
||||||
max-width: 1200px;
|
</nav>
|
||||||
margin: 0 auto;
|
</div>
|
||||||
}
|
</header>
|
||||||
|
|
||||||
h1, h2, h3, h4 {
|
<!-- Page Banner -->
|
||||||
font-weight: 700;
|
<section class="page-banner" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/banner-about.jpg') center/cover no-repeat;">
|
||||||
margin-bottom: 0.5rem;
|
<div class="container">
|
||||||
color: var(--navy-blue);
|
<h1>About Us</h1>
|
||||||
}
|
<p>Know Our Story & Vision</p>
|
||||||
|
</div>
|
||||||
h1 {
|
</section>
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
<!-- Our Story Section -->
|
||||||
|
<section class="our-story">
|
||||||
h2 {
|
<div class="container">
|
||||||
font-size: 2rem;
|
<h2 class="text-center">Nour and Abdullah: A Story of Hope and Renewal</h2>
|
||||||
}
|
<div class="story-content">
|
||||||
|
<div class="story-text">
|
||||||
h3 {
|
<p>In the heart of Gaza, Nour, a 24-year-old aspiring lawyer, and Abdullah, a 25-year-old biomedical engineer and community activist, recognized the devastating impact of war and displacement on children's education. Both grew up witnessing how conflicts disrupted education, leaving children vulnerable to an uncertain future.</p>
|
||||||
font-size: 1.5rem;
|
<p>Inspired by their experiences and shared belief in the transformative power of education, Nour and Abdullah founded "Schools Without Borders." Their goal was simple yet profound: to ensure that every child, even in the darkest circumstances, has access to quality education to build a brighter future.</p>
|
||||||
}
|
<p>Through their efforts, Nour and Abdullah created a network of field classrooms, mobile kindergartens, and innovative educational programs that make learning an enjoyable adventure. Their leadership has inspired a community of teachers and volunteers united around the vision of nurturing a generation of children who think critically, dream boldly, and rebuild their communities with confidence.</p>
|
||||||
|
<p>Today, "Schools Without Borders" is more than an organization—it's a movement of hope, resilience, and renewal, led by two young visionaries who believed in education's power to change lives, supported by a global network of teachers, innovators, and civil society leaders.</p>
|
||||||
p {
|
</div>
|
||||||
margin-bottom: 1rem;
|
<div class="story-image">
|
||||||
}
|
<img src="images/founders.jpg" alt="Nour and Abdullah, Founders of Schools Without Borders">
|
||||||
|
</div>
|
||||||
a {
|
</div>
|
||||||
text-decoration: none;
|
</div>
|
||||||
color: var(--dark-blue);
|
</section>
|
||||||
}
|
|
||||||
|
<!-- Our Vision Section -->
|
||||||
ul {
|
<section class="vision">
|
||||||
list-style: none;
|
<div class="container">
|
||||||
}
|
<h2 class="text-center">Our Vision</h2>
|
||||||
|
<div class="vision-content">
|
||||||
.btn {
|
<div class="vision-text">
|
||||||
display: inline-block;
|
<p>We aim to provide a safe and inclusive learning environment that allows students to continue their education under all circumstances. Our institution aspires to be an incubator for various schools and educational initiatives, both locally and internationally, recognized by global organizations.</p>
|
||||||
padding: 0.8rem 1.5rem;
|
<p>We believe that education is the foundation of sustainable social and economic development. Through it, we empower students to become future leaders and active contributors to their communities.</p>
|
||||||
border-radius: 5px;
|
<p>Our vision extends beyond immediate educational needs. We are working towards establishing permanent learning centers equipped with modern facilities to foster innovation and long-term development. These centers will not only provide education but also serve as community hubs for creativity, empowerment, and healing.</p>
|
||||||
font-weight: 600;
|
</div>
|
||||||
cursor: pointer;
|
<div class="vision-image">
|
||||||
transition: all 0.3s ease;
|
<img src="images/children-classroom.png" alt="Children in a learning environment">
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
.btn-primary {
|
</div>
|
||||||
background-color: var(--orange);
|
</section>
|
||||||
color: white;
|
|
||||||
}
|
<!-- Our Team Section -->
|
||||||
|
<section class="team">
|
||||||
.btn-primary:hover {
|
<div class="container">
|
||||||
background-color: #d98100;
|
<h2 class="text-center">Meet Our Team</h2>
|
||||||
}
|
<p class="text-center">The dedicated individuals bringing education to children in crisis zones</p>
|
||||||
|
<div class="team-members">
|
||||||
.btn-secondary {
|
<!-- Team Member: Nour -->
|
||||||
background-color: var(--dark-blue);
|
<div class="team-member">
|
||||||
color: white;
|
<img src="images/nour-nassar.jpg" alt="Nour Nassar" class="member-image">
|
||||||
}
|
<div class="member-info">
|
||||||
|
<h3 class="member-name">Nour Nassar</h3>
|
||||||
.btn-secondary:hover {
|
<div class="member-role">Co-Founder & Teacher</div>
|
||||||
background-color: #0e4a78;
|
<p class="member-bio">An aspiring lawyer who has dedicated her life to ensuring children have access to quality education even in the most challenging circumstances.</p>
|
||||||
}
|
<div class="social-links-member">
|
||||||
|
<a href="#"><i class="fab fa-twitter"></i></a>
|
||||||
.text-center {
|
<a href="#"><i class="fab fa-linkedin-in"></i></a>
|
||||||
text-align: center;
|
<a href="#"><i class="fab fa-facebook-f"></i></a>
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
/* Header styles */
|
</div>
|
||||||
header {
|
<!-- Team Member: Abdullah -->
|
||||||
background-color: white;
|
<div class="team-member">
|
||||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
<img src="images/abdullah-elbaba.jpg" alt="Abdullah Elbaba" class="member-image">
|
||||||
position: fixed;
|
<div class="member-info">
|
||||||
top: 0;
|
<h3 class="member-name">Abdullah Elbaba</h3>
|
||||||
left: 0;
|
<div class="member-role">Co-Founder & Program Director</div>
|
||||||
width: 100%;
|
<p class="member-bio">A biomedical engineer and community activist who believes in the power of education to rebuild communities and create lasting change.</p>
|
||||||
z-index: 1000;
|
<div class="social-links-member">
|
||||||
}
|
<a href="#"><i class="fab fa-twitter"></i></a>
|
||||||
|
<a href="#"><i class="fab fa-linkedin-in"></i></a>
|
||||||
.navbar {
|
<a href="#"><i class="fab fa-facebook-f"></i></a>
|
||||||
display: flex;
|
</div>
|
||||||
justify-content: space-between;
|
</div>
|
||||||
align-items: center;
|
</div>
|
||||||
padding: 1rem 0;
|
</div>
|
||||||
}
|
</div>
|
||||||
|
</section>
|
||||||
.logo {
|
|
||||||
display: flex;
|
<!-- Footer -->
|
||||||
align-items: center;
|
<footer>
|
||||||
}
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
.logo img {
|
<div class="footer-section">
|
||||||
height: 60px;
|
<h3>Schools Without Borders</h3>
|
||||||
margin-right: 10px;
|
<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>
|
||||||
.nav-links {
|
<a href="https://x.com/Schools_W_B"><i class="fab fa-twitter"></i></a>
|
||||||
display: flex;
|
<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>
|
||||||
.nav-links li {
|
</div>
|
||||||
margin-left: 2rem;
|
<div class="footer-section">
|
||||||
}
|
<h3>Quick Links</h3>
|
||||||
|
<ul class="footer-links">
|
||||||
.nav-links a {
|
<li><a href="index.html">Home</a></li>
|
||||||
font-weight: 600;
|
<li><a href="about.html">About Us</a></li>
|
||||||
color: var(--navy-blue);
|
<li><a href="work.html">Our Work</a></li>
|
||||||
transition: color 0.3s ease;
|
<li><a href="support.html">Support Us</a></li>
|
||||||
}
|
<li><a href="contact.html">Contact</a></li>
|
||||||
|
</ul>
|
||||||
.nav-links a:hover {
|
</div>
|
||||||
color: var(--orange);
|
<div class="footer-section">
|
||||||
}
|
<h3>Contact Us</h3>
|
||||||
|
<p><i class="fas fa-envelope"></i> info@swb-project.org</p>
|
||||||
.language-toggle {
|
<p><i class="fas fa-phone"></i> +972 111 111 111</p>
|
||||||
display: flex;
|
</div>
|
||||||
align-items: center;
|
</div>
|
||||||
font-weight: 600;
|
<div class="copyright">
|
||||||
cursor: pointer;
|
© 2025 Schools Without Borders. All Rights Reserved.
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
.language-toggle i {
|
</footer>
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
<!-- Add translations script -->
|
||||||
|
<script src="js/translations.js"></script>
|
||||||
.mobile-menu {
|
</body>
|
||||||
display: none;
|
</html>
|
||||||
font-size: 1.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Page banner */
|
|
||||||
.page-banner {
|
|
||||||
height: 40vh;
|
|
||||||
min-height: 300px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/api/placeholder/1200/800') center/cover no-repeat;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-banner h1 {
|
|
||||||
color: white;
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Our Story section */
|
|
||||||
.our-story {
|
|
||||||
padding: 5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.story-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 3rem;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.story-text {
|
|
||||||
flex: 6;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.story-image {
|
|
||||||
flex: 4;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.story-image img {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Vision section */
|
|
||||||
.vision {
|
|
||||||
padding: 5rem 0;
|
|
||||||
background-color: var(--gray-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vision-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 3rem;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vision-text {
|
|
||||||
flex: 6;
|
|
||||||
min-width: 300px;
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vision-image {
|
|
||||||
flex: 4;
|
|
||||||
min-width: 300px;
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vision-image img {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Team section */
|
|
||||||
.team {
|
|
||||||
padding: 5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-members {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 2rem;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-member {
|
|
||||||
width: 300px;
|
|
||||||
text-align: center;
|
|
||||||
background-color: white;
|
|
||||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-member:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-info {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-name {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-role {
|
|
||||||
color: var(--orange);
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.member-bio {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links-member {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.8rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links-member a {
|
|
||||||
color: var(--navy-blue);
|
|
||||||
font-size: 1.2rem;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links-member a:hover {
|
|
||||||
color: var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Values section */
|
|
||||||
.values {
|
|
||||||
padding: 5rem 0;
|
|
||||||
background-color: var(--navy-blue);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.values h2 {
|
|
||||||
color: white;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.values-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 250px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 2rem;
|
|
||||||
background-color: rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.value i {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
color: var(--orange);
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value h3 {
|
|
||||||
color: white;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer */
|
|
||||||
footer {
|
|
||||||
background-color: var(--navy-blue);
|
|
||||||
color: white;
|
|
||||||
padding: 4rem 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 3rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section h3 {
|
|
||||||
color: white;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links li {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a {
|
|
||||||
color: #ccc;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a:hover {
|
|
||||||
color: var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links a {
|
|
||||||
display: inline-block;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links a:hover {
|
|
||||||
background-color: var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyright {
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 2rem;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.join-us {
|
|
||||||
padding: 5rem 0;
|
|
||||||
background-color: var(--gray-bg);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.join-us h2 {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.join-us-content {
|
|
||||||
max-width: 700px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive styles */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.nav-links {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-banner h1 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vision-text, .vision-image, .story-text, .story-image {
|
|
||||||
order: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
الصفحة الرئيسية - مهمتنا
|
||||||
|
|
||||||
|
العنوان: مهمتنا: إضاءة المستقبل من خلال التعليم
|
||||||
|
|
||||||
|
النص:
|
||||||
|
في “مدارس بلا حدود”، نتصور عالماً يحصل فيه كل طفل، حتى وسط الحروب والنزوح، على فرصة للتعلم والحلم والنمو. مهمتنا هي كسر حواجز الجهل والأمية من خلال تقديم برامج تعليمية مبتكرة، سهلة الوصول، ومستدامة للأطفال في مناطق النزاع.
|
||||||
|
من خلال مساحات تعليمية تفاعلية، وطرق تدريس إبداعية، ودعم مستمر، نهدف إلى:
|
||||||
|
• استعادة حق التعليم لجميع الأطفال.
|
||||||
|
• تعزيز الإبداع والتفكير النقدي والمرونة.
|
||||||
|
• بناء جيل قادر على إعادة بناء مجتمعاته بثقة ومعرفة.
|
||||||
|
|
||||||
|
معاً، يمكننا أن نحول التعليم إلى منارة أمل للأطفال في الأزمات، مضيئين الطريق نحو مستقبل أكثر إشراقاً.
|
||||||
|
|
||||||
|
زر الدعوة إلى العمل: انضم إلينا في مهمتنا | تبرع الآن
|
||||||
|
|
||||||
|
من نحن - قصة نور وعبد الله
|
||||||
|
|
||||||
|
العنوان: نور وعبد الله: قصة أمل وتجديد
|
||||||
|
|
||||||
|
النص:
|
||||||
|
في قلب غزة، أدركت نور، وهي محامية طموحة تبلغ من العمر 24 عاماً، وعبد الله، وهو مهندس طب حيوي وناشط مجتمعي مفعم بالعطاء يبلغ من العمر 25 عاماً، التأثير المدمر للحرب والنزوح على تعليم الأطفال. نشأ كلاهما وهما يشاهدان كيف تؤدي الصراعات إلى تعطيل التعليم، وكيف يترك غياب التعليم المنظم الأطفال عرضة لمستقبل غامض.
|
||||||
|
|
||||||
|
بدافع تجاربهما وإيمانهما المشترك بقوة التعليم التحويلية، أسس نور وعبد الله “مدارس بلا حدود”. كان هدفهما بسيطاً ولكنه عميق: ضمان حصول كل طفل، حتى في أحلك الظروف، على تعليم عالي الجودة لبناء مستقبل أكثر إشراقاً.
|
||||||
|
من خلال جهودهما، أنشأ نور وعبد الله شبكة من الفصول الميدانية، ورياض الأطفال المتنقلة، وبرامج تعليمية مبتكرة تجعل التعلم مغامرة ممتعة. لقد ألهمت قيادتهما مجتمعاً من المعلمين والمتطوعين، متوحدين حول رؤية تربية جيل من الأطفال الذين يفكرون بشكل نقدي، ويحلمون بشجاعة، ويعيدون بناء مجتمعاتهم بثقة.
|
||||||
|
|
||||||
|
اليوم، “مدارس بلا حدود” ليست مجرد منظمة، بل حركة أمل ومرونة وتجديد - بقيادة شابين آمنا بقوة التعليم في تغيير الحياة، وبدعم شبكة من المعلمين والمبتكرين وقادة المجتمع المدني من جميع أنحاء العالم.
|
||||||
|
|
||||||
|
عملنا - تحويل التحديات إلى فرص
|
||||||
|
|
||||||
|
في “مدارس بلا حدود”، نكرس أنفسنا لمعالجة أزمات التعليم التي يواجهها الأطفال في غزة. باستخدام الابتكار والمرونة والالتزام العميق بإحداث التغيير، قمنا بتطوير برامج مؤثرة تجلب التعليم والأمل إلى الفئات الأكثر ضعفاً كما نعمل على توفير الاحتياجات الأسرية من جميع القطاعات من أجل خلق تكامل أسري لانتشال
|
||||||
|
|
||||||
|
إنجازاتنا حتى الآن:
|
||||||
|
1. الوصول إلى أكثر من 1500 طفل: أنشأنا مساحات تعليمية آمنة لـ 1020 طفلاً في 32 مخيماً، مما يتيح لهم التعلم واللعب والنمو.
|
||||||
|
2. إنشاء 10 نقاط تعليمية: توفر هذه المراكز التعليم والدعم النفسي والاجتماعي للأطفال المتضررين من النزاع.
|
||||||
|
3. مساحات التعليم الميدانية: حولنا الفصول الدراسية إلى الهواء الطلق، مما يخلق بيئات ديناميكية تشجع على الإبداع والتفكير النقدي.
|
||||||
|
4. رياض الأطفال المتنقلة: قدمنا وحدات متنقلة للتعليم المبكر، لتصل إلى الأطفال الصغار الأكثر حاجة.
|
||||||
|
5. دعم الأسر: وزعنا العديد من الطرود الغذائية والاغاثية، مما عزز استقرار أسر الأطفال، لأن التعليم يزدهر عندما تُلبى الاحتياجات الأساسية.
|
||||||
|
6. تمكين المعلمين: ندرب المعلمين بالأدوات والأساليب اللازمة للتعليم الفعّال في أوقات الأزمات، ليصبحوا قادة تغيير.
|
||||||
|
7. التعليم في المستشفيات: للأطفال المرضى، صممنا برامج مرنة لضمان استمرارية تعليمهم دون انقطاع.
|
||||||
|
|
||||||
|
طموحاتنا المستقبلية:
|
||||||
|
• توسيع نطاقنا: نهدف إلى دعم 5000 طفل بحلول عام 2030.
|
||||||
|
• تطوير نماذج تعليم مستدامة: نسعى لإنشاء برامج تعليمية مجتمعية قابلة للتوسع عالمياً.
|
||||||
|
• إنشاء مراكز تعليم دائمة: نحلم بمراكز حديثة للتعليم تدعم التنمية طويلة الأجل.
|
||||||
|
• تعزيز الدعم النفسي والاجتماعي: تحسين خدماتنا النفسية لعلاج آثار الصراع.
|
||||||
|
• بناء شراكات عالمية: التعاون مع منظمات دولية لجلب الموارد والخبرات لقضيتنا.
|
||||||
|
• الدعوة للتعليم في الأزمات: رفع الوعي بأهمية التعليم للأطفال في مناطق النزاع.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
دعمنا - طرق المساهمة
|
||||||
|
|
||||||
|
نحن نعتمد على الدعم السخي من الأفراد والمجتمعات والمنظمات.
|
||||||
|
|
||||||
|
طرق المساعدة:
|
||||||
|
1. التطوع معنا: يمكن أن يكون لوقتك ومهاراتك أثر مباشر.
|
||||||
|
2. التبرع: دعمنا مادياً يمكّننا من مواصلة برامجنا.
|
||||||
|
3. نشر الكلمة: شارك قصتنا لتوسيع أثرنا.
|
||||||
|
4. الشراكات: دعم الشركات والمؤسسات يساعد في الاستدامة.
|
||||||
|
|
||||||
|
زر التواصل:
|
||||||
|
• الاسم الكامل:
|
||||||
|
• الموقع:
|
||||||
|
• رقم الاتصال:
|
||||||
|
• البريد الإلكتروني:
|
||||||
|
• نوع الاستفسار:
|
||||||
|
[عام/ تطوع/ جمع التبرعات/ الشراكات]
|
||||||
|
|
||||||
|
معاً، يمكننا أن نجعل التعليم منارة أمل لكل طفل.
|
||||||
135
contact.html
135
contact.html
|
|
@ -230,99 +230,93 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Page Banner -->
|
<!-- Page Banner -->
|
||||||
<section class="page-banner" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/contact-banner.jpg') center/cover no-repeat;">
|
<section class="page-banner" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/banner-contact.jpg') center/cover no-repeat;">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Contact Us</h1>
|
<h1 data-translate="contactTitle">Contact Us</h1>
|
||||||
<p>Get in Touch With Our Team</p>
|
<p data-translate="contactSubtitle">Get in Touch With Our Team</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Contact Intro Section -->
|
<!-- Contact Intro -->
|
||||||
<section class="contact-intro">
|
<section class="contact-intro">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="contact-intro-content">
|
<div class="contact-intro-content">
|
||||||
<h2>We'd Love to Hear From You</h2>
|
<h2 data-translate="introTitle">We'd Love to Hear From You</h2>
|
||||||
<p>Whether you have questions about our programs, want to volunteer, or are interested in supporting our mission, we're here to help. Feel free to reach out using the contact form below, or through any of our communication channels.</p>
|
<p data-translate="introText">Whether you have questions about our programs, want to volunteer, or are interested in supporting our mission, we're here to help.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Contact Form Section -->
|
<!-- Contact Section -->
|
||||||
<section class="contact-section">
|
<section class="contact-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="contact-container">
|
<div class="contact-container">
|
||||||
<div class="contact-form-container">
|
<div class="contact-form-container">
|
||||||
<h2>Send Us a Message</h2>
|
<h2 data-translate="formTitle">Send Us a Message</h2>
|
||||||
<form id="contactForm">
|
<form id="contactForm">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="fullName">Full Name*</label>
|
<label data-translate="fullName">Full Name*</label>
|
||||||
<input type="text" id="fullName" name="fullName" class="form-control" required>
|
<input type="text" class="form-control" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="location">Location</label>
|
<label data-translate="location">Location</label>
|
||||||
<input type="text" id="location" name="location" class="form-control">
|
<input type="text" class="form-control">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="contactNumber">Contact Number</label>
|
<label data-translate="contactNumber">Contact Number</label>
|
||||||
<input type="tel" id="contactNumber" name="contactNumber" class="form-control">
|
<input type="tel" class="form-control">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="email">Email Address*</label>
|
<label data-translate="email">Email Address*</label>
|
||||||
<input type="email" id="email" name="email" class="form-control" required>
|
<input type="email" class="form-control" required>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="inquiryType">Inquiry Type*</label>
|
<label data-translate="inquiryType">Inquiry Type*</label>
|
||||||
<select id="inquiryType" name="inquiryType" class="form-select" required>
|
<select class="form-select" required>
|
||||||
<option value="">Select an option</option>
|
<option value="" data-translate="selectOption">Select an option</option>
|
||||||
<option value="general">General Inquiry</option>
|
<option value="general" data-translate="generalInquiry">General Inquiry</option>
|
||||||
<option value="volunteer">Volunteer Opportunities</option>
|
<option value="volunteer" data-translate="volunteer">Volunteer Opportunities</option>
|
||||||
<option value="fundraising">Fundraising</option>
|
<option value="fundraising" data-translate="fundraising">Fundraising</option>
|
||||||
<option value="donation">Donation</option>
|
<option value="donation" data-translate="donation">Donation</option>
|
||||||
<option value="partnership">Partnership</option>
|
<option value="partnership" data-translate="partnership">Partnership</option>
|
||||||
<option value="other">Other</option>
|
<option value="other" data-translate="other">Other</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="message">Message*</label>
|
<label data-translate="message">Message*</label>
|
||||||
<textarea id="message" name="message" class="form-control" required></textarea>
|
<textarea class="form-control" required></textarea>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
<button type="submit" class="btn btn-primary" data-translate="submitButton">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="contact-info">
|
<div class="contact-info">
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<h3>Contact Information</h3>
|
<h3 data-translate="contactInfo">Contact Information</h3>
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<div class="info-icon">
|
<i class="fas fa-envelope info-icon"></i>
|
||||||
<i class="fas fa-envelope"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h4>Email</h4>
|
<h4 data-translate="emailLabel">Email</h4>
|
||||||
<p>info@swb-project.org</p>
|
<p>info@swb-project.org</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<div class="info-icon">
|
<i class="fas fa-phone info-icon"></i>
|
||||||
<i class="fas fa-phone"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h4>Phone</h4>
|
<h4 data-translate="phoneLabel">Phone</h4>
|
||||||
<p>+972 111 111 111</p>
|
<p>+972 111 111 111</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
<div class="info-item">
|
||||||
<div class="info-icon">
|
<i class="fas fa-map-marker-alt info-icon"></i>
|
||||||
<i class="fas fa-map-marker-alt"></i>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h4>Operating Locations</h4>
|
<h4 data-translate="locationsLabel">Operating Locations</h4>
|
||||||
<p>Gaza - Rafah, Al-Bureij, Al-Nuseirat, Al-Zawaida, Deir Al-Balah, Khan Younis</p>
|
<p data-translate="locationsText">Gaza - Rafah, Al-Bureij, Al-Nuseirat, Al-Zawaida, Deir Al-Balah, Khan Younis</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="social-info">
|
<div class="social-info">
|
||||||
<h4>Connect With Us</h4>
|
<h4 data-translate="connectWithUs">Connect With Us</h4>
|
||||||
<div class="social-links">
|
<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://www.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://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.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>
|
<a href="https://www.linkedin.com/in/schools-w-b-b62342311"><i class="fab fa-linkedin-in"></i></a>
|
||||||
|
|
@ -330,8 +324,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<h3>Response Time</h3>
|
<h3 data-translate="responseTime">Response Time</h3>
|
||||||
<p>We strive to respond to all inquiries within 24-48 hours. For urgent matters, please contact us directly by phone.</p>
|
<p data-translate="responseTimeText">We strive to respond to all inquiries. For urgent matters, please contact us directly by phone.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -341,7 +335,7 @@
|
||||||
<!-- FAQ Section -->
|
<!-- FAQ Section -->
|
||||||
<section class="faq-section">
|
<section class="faq-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="text-center">Frequently Asked Questions</h2>
|
<h2 class="text-center" data-translate="faqTitle">Frequently Asked Questions</h2>
|
||||||
<div class="faq-container">
|
<div class="faq-container">
|
||||||
<div class="faq-item active">
|
<div class="faq-item active">
|
||||||
<div class="faq-question">
|
<div class="faq-question">
|
||||||
|
|
@ -392,15 +386,6 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Map Section -->
|
|
||||||
<section class="map-section">
|
|
||||||
<div class="container">
|
|
||||||
<h2 class="text-center">Our Areas of Operation</h2>
|
|
||||||
<div class="map-container">
|
|
||||||
<img src="images/gaza-map-detailed.jpg" alt="Map showing Schools Without Borders operational areas in Gaza" style="width: 100%; height: 100%; object-fit: cover;">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer>
|
<footer>
|
||||||
|
|
@ -408,16 +393,16 @@
|
||||||
<div class="footer-content">
|
<div class="footer-content">
|
||||||
<div class="footer-section">
|
<div class="footer-section">
|
||||||
<h3>Schools Without Borders</h3>
|
<h3>Schools Without Borders</h3>
|
||||||
<p>A non-profit organization supporting education and providing services to students affected by wars and conflicts.</p>
|
<p data-translate="footerAbout">A non-profit organization supporting education and providing services to students affected by wars and conflicts.</p>
|
||||||
<div class="social-links">
|
<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://www.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://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.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>
|
<a href="https://www.linkedin.com/in/schools-w-b-b62342311"><i class="fab fa-linkedin-in"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-section">
|
<div class="footer-section">
|
||||||
<h3>Quick Links</h3>
|
<h3 data-translate="quickLinks">Quick Links</h3>
|
||||||
<ul class="footer-links">
|
<ul class="footer-links">
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="index.html">Home</a></li>
|
||||||
<li><a href="about.html">About Us</a></li>
|
<li><a href="about.html">About Us</a></li>
|
||||||
|
|
@ -427,25 +412,47 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-section">
|
<div class="footer-section">
|
||||||
<h3>Contact Us</h3>
|
<h3 data-translate="contactUs">Contact Us</h3>
|
||||||
<p><i class="fas fa-envelope"></i> info@swb-project.org</p>
|
<p><i class="fas fa-envelope"></i> info@swb-project.org</p>
|
||||||
<p><i class="fas fa-phone"></i> +972 111 111 111</p>
|
<p><i class="fas fa-phone"></i> +972 111 111 111</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="copyright">
|
<div class="copyright" data-translate="copyright">
|
||||||
© 2025 Schools Without Borders. All Rights Reserved.
|
© 2025 Schools Without Borders. All Rights Reserved.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<!-- JavaScript for FAQ accordion -->
|
<!-- Scripts -->
|
||||||
|
<script src="js/translations/contact-translations.js"></script>
|
||||||
|
<script src="js/translations.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
// FAQ accordion functionality
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
const faqItems = document.querySelectorAll('.faq-item');
|
// Populate FAQ items
|
||||||
|
const faqContainer = document.querySelector('.faq-container');
|
||||||
|
const currentLang = document.documentElement.lang;
|
||||||
|
const faqs = translations[currentLang].faqQuestions;
|
||||||
|
|
||||||
|
for (let i = 1; i <= 5; i++) {
|
||||||
|
const faqItem = document.createElement('div');
|
||||||
|
faqItem.className = 'faq-item';
|
||||||
|
faqItem.innerHTML = `
|
||||||
|
<div class="faq-question">
|
||||||
|
<h3>${faqs['q' + i]}</h3>
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>${faqs['a' + i]}</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
faqContainer.appendChild(faqItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add click handlers
|
||||||
|
const faqItems = document.querySelectorAll('.faq-item');
|
||||||
faqItems.forEach(item => {
|
faqItems.forEach(item => {
|
||||||
const question = item.querySelector('.faq-question');
|
const question = item.querySelector('.faq-question');
|
||||||
|
|
||||||
question.addEventListener('click', () => {
|
question.addEventListener('click', () => {
|
||||||
item.classList.toggle('active');
|
item.classList.toggle('active');
|
||||||
});
|
});
|
||||||
|
|
|
||||||
511
css/styles.css
511
css/styles.css
|
|
@ -175,21 +175,18 @@ header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: white;
|
color: white;
|
||||||
margin-top: 80px;
|
text-align: center;
|
||||||
}
|
padding: 8rem 0;
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero h1 {
|
.hero h1 {
|
||||||
font-size: 3.5rem;
|
font-size: 4rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero p {
|
.hero p {
|
||||||
font-size: 1.2rem;
|
font-size: 1.5rem;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -304,3 +301,503 @@ footer {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: 2rem auto 0;
|
margin: 2rem auto 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* About page specific styles */
|
||||||
|
.our-story {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-content {
|
||||||
|
display: flex;
|
||||||
|
gap: 3rem;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-text {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-image {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-image img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--gray-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision-content {
|
||||||
|
display: flex;
|
||||||
|
gap: 3rem;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision-text {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision-image {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision-image img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.team {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-members {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-member {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-info {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-name {
|
||||||
|
color: var(--navy-blue);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-role {
|
||||||
|
color: var(--orange);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-bio {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links-member {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links-member a {
|
||||||
|
color: var(--navy-blue);
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links-member a:hover {
|
||||||
|
color: var(--orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.values {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--gray-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.values-content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.value i {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: var(--orange);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.join-us {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/join-us-bg.jpg') center/cover no-repeat;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.join-us h2 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive styles for About page */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.story-content,
|
||||||
|
.vision-content {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-image,
|
||||||
|
.vision-image {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-members {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Home page specific styles */
|
||||||
|
.mission {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--gray-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-content {
|
||||||
|
display: flex;
|
||||||
|
gap: 4rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-text {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-points {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-points ul li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-points i {
|
||||||
|
color: var(--orange);
|
||||||
|
margin-right: 1rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
text-align: center;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-number {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--orange);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.programs {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--gray-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-card {
|
||||||
|
background-color: white;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-card i {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: var(--orange);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
padding: 5rem 0;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta h2 {
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donation-options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 2rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donation-option {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donation-amount {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--orange);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive styles for home page */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mission-content {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
min-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donation-option {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact page specific styles */
|
||||||
|
.contact-intro {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--gray-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-intro-content {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-section {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form-container {
|
||||||
|
flex: 3;
|
||||||
|
min-width: 300px;
|
||||||
|
background-color: white;
|
||||||
|
padding: 2.5rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
flex: 2;
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.8rem;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-control:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--light-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.8rem;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 1rem;
|
||||||
|
background-color: white;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 10px center;
|
||||||
|
transition: border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--light-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea.form-control {
|
||||||
|
min-height: 150px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
background-color: white;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card h3 {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-icon {
|
||||||
|
color: var(--orange);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
width: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-info {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-info h4 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-section {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--gray-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-item {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-question {
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-question h3 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-question i {
|
||||||
|
color: var(--dark-blue);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-answer {
|
||||||
|
padding: 0 1.5rem 1.5rem;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-item.active .faq-question {
|
||||||
|
background-color: rgba(242, 145, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-item.active .faq-question i {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-section {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-container {
|
||||||
|
height: 400px;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-container iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive styles for contact page */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.contact-form-container,
|
||||||
|
.contact-info {
|
||||||
|
flex: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,192 @@
|
||||||
|
<!-- Add this just before the closing </body> tag -->
|
||||||
|
<script>
|
||||||
|
// Store translations
|
||||||
|
const translations = {
|
||||||
|
en: {
|
||||||
|
// Navigation
|
||||||
|
home: "Home",
|
||||||
|
aboutUs: "About Us",
|
||||||
|
ourWork: "Our Work",
|
||||||
|
supportUs: "Support Us",
|
||||||
|
contact: "Contact",
|
||||||
|
|
||||||
|
// Hero Section
|
||||||
|
heroTitle: "Our Children<br>Our Future",
|
||||||
|
heroSubtitle: "Bringing Education Where Schools Cannot Reach",
|
||||||
|
supportButton: "Support Our Mission",
|
||||||
|
|
||||||
|
// Mission Section
|
||||||
|
missionTitle: "Our Mission: Lighting the Future Through Education",
|
||||||
|
missionText1: "At Schools Without Borders, we envision a world where every child, even amidst war and displacement, has the opportunity to learn, dream, and grow. Our mission is to break the barriers of ignorance and illiteracy by offering innovative, accessible, and sustainable educational programs for children in conflict zones.",
|
||||||
|
missionText2: "Together, we can transform education into a beacon of hope for children in crises, lighting the way to a brighter future.",
|
||||||
|
missionPoint1: "Restore the right to education for all children",
|
||||||
|
missionPoint2: "Foster creativity, critical thinking, and resilience",
|
||||||
|
missionPoint3: "Build a generation capable of rebuilding their communities",
|
||||||
|
missionPoint4: "Provide psychosocial support to children affected by conflict",
|
||||||
|
|
||||||
|
// Impact Section
|
||||||
|
impactTitle: "Our Impact",
|
||||||
|
childrenReached: "Children Reached",
|
||||||
|
educationalCenters: "Educational Centers",
|
||||||
|
mobileLearning: "Mobile Learning Units",
|
||||||
|
dedicatedTeachers: "Dedicated Teachers",
|
||||||
|
|
||||||
|
// Programs Section
|
||||||
|
programsTitle: "Our Programs",
|
||||||
|
programsSubtitle: "Innovative educational solutions for children in conflict zones",
|
||||||
|
mobileSchools: "Mobile Schools",
|
||||||
|
mobileSchoolsDesc: "Education reaches children wherever they are, whether in camps or on the road.",
|
||||||
|
memoryRevival: "Memory Revival",
|
||||||
|
memoryRevivalDesc: "Small steps helping out-of-school children return to learning with renewed enthusiasm.",
|
||||||
|
educationalDrama: "Educational Drama",
|
||||||
|
educationalDramaDesc: "Theater and arts as tools to unlock children's creativity.",
|
||||||
|
mobileKindergarten: "Mobile Kindergarten",
|
||||||
|
mobileKindergartenDesc: "The first steps of education in a flexible and engaging environment.",
|
||||||
|
|
||||||
|
// CTA Section
|
||||||
|
ctaTitle: "Be Part of the Change",
|
||||||
|
ctaSubtitle: "Together, we can turn dreams into reality and provide education to children who need it most.",
|
||||||
|
donateButton: "Donate Now",
|
||||||
|
donation1: "Provides a school bag for a child",
|
||||||
|
donation2: "Funds a child's education for a month",
|
||||||
|
donation3: "Equips a mobile classroom",
|
||||||
|
|
||||||
|
// Footer
|
||||||
|
footerAbout: "A non-profit organization supporting education and providing services to students affected by wars and conflicts.",
|
||||||
|
quickLinks: "Quick Links",
|
||||||
|
contactUs: "Contact Us",
|
||||||
|
copyright: "© 2025 Schools Without Borders. All Rights Reserved."
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
// Navigation
|
||||||
|
home: "الرئيسية",
|
||||||
|
aboutUs: "من نحن",
|
||||||
|
ourWork: "عملنا",
|
||||||
|
supportUs: "ادعمنا",
|
||||||
|
contact: "اتصل بنا",
|
||||||
|
|
||||||
|
// Hero Section
|
||||||
|
heroTitle: "أطفالنا<br>مستقبلنا",
|
||||||
|
heroSubtitle: "نوصل التعليم حيث لا تصل المدارس",
|
||||||
|
supportButton: "ادعم مهمتنا",
|
||||||
|
|
||||||
|
// Mission Section
|
||||||
|
missionTitle: "مهمتنا: إنارة المستقبل من خلال التعليم",
|
||||||
|
missionText1: "في مدارس بلا حدود، نتطلع إلى عالم يتمتع فيه كل طفل، حتى في خضم الحرب والنزوح، بفرصة التعلم والحلم والنمو. مهمتنا هي كسر حواجز الجهل والأمية من خلال تقديم برامج تعليمية مبتكرة وميسرة ومستدامة للأطفال في مناطق النزاع.",
|
||||||
|
missionText2: "معاً، يمكننا تحويل التعليم إلى منارة أمل للأطفال في الأزمات، تنير الطريق نحو مستقبل أكثر إشراقاً.",
|
||||||
|
missionPoint1: "استعادة حق التعليم لجميع الأطفال",
|
||||||
|
missionPoint2: "تعزيز الإبداع والتفكير النقدي والمرونة",
|
||||||
|
missionPoint3: "بناء جيل قادر على إعادة بناء مجتمعاتهم",
|
||||||
|
missionPoint4: "تقديم الدعم النفسي والاجتماعي للأطفال المتأثرين بالنزاع",
|
||||||
|
|
||||||
|
// Impact Section
|
||||||
|
impactTitle: "تأثيرنا",
|
||||||
|
childrenReached: "طفل تم الوصول إليهم",
|
||||||
|
educationalCenters: "مركز تعليمي",
|
||||||
|
mobileLearning: "وحدة تعلم متنقلة",
|
||||||
|
dedicatedTeachers: "معلم متفاني",
|
||||||
|
|
||||||
|
// Programs Section
|
||||||
|
programsTitle: "برامجنا",
|
||||||
|
programsSubtitle: "حلول تعليمية مبتكرة للأطفال في مناطق النزاع",
|
||||||
|
mobileSchools: "المدارس المتنقلة",
|
||||||
|
mobileSchoolsDesc: "يصل التعليم إلى الأطفال أينما كانوا، سواء في المخيمات أو على الطريق.",
|
||||||
|
memoryRevival: "إحياء الذاكرة",
|
||||||
|
memoryRevivalDesc: "خطوات صغيرة تساعد الأطفال خارج المدرسة على العودة إلى التعلم بحماس متجدد.",
|
||||||
|
educationalDrama: "الدراما التعليمية",
|
||||||
|
educationalDramaDesc: "المسرح والفنون كأدوات لإطلاق إبداع الأطفال.",
|
||||||
|
mobileKindergarten: "روضة الأطفال المتنقلة",
|
||||||
|
mobileKindergartenDesc: "الخطوات الأولى للتعليم في بيئة مرنة وجذابة.",
|
||||||
|
|
||||||
|
// CTA Section
|
||||||
|
ctaTitle: "كن جزءاً من التغيير",
|
||||||
|
ctaSubtitle: "معاً، يمكننا تحويل الأحلام إلى حقيقة وتوفير التعليم للأطفال الأكثر احتياجاً.",
|
||||||
|
donateButton: "تبرع الآن",
|
||||||
|
donation1: "توفير حقيبة مدرسية لطفل",
|
||||||
|
donation2: "تمويل تعليم طفل لمدة شهر",
|
||||||
|
donation3: "تجهيز فصل دراسي متنقل",
|
||||||
|
|
||||||
|
// Footer
|
||||||
|
footerAbout: "منظمة غير ربحية تدعم التعليم وتقدم الخدمات للطلاب المتأثرين بالحروب والنزاعات.",
|
||||||
|
quickLinks: "روابط سريعة",
|
||||||
|
contactUs: "اتصل بنا",
|
||||||
|
copyright: "© 2025 مدارس بلا حدود. جميع الحقوق محفوظة."
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let currentLang = 'en';
|
||||||
|
|
||||||
|
function toggleLanguage() {
|
||||||
|
currentLang = currentLang === 'en' ? 'ar' : 'en';
|
||||||
|
|
||||||
|
// Update language indicator
|
||||||
|
document.getElementById('langText').textContent =
|
||||||
|
currentLang === 'en' ? 'EN / عربي' : 'عربي / EN';
|
||||||
|
|
||||||
|
// Update document direction
|
||||||
|
document.body.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
|
||||||
|
|
||||||
|
// Update all text content
|
||||||
|
// Navigation
|
||||||
|
document.querySelectorAll('.nav-links a').forEach(link => {
|
||||||
|
if (link.href.includes('index.html')) link.textContent = translations[currentLang].home;
|
||||||
|
if (link.href.includes('about.html')) link.textContent = translations[currentLang].aboutUs;
|
||||||
|
if (link.href.includes('work.html')) link.textContent = translations[currentLang].ourWork;
|
||||||
|
if (link.href.includes('support.html')) link.textContent = translations[currentLang].supportUs;
|
||||||
|
if (link.href.includes('contact.html')) link.textContent = translations[currentLang].contact;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hero Section
|
||||||
|
document.querySelector('.hero h1').innerHTML = translations[currentLang].heroTitle;
|
||||||
|
document.querySelector('.hero p').textContent = translations[currentLang].heroSubtitle;
|
||||||
|
document.querySelector('.hero .btn').textContent = translations[currentLang].supportButton;
|
||||||
|
|
||||||
|
// Mission Section
|
||||||
|
document.querySelector('.mission h2').textContent = translations[currentLang].missionTitle;
|
||||||
|
document.querySelectorAll('.mission-text p')[0].textContent = translations[currentLang].missionText1;
|
||||||
|
document.querySelectorAll('.mission-text p')[1].textContent = translations[currentLang].missionText2;
|
||||||
|
document.querySelectorAll('.mission-points li span')[0].textContent = translations[currentLang].missionPoint1;
|
||||||
|
document.querySelectorAll('.mission-points li span')[1].textContent = translations[currentLang].missionPoint2;
|
||||||
|
document.querySelectorAll('.mission-points li span')[2].textContent = translations[currentLang].missionPoint3;
|
||||||
|
document.querySelectorAll('.mission-points li span')[3].textContent = translations[currentLang].missionPoint4;
|
||||||
|
|
||||||
|
// Impact Section
|
||||||
|
document.querySelector('.impact h2').textContent = translations[currentLang].impactTitle;
|
||||||
|
document.querySelectorAll('.stat-desc')[0].textContent = translations[currentLang].childrenReached;
|
||||||
|
document.querySelectorAll('.stat-desc')[1].textContent = translations[currentLang].educationalCenters;
|
||||||
|
document.querySelectorAll('.stat-desc')[2].textContent = translations[currentLang].mobileLearning;
|
||||||
|
document.querySelectorAll('.stat-desc')[3].textContent = translations[currentLang].dedicatedTeachers;
|
||||||
|
|
||||||
|
// Programs Section
|
||||||
|
document.querySelector('.programs h2').textContent = translations[currentLang].programsTitle;
|
||||||
|
document.querySelector('.programs > .container > p').textContent = translations[currentLang].programsSubtitle;
|
||||||
|
|
||||||
|
const programCards = document.querySelectorAll('.program-card');
|
||||||
|
programCards[0].querySelector('h3').textContent = translations[currentLang].mobileSchools;
|
||||||
|
programCards[0].querySelector('p').textContent = translations[currentLang].mobileSchoolsDesc;
|
||||||
|
programCards[1].querySelector('h3').textContent = translations[currentLang].memoryRevival;
|
||||||
|
programCards[1].querySelector('p').textContent = translations[currentLang].memoryRevivalDesc;
|
||||||
|
programCards[2].querySelector('h3').textContent = translations[currentLang].educationalDrama;
|
||||||
|
programCards[2].querySelector('p').textContent = translations[currentLang].educationalDramaDesc;
|
||||||
|
programCards[3].querySelector('h3').textContent = translations[currentLang].mobileKindergarten;
|
||||||
|
programCards[3].querySelector('p').textContent = translations[currentLang].mobileKindergartenDesc;
|
||||||
|
|
||||||
|
// CTA Section
|
||||||
|
document.querySelector('.cta h2').textContent = translations[currentLang].ctaTitle;
|
||||||
|
document.querySelector('.cta > .container > p').textContent = translations[currentLang].ctaSubtitle;
|
||||||
|
document.querySelectorAll('.donation-option p')[0].textContent = translations[currentLang].donation1;
|
||||||
|
document.querySelectorAll('.donation-option p')[1].textContent = translations[currentLang].donation2;
|
||||||
|
document.querySelectorAll('.donation-option p')[2].textContent = translations[currentLang].donation3;
|
||||||
|
document.querySelector('.cta .btn').textContent = translations[currentLang].donateButton;
|
||||||
|
|
||||||
|
// Footer
|
||||||
|
document.querySelector('.footer-section p').textContent = translations[currentLang].footerAbout;
|
||||||
|
document.querySelectorAll('.footer-section h3')[1].textContent = translations[currentLang].quickLinks;
|
||||||
|
document.querySelectorAll('.footer-section h3')[2].textContent = translations[currentLang].contactUs;
|
||||||
|
document.querySelector('.copyright').textContent = translations[currentLang].copyright;
|
||||||
|
|
||||||
|
// Add CSS class for RTL styling when in Arabic
|
||||||
|
document.body.classList.toggle('rtl', currentLang === 'ar');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
497
index.html
497
index.html
|
|
@ -6,445 +6,7 @@
|
||||||
<title>Schools Without Borders - Bringing Education Where Schools Cannot Reach</title>
|
<title>Schools Without Borders - Bringing Education Where Schools Cannot Reach</title>
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet">
|
||||||
<style>
|
<link href="css/styles.css" rel="stylesheet">
|
||||||
/* Global styles */
|
|
||||||
:root {
|
|
||||||
--navy-blue: #1B1E3B;
|
|
||||||
--orange: #F29100;
|
|
||||||
--dark-blue: #115C94;
|
|
||||||
--light-blue: #259ED5;
|
|
||||||
--gray-bg: #f5f5f5;
|
|
||||||
--white: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 90%;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4 {
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
color: var(--navy-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--dark-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.8rem 1.5rem;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background-color: var(--orange);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background-color: #d98100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background-color: var(--dark-blue);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background-color: #0e4a78;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header styles */
|
|
||||||
header {
|
|
||||||
background-color: var(--navy-blue);
|
|
||||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1rem 0;
|
|
||||||
background-color: var(--navy-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo img {
|
|
||||||
height: 120px;
|
|
||||||
margin-right: 15px;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo span {
|
|
||||||
color: var(--white);
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
font-family: 'Montserrat', sans-serif;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links li {
|
|
||||||
margin-left: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--white);
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a:hover {
|
|
||||||
color: var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-toggle i {
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-menu {
|
|
||||||
display: none;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hero section */
|
|
||||||
.hero {
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/api/placeholder/1200/800');
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
color: white;
|
|
||||||
margin-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-content {
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero h1 {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero p {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mission section */
|
|
||||||
.mission {
|
|
||||||
padding: 5rem 0;
|
|
||||||
background-color: var(--gray-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mission-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mission-text {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mission-points {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mission-points ul li {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mission-points i {
|
|
||||||
color: var(--orange);
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
margin-top: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Impact numbers section */
|
|
||||||
.impact {
|
|
||||||
padding: 5rem 0;
|
|
||||||
background-color: var(--navy-blue);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.impact h2 {
|
|
||||||
color: white;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-around;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item {
|
|
||||||
margin: 1rem;
|
|
||||||
flex: 1;
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-number {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--orange);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Programs section */
|
|
||||||
.programs {
|
|
||||||
padding: 5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-cards {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 2rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-card {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 250px;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
|
||||||
padding: 2rem;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-card i {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
color: var(--dark-blue);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CTA section */
|
|
||||||
.cta {
|
|
||||||
padding: 5rem 0;
|
|
||||||
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('/api/placeholder/1200/800') center/cover no-repeat;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cta h2 {
|
|
||||||
color: white;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.donation-options {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 2rem;
|
|
||||||
margin: 3rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.donation-option {
|
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.donation-amount {
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--orange);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer */
|
|
||||||
footer {
|
|
||||||
background-color: var(--navy-blue);
|
|
||||||
color: white;
|
|
||||||
padding: 4rem 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 3rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section h3 {
|
|
||||||
color: white;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links li {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a {
|
|
||||||
color: #ccc;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a:hover {
|
|
||||||
color: var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links a {
|
|
||||||
display: inline-block;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links a:hover {
|
|
||||||
background-color: var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyright {
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 2rem;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive styles */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.nav-links {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero h1 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item {
|
|
||||||
min-width: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add RTL support */
|
|
||||||
.rtl {
|
|
||||||
direction: rtl;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rtl .nav-links li {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rtl .language-toggle i {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure flex items reverse in RTL */
|
|
||||||
.rtl .navbar,
|
|
||||||
.rtl .mission-content,
|
|
||||||
.rtl .program-cards,
|
|
||||||
.rtl .footer-content {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
|
|
@ -630,62 +192,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="js/translations.js"></script>
|
||||||
|
|
||||||
<!-- Add this just before the closing </body> tag -->
|
|
||||||
<script>
|
|
||||||
// Store translations
|
|
||||||
const translations = {
|
|
||||||
en: {
|
|
||||||
home: "Home",
|
|
||||||
aboutUs: "About Us",
|
|
||||||
ourWork: "Our Work",
|
|
||||||
supportUs: "Support Us",
|
|
||||||
contact: "Contact",
|
|
||||||
heroTitle: "Our Children<br>Our Future",
|
|
||||||
heroSubtitle: "Bringing Education Where Schools Cannot Reach",
|
|
||||||
supportButton: "Support Our Mission",
|
|
||||||
// Add more translations as needed
|
|
||||||
},
|
|
||||||
ar: {
|
|
||||||
home: "الرئيسية",
|
|
||||||
aboutUs: "من نحن",
|
|
||||||
ourWork: "عملنا",
|
|
||||||
supportUs: "ادعمنا",
|
|
||||||
contact: "اتصل بنا",
|
|
||||||
heroTitle: "أطفالنا<br>مستقبلنا",
|
|
||||||
heroSubtitle: "نوصل التعليم حيث لا تصل المدارس",
|
|
||||||
supportButton: "ادعم مهمتنا",
|
|
||||||
// Add more translations as needed
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let currentLang = 'en';
|
|
||||||
|
|
||||||
function toggleLanguage() {
|
|
||||||
currentLang = currentLang === 'en' ? 'ar' : 'en';
|
|
||||||
|
|
||||||
// Update language indicator
|
|
||||||
document.getElementById('langText').textContent =
|
|
||||||
currentLang === 'en' ? 'EN / عربي' : 'عربي / EN';
|
|
||||||
|
|
||||||
// Update document direction
|
|
||||||
document.body.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
|
|
||||||
|
|
||||||
// Update navigation links
|
|
||||||
document.querySelector('a[href="index.html"]').textContent = translations[currentLang].home;
|
|
||||||
document.querySelector('a[href="about.html"]').textContent = translations[currentLang].aboutUs;
|
|
||||||
document.querySelector('a[href="work.html"]').textContent = translations[currentLang].ourWork;
|
|
||||||
document.querySelector('a[href="support.html"]').textContent = translations[currentLang].supportUs;
|
|
||||||
document.querySelector('a[href="contact.html"]').textContent = translations[currentLang].contact;
|
|
||||||
|
|
||||||
// Update hero section
|
|
||||||
document.querySelector('.hero h1').innerHTML = translations[currentLang].heroTitle;
|
|
||||||
document.querySelector('.hero p').textContent = translations[currentLang].heroSubtitle;
|
|
||||||
document.querySelector('.hero .btn').textContent = translations[currentLang].supportButton;
|
|
||||||
|
|
||||||
// Add CSS class for RTL styling when in Arabic
|
|
||||||
document.body.classList.toggle('rtl', currentLang === 'ar');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
// Store translations
|
||||||
|
const translations = {
|
||||||
|
en: {
|
||||||
|
// Navigation
|
||||||
|
home: "Home",
|
||||||
|
aboutUs: "About Us",
|
||||||
|
ourWork: "Our Work",
|
||||||
|
supportUs: "Support Us",
|
||||||
|
contact: "Contact",
|
||||||
|
|
||||||
|
// Shared elements
|
||||||
|
footerAbout: "A non-profit organization supporting education and providing services to students affected by wars and conflicts.",
|
||||||
|
quickLinks: "Quick Links",
|
||||||
|
contactUs: "Contact Us",
|
||||||
|
copyright: "© 2025 Schools Without Borders. All Rights Reserved.",
|
||||||
|
|
||||||
|
// Import page-specific translations from your arabic_translations.txt
|
||||||
|
...homeTranslations.en,
|
||||||
|
...aboutTranslations.en
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
// Navigation
|
||||||
|
home: "الرئيسية",
|
||||||
|
aboutUs: "من نحن",
|
||||||
|
ourWork: "عملنا",
|
||||||
|
supportUs: "ادعمنا",
|
||||||
|
contact: "اتصل بنا",
|
||||||
|
|
||||||
|
// Shared elements
|
||||||
|
footerAbout: "منظمة غير ربحية تدعم التعليم وتقدم الخدمات للطلاب المتأثرين بالحروب والنزاعات.",
|
||||||
|
quickLinks: "روابط سريعة",
|
||||||
|
contactUs: "اتصل بنا",
|
||||||
|
copyright: "© 2025 مدارس بلا حدود. جميع الحقوق محفوظة.",
|
||||||
|
|
||||||
|
// Import page-specific translations from your arabic_translations.txt
|
||||||
|
...homeTranslations.ar,
|
||||||
|
...aboutTranslations.ar
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
let currentLang = localStorage.getItem('language') || 'en';
|
||||||
|
|
||||||
|
function toggleLanguage() {
|
||||||
|
currentLang = currentLang === 'en' ? 'ar' : 'en';
|
||||||
|
localStorage.setItem('language', currentLang);
|
||||||
|
|
||||||
|
// Update language indicator
|
||||||
|
document.querySelector('.language-toggle span').textContent =
|
||||||
|
currentLang === 'en' ? 'EN / عربي' : 'عربي / EN';
|
||||||
|
|
||||||
|
// Update document direction
|
||||||
|
document.body.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
|
||||||
|
document.body.classList.toggle('rtl', currentLang === 'ar');
|
||||||
|
|
||||||
|
// Update navigation
|
||||||
|
updateNavigation();
|
||||||
|
|
||||||
|
// Update footer
|
||||||
|
updateFooter();
|
||||||
|
|
||||||
|
// Update page-specific content
|
||||||
|
const pageName = window.location.pathname.split('/').pop().split('.')[0];
|
||||||
|
if (typeof window[`update${capitalize(pageName)}Page`] === 'function') {
|
||||||
|
window[`update${capitalize(pageName)}Page`]();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateNavigation() {
|
||||||
|
document.querySelectorAll('.nav-links a').forEach(link => {
|
||||||
|
if (link.href.includes('index.html')) link.textContent = translations[currentLang].home;
|
||||||
|
if (link.href.includes('about.html')) link.textContent = translations[currentLang].aboutUs;
|
||||||
|
if (link.href.includes('work.html')) link.textContent = translations[currentLang].ourWork;
|
||||||
|
if (link.href.includes('support.html')) link.textContent = translations[currentLang].supportUs;
|
||||||
|
if (link.href.includes('contact.html')) link.textContent = translations[currentLang].contact;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateFooter() {
|
||||||
|
document.querySelector('.footer-section p').textContent = translations[currentLang].footerAbout;
|
||||||
|
document.querySelectorAll('.footer-section h3')[1].textContent = translations[currentLang].quickLinks;
|
||||||
|
document.querySelectorAll('.footer-section h3')[2].textContent = translations[currentLang].contactUs;
|
||||||
|
document.querySelector('.copyright').textContent = translations[currentLang].copyright;
|
||||||
|
}
|
||||||
|
|
||||||
|
function capitalize(string) {
|
||||||
|
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize language on page load
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
document.body.dir = currentLang === 'ar' ? 'rtl' : 'ltr';
|
||||||
|
document.body.classList.toggle('rtl', currentLang === 'ar');
|
||||||
|
document.querySelector('.language-toggle span').textContent =
|
||||||
|
currentLang === 'en' ? 'EN / عربي' : 'عربي / EN';
|
||||||
|
|
||||||
|
// Update all content
|
||||||
|
toggleLanguage();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add click handler to language toggle
|
||||||
|
document.querySelector('.language-toggle').addEventListener('click', toggleLanguage);
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
const aboutTranslations = {
|
||||||
|
en: {
|
||||||
|
// Page Banner
|
||||||
|
aboutTitle: "About Us",
|
||||||
|
aboutSubtitle: "Know Our Story & Vision",
|
||||||
|
|
||||||
|
// Story Section
|
||||||
|
storyTitle: "Nour and Abdullah: A Story of Hope and Renewal",
|
||||||
|
storyText: "In the heart of Gaza, Nour, a 24-year-old aspiring lawyer, and Abdullah, a 25-year-old biomedical engineer and community activist, recognized the devastating impact of war and displacement on children's education...",
|
||||||
|
|
||||||
|
// Vision Section
|
||||||
|
visionTitle: "Our Vision",
|
||||||
|
visionText: "We aim to provide a safe and inclusive learning environment that allows students to continue their education under all circumstances..."
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
// Page Banner
|
||||||
|
aboutTitle: "من نحن",
|
||||||
|
aboutSubtitle: "اعرف قصتنا ورؤيتنا",
|
||||||
|
|
||||||
|
// Story Section
|
||||||
|
storyTitle: "نور وعبد الله: قصة أمل وتجديد",
|
||||||
|
storyText: "في قلب غزة، أدركت نور، وهي محامية طموحة تبلغ من العمر 24 عاماً، وعبد الله، وهو مهندس طب حيوي وناشط مجتمعي مفعم بالعطاء يبلغ من العمر 25 عاماً، التأثير المدمر للحرب والنزوح على تعليم الأطفال...",
|
||||||
|
|
||||||
|
// Vision Section
|
||||||
|
visionTitle: "رؤيتنا",
|
||||||
|
visionText: "نهدف إلى توفير بيئة تعليمية آمنة وشاملة تتيح للطلاب مواصلة تعليمهم في جميع الظروف..."
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
const contactTranslations = {
|
||||||
|
en: {
|
||||||
|
// Page Banner
|
||||||
|
contactTitle: "Contact Us",
|
||||||
|
contactSubtitle: "Get in Touch With Our Team",
|
||||||
|
|
||||||
|
// Intro Section
|
||||||
|
introTitle: "We'd Love to Hear From You",
|
||||||
|
introText: "Whether you have questions about our programs, want to volunteer, or are interested in supporting our mission, we're here to help. Feel free to reach out using the contact form below, or through any of our communication channels.",
|
||||||
|
|
||||||
|
// Contact Form
|
||||||
|
formTitle: "Send Us a Message",
|
||||||
|
fullName: "Full Name*",
|
||||||
|
location: "Location",
|
||||||
|
contactNumber: "Contact Number",
|
||||||
|
email: "Email Address*",
|
||||||
|
inquiryType: "Inquiry Type*",
|
||||||
|
message: "Message*",
|
||||||
|
submitButton: "Submit",
|
||||||
|
|
||||||
|
// Inquiry Types
|
||||||
|
selectOption: "Select an option",
|
||||||
|
generalInquiry: "General Inquiry",
|
||||||
|
volunteer: "Volunteer Opportunities",
|
||||||
|
fundraising: "Fundraising",
|
||||||
|
donation: "Donation",
|
||||||
|
partnership: "Partnership",
|
||||||
|
other: "Other",
|
||||||
|
|
||||||
|
// Contact Info
|
||||||
|
contactInfo: "Contact Information",
|
||||||
|
emailLabel: "Email",
|
||||||
|
phoneLabel: "Phone",
|
||||||
|
locationsLabel: "Operating Locations",
|
||||||
|
locationsText: "Gaza - Rafah, Al-Bureij, Al-Nuseirat, Al-Zawaida, Deir Al-Balah, Khan Younis",
|
||||||
|
connectWithUs: "Connect With Us",
|
||||||
|
responseTime: "Response Time",
|
||||||
|
responseTimeText: "We strive to respond to all inquiries within 24-48 hours. For urgent matters, please contact us directly by phone.",
|
||||||
|
|
||||||
|
// FAQ Section
|
||||||
|
faqTitle: "Frequently Asked Questions",
|
||||||
|
faqQuestions: {
|
||||||
|
q1: "How can I volunteer with Schools Without Borders?",
|
||||||
|
a1: "You can volunteer with us by filling out the contact form above and selecting \"Volunteer Opportunities\" as your inquiry type. Our team will then reach out to discuss how your skills and experience can best support our mission. We offer both on-site and remote volunteering opportunities.",
|
||||||
|
|
||||||
|
q2: "How is my donation used?",
|
||||||
|
a2: "Your donations directly support our educational programs for children affected by conflict. Funds are used to purchase educational materials, support teacher training, maintain mobile classrooms, and provide psychosocial support. We maintain transparency in our financial reporting and can provide detailed information upon request.",
|
||||||
|
|
||||||
|
q3: "Can I donate educational materials instead of money?",
|
||||||
|
a3: "Yes, we accept donations of educational materials such as books, stationery, and teaching aids. Please contact us beforehand to discuss specific needs and logistics for delivering these materials to our operational areas.",
|
||||||
|
|
||||||
|
q4: "How can my organization partner with Schools Without Borders?",
|
||||||
|
a4: "We welcome partnerships with organizations that share our commitment to education in crisis contexts. Partnerships can take many forms, including financial support, resource sharing, joint programs, or technical assistance. Please contact us to explore collaboration opportunities that align with our mutual goals.",
|
||||||
|
|
||||||
|
q5: "Are donations tax-deductible?",
|
||||||
|
a5: "Schools Without Borders is a registered non-profit organization. The tax-deductibility of donations depends on your country's regulations. We can provide receipts and documentation for all donations. Please consult with a tax professional in your jurisdiction regarding tax benefits."
|
||||||
|
},
|
||||||
|
|
||||||
|
// Map Section
|
||||||
|
mapTitle: "Our Areas of Operation"
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
// Page Banner
|
||||||
|
contactTitle: "اتصل بنا",
|
||||||
|
contactSubtitle: "تواصل مع فريقنا",
|
||||||
|
|
||||||
|
// Intro Section
|
||||||
|
introTitle: "نود أن نسمع منك",
|
||||||
|
introText: "سواء كان لديك أسئلة حول برامجنا، أو ترغب في التطوع، أو مهتم بدعم مهمتنا، نحن هنا للمساعدة. لا تتردد في التواصل معنا باستخدام النموذج أدناه، أو من خلال أي من قنوات الاتصال لدينا.",
|
||||||
|
|
||||||
|
// Contact Form
|
||||||
|
formTitle: "أرسل لنا رسالة",
|
||||||
|
fullName: "الاسم الكامل*",
|
||||||
|
location: "الموقع",
|
||||||
|
contactNumber: "رقم الاتصال",
|
||||||
|
email: "البريد الإلكتروني*",
|
||||||
|
inquiryType: "نوع الاستفسار*",
|
||||||
|
message: "الرسالة*",
|
||||||
|
submitButton: "إرسال",
|
||||||
|
|
||||||
|
// Inquiry Types
|
||||||
|
selectOption: "اختر خياراً",
|
||||||
|
generalInquiry: "استفسار عام",
|
||||||
|
volunteer: "فرص التطوع",
|
||||||
|
fundraising: "جمع التبرعات",
|
||||||
|
donation: "تبرع",
|
||||||
|
partnership: "شراكة",
|
||||||
|
other: "أخرى",
|
||||||
|
|
||||||
|
// Contact Info
|
||||||
|
contactInfo: "معلومات الاتصال",
|
||||||
|
emailLabel: "البريد الإلكتروني",
|
||||||
|
phoneLabel: "الهاتف",
|
||||||
|
locationsLabel: "مواقع العمل",
|
||||||
|
locationsText: "غزة - رفح، البريج، النصيرات، الزوايدة، دير البلح، خان يونس",
|
||||||
|
connectWithUs: "تواصل معنا",
|
||||||
|
responseTime: "وقت الرد",
|
||||||
|
responseTimeText: "نسعى للرد على جميع الاستفسارات خلال 24-48 ساعة. للأمور العاجلة، يرجى الاتصال بنا مباشرة عبر الهاتف.",
|
||||||
|
|
||||||
|
// FAQ Section
|
||||||
|
faqTitle: "الأسئلة الشائعة",
|
||||||
|
faqQuestions: {
|
||||||
|
q1: "كيف يمكنني التطوع مع مدارس بلا حدود؟",
|
||||||
|
a1: "يمكنك التطوع معنا من خلال ملء نموذج الاتصال أعلاه واختيار \"فرص التطوع\" كنوع الاستفسار. سيتواصل فريقنا معك لمناقشة كيف يمكن لمهاراتك وخبراتك أن تدعم مهمتنا بشكل أفضل. نقدم فرص تطوع ميدانية وعن بعد.",
|
||||||
|
|
||||||
|
q2: "كيف يتم استخدام تبرعي؟",
|
||||||
|
a2: "تدعم تبرعاتك مباشرة برامجنا التعليمية للأطفال المتأثرين بالنزاع. يتم استخدام الأموال لشراء المواد التعليمية، ودعم تدريب المعلمين، وصيانة الفصول المتنقلة، وتقديم الدعم النفسي والاجتماعي. نحافظ على الشفافية في تقاريرنا المالية ويمكننا تقديم معلومات مفصلة عند الطلب.",
|
||||||
|
|
||||||
|
q3: "هل يمكنني التبرع بمواد تعليمية بدلاً من المال؟",
|
||||||
|
a3: "نعم، نقبل التبرعات بالمواد التعليمية مثل الكتب والقرطاسية والوسائل التعليمية. يرجى الاتصال بنا مسبقاً لمناقشة الاحتياجات المحددة والخدمات اللوجستية لتوصيل هذه المواد إلى مناطق عملنا.",
|
||||||
|
|
||||||
|
q4: "كيف يمكن لمؤسستي الشراكة مع مدارس بلا حدود؟",
|
||||||
|
a4: "نرحب بالشراكات مع المؤسسات التي تشاركنا التزامنا بالتعليم في سياقات الأزمات. يمكن أن تأخذ الشراكات أشكالاً عديدة، بما في ذلك الدعم المالي، ومشاركة الموارد، والبرامج المشتركة، أو المساعدة التقنية. يرجى الاتصال بنا لاستكشاف فرص التعاون التي تتوافق مع أهدافنا المشتركة.",
|
||||||
|
|
||||||
|
q5: "هل التبرعات معفاة من الضرائب؟",
|
||||||
|
a5: "مدارس بلا حدود هي منظمة غير ربحية مسجلة. تعتمد الإعفاءات الضريبية للتبرعات على لوائح بلدك. يمكننا تقديم إيصالات ووثائق لجميع التبرعات. يرجى استشارة متخصص ضرائب في منطقتك بخصوص المزايا الضريبية."
|
||||||
|
},
|
||||||
|
|
||||||
|
// Map Section
|
||||||
|
mapTitle: "مناطق عملنا"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
const homeTranslations = {
|
||||||
|
en: {
|
||||||
|
// Hero Section
|
||||||
|
heroTitle: "Our Children<br>Our Future",
|
||||||
|
heroSubtitle: "Bringing Education Where Schools Cannot Reach",
|
||||||
|
supportButton: "Support Our Mission",
|
||||||
|
|
||||||
|
// Mission Section
|
||||||
|
missionTitle: "Our Mission: Lighting the Future Through Education",
|
||||||
|
missionText1: "At Schools Without Borders, we envision a world where every child, even amidst war and displacement, has the opportunity to learn, dream, and grow. Our mission is to break the barriers of ignorance and illiteracy by offering innovative, accessible, and sustainable educational programs for children in conflict zones.",
|
||||||
|
missionText2: "Together, we can transform education into a beacon of hope for children in crises, lighting the way to a brighter future.",
|
||||||
|
missionPoint1: "Restore the right to education for all children",
|
||||||
|
missionPoint2: "Foster creativity, critical thinking, and resilience",
|
||||||
|
missionPoint3: "Build a generation capable of rebuilding their communities",
|
||||||
|
|
||||||
|
// CTA Section
|
||||||
|
ctaTitle: "Be Part of the Change",
|
||||||
|
ctaSubtitle: "Together, we can turn dreams into reality and provide education to children who need it most.",
|
||||||
|
donation1: "Provides a school bag for a child",
|
||||||
|
donation2: "Funds a child's education for a month",
|
||||||
|
donation3: "Equips a mobile classroom",
|
||||||
|
donateButton: "Donate Now"
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
// Hero Section
|
||||||
|
heroTitle: "أطفالنا<br>مستقبلنا",
|
||||||
|
heroSubtitle: "نوصل التعليم حيث لا تصل المدارس",
|
||||||
|
supportButton: "ادعم مهمتنا",
|
||||||
|
|
||||||
|
// Mission Section
|
||||||
|
missionTitle: "مهمتنا: إضاءة المستقبل من خلال التعليم",
|
||||||
|
missionText1: "في مدارس بلا حدود، نتصور عالماً يحصل فيه كل طفل، حتى وسط الحروب والنزوح، على فرصة للتعلم والحلم والنمو. مهمتنا هي كسر حواجز الجهل والأمية من خلال تقديم برامج تعليمية مبتكرة، سهلة الوصول، ومستدامة للأطفال في مناطق النزاع.",
|
||||||
|
missionText2: "معاً، يمكننا أن نحول التعليم إلى منارة أمل للأطفال في الأزمات، مضيئين الطريق نحو مستقبل أكثر إشراقاً.",
|
||||||
|
missionPoint1: "استعادة حق التعليم لجميع الأطفال",
|
||||||
|
missionPoint2: "تعزيز الإبداع والتفكير النقدي والمرونة",
|
||||||
|
missionPoint3: "بناء جيل قادر على إعادة بناء مجتمعاته",
|
||||||
|
|
||||||
|
// CTA Section
|
||||||
|
ctaTitle: "كن جزءاً من التغيير",
|
||||||
|
ctaSubtitle: "معاً، يمكننا تحويل الأحلام إلى حقيقة وتوفير التعليم للأطفال الأكثر احتياجاً",
|
||||||
|
donation1: "يوفر حقيبة مدرسية لطفل",
|
||||||
|
donation2: "يمول تعليم طفل لمدة شهر",
|
||||||
|
donation3: "يجهز فصلاً دراسياً متنقلاً",
|
||||||
|
donateButton: "تبرع الآن"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
const supportTranslations = {
|
||||||
|
en: {
|
||||||
|
// Page Banner
|
||||||
|
supportTitle: "Support Us",
|
||||||
|
supportSubtitle: "Join Us in Making Education Possible",
|
||||||
|
|
||||||
|
// Ways to Help Section
|
||||||
|
waysTitle: "Ways You Can Help",
|
||||||
|
waysSubtitle: "Every contribution, no matter how small, helps us continue our mission",
|
||||||
|
|
||||||
|
// Donation Options
|
||||||
|
donateTitle: "Make a Donation",
|
||||||
|
donateText: "Your financial support helps us maintain and expand our educational programs",
|
||||||
|
oneTime: "One-Time Donation",
|
||||||
|
monthly: "Monthly Donation",
|
||||||
|
|
||||||
|
// Donation Amounts
|
||||||
|
amount50: {
|
||||||
|
title: "$50",
|
||||||
|
description: "Provides educational materials for one child"
|
||||||
|
},
|
||||||
|
amount100: {
|
||||||
|
title: "$100",
|
||||||
|
description: "Supports a teacher's training"
|
||||||
|
},
|
||||||
|
amount250: {
|
||||||
|
title: "$250",
|
||||||
|
description: "Funds a mobile classroom for a week"
|
||||||
|
},
|
||||||
|
amount500: {
|
||||||
|
title: "$500",
|
||||||
|
description: "Sponsors a child's education for a year"
|
||||||
|
},
|
||||||
|
|
||||||
|
// Volunteer Section
|
||||||
|
volunteerTitle: "Volunteer With Us",
|
||||||
|
volunteerText: "Share your skills and time to make a difference in children's lives",
|
||||||
|
|
||||||
|
// Partnership Section
|
||||||
|
partnerTitle: "Partner With Us",
|
||||||
|
partnerText: "Organizations can support our mission through various partnership opportunities",
|
||||||
|
|
||||||
|
// Impact Section
|
||||||
|
impactTitle: "Your Impact",
|
||||||
|
impactText: "See how your support transforms lives and creates lasting change",
|
||||||
|
|
||||||
|
// Call to Action
|
||||||
|
ctaTitle: "Ready to Make a Difference?",
|
||||||
|
ctaText: "Join us in bringing education to children affected by conflict"
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
// Arabic translations
|
||||||
|
supportTitle: "ادعمنا",
|
||||||
|
supportSubtitle: "انضم إلينا في جعل التعليم ممكناً",
|
||||||
|
|
||||||
|
waysTitle: "طرق المساعدة",
|
||||||
|
waysSubtitle: "كل مساهمة، مهما كانت صغيرة، تساعدنا في مواصلة مهمتنا",
|
||||||
|
|
||||||
|
donateTitle: "قدم تبرعاً",
|
||||||
|
donateText: "دعمك المالي يساعدنا في الحفاظ على برامجنا التعليمية وتوسيعها",
|
||||||
|
oneTime: "تبرع لمرة واحدة",
|
||||||
|
monthly: "تبرع شهري",
|
||||||
|
|
||||||
|
amount50: {
|
||||||
|
title: "50 دولار",
|
||||||
|
description: "يوفر مواد تعليمية لطفل واحد"
|
||||||
|
},
|
||||||
|
amount100: {
|
||||||
|
title: "100 دولار",
|
||||||
|
description: "يدعم تدريب معلم"
|
||||||
|
},
|
||||||
|
amount250: {
|
||||||
|
title: "250 دولار",
|
||||||
|
description: "يمول فصلاً دراسياً متنقلاً لمدة أسبوع"
|
||||||
|
},
|
||||||
|
amount500: {
|
||||||
|
title: "500 دولار",
|
||||||
|
description: "يكفل تعليم طفل لمدة عام"
|
||||||
|
},
|
||||||
|
|
||||||
|
volunteerTitle: "تطوع معنا",
|
||||||
|
volunteerText: "شارك مهاراتك ووقتك لإحداث فرق في حياة الأطفال",
|
||||||
|
|
||||||
|
partnerTitle: "كن شريكاً معنا",
|
||||||
|
partnerText: "يمكن للمنظمات دعم مهمتنا من خلال فرص شراكة متنوعة",
|
||||||
|
|
||||||
|
impactTitle: "تأثيرك",
|
||||||
|
impactText: "شاهد كيف يحول دعمك الحياة ويخلق تغييراً دائماً",
|
||||||
|
|
||||||
|
ctaTitle: "مستعد لإحداث فرق؟",
|
||||||
|
ctaText: "انضم إلينا في إيصال التعليم للأطفال المتأثرين بالنزاع"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
const workTranslations = {
|
||||||
|
en: {
|
||||||
|
// Page Banner
|
||||||
|
workTitle: "Our Work",
|
||||||
|
workSubtitle: "Turning Challenges into Opportunities",
|
||||||
|
|
||||||
|
// Achievements Section
|
||||||
|
achievementsTitle: "What We've Achieved So Far",
|
||||||
|
achievementsText: "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.",
|
||||||
|
|
||||||
|
// Stats
|
||||||
|
childrenReached: "Children reached with educational opportunities",
|
||||||
|
campsSupported: "Camps receiving educational support",
|
||||||
|
centersEstablished: "Educational centers established",
|
||||||
|
teachersTrained: "Dedicated teachers trained",
|
||||||
|
|
||||||
|
// Programs Section
|
||||||
|
programsTitle: "Our Innovative Programs",
|
||||||
|
programsIntro: "Through creative and adaptive educational solutions, we bring learning opportunities to children even in the most challenging environments.",
|
||||||
|
|
||||||
|
// Program Cards
|
||||||
|
mobileSchools: {
|
||||||
|
title: "Mobile Schools",
|
||||||
|
description: "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."
|
||||||
|
},
|
||||||
|
memoryRevival: {
|
||||||
|
title: "Memory Revival",
|
||||||
|
description: "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."
|
||||||
|
},
|
||||||
|
educationalDrama: {
|
||||||
|
title: "Educational Drama",
|
||||||
|
description: "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."
|
||||||
|
},
|
||||||
|
mobileKindergarten: {
|
||||||
|
title: "Mobile Kindergarten",
|
||||||
|
description: "Our early childhood education program brings structured play-based learning to the youngest children affected by conflict, creating nurturing environments for developing foundational skills."
|
||||||
|
},
|
||||||
|
hospitalLearning: {
|
||||||
|
title: "Hospital-Based Learning",
|
||||||
|
description: "For children receiving medical treatment, our Hospital-Based Learning program brings educational activities directly to bedsides, ensuring hospitalization doesn't interrupt their learning journey."
|
||||||
|
},
|
||||||
|
|
||||||
|
// Gallery Section
|
||||||
|
galleryTitle: "Our Impact in Pictures",
|
||||||
|
gallerySubtitle: "Images that tell the story of our work and the resilience of the children we serve.",
|
||||||
|
|
||||||
|
// Impact Stories Section
|
||||||
|
storiesTitle: "Stories of Impact",
|
||||||
|
storiesSubtitle: "Real stories of children whose lives have been transformed through education",
|
||||||
|
|
||||||
|
// Future Section
|
||||||
|
futureTitle: "Looking to the Future",
|
||||||
|
futureText: "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.",
|
||||||
|
|
||||||
|
// Get Involved Section
|
||||||
|
involvedTitle: "Be Part of Our Mission",
|
||||||
|
involvedText: "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."
|
||||||
|
},
|
||||||
|
ar: {
|
||||||
|
// Arabic translations for all the above keys
|
||||||
|
workTitle: "عملنا",
|
||||||
|
workSubtitle: "تحويل التحديات إلى فرص",
|
||||||
|
|
||||||
|
achievementsTitle: "ما حققناه حتى الآن",
|
||||||
|
achievementsText: "في مدارس بلا حدود، نحن ملتزمون بمعالجة الأزمات التعليمية التي يواجهها الأطفال في غزة. من خلال الابتكار والمرونة والالتزام العميق بالتغيير، طورنا برامج مؤثرة تجلب التعليم والأمل للأكثر ضعفاً مع تلبية احتياجات الأسرة في جميع القطاعات لخلق دعم أسري شامل.",
|
||||||
|
|
||||||
|
// Stats
|
||||||
|
childrenReached: "طفل تم الوصول إليهم بفرص تعليمية",
|
||||||
|
campsSupported: "مخيم يتلقى الدعم التعليمي",
|
||||||
|
centersEstablished: "مركز تعليمي تم إنشاؤه",
|
||||||
|
teachersTrained: "معلم متفانٍ تم تدريبه",
|
||||||
|
|
||||||
|
// Continue with Arabic translations for all sections...
|
||||||
|
programsTitle: "برامجنا المبتكرة",
|
||||||
|
programsIntro: "من خلال الحلول التعليمية الإبداعية والمتكيفة، نجلب فرص التعلم للأطفال حتى في أصعب البيئات.",
|
||||||
|
|
||||||
|
mobileSchools: {
|
||||||
|
title: "المدارس المتنقلة",
|
||||||
|
description: "تجلب فصولنا الدراسية المتنقلة التعليم مباشرة إلى الأطفال في مخيمات النزوح والملاجئ المؤقتة والمناطق التي تضررت فيها المباني المدرسية. تضمن هذه المساحات المتكيفة استمرار التعلم بغض النظر عن الظروف."
|
||||||
|
}
|
||||||
|
// ... continue with remaining Arabic translations
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -595,5 +595,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="js/translations.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
884
work.html
884
work.html
|
|
@ -5,224 +5,52 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Our Work - Schools Without Borders</title>
|
<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="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>
|
<style>
|
||||||
/* Global styles */
|
/* Our Work page specific styles */
|
||||||
:root {
|
.achievements {
|
||||||
--navy-blue: #1B1E3B;
|
padding: 5rem 0;
|
||||||
--orange: #F29100;
|
background-color: var(--gray-bg);
|
||||||
--dark-blue: #115C94;
|
|
||||||
--light-blue: #259ED5;
|
|
||||||
--gray-bg: #f5f5f5;
|
|
||||||
--white: #ffffff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
.achievements-stats {
|
||||||
margin: 0;
|
display: flex;
|
||||||
padding: 0;
|
flex-wrap: wrap;
|
||||||
box-sizing: border-box;
|
justify-content: center;
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
.stat-box {
|
||||||
line-height: 1.6;
|
background-color: white;
|
||||||
color: #333;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.stat-box:hover {
|
||||||
width: 90%;
|
transform: translateY(-5px);
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4 {
|
.stat-number {
|
||||||
|
font-size: 3rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 0.5rem;
|
color: var(--orange);
|
||||||
color: var(--navy-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--dark-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.8rem 1.5rem;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background-color: var(--orange);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background-color: #d98100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background-color: var(--dark-blue);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background-color: #0e4a78;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header styles */
|
|
||||||
header {
|
|
||||||
background-color: white;
|
|
||||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo img {
|
|
||||||
height: 60px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links li {
|
|
||||||
margin-left: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--navy-blue);
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a:hover {
|
|
||||||
color: var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a.active {
|
|
||||||
color: var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-toggle {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-toggle i {
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-menu {
|
|
||||||
display: none;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Page banner */
|
|
||||||
.page-banner {
|
|
||||||
height: 40vh;
|
|
||||||
min-height: 300px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/api/placeholder/1200/800') center/cover no-repeat;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-banner h1 {
|
|
||||||
color: white;
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Achievements section */
|
|
||||||
.achievements {
|
|
||||||
padding: 5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievements-content {
|
.achievements-content {
|
||||||
display: flex;
|
max-width: 800px;
|
||||||
flex-wrap: wrap;
|
margin: 2rem auto 0;
|
||||||
gap: 3rem;
|
text-align: center;
|
||||||
}
|
|
||||||
|
|
||||||
.achievements-text {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievement-list {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievement-item {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievement-icon {
|
|
||||||
color: var(--orange);
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievement-content h3 {
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Programs section */
|
/* Programs section */
|
||||||
.programs {
|
.programs {
|
||||||
padding: 5rem 0;
|
padding: 5rem 0;
|
||||||
background-color: var(--gray-bg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.programs-intro {
|
.programs-intro {
|
||||||
|
|
@ -231,34 +59,48 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.program-items {
|
.program-grid {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-wrap: wrap;
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.program-item {
|
.program-card {
|
||||||
flex: 1;
|
background-color: white;
|
||||||
min-width: 350px;
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: white;
|
|
||||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.program-item:hover {
|
.program-card:hover {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.program-image {
|
.program-image {
|
||||||
|
height: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-image img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 250px;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-card:hover .program-image img {
|
||||||
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.program-content {
|
.program-content {
|
||||||
padding: 2rem;
|
padding: 1.5rem;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.program-content h3 {
|
.program-content h3 {
|
||||||
|
|
@ -266,261 +108,32 @@
|
||||||
color: var(--dark-blue);
|
color: var(--dark-blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Location section */
|
.program-content p {
|
||||||
.location {
|
|
||||||
padding: 5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.location-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 3rem;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.location-text {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.location-map {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 300px;
|
|
||||||
height: 400px;
|
|
||||||
background-color: var(--gray-bg);
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.location-map img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.locations-list {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.locations-list li {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.locations-list i {
|
|
||||||
color: var(--orange);
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Future section */
|
|
||||||
.future {
|
|
||||||
padding: 5rem 0;
|
|
||||||
background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('/api/placeholder/1200/800') center/cover no-repeat;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.future h2 {
|
|
||||||
color: white;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.future-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.future-text {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.future-goals {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.future-goal {
|
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
display: flex;
|
flex-grow: 1;
|
||||||
align-items: flex-start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.future-goal i {
|
.program-link {
|
||||||
|
align-self: flex-start;
|
||||||
|
font-weight: 600;
|
||||||
color: var(--orange);
|
color: var(--orange);
|
||||||
font-size: 1.2rem;
|
display: inline-flex;
|
||||||
margin-right: 1rem;
|
align-items: center;
|
||||||
margin-top: 0.3rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Support section */
|
.program-link i {
|
||||||
.support {
|
margin-left: 0.5rem;
|
||||||
padding: 5rem 0;
|
|
||||||
background-color: var(--gray-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.support-options {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 2rem;
|
|
||||||
margin-top: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.support-option {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 250px;
|
|
||||||
background-color: white;
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
|
||||||
text-align: center;
|
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.support-option:hover {
|
.program-link:hover i {
|
||||||
transform: translateY(-5px);
|
transform: translateX(3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.support-option i {
|
/* Gallery section */
|
||||||
font-size: 2.5rem;
|
|
||||||
color: var(--dark-blue);
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.support-option h3 {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Contact form */
|
|
||||||
.contact-form {
|
|
||||||
padding: 5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-container {
|
|
||||||
max-width: 700px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: white;
|
|
||||||
padding: 3rem;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.8rem;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--light-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea.form-control {
|
|
||||||
min-height: 150px;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-select {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.8rem;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 1rem;
|
|
||||||
background-color: white;
|
|
||||||
appearance: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right 10px center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer */
|
|
||||||
footer {
|
|
||||||
background-color: var(--navy-blue);
|
|
||||||
color: white;
|
|
||||||
padding: 4rem 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 3rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-section h3 {
|
|
||||||
color: white;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links li {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a {
|
|
||||||
color: #ccc;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-links a:hover {
|
|
||||||
color: var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links a {
|
|
||||||
display: inline-block;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links a:hover {
|
|
||||||
background-color: var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyright {
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 2rem;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Gallery */
|
|
||||||
.gallery {
|
.gallery {
|
||||||
padding: 5rem 0;
|
padding: 5rem 0;
|
||||||
background-color: white;
|
background-color: var(--gray-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.gallery-intro {
|
.gallery-intro {
|
||||||
|
|
@ -552,26 +165,112 @@
|
||||||
object-fit: cover;
|
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 */
|
/* Responsive styles */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.nav-links {
|
.stat-box {
|
||||||
display: none;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu {
|
.program-grid {
|
||||||
display: block;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-banner h1 {
|
.gallery-items {
|
||||||
font-size: 2.5rem;
|
grid-template-columns: 1fr;
|
||||||
}
|
|
||||||
|
|
||||||
.program-item {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.support-option {
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -616,46 +315,223 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="text-center">What We've Achieved So Far</h2>
|
<h2 class="text-center">What We've Achieved So Far</h2>
|
||||||
<div class="achievements-content">
|
<div class="achievements-content">
|
||||||
<div class="achievements-text">
|
<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>
|
||||||
<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>
|
||||||
<p>Our work focuses on creating safe, engaging learning environments for children whose education has been disrupted by conflict. We believe that even in the most challenging circumstances, education must continue, and children deserve the opportunity to learn, grow, and dream of a better future.</p>
|
<div class="achievements-stats">
|
||||||
<p>Through our mobile classrooms, field education spaces, and innovative teaching methods, we've been able to reach children in areas where traditional education infrastructure has been damaged or is nonexistent.</p>
|
<div class="stat-box">
|
||||||
|
<div class="stat-number">1,500+</div>
|
||||||
|
<p>Children reached with educational opportunities</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="achievement-list">
|
<div class="stat-box">
|
||||||
<div class="achievement-item">
|
<div class="stat-number">32</div>
|
||||||
<div class="achievement-icon">
|
<p>Camps receiving educational support</p>
|
||||||
<i class="fas fa-child"></i>
|
</div>
|
||||||
</div>
|
<div class="stat-box">
|
||||||
<div class="achievement-content">
|
<div class="stat-number">10</div>
|
||||||
<h3>Reaching over 1,500 children</h3>
|
<p>Educational centers established</p>
|
||||||
<p>We established safe learning spaces for 1,020 children in 32 camps, enabling them to learn, play, and grow.</p>
|
</div>
|
||||||
</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>
|
||||||
<div class="achievement-item">
|
<div class="program-content">
|
||||||
<div class="achievement-icon">
|
<h3>Mobile Schools</h3>
|
||||||
<i class="fas fa-school"></i>
|
<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 class="achievement-content">
|
|
||||||
<h3>Creating 10 learning hubs</h3>
|
|
||||||
<p>These centers provide education and psychosocial support to children affected by conflict.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="achievement-item">
|
|
||||||
<div class="achievement-icon">
|
|
||||||
<i class="fas fa-chalkboard-teacher"></i>
|
|
||||||
</div>
|
|
||||||
<div class="achievement-content">
|
|
||||||
<h3>Empowering 28 teachers</h3>
|
|
||||||
<p>We train educators with the tools and methods needed for effective teaching during crises, making them change leaders.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="achievement-item">
|
|
||||||
<div class="achievement-icon">
|
|
||||||
<i class="fas fa-hospital"></i>
|
|
||||||
</div>
|
|
||||||
<div class="achievement-content">
|
|
||||||
<h3>Education in hospitals</h3>
|
|
||||||
<p>For children who are ill, we designed flexible programs to ensure their education continues uninterrupted.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
Loading…
Reference in New Issue