456 lines
18 KiB
HTML
456 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>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> |