<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Contact Us | Faith Ministry of Christ</title>
<!– Tailwind CSS –>
<script src=”https://cdn.tailwindcss.com”></script>
<!– Fonts: Montserrat (Headings) & Open Sans (Body) –>
<link href=”https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800&family=Open+Sans:wght@400;600&display=swap” rel=”stylesheet”>
<!– Font Awesome –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css”>
<!– Favicon –>
<link rel=”icon” href=”http://fmcsl.org/wp-content/uploads/2024/02/Faith-Ministry-of-christ-Logo.jpg” type=”image/jpeg”>
<style>
body { font-family: ‘Open Sans’, sans-serif; color: #333; }
h1, h2, h3, h4, h5, h6 { font-family: ‘Montserrat’, sans-serif; }
/* Corporate Color Palette */
.text-primary { color: #0F172A; } /* Slate 900 */
.bg-primary { background-color: #0F172A; }
.text-accent { color: #CA8A04; } /* Gold/Dark Yellow */
.bg-accent { background-color: #CA8A04; }
/* Contact Form 7 Styling Overrides to match design */
.wpcf7-form-control.form-input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.375rem;
margin-top: 0.5rem;
margin-bottom: 1.5rem;
transition: border-color 0.2s;
}
.wpcf7-form-control.form-input:focus {
outline: none;
border-color: #CA8A04;
ring: 2px solid #CA8A04;
}
.wpcf7-submit {
cursor: pointer;
}
</style>
</head>
<body class=”bg-white”>
<!– NAVIGATION –>
<nav class=”bg-white shadow-lg sticky top-0 z-50″>
<div class=”max-w-7xl mx-auto px-4 sm:px-6 lg:px-8″>
<div class=”flex justify-between h-24 items-center”>
<div class=”flex items-center”>
<a href=”fmcsl_homepage.html” class=”flex items-center”>
<img src=”http://fmcsl.org/wp-content/uploads/2024/02/Faith-Ministry-of-christ-Logo.jpg” alt=”Faith Ministry of Christ” class=”h-20 w-auto”>
</a>
</div>
<div class=”hidden md:flex items-center space-x-8″>
<a href=”fmcsl_homepage.html” class=”text-gray-700 font-semibold hover:text-accent transition”>Home</a>
<a href=”fmcsl_about_us.html” class=”text-gray-700 font-semibold hover:text-accent transition”>About Us</a>
<a href=”#” class=”text-accent font-bold transition”>Contact Us</a>
<a href=”https://www.paypal.com/ncp/payment/2ZWQSKJPEBR6W” target=”_blank” class=”bg-accent text-white px-6 py-2.5 rounded shadow font-bold hover:bg-yellow-600 transition”>
GIVE NOW
</a>
</div>
<!– Mobile Menu Button –>
<div class=”md:hidden flex items-center”>
<button id=”mobile-menu-btn” class=”text-gray-700 hover:text-accent focus:outline-none”>
<i class=”fa-solid fa-bars text-2xl”></i>
</button>
</div>
</div>
</div>
<!– Mobile Menu (Hidden by default) –>
<div id=”mobile-menu” class=”hidden md:hidden bg-white border-t border-gray-100″>
<div class=”px-4 pt-2 pb-4 space-y-1″>
<a href=”fmcsl_homepage.html” class=”block px-3 py-2 text-gray-700 font-semibold hover:bg-gray-50 hover:text-accent rounded”>Home</a>
<a href=”fmcsl_about_us.html” class=”block px-3 py-2 text-gray-700 font-semibold hover:bg-gray-50 hover:text-accent rounded”>About Us</a>
<a href=”#” class=”block px-3 py-2 text-accent font-bold bg-gray-50 rounded”>Contact Us</a>
<a href=”https://www.paypal.com/ncp/payment/2ZWQSKJPEBR6W” target=”_blank” class=”block mt-4 text-center bg-accent text-white px-6 py-3 rounded font-bold hover:bg-yellow-600 transition”>
GIVE NOW
</a>
</div>
</div>
</nav>
<!– PAGE HEADER –>
<header class=”relative bg-primary h-64 flex items-center justify-center”>
<div class=”absolute inset-0″>
<img class=”w-full h-full object-cover opacity-20″ src=”https://images.unsplash.com/photo-1596524430615-b46476dd3f53?q=80&w=2940&auto=format&fit=crop” alt=”Contact Background”>
</div>
<div class=”relative z-10 text-center”>
<h1 class=”text-4xl md:text-5xl font-extrabold text-white tracking-tight”>Contact Us</h1>
<p class=”mt-2 text-accent font-medium text-lg uppercase tracking-wider”>Faith Ministry of Christ</p>
</div>
</header>
<!– CONTACT FORM & INFO SECTION –>
<section class=”py-20 bg-slate-50″>
<div class=”max-w-7xl mx-auto px-4 sm:px-6 lg:px-8″>
<div class=”grid grid-cols-1 lg:grid-cols-2 gap-12″>
<!– CONTACT FORM CONTAINER –>
<div class=”bg-white p-8 rounded-xl shadow-lg border border-gray-100″>
<h2 class=”text-2xl font-bold text-primary mb-6″>Send Us a Message</h2>
<!–
IMPORTANT INSTRUCTIONS FOR WORDPRESS:
1. Install “Contact Form 7” or “WPForms”.
2. Create a form with these specific fields:
– Name (Text)
– Address (Text)
– Email (Email)
– Phone/WhatsApp (Tel)
– Country (Text/Dropdown)
– Message (Textarea)
3. Set the Mail To address to: info@fmcsl.org, dimuthu@fmcsl.org
4. Copy the shortcode (e.g. [contact-form-7 id=”123″…])
5. REPLACE THE TEXT BELOW WITH YOUR SHORTCODE
–>
<div class=”p-4 bg-yellow-50 border border-yellow-200 rounded text-sm text-yellow-800 mb-4″>
<strong>WordPress Admin:</strong> Please paste your Contact Form 7 shortcode here in the editor.
</div>
<!– Placeholder for visual design if not using shortcode immediately –>
<form action=”#” method=”post” class=”space-y-4″>
<div>
<label class=”block text-sm font-medium text-gray-700″>Full Name</label>
<input type=”text” class=”w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-accent” placeholder=”Your Name”>
</div>
<div>
<label class=”block text-sm font-medium text-gray-700″>Address</label>
<input type=”text” class=”w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-accent” placeholder=”Street Address”>
</div>
<div class=”grid grid-cols-1 md:grid-cols-2 gap-4″>
<div>
<label class=”block text-sm font-medium text-gray-700″>Email Address</label>
<input type=”email” class=”w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-accent” placeholder=”you@example.com”>
</div>
<div>
<label class=”block text-sm font-medium text-gray-700″>Phone / WhatsApp</label>
<input type=”tel” class=”w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-accent” placeholder=”+94…”>
</div>
</div>
<div>
<label class=”block text-sm font-medium text-gray-700″>Country</label>
<input type=”text” class=”w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-accent” placeholder=”Your Country”>
</div>
<div>
<label class=”block text-sm font-medium text-gray-700″>Message</label>
<textarea rows=”4″ class=”w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-accent” placeholder=”Write your message here…”></textarea>
</div>
<button type=”submit” class=”w-full bg-primary text-white font-bold py-3 rounded hover:bg-slate-800 transition”>SEND MESSAGE</button>
</form>
<p class=”text-xs text-gray-500 mt-4 text-center”>Your message will be sent to info@fmcsl.org and dimuthu@fmcsl.org</p>
</div>
<!– CONTACT INFO & MAP –>
<div class=”space-y-8″>
<!– Quick Contact Info –>
<div class=”bg-white p-8 rounded-xl shadow-md border border-gray-100″>
<h2 class=”text-2xl font-bold text-primary mb-6″>Get in Touch</h2>
<ul class=”space-y-4 text-gray-600″>
<li class=”flex items-start”>
<div class=”bg-accent/10 p-3 rounded-full mr-4 text-accent”>
<i class=”fa-solid fa-phone”></i>
</div>
<div>
<strong class=”block text-primary”>Call Us (Sri Lanka)</strong>
<a href=”tel:+94774130524″ class=”hover:text-accent”>+94 77 413 0524</a><br>
<a href=”tel:+94714130525″ class=”hover:text-accent”>+94 71 413 0525</a>
</div>
</li>
<li class=”flex items-start”>
<div class=”bg-accent/10 p-3 rounded-full mr-4 text-accent”>
<i class=”fa-solid fa-envelope”></i>
</div>
<div>
<strong class=”block text-primary”>Email Us</strong>
<a href=”mailto:info@fmcsl.org” class=”hover:text-accent”>info@fmcsl.org</a><br>
<a href=”mailto:dimuthu@fmcsl.org” class=”hover:text-accent”>dimuthu@fmcsl.org</a>
</div>
</li>
</ul>
<div class=”mt-8 p-6 bg-slate-50 rounded-lg border border-slate-200 text-center”>
<h3 class=”text-lg font-bold text-primary mb-2″>Support Our Mission</h3>
<p class=”text-sm text-gray-600 mb-4″>Your generosity helps us reach the unreached.</p>
<a href=”https://www.paypal.com/ncp/payment/2ZWQSKJPEBR6W” target=”_blank” class=”inline-block w-full bg-accent text-white font-bold py-3 rounded hover:bg-yellow-600 transition”>
DONATE VIA PAYPAL
</a>
</div>
</div>
<!– Embedded Map (Sri Lanka HQ) –>
<div class=”bg-white p-2 rounded-xl shadow-md border border-gray-100 h-80 overflow-hidden”>
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3954.103767472097!2d80.55060797405234!3d7.671987508753239!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae34bd82df56969%3A0x62723328e4480026!2sGalewela!5e0!3m2!1sen!2slk!4v1708412345678!5m2!1sen!2slk” width=”100%” height=”100%” style=”border:0;” allowfullscreen=”” loading=”lazy” referrerpolicy=”no-referrer-when-downgrade”></iframe>
</div>
</div>
</div>
</div>
</section>
<!– GLOBAL ADDRESSES SECTION –>
<section class=”py-16 bg-primary text-white”>
<div class=”max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center”>
<h2 class=”text-3xl font-bold mb-10″>Our Global Offices</h2>
<div class=”grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8″>
<!– UK –>
<div class=”bg-white/5 p-6 rounded-lg border border-white/10 hover:border-accent transition”>
<i class=”fa-solid fa-landmark text-accent text-3xl mb-4″></i>
<h3 class=”font-bold text-lg mb-2″>United Kingdom (HQ)</h3>
<p class=”text-gray-300 text-sm leading-relaxed”>
18 St Helen’s Road<br>
Redbridge, IG1 3QJ<br>
London
</p>
</div>
<!– USA –>
<div class=”bg-white/5 p-6 rounded-lg border border-white/10 hover:border-accent transition”>
<i class=”fa-solid fa-flag-usa text-accent text-3xl mb-4″></i>
<h3 class=”font-bold text-lg mb-2″>USA Mission Center</h3>
<p class=”text-gray-300 text-sm leading-relaxed”>
Wilmore, USA<br>
Strategic Mission Hub
</p>
</div>
<!– Sri Lanka –>
<div class=”bg-white/5 p-6 rounded-lg border border-white/10 hover:border-accent transition”>
<i class=”fa-solid fa-location-dot text-accent text-3xl mb-4″></i>
<h3 class=”font-bold text-lg mb-2″>Sri Lanka Field Office</h3>
<p class=”text-gray-300 text-sm leading-relaxed”>
No. 264, Weragalawatta<br>
Galewela, Sri Lanka
</p>
</div>
<!– Philippines –>
<div class=”bg-white/5 p-6 rounded-lg border border-white/10 hover:border-accent transition”>
<i class=”fa-solid fa-flag text-accent text-3xl mb-4″></i>
<h3 class=”font-bold text-lg mb-2″>Philippines</h3>
<p class=”text-gray-300 text-sm leading-relaxed”>
Prk Ondok Brgy San Jose<br>
General Santos City 9500<br>
Cell: 09514610138
</p>
</div>
</div>
</div>
</section>
<!– FOOTER –>
<footer class=”bg-slate-900 text-white pt-16 pb-8 border-t border-slate-800″>
<div class=”max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center”>
<div class=”mb-8″>
<img src=”http://fmcsl.org/wp-content/uploads/2024/02/Faith-Ministry-of-christ-Logo.jpg” alt=”Logo” class=”h-16 w-auto mx-auto mb-4 grayscale opacity-80 hover:grayscale-0 hover:opacity-100 transition”>
<p class=”text-gray-400 text-sm”>Reaching the Unreached. Serving the Nations.</p>
</div>
<div class=”border-t border-gray-800 pt-8 text-gray-500 text-sm”>
© 2025 Faith Ministry of Christ. All Rights Reserved.
</div>
</div>
</footer>
<!– MOBILE MENU SCRIPT –>
<script>
const btn = document.getElementById(‘mobile-menu-btn’);
const menu = document.getElementById(‘mobile-menu’);
btn.addEventListener(‘click’, () => {
menu.classList.toggle(‘hidden’);
});
</script>
</body>
</html>