Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Welcome! | World Light Family</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(30, 64, 175, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%); | |
| } | |
| .nav-link:hover { | |
| color: #4f46e5; | |
| } | |
| .group-hover\:block:hover .group-hover\:block { | |
| display: block; | |
| } | |
| .gallery-item { | |
| transition: all 0.3s ease; | |
| } | |
| .gallery-item:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .carousel-item { | |
| transition: opacity 0.5s ease-in-out; | |
| } | |
| .carousel-item.active { | |
| opacity: 1; | |
| } | |
| .carousel-item:not(.active) { | |
| opacity: 0; | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://worldlightfamily.org/img/logo.png" alt="World Light Family Logo" class="h-12"> | |
| <span class="ml-3 text-xl font-bold text-blue-900 hidden md:block">World Light Family</span> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <button id="mobile-menu-button" class="md:hidden text-blue-900"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="https://worldlightfamily.org/" class="nav-link text-blue-900 font-medium hover:text-indigo-600">Home</a> | |
| <div class="relative group"> | |
| <button class="nav-link text-blue-900 font-medium hover:text-indigo-600 flex items-center"> | |
| About Us <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md py-2 w-48 z-50 top-full"> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-50">Who We Are</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-50">Our History</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-50">Our Work</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-50">Our Approach</a> | |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-50">Gallery</a> | |
| </div> | |
| </div> | |
| <a href="https://worldlightfamily.org/events" class="nav-link text-blue-900 font-medium hover:text-indigo-600">Events</a> | |
| <a href="https://worldlightfamily.org/contact-us" class="nav-link text-blue-900 font-medium hover:text-indigo-600">Contact Us</a> | |
| <a href="https://worldlightfamily.org/support/faq" class="nav-link text-blue-900 font-medium hover:text-indigo-600">FAQs</a> | |
| </nav> | |
| <div class="hidden md:flex space-x-4"> | |
| <a href="https://worldlightfamily.org/donate" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">Donate</a> | |
| <a href="https://worldlightfamily.org/get-involved" class="bg-blue-900 text-white px-4 py-2 rounded-md hover:bg-blue-800 transition">Get Involved</a> | |
| </div> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg"> | |
| <nav class="flex flex-col space-y-3"> | |
| <a href="https://worldlightfamily.org/" class="nav-link text-blue-900 font-medium hover:text-indigo-600">Home</a> | |
| <div class="relative"> | |
| <button class="nav-link text-blue-900 font-medium hover:text-indigo-600 flex items-center justify-between w-full"> | |
| About Us <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="hidden pl-4 pt-2"> | |
| <a href="#" class="block py-2 text-gray-800 hover:text-indigo-600">Who We Are</a> | |
| <a href="#" class="block py-2 text-gray-800 hover:text-indigo-600">Our History</a> | |
| <a href="#" class="block py-2 text-gray-800 hover:text-indigo-600">Our Work</a> | |
| <a href="#" class="block py-2 text-gray-800 hover:text-indigo-600">Our Approach</a> | |
| <a href="#" class="block py-2 text-gray-800 hover:text-indigo-600">Gallery</a> | |
| </div> | |
| </div> | |
| <a href="https://worldlightfamily.org/events" class="nav-link text-blue-900 font-medium hover:text-indigo-600">Events</a> | |
| <a href="https://worldlightfamily.org/contact-us" class="nav-link text-blue-900 font-medium hover:text-indigo-600">Contact Us</a> | |
| <a href="https://worldlightfamily.org/support/faq" class="nav-link text-blue-900 font-medium hover:text-indigo-600">FAQs</a> | |
| <div class="pt-2 flex space-x-3"> | |
| <a href="https://worldlightfamily.org/donate" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition text-sm">Donate</a> | |
| <a href="https://worldlightfamily.org/get-involved" class="bg-blue-900 text-white px-4 py-2 rounded-md hover:bg-blue-800 transition text-sm">Get Involved</a> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Carousel --> | |
| <div class="relative h-96 md:h-screen max-h-screen overflow-hidden"> | |
| <div id="hero-carousel" class="h-full"> | |
| <div class="carousel-item active h-full"> | |
| <div class="hero-gradient absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center px-6 max-w-4xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Welcome to WLF</h1> | |
| <p class="text-xl text-white opacity-90 mb-8">World Light Family (WLF) is a christian non-profit organization whose mission is building together opportunities that promote peace in the area we live.</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#mission" class="bg-white text-blue-900 px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition">Our Mission</a> | |
| <a href="#gallery" class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-blue-900 transition">View Gallery</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional carousel items would go here --> | |
| </div> | |
| <div class="absolute bottom-10 left-0 right-0 flex justify-center space-x-2"> | |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white opacity-50 focus:outline-none" data-index="0"></button> | |
| <!-- Additional indicators would go here --> | |
| </div> | |
| </div> | |
| <!-- About Section --> | |
| <section id="mission" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-6">Our Mission</h2> | |
| <p class="text-gray-700 mb-6">World Light Family (WLF) is a christian non-profit organization whose mission is building together opportunities that promote peace in the area we live. We partner with churches in different countries and we equip churches established in poor areas to intervene and meet the need of their communities by showing God's love.</p> | |
| <a href="#" class="inline-block bg-blue-900 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-800 transition">Learn More About Us</a> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://worldlightfamily.org/img/blank-image.svg" alt="WLF Mission" class="w-full rounded-lg shadow-xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Call to Action --> | |
| <section class="py-16 bg-indigo-50"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-6">Support Our Mission</h2> | |
| <p class="text-xl text-gray-700 mb-8 max-w-3xl mx-auto">Your Generosity Brings Hope and Transformation to Communities in Need</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <a href="https://worldlightfamily.org/donate" class="bg-indigo-600 text-white px-8 py-4 rounded-md font-medium hover:bg-indigo-700 transition">Make a Donation</a> | |
| <a href="https://worldlightfamily.org/get-involved" class="bg-blue-900 text-white px-8 py-4 rounded-md font-medium hover:bg-blue-800 transition">Volunteer With Us</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Photo Gallery --> | |
| <section id="gallery" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-blue-900 mb-12">Photo Gallery</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://worldlightfamily.org/api/uploads/0000/44/2024/11/23/fb-img-15420924096841629-3.jpg" alt="WLF Activity" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://worldlightfamily.org/api/uploads/0000/44/2024/11/23/img-20190102-wa0006-1.jpg" alt="WLF Activity" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://worldlightfamily.org/api/uploads/0000/44/2024/11/23/img-20201009-wa0026-1.jpg" alt="WLF Activity" class="w-full h-64 object-cover"> | |
| </div> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://worldlightfamily.org/api/uploads/0000/44/2024/08/23/our-works-handcrafting-and-other-small-scale-produtions-2.JPG" alt="WLF Activity" class="w-full h-64 object-cover"> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block border-2 border-blue-900 text-blue-900 px-6 py-3 rounded-md font-medium hover:bg-blue-900 hover:text-white transition">View More Photos</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Videos Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-blue-900 mb-12">Latest Videos</h2> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="relative aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden shadow-lg"> | |
| <!-- Placeholder for video --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-6xl text-indigo-600 opacity-80"></i> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-6 space-x-2"> | |
| <button class="w-3 h-3 rounded-full bg-indigo-600 focus:outline-none"></button> | |
| <!-- Additional indicators would go here --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-16 bg-blue-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl font-bold mb-6">Looking for something else?</h2> | |
| <h3 class="text-xl font-semibold mb-4">Contact Us</h3> | |
| <p class="mb-6 opacity-90">From Group to Press, get in touch here.</p> | |
| <div class="border-t border-blue-700 pt-6 mb-6"></div> | |
| <h4 class="text-xl font-semibold mb-4">Say Hello</h4> | |
| <p class="opacity-90"><i class="fas fa-envelope mr-2"></i> info@wlf.org</p> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="bg-white p-6 rounded-lg shadow-lg text-gray-800"> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-indigo-600 text-white py-3 rounded-md font-medium hover:bg-indigo-700 transition">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-blue-950 text-white py-10"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <img src="https://worldlightfamily.org/img/logo.png" alt="World Light Family Logo" class="h-12 mb-4"> | |
| <p class="max-w-xs opacity-80">Building together opportunities that promote peace in the area we live.</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-indigo-300 transition">Home</a></li> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-indigo-300 transition">About Us</a></li> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-indigo-300 transition">Events</a></li> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-indigo-300 transition">FAQs</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Get Involved</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-indigo-300 transition">Donate</a></li> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-indigo-300 transition">Volunteer</a></li> | |
| <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-indigo-300 transition">Partnership</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Connect</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-white opacity-80 hover:opacity-100 hover:text-indigo-300 transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-white opacity-80 hover:opacity-100 hover:text-indigo-300 transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-white opacity-80 hover:opacity-100 hover:text-indigo-300 transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-white opacity-80 hover:opacity-100 hover:text-indigo-300 transition"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| <p class="opacity-80"><i class="fas fa-envelope mr-2"></i> info@wlf.org</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-blue-800 mt-10 pt-6 text-center opacity-70 text-sm"> | |
| <p>© 2023 World Light Family. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Mobile dropdown toggle | |
| document.querySelectorAll('#mobile-menu .relative button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const dropdown = button.nextElementSibling; | |
| dropdown.classList.toggle('hidden'); | |
| const icon = button.querySelector('i'); | |
| icon.classList.toggle('fa-chevron-down'); | |
| icon.classList.toggle('fa-chevron-up'); | |
| }); | |
| }); | |
| // Simple carousel functionality | |
| let currentSlide = 0; | |
| const slides = document.querySelectorAll('.carousel-item'); | |
| const indicators = document.querySelectorAll('.carousel-indicator'); | |
| function showSlide(index) { | |
| slides.forEach((slide, i) => { | |
| if (i === index) { | |
| slide.classList.add('active'); | |
| slide.style.display = 'block'; | |
| } else { | |
| slide.classList.remove('active'); | |
| slide.style.display = 'none'; | |
| } | |
| }); | |
| indicators.forEach((indicator, i) => { | |
| if (i === index) { | |
| indicator.classList.add('bg-white', 'opacity-100'); | |
| indicator.classList.remove('opacity-50'); | |
| } else { | |
| indicator.classList.remove('bg-white', 'opacity-100'); | |
| indicator.classList.add('opacity-50'); | |
| } | |
| }); | |
| currentSlide = index; | |
| } | |
| indicators.forEach((indicator, i) => { | |
| indicator.addEventListener('click', () => { | |
| showSlide(i); | |
| }); | |
| }); | |
| // Auto-rotate carousel | |
| setInterval(() => { | |
| currentSlide = (currentSlide + 1) % slides.length; | |
| showSlide(currentSlide); | |
| }, 5000); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=akhansson/worldlight" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |