644 lines
19 KiB
HTML
644 lines
19 KiB
HTML
<!-- 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;
|
|
}
|
|
} |