swb site content first draft
This commit is contained in:
parent
341cadb881
commit
72143d87d6
|
|
@ -0,0 +1,177 @@
|
||||||
|
dist/
|
||||||
|
.DS_Store
|
||||||
|
bun.lockb
|
||||||
|
|
||||||
|
|
||||||
|
logs
|
||||||
|
_.log
|
||||||
|
npm-debug.log_
|
||||||
|
lerna-debug.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
|
||||||
|
report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
|
||||||
|
pids
|
||||||
|
_.pid
|
||||||
|
_.seed
|
||||||
|
\*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
|
||||||
|
coverage
|
||||||
|
\*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
|
||||||
|
node_modules/
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Snowpack dependency directory (https://snowpack.dev/)
|
||||||
|
|
||||||
|
web_modules/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
|
||||||
|
\*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional stylelint cache
|
||||||
|
|
||||||
|
.stylelintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
|
||||||
|
\*.tgz
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# dotenv environment variable files
|
||||||
|
|
||||||
|
.env
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
.env.local
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
|
||||||
|
.next
|
||||||
|
out
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
|
||||||
|
.cache/
|
||||||
|
|
||||||
|
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||||
|
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# vuepress v2.x temp and cache directory
|
||||||
|
|
||||||
|
.temp
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# Docusaurus cache and generated files
|
||||||
|
|
||||||
|
.docusaurus
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# Stores VSCode versions used for testing VSCode extensions
|
||||||
|
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
.wrangler/
|
||||||
|
|
||||||
|
# Vercel
|
||||||
|
.vercel/
|
||||||
|
.dev.vars
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env*
|
||||||
|
.env.development
|
||||||
|
!.env.example
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# Environment files
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
.dev.vars
|
||||||
|
.env.production
|
||||||
|
|
@ -0,0 +1,644 @@
|
||||||
|
<!-- Header -->
|
||||||
|
<header>
|
||||||
|
<div class="container">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="images/logo.png" alt="Schools Without Borders Logo">
|
||||||
|
<span>Schools Without Borders</span>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="about.html">About Us</a></li>
|
||||||
|
<li><a href="work.html">Our Work</a></li>
|
||||||
|
<li><a href="#">Support Us</a></li>
|
||||||
|
<li><a href="#">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.jpg" 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">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<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">
|
||||||
|
<style>
|
||||||
|
/* 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: 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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,456 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Contact 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="css/styles.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.contact-form-container, .contact-info {
|
||||||
|
flex: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Header -->
|
||||||
|
<header>
|
||||||
|
<div class="container">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="images/logo.png" alt="Schools Without Borders Logo">
|
||||||
|
<span>Schools Without Borders</span>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="about.html">About Us</a></li>
|
||||||
|
<li><a href="work.html">Our Work</a></li>
|
||||||
|
<li><a href="support.html">Support Us</a></li>
|
||||||
|
<li><a href="contact.html" class="active">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/contact-banner.jpg') center/cover no-repeat;">
|
||||||
|
<div class="container">
|
||||||
|
<h1>Contact Us</h1>
|
||||||
|
<p>Get in Touch With Our Team</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Intro Section -->
|
||||||
|
<section class="contact-intro">
|
||||||
|
<div class="container">
|
||||||
|
<div class="contact-intro-content">
|
||||||
|
<h2>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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Form Section -->
|
||||||
|
<section class="contact-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="contact-container">
|
||||||
|
<div class="contact-form-container">
|
||||||
|
<h2>Send Us a Message</h2>
|
||||||
|
<form id="contactForm">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="fullName">Full Name*</label>
|
||||||
|
<input type="text" id="fullName" name="fullName" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="location">Location</label>
|
||||||
|
<input type="text" id="location" name="location" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="contactNumber">Contact Number</label>
|
||||||
|
<input type="tel" id="contactNumber" name="contactNumber" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email Address*</label>
|
||||||
|
<input type="email" id="email" name="email" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="inquiryType">Inquiry Type*</label>
|
||||||
|
<select id="inquiryType" name="inquiryType" class="form-select" required>
|
||||||
|
<option value="">Select an option</option>
|
||||||
|
<option value="general">General Inquiry</option>
|
||||||
|
<option value="volunteer">Volunteer Opportunities</option>
|
||||||
|
<option value="fundraising">Fundraising</option>
|
||||||
|
<option value="donation">Donation</option>
|
||||||
|
<option value="partnership">Partnership</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="message">Message*</label>
|
||||||
|
<textarea id="message" name="message" class="form-control" required></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="contact-info">
|
||||||
|
<div class="info-card">
|
||||||
|
<h3>Contact Information</h3>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-icon">
|
||||||
|
<i class="fas fa-envelope"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Email</h4>
|
||||||
|
<p>info@swb-project.org</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-icon">
|
||||||
|
<i class="fas fa-phone"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Phone</h4>
|
||||||
|
<p>+972 111 111 111</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-icon">
|
||||||
|
<i class="fas fa-map-marker-alt"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Operating Locations</h4>
|
||||||
|
<p>Gaza - Rafah, Al-Bureij, Al-Nuseirat, Al-Zawaida, Deir Al-Balah, Khan Younis</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="social-info">
|
||||||
|
<h4>Connect With Us</h4>
|
||||||
|
<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>
|
||||||
|
<div class="info-card">
|
||||||
|
<h3>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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ Section -->
|
||||||
|
<section class="faq-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Frequently Asked Questions</h2>
|
||||||
|
<div class="faq-container">
|
||||||
|
<div class="faq-item active">
|
||||||
|
<div class="faq-question">
|
||||||
|
<h3>How can I volunteer with Schools Without Borders?</h3>
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>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.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-question">
|
||||||
|
<h3>How is my donation used?</h3>
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>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.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-question">
|
||||||
|
<h3>Can I donate educational materials instead of money?</h3>
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>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.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-question">
|
||||||
|
<h3>How can my organization partner with Schools Without Borders?</h3>
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>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.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item">
|
||||||
|
<div class="faq-question">
|
||||||
|
<h3>Are donations tax-deductible?</h3>
|
||||||
|
<i class="fas fa-chevron-down"></i>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>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.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<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@swb-project.org</p>
|
||||||
|
<p><i class="fas fa-phone"></i> +972 111 111 111</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
© 2025 Schools Without Borders. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript for FAQ accordion -->
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const faqItems = document.querySelectorAll('.faq-item');
|
||||||
|
|
||||||
|
faqItems.forEach(item => {
|
||||||
|
const question = item.querySelector('.faq-question');
|
||||||
|
|
||||||
|
question.addEventListener('click', () => {
|
||||||
|
item.classList.toggle('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,306 @@
|
||||||
|
/* 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: 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;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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, .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;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-banner h1 {
|
||||||
|
color: white;
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero section */
|
||||||
|
.hero {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-banner h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-banner h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 0.7rem 1.2rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.volunteer-form {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--gray-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 2rem auto 0;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
21
index.html
21
index.html
|
|
@ -437,7 +437,8 @@
|
||||||
<section class="hero" style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('images/hero-image.jpg') center/cover no-repeat;">
|
<section class="hero" style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('images/hero-image.jpg') center/cover no-repeat;">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="hero-content">
|
<div class="hero-content">
|
||||||
<h1>Our Children, Our Future</h1>
|
<h1>Our Children,
|
||||||
|
Our Future</h1>
|
||||||
<p>Bringing Education Where Schools Cannot Reach</p>
|
<p>Bringing Education Where Schools Cannot Reach</p>
|
||||||
<a href="#" class="btn btn-primary">Support Our Mission</a>
|
<a href="#" class="btn btn-primary">Support Our Mission</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -551,7 +552,7 @@
|
||||||
<p>Equips a mobile classroom</p>
|
<p>Equips a mobile classroom</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="#" class="btn btn-primary">Donate Now</a>
|
<a href="Support.html" class="btn btn-primary">Donate Now</a>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -563,10 +564,10 @@
|
||||||
<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>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="#"><i class="fab fa-facebook-f"></i></a>
|
<a href="https://www.tiktok.com/@tiktok.com/@schools_without_borders"><i class="fab fa-tiktok"></i></a>
|
||||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
<a href="https://x.com/Schools_W_B"><i class="fab fa-twitter"></i></a>
|
||||||
<a href="#"><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="#"><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">
|
||||||
|
|
@ -575,14 +576,14 @@
|
||||||
<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>
|
||||||
<li><a href="work.html">Our Work</a></li>
|
<li><a href="work.html">Our Work</a></li>
|
||||||
<li><a href="#">Support Us</a></li>
|
<li><a href="Support.html">Support Us</a></li>
|
||||||
<li><a href="#">Contact</a></li>
|
<li><a href="Contact.html">Contact</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-section">
|
<div class="footer-section">
|
||||||
<h3>Contact Us</h3>
|
<h3>Contact Us</h3>
|
||||||
<p><i class="fas fa-envelope"></i> info@schools-without-borders.org</p>
|
<p><i class="fas fa-envelope"></i> info@swb-project.org</p>
|
||||||
<p><i class="fas fa-phone"></i> +972 595 041 685</p>
|
<p><i class="fas fa-phone"></i> +972 111 111 111</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="copyright">
|
<div class="copyright">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,599 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Support 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="css/styles.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
/* Support page specific styles */
|
||||||
|
.support-intro {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--gray-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-intro-content {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-options {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-card {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-card-image {
|
||||||
|
height: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-card-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-card:hover .support-card-image img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-card-content {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-card-content h3 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-card-content p {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donation-options {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--gray-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.donation-title {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donation-boxes {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 2rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donation-box {
|
||||||
|
background-color: white;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
|
text-align: center;
|
||||||
|
width: 250px;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donation-box:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.donation-amount {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--orange);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donation-description {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-section {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-content {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 3rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-text {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-image {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-image img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-list {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.impact-icon {
|
||||||
|
color: var(--orange);
|
||||||
|
margin-right: 1rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonials {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--gray-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial {
|
||||||
|
background-color: white;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-quote {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-style: italic;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-quote::before {
|
||||||
|
content: '\201C';
|
||||||
|
font-size: 4rem;
|
||||||
|
position: absolute;
|
||||||
|
left: -0.5rem;
|
||||||
|
top: -1.5rem;
|
||||||
|
color: rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-author {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-author-image {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-author-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-author-info h4 {
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-author-info p {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.partners {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.partners-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.partner {
|
||||||
|
background-color: white;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 150px;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.partner:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.partner img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 60px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-cta {
|
||||||
|
padding: 3rem 0;
|
||||||
|
background-color: var(--dark-blue);
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-cta h2 {
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-cta p {
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.support-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donation-box {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.partners-grid {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Header -->
|
||||||
|
<header>
|
||||||
|
<div class="container">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="images/logo.png" alt="Schools Without Borders Logo">
|
||||||
|
<span>Schools Without Borders</span>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="about.html">About Us</a></li>
|
||||||
|
<li><a href="work.html">Our Work</a></li>
|
||||||
|
<li><a href="support.html" class="active">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/support-banner.jpg') center/cover no-repeat;">
|
||||||
|
<div class="container">
|
||||||
|
<h1>Support Us</h1>
|
||||||
|
<p>Join Us in Making a Difference</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Support Intro Section -->
|
||||||
|
<section class="support-intro">
|
||||||
|
<div class="container">
|
||||||
|
<div class="support-intro-content">
|
||||||
|
<h2>Ways You Can Help</h2>
|
||||||
|
<p>At Schools Without Borders, we rely on the generous support of individuals, communities, and organizations to continue our vital work. There are many ways you can contribute to our mission of bringing education to children in crisis-affected areas.</p>
|
||||||
|
<p>Your support allows us to maintain our mobile schools, purchase educational materials, provide food for students, and ensure that our teachers and staff are trained and equipped to deliver quality education.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Support Options Section -->
|
||||||
|
<section class="support-options">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">How You Can Contribute</h2>
|
||||||
|
<div class="support-grid">
|
||||||
|
<div class="support-card">
|
||||||
|
<div class="support-card-image">
|
||||||
|
<img src="images/volunteer.jpg" alt="Volunteer with Schools Without Borders">
|
||||||
|
</div>
|
||||||
|
<div class="support-card-content">
|
||||||
|
<h3>Volunteer With Us</h3>
|
||||||
|
<p>Your time and expertise can have a direct impact on the lives of children in Gaza. Whether you're an educator, healthcare worker, or have skills in logistics, administration, or any other field, we welcome volunteers who share our commitment to making a difference.</p>
|
||||||
|
<p>As a volunteer, you can assist in organizing educational programs, provide psychological support, offer training to teachers, or engage in fundraising activities.</p>
|
||||||
|
<a href="#" class="btn btn-primary">Become a Volunteer</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="support-card">
|
||||||
|
<div class="support-card-image">
|
||||||
|
<img src="images/donate.jpg" alt="Donate to Schools Without Borders">
|
||||||
|
</div>
|
||||||
|
<div class="support-card-content">
|
||||||
|
<h3>Donate</h3>
|
||||||
|
<p>Your financial contributions directly support the children we serve. Donations help us maintain our mobile schools, purchase educational materials, provide food for students, and ensure that our teachers and staff are trained and equipped to deliver quality education.</p>
|
||||||
|
<p>You can make a one-time donation or set up a monthly contribution to ensure that our programs continue to thrive.</p>
|
||||||
|
<a href="#" class="btn btn-primary">Make a Donation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="support-card">
|
||||||
|
<div class="support-card-image">
|
||||||
|
<img src="images/spread-word.jpg" alt="Spread the word about Schools Without Borders">
|
||||||
|
</div>
|
||||||
|
<div class="support-card-content">
|
||||||
|
<h3>Spread the Word</h3>
|
||||||
|
<p>One of the simplest ways to support us is to help spread awareness about our mission. Share our story on social media, tell your friends and family about our work, and encourage others to get involved.</p>
|
||||||
|
<p>The more people who know about our efforts, the more children we can reach with education and hope.</p>
|
||||||
|
<div class="social-links" style="justify-content: flex-start;">
|
||||||
|
<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>
|
||||||
|
<div class="support-card">
|
||||||
|
<div class="support-card-image">
|
||||||
|
<img src="images/partnership.jpg" alt="Partner with Schools Without Borders">
|
||||||
|
</div>
|
||||||
|
<div class="support-card-content">
|
||||||
|
<h3>Partnerships</h3>
|
||||||
|
<p>If you're part of a company or organization, consider partnering with Schools Without Borders to help us expand our impact. Your support can take the form of sponsorships, donations, or offering resources that directly benefit our programs.</p>
|
||||||
|
<p>Corporate partnerships allow us to continue creating sustainable solutions for education in crisis areas.</p>
|
||||||
|
<a href="#" class="btn btn-primary">Become a Partner</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Volunteer Form Section -->
|
||||||
|
<section class="volunteer-form">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">Volunteer Application</h2>
|
||||||
|
<p class="text-center">Fill out this form to join our volunteer team and make a difference.</p>
|
||||||
|
<div class="form-container">
|
||||||
|
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSecXwztebxjt-f6ZGO7S3cAKYfReBDOZkrzj5XXKg6KrDNg8A/viewform"
|
||||||
|
width="100%"
|
||||||
|
height="800px"
|
||||||
|
frameborder="0"
|
||||||
|
marginheight="0"
|
||||||
|
marginwidth="0">
|
||||||
|
Loading…
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Donation Options Section -->
|
||||||
|
<section class="donation-options">
|
||||||
|
<div class="container">
|
||||||
|
<div class="donation-title">
|
||||||
|
<h2>Make a Donation</h2>
|
||||||
|
<p>Your contribution, no matter the size, can make a significant difference in a child's life.</p>
|
||||||
|
</div>
|
||||||
|
<div class="donation-boxes">
|
||||||
|
<div class="donation-box">
|
||||||
|
<div class="donation-amount">$10</div>
|
||||||
|
<p class="donation-description">Provides a school bag with essential supplies for a child</p>
|
||||||
|
<a href="#" class="btn btn-primary">Donate $10</a>
|
||||||
|
</div>
|
||||||
|
<div class="donation-box">
|
||||||
|
<div class="donation-amount">$50</div>
|
||||||
|
<p class="donation-description">Funds educational materials for a classroom of 20 children</p>
|
||||||
|
<a href="#" class="btn btn-primary">Donate $50</a>
|
||||||
|
</div>
|
||||||
|
<div class="donation-box">
|
||||||
|
<div class="donation-amount">$100</div>
|
||||||
|
<p class="donation-description">Supports a child's education for an entire month</p>
|
||||||
|
<a href="#" class="btn btn-primary">Donate $100</a>
|
||||||
|
</div>
|
||||||
|
<div class="donation-box">
|
||||||
|
<div class="donation-amount">$250</div>
|
||||||
|
<p class="donation-description">Helps equip a mobile classroom with learning resources</p>
|
||||||
|
<a href="#" class="btn btn-primary">Donate $250</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Impact Section -->
|
||||||
|
<section class="impact-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">The Impact of Your Support</h2>
|
||||||
|
<div class="impact-content">
|
||||||
|
<div class="impact-text">
|
||||||
|
<p>Every contribution to Schools Without Borders directly impacts the lives of children affected by conflict. Your support doesn't just provide education—it offers hope, stability, and the chance for a better future.</p>
|
||||||
|
<p>When you donate or volunteer with us, you become part of a movement that believes in the power of education to transform lives and rebuild communities.</p>
|
||||||
|
<div class="impact-list">
|
||||||
|
<div class="impact-item">
|
||||||
|
<div class="impact-icon">
|
||||||
|
<i class="fas fa-check-circle"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Restore Learning Opportunities</h4>
|
||||||
|
<p>Your support helps children regain access to education despite challenging circumstances.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="impact-item">
|
||||||
|
<div class="impact-icon">
|
||||||
|
<i class="fas fa-check-circle"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Provide Safe Spaces</h4>
|
||||||
|
<p>Your contributions create secure environments where children can learn, play, and grow.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="impact-item">
|
||||||
|
<div class="impact-icon">
|
||||||
|
<i class="fas fa-check-circle"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Support Teacher Training</h4>
|
||||||
|
<p>Your generosity helps us train educators to deliver quality education in crisis situations.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="impact-item">
|
||||||
|
<div class="impact-icon">
|
||||||
|
<i class="fas fa-check-circle"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Foster Psychological Healing</h4>
|
||||||
|
<p>Your donation supports programs that address trauma and promote emotional wellbeing.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="impact-image">
|
||||||
|
<img src="images/impact.jpg" alt="Impact of Schools Without Borders">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Testimonials Section -->
|
||||||
|
<section class="testimonials">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">What Our Supporters Say</h2>
|
||||||
|
<div class="testimonial-grid">
|
||||||
|
<div class="testimonial">
|
||||||
|
<div class="testimonial-quote">
|
||||||
|
<p>Working with Schools Without Borders as a volunteer teacher has been the most rewarding experience of my career. Seeing children light up with excitement to learn, despite their circumstances, reinforces the importance of this mission.</p>
|
||||||
|
</div>
|
||||||
|
<div class="testimonial-author">
|
||||||
|
<div class="testimonial-author-image">
|
||||||
|
<img src="images/testimonial-1.jpg" alt="Sarah Ahmed">
|
||||||
|
</div>
|
||||||
|
<div class="testimonial-author-info">
|
||||||
|
<h4>Sarah Ahmed</h4>
|
||||||
|
<p>Volunteer Teacher</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="testimonial">
|
||||||
|
<div class="testimonial-quote">
|
||||||
|
<p>As a monthly donor, I'm proud to support an organization that brings education to the most vulnerable children. The transparency and dedication shown by the Schools Without Borders team gives me confidence that my contribution is making a real difference.</p>
|
||||||
|
</div>
|
||||||
|
<div class="testimonial-author">
|
||||||
|
<div class="testimonial-author-image">
|
||||||
|
<img src="images/testimonial-2.jpg" alt="Mohammed Khalid">
|
||||||
|
</div>
|
||||||
|
<div class="testimonial-author-info">
|
||||||
|
<h4>Mohammed Khalid</h4>
|
||||||
|
<p>Monthly Donor</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="testimonial">
|
||||||
|
<div class="testimonial-quote">
|
||||||
|
<p>Our company's partnership with Schools Without Borders has been incredibly fulfilling. Their innovative approach to education in crisis situations aligns perfectly with our corporate values, and we've seen firsthand the impact of our support.</p>
|
||||||
|
</div>
|
||||||
|
<div class="testimonial-author">
|
||||||
|
<div class="testimonial-author-image">
|
||||||
|
<img src="images/testimonial-3.jpg" alt="Layla Nasir">
|
||||||
|
</div>
|
||||||
|
<div class="testimonial-author-info">
|
||||||
|
<h4>Layla Nasir</h4>
|
||||||
|
<p>Corporate Partner</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact CTA Section -->
|
||||||
|
<section class="contact-cta">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Have Questions About Supporting Us?</h2>
|
||||||
|
<p>If you would like more information about our donation programs, volunteer opportunities, or partnership possibilities, please don't hesitate to reach out. Our team is ready to answer any questions you may have.</p>
|
||||||
|
<a href="contact.html" class="btn btn-primary">Contact Us</a>
|
||||||
|
</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@swb-project.org</p>
|
||||||
|
<p><i class="fas fa-phone"></i> +972 111 111 111</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
© 2025 Schools Without Borders. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,661 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Our Work - Schools Without Borders</title>
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
/* 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: 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 {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: var(--gray-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.programs-intro {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto 3rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-items {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-item {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 350px;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-item:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 250px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-content {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-content h3 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: var(--dark-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Location section */
|
||||||
|
.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;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.future-goal i {
|
||||||
|
color: var(--orange);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
margin-top: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Support section */
|
||||||
|
.support {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-option:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-option i {
|
||||||
|
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 {
|
||||||
|
padding: 5rem 0;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-intro {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto 3rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-items {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item {
|
||||||
|
height: 250px;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item:hover {
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-item img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive styles */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-links {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-banner h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.program-item {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-option {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Header -->
|
||||||
|
<header>
|
||||||
|
<div class="container">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="images/logo.png" alt="Schools Without Borders Logo">
|
||||||
|
<span>Schools Without Borders</span>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="about.html">About Us</a></li>
|
||||||
|
<li><a href="work.html" class="active">Our Work</a></li>
|
||||||
|
<li><a href="Support.html">Support Us</a></li>
|
||||||
|
<li><a href="Contact.html">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="language-toggle">
|
||||||
|
<i class="fas fa-globe"></i>
|
||||||
|
<span>EN / عربي</span>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-menu">
|
||||||
|
<i class="fas fa-bars"></i>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Page Banner -->
|
||||||
|
<section class="page-banner" style="background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/banner-work.jpg') center/cover no-repeat;">
|
||||||
|
<div class="container">
|
||||||
|
<h1>Our Work</h1>
|
||||||
|
<p>Turning Challenges into Opportunities</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Achievements Section -->
|
||||||
|
<section class="achievements">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center">What We've Achieved So Far</h2>
|
||||||
|
<div class="achievements-content">
|
||||||
|
<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>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>
|
||||||
|
<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>
|
||||||
|
<div class="achievement-list">
|
||||||
|
<div class="achievement-item">
|
||||||
|
<div class="achievement-icon">
|
||||||
|
<i class="fas fa-child"></i>
|
||||||
|
</div>
|
||||||
|
<div class="achievement-content">
|
||||||
|
<h3>Reaching over 1,500 children</h3>
|
||||||
|
<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="achievement-item">
|
||||||
|
<div class="achievement-icon">
|
||||||
|
<i class="fas fa-school"></i>
|
||||||
|
</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>
|
||||||
Loading…
Reference in New Issue