434 lines
18 KiB
HTML
434 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" onclick="toggleLanguage()">
|
|
<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-contact.jpg') center/cover no-repeat;">
|
|
<div class="container">
|
|
<h1 data-translate="contactTitle">Contact Us</h1>
|
|
<p data-translate="contactSubtitle">Get in Touch With Our Team</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Intro -->
|
|
<section class="contact-intro">
|
|
<div class="container">
|
|
<div class="contact-intro-content">
|
|
<h2 data-translate="introTitle">We'd Love to Hear From You</h2>
|
|
<p data-translate="introText">Whether you have questions about our programs, want to volunteer, or are interested in supporting our mission, we're here to help.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section class="contact-section">
|
|
<div class="container">
|
|
<div class="contact-container">
|
|
<div class="contact-form-container">
|
|
<h2 data-translate="formTitle">Send Us a Message</h2>
|
|
<form id="contactForm">
|
|
<div class="form-group">
|
|
<label data-translate="fullName">Full Name*</label>
|
|
<input type="text" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label data-translate="location">Location</label>
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label data-translate="contactNumber">Contact Number</label>
|
|
<input type="tel" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label data-translate="email">Email Address*</label>
|
|
<input type="email" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label data-translate="inquiryType">Inquiry Type*</label>
|
|
<select class="form-select" required>
|
|
<option value="" data-translate="selectOption">Select an option</option>
|
|
<option value="general" data-translate="generalInquiry">General Inquiry</option>
|
|
<option value="volunteer" data-translate="volunteer">Volunteer Opportunities</option>
|
|
<option value="fundraising" data-translate="fundraising">Fundraising</option>
|
|
<option value="donation" data-translate="donation">Donation</option>
|
|
<option value="partnership" data-translate="partnership">Partnership</option>
|
|
<option value="other" data-translate="other">Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label data-translate="message">Message*</label>
|
|
<textarea class="form-control" required></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" data-translate="submitButton">Submit</button>
|
|
</form>
|
|
</div>
|
|
<div class="contact-info">
|
|
<div class="info-card">
|
|
<h3 data-translate="contactInfo">Contact Information</h3>
|
|
<div class="info-item">
|
|
<i class="fas fa-envelope info-icon"></i>
|
|
<div>
|
|
<h4 data-translate="emailLabel">Email</h4>
|
|
<p>info@swb-project.org</p>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-phone info-icon"></i>
|
|
<div>
|
|
<h4 data-translate="phoneLabel">Phone</h4>
|
|
<p>+972 111 111 111</p>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<i class="fas fa-map-marker-alt info-icon"></i>
|
|
<div>
|
|
<h4 data-translate="locationsLabel">Operating Locations</h4>
|
|
<p data-translate="locationsText">Gaza - Rafah, Al-Bureij, Al-Nuseirat, Al-Zawaida, Deir Al-Balah, Khan Younis</p>
|
|
</div>
|
|
</div>
|
|
<div class="social-info">
|
|
<h4 data-translate="connectWithUs">Connect With Us</h4>
|
|
<div class="social-links">
|
|
<a href="https://www.tiktok.com/@schools_without_borders"><i class="fab fa-tiktok"></i></a>
|
|
<a href="https://x.com/Schools_W_B"><i class="fab fa-twitter"></i></a>
|
|
<a href="https://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 data-translate="responseTime">Response Time</h3>
|
|
<p data-translate="responseTimeText">We strive to respond to all inquiries. For urgent matters, please contact us directly by phone.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ Section -->
|
|
<section class="faq-section">
|
|
<div class="container">
|
|
<h2 class="text-center" data-translate="faqTitle">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>
|
|
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h3>Schools Without Borders</h3>
|
|
<p data-translate="footerAbout">A non-profit organization supporting education and providing services to students affected by wars and conflicts.</p>
|
|
<div class="social-links">
|
|
<a href="https://www.tiktok.com/@schools_without_borders"><i class="fab fa-tiktok"></i></a>
|
|
<a href="https://x.com/Schools_W_B"><i class="fab fa-twitter"></i></a>
|
|
<a href="https://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 data-translate="quickLinks">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 data-translate="contactUs">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" data-translate="copyright">
|
|
© 2025 Schools Without Borders. All Rights Reserved.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/translations/home-translations.js"></script>
|
|
<script src="js/translations/about-translations.js"></script>
|
|
<script src="js/translations/work-translations.js"></script>
|
|
<script src="js/translations/support-translations.js"></script>
|
|
<script src="js/translations/contact-translations.js"></script>
|
|
<script src="js/translations.js"></script>
|
|
</body>
|
|
</html> |