Hugging Face's logo

Spaces:
Mytune
/
undefined
Running

App Files Community
undefined / gallery.html
Mytune's picture
Mytune
let add hero slide to the home page
62730a6 verified
Raw History Blame Contribute Delete
21.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery - Lighthouse Global College</title>
<meta name="description" content="View our photo gallery showcasing campus life, lectures, graduation ceremonies, ordination events, and ministerial activities at Lighthouse Global College.">
<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>
</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">
<a href="index.html" class="text-xl font-bold">Lighthouse Global College</a>
</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="text-gold font-bold">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 text-gold font-bold">Gallery</a>
<a href="contact.html" class="block py-2 hover:text-gold transition">Contact</a>
</div>
</div>
</nav>
<!-- Page Header -->
<section class="pt-32 pb-20 bg-navy text-white">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-4">College Gallery</h1>
<p class="text-xl max-w-3xl mx-auto">Experience the vibrant life and activities at Lighthouse Global College through our photo collection</p>
</div>
</section>
<!-- Gallery Filters -->
<section class="py-8 bg-white sticky top-24 z-30 shadow-md">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-center gap-4">
<button class="filter-btn active px-4 py-2 bg-gold text-navy font-bold rounded-full" data-filter="all">All Photos</button>
<button class="filter-btn px-4 py-2 bg-light hover:bg-gold text-dark hover:text-navy font-bold rounded-full transition" data-filter="campus">Campus Life</button>
<button class="filter-btn px-4 py-2 bg-light hover:bg-gold text-dark hover:text-navy font-bold rounded-full transition" data-filter="lectures">Lectures</button>
<button class="filter-btn px-4 py-2 bg-light hover:bg-gold text-dark hover:text-navy font-bold rounded-full transition" data-filter="graduation">Graduation</button>
<button class="filter-btn px-4 py-2 bg-light hover:bg-gold text-dark hover:text-navy font-bold rounded-full transition" data-filter="ordination">Ordination</button>
<button class="filter-btn px-4 py-2 bg-light hover:bg-gold text-dark hover:text-navy font-bold rounded-full transition" data-filter="events">Events</button>
</div>
</div>
</section>
<!-- Gallery Grid -->
<section class="py-12 bg-light">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Campus Life Images -->
<div class="gallery-item campus">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/1" alt="College Campus" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Campus Life</p>
<p class="text-dark">Main college building and surroundings</p>
</div>
</div>
</div>
<div class="gallery-item campus">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/2" alt="Library" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Campus Life</p>
<p class="text-dark">College library with theological resources</p>
</div>
</div>
</div>
<div class="gallery-item campus">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/3" alt="Chapel" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Campus Life</p>
<p class="text-dark">Prayer chapel for spiritual nourishment</p>
</div>
</div>
</div>
<!-- Lectures Images -->
<div class="gallery-item lectures">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/4" alt="Classroom Lecture" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Lectures</p>
<p class="text-dark">Interactive classroom teaching session</p>
</div>
</div>
</div>
<div class="gallery-item lectures">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/5" alt="Bible Study" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Lectures</p>
<p class="text-dark">In-depth Bible study and interpretation</p>
</div>
</div>
</div>
<div class="gallery-item lectures">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/6" alt="Group Discussion" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Lectures</p>
<p class="text-dark">Student group discussion and collaboration</p>
</div>
</div>
</div>
<!-- Graduation Images -->
<div class="gallery-item graduation">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/7" alt="Graduation Ceremony" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Graduation</p>
<p class="text-dark">Annual graduation ceremony celebration</p>
</div>
</div>
</div>
<div class="gallery-item graduation">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/8" alt="Graduate Receiving Certificate" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Graduation</p>
<p class="text-dark">Graduate receiving certificate from provost</p>
</div>
</div>
</div>
<div class="gallery-item graduation">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/9" alt="Graduation Group Photo" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Graduation</p>
<p class="text-dark">Graduating class of 2023 group photo</p>
</div>
</div>
</div>
<!-- Ordination Images -->
<div class="gallery-item ordination">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/10" alt="Ordination Service" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Ordination</p>
<p class="text-dark">Ministerial ordination service</p>
</div>
</div>
</div>
<div class="gallery-item ordination">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/11" alt="Bishop Consecration" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Ordination</p>
<p class="text-dark">Bishop consecration ceremony</p>
</div>
</div>
</div>
<div class="gallery-item ordination">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/12" alt="Laying on of Hands" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Ordination</p>
<p class="text-dark">Laying on of hands during ordination</p>
</div>
</div>
</div>
<!-- Events Images -->
<div class="gallery-item events">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/13" alt="Prayer Conference" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Events</p>
<p class="text-dark">Annual prayer and fasting conference</p>
</div>
</div>
</div>
<div class="gallery-item events">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/14" alt="Mission Outreach" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Events</p>
<p class="text-dark">Student mission outreach program</p>
</div>
</div>
</div>
<div class="gallery-item events">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/15" alt="Guest Speaker" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Events</p>
<p class="text-dark">Special guest speaker seminar</p>
</div>
</div>
</div>
<div class="gallery-item events">
<div class="bg-white rounded-lg shadow-md overflow-hidden group">
<img src="http://static.photos/education/400x300/16" alt="Student Fellowship" class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">
<div class="p-4">
<p class="text-gold font-semibold">Events</p>
<p class="text-dark">Weekly student fellowship gathering</p>
</div>
</div>
</div>
</div>
<!-- Load More Button -->
<div class="text-center mt-12">
<button class="bg-gold hover:bg-yellow-600 text-navy font-bold py-3 px-8 rounded-lg transition">Load More Photos</button>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="py-16 bg-navy text-white text-center">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold mb-6">Become Part of Our Story</h2>
<p class="text-xl max-w-3xl mx-auto mb-8">Join our community of faith learners and create your own memories at Lighthouse Global College.</p>
<a href="contact.html" class="inline-block bg-gold hover:bg-yellow-600 text-navy font-bold py-3 px-8 rounded-lg transition">Apply for Admission</a>
</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');
});
// Gallery filter functionality
const filterBtns = document.querySelectorAll('.filter-btn');
const galleryItems = document.querySelectorAll('.gallery-item');
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
// Remove active class from all buttons
filterBtns.forEach(b => b.classList.remove('active', 'bg-gold', 'text-navy'));
filterBtns.forEach(b => b.classList.add('bg-light', 'text-dark', 'hover:bg-gold', 'hover:text-navy'));
// Add active class to clicked button
btn.classList.add('active', 'bg-gold', 'text-navy');
btn.classList.remove('bg-light', 'text-dark', 'hover:bg-gold', 'hover:text-navy');
const filter = btn.getAttribute('data-filter');
galleryItems.forEach(item => {
if (filter === 'all' || item.classList.contains(filter)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
// Feather icons
feather.replace();
</script>
</body>
</html>