661 lines
18 KiB
HTML
661 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Our Work - Schools Without Borders</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<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> |