undefined / index.html
Mytune's picture
let add hero slide to the home page
62730a6 verified
Raw History Blame Contribute Delete
18.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lighthouse Global College - Government Approved Theological Education</title>
<meta name="description" content="Lighthouse Global College, Abraka: Government-approved theological institution offering Certificate to PhD programs, ministerial training, and international preaching licenses.">
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
navy: '#0A192F',
gold: '#D4AF37',
light: '#F8F9FA',
dark: '#212529'
}
}
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
</head>
<body class="bg-light font-sans">
<!-- Navigation -->
<nav class="bg-navy text-white shadow-lg fixed w-full z-50">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center py-4">
<div class="flex items-center">
<img src="http://static.photos/education/120x120/42" alt="Lighthouse Global College Logo" class="h-12 w-12 mr-3 rounded-full">
<span class="text-xl font-bold">Lighthouse Global College</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="hover:text-gold transition">Home</a>
<a href="about.html" class="hover:text-gold transition">About</a>
<a href="programmes.html" class="hover:text-gold transition">Programmes</a>
<a href="gallery.html" class="hover:text-gold transition">Gallery</a>
<a href="contact.html" class="hover:text-gold transition">Contact</a>
</div>
<div class="md:hidden">
<button id="menu-btn" class="text-white focus:outline-none">
<i data-feather="menu"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden pb-4">
<a href="index.html" class="block py-2 hover:text-gold transition">Home</a>
<a href="about.html" class="block py-2 hover:text-gold transition">About</a>
<a href="programmes.html" class="block py-2 hover:text-gold transition">Programmes</a>
<a href="gallery.html" class="block py-2 hover:text-gold transition">Gallery</a>
<a href="contact.html" class="block py-2 hover:text-gold transition">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative pt-24 pb-20 md:pt-32 md:pb-28 bg-navy text-white overflow-hidden">
<div class="absolute inset-0 z-0" id="vanta-bg"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">Enroll Now – 2025/2026 Admission in Progress</h1>
<p class="text-xl mb-8">Government-approved theological education with excellence in ministerial training</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#apply" class="bg-gold hover:bg-yellow-600 text-navy font-bold py-3 px-8 rounded-lg transition shadow-lg">Apply Now</a>
<a href="contact.html" class="border-2 border-gold hover:bg-gold hover:text-navy text-gold font-bold py-3 px-8 rounded-lg transition">Contact Us</a>
</div>
</div>
</div>
</section>
<!-- Introduction Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-navy mb-6">Shaping Future Christian Leaders</h2>
<p class="text-lg text-dark">Lighthouse Global College is a government-approved theological institution dedicated to providing exceptional education and training for ministry. Our mission is to equip believers with sound biblical knowledge and practical ministry skills.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-light p-6 rounded-lg shadow-md text-center">
<div class="text-gold text-4xl mb-4">
<i data-feather="book-open"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-3">Quality Education</h3>
<p class="text-dark">Comprehensive theological programs from Certificate to PhD levels with qualified instructors.</p>
</div>
<div class="bg-light p-6 rounded-lg shadow-md text-center">
<div class="text-gold text-4xl mb-4">
<i data-feather="users"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-3">Ministerial Training</h3>
<p class="text-dark">Specialized training in apostolic ministry, deliverance, prophecy, and church leadership.</p>
</div>
<div class="bg-light p-6 rounded-lg shadow-md text-center">
<div class="text-gold text-4xl mb-4">
<i data-feather="award"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-3">Global Recognition</h3>
<p class="text-dark">Government-approved certifications and internationally recognized degrees.</p>
</div>
</div>
</div>
</section>
<!-- Program Highlights -->
<section class="py-16 bg-navy text-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Our Programmes</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white bg-opacity-10 p-6 rounded-lg">
<h3 class="text-xl font-bold text-gold mb-3">Theological Degrees</h3>
<p>Certificate, Diploma, Bachelor's, Master's, and PhD in Theology</p>
</div>
<div class="bg-white bg-opacity-10 p-6 rounded-lg">
<h3 class="text-xl font-bold text-gold mb-3">Ministerial Schools</h3>
<p>Apostolic School, Deliverance School, School of Prophets</p>
</div>
<div class="bg-white bg-opacity-10 p-6 rounded-lg">
<h3 class="text-xl font-bold text-gold mb-3">Learning Options</h3>
<p>Flexible online and onsite lectures to suit your schedule</p>
</div>
<div class="bg-white bg-opacity-10 p-6 rounded-lg">
<h3 class="text-xl font-bold text-gold mb-3">Special Programs</h3>
<p>Ordination, Bishop Consecration, International Preaching License</p>
</div>
</div>
<div class="text-center mt-10">
<a href="programmes.html" class="inline-block bg-gold hover:bg-yellow-600 text-navy font-bold py-3 px-8 rounded-lg transition">Explore Programmes</a>
</div>
</div>
</section>
<!-- Special Offers -->
<section class="py-16 bg-gold">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center text-navy mb-12">Special Ministerial Offerings</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white p-6 rounded-lg shadow-lg text-center">
<div class="text-navy text-4xl mb-4">
<i data-feather="user-check"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-3">Ordination</h3>
<p class="text-dark">Formal recognition and commissioning for ministry service</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg text-center">
<div class="text-navy text-4xl mb-4">
<i data-feather="star"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-3">Bishop Consecration</h3>
<p class="text-dark">Elevation to episcopal ministry with global recognition</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg text-center">
<div class="text-navy text-4xl mb-4">
<i data-feather="globe"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-3">Preaching License</h3>
<p class="text-dark">Internationally recognized license for global ministry</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-lg text-center">
<div class="text-navy text-4xl mb-4">
<i data-feather="award"></i>
</div>
<h3 class="text-xl font-bold text-navy mb-3">Honorary Doctorate</h3>
<p class="text-dark">Recognition of significant contributions to ministry</p>
</div>
</div>
</div>
</section>
<!-- Apply Section -->
<section id="apply" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto bg-light p-8 rounded-lg shadow-lg">
<h2 class="text-3xl font-bold text-navy mb-6 text-center">Start Your Theological Journey</h2>
<p class="text-dark mb-8 text-center">Complete the form below to begin your application process for the 2025/2026 academic session.</p>
<form class="space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<div>
<label for="first-name" class="block text-dark mb-2">First Name</label>
<input type="text" id="first-name" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gold" required>
</div>
<div>
<label for="last-name" class="block text-dark mb-2">Last Name</label>
<input type="text" id="last-name" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gold" required>
</div>
</div>
<div>
<label for="email" class="block text-dark mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gold" required>
</div>
<div>
<label for="phone" class="block text-dark mb-2">Phone Number</label>
<input type="tel" id="phone" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gold" required>
</div>
<div>
<label for="programme" class="block text-dark mb-2">Programme of Interest</label>
<select id="programme" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gold" required>
<option value="">Select a programme</option>
<option value="certificate">Certificate in Theology</option>
<option value="diploma">Diploma in Theology</option>
<option value="bachelors">Bachelor of Theology</option>
<option value="masters">Master of Theology</option>
<option value="phd">PhD in Theology</option>
<option value="apostolic">Apostolic School</option>
<option value="deliverance">Deliverance School</option>
<option value="prophets">School of Prophets</option>
</select>
</div>
<div>
<label for="message" class="block text-dark mb-2">Message (Optional)</label>
<textarea id="message" rows="4" class="w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gold"></textarea>
</div>
<button type="submit" class="w-full bg-gold hover:bg-yellow-600 text-navy font-bold py-3 px-8 rounded-lg transition">Submit Application</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-navy text-white py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8">
<div>
<img src="http://static.photos/education/120x120/42" alt="Lighthouse Global College Logo" class="h-16 w-16 mb-4 rounded-full">
<h3 class="text-xl font-bold mb-4">Lighthouse Global College</h3>
<p class="text-gray-300">Government-approved theological education and ministerial training.</p>
</div>
<div>
<h4 class="text-lg font-bold mb-4 text-gold">Quick Links</h4>
<ul class="space-y-2">
<li><a href="index.html" class="text-gray-300 hover:text-gold transition">Home</a></li>
<li><a href="about.html" class="text-gray-300 hover:text-gold transition">About Us</a></li>
<li><a href="programmes.html" class="text-gray-300 hover:text-gold transition">Programmes</a></li>
<li><a href="gallery.html" class="text-gray-300 hover:text-gold transition">Gallery</a></li>
<li><a href="contact.html" class="text-gray-300 hover:text-gold transition">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4 text-gold">Programmes</h4>
<ul class="space-y-2">
<li><a href="programmes.html" class="text-gray-300 hover:text-gold transition">Theological Degrees</a></li>
<li><a href="programmes.html" class="text-gray-300 hover:text-gold transition">Ministerial Training</a></li>
<li><a href="programmes.html" class="text-gray-300 hover:text-gold transition">Online Learning</a></li>
<li><a href="programmes.html" class="text-gray-300 hover:text-gold transition">Special Ordination</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4 text-gold">Contact Info</h4>
<ul class="space-y-2">
<li class="flex items-start">
<i data-feather="map-pin" class="mr-2 mt-1 text-gold"></i>
<span class="text-gray-300">1st Lend, Obadudu Road, Abraka, Delta State, Nigeria</span>
</li>
<li class="flex items-center">
<i data-feather="mail" class="mr-2 text-gold"></i>
<span class="text-gray-300">lighthouseglobalcollege@gmail.com</span>
</li>
<li class="flex items-center">
<i data-feather="phone" class="mr-2 text-gold"></i>
<span class="text-gray-300">+2349037127746</span>
</li>
</ul>
<div class="flex space-x-4 mt-4">
<a href="#" class="text-gray-300 hover:text-gold transition"><i data-feather="facebook"></i></a>
<a href="#" class="text-gray-300 hover:text-gold transition"><i data-feather="twitter"></i></a>
<a href="#" class="text-gray-300 hover:text-gold transition"><i data-feather="instagram"></i></a>
<a href="#" class="text-gray-300 hover:text-gold transition"><i data-feather="youtube"></i></a>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
<p>&copy; 2023 Lighthouse Global College. All rights reserved.</p>
</div>
</div>
</footer>
<!-- WhatsApp Chat Button -->
<div class="fixed bottom-6 right-6 z-50">
<a href="https://wa.me/2349037127746" class="bg-green-500 hover:bg-green-600 text-white p-4 rounded-full shadow-lg flex items-center justify-center transition">
<i data-feather="message-circle" class="w-6 h-6"></i>
</a>
</div>
<script>
// Mobile menu toggle
document.getElementById('menu-btn').addEventListener('click', function() {
document.getElementById('mobile-menu').classList.toggle('hidden');
});
// Vanta.js background
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0xd4af37,
backgroundColor: 0xa192f
});
// Feather icons
feather.replace();
</script>
</body>
</html>