Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vine Pomona Church - Growing in Faith, Serving in Love</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap'); | |
| :root { | |
| --primary: #4a6b3a; | |
| --secondary: #d4a762; | |
| --light: #f8f5f0; | |
| --dark: #2a2a2a; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: var(--light); | |
| color: var(--dark); | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1435527173128-6b5ae373c8a4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| min-height: 80vh; | |
| } | |
| .sermon-card { | |
| transition: transform 0.3s ease; | |
| } | |
| .sermon-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .event-card { | |
| border-left: 4px solid var(--secondary); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: var(--secondary); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .testimonial-card { | |
| background-color: white; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .footer-link:hover { | |
| color: var(--secondary); | |
| } | |
| .countdown-item { | |
| background-color: var(--primary); | |
| color: white; | |
| min-width: 80px; | |
| } | |
| /* Mobile menu dropdown styles */ | |
| .dropdown-content { | |
| display: none; | |
| padding-left: 1rem; | |
| background-color: #f8f9fa; | |
| } | |
| .dropdown.active .dropdown-content { | |
| display: block; | |
| } | |
| .dropdown-toggle::after { | |
| content: '+'; | |
| margin-left: 0.5rem; | |
| display: inline-block; | |
| transition: transform 0.3s ease; | |
| } | |
| .dropdown.active .dropdown-toggle::after { | |
| content: '-'; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md fixed w-full z-50"> | |
| <div class="container mx-auto px-6 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-church text-3xl text-green-700 mr-2"></i> | |
| <a href="#" class="text-2xl font-bold text-green-800">Vine Pomona</a> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link text-gray-800 hover:text-green-700 py-2">Home</a> | |
| <a href="#about" class="nav-link text-gray-800 hover:text-green-700 py-2">About</a> | |
| <a href="#ministries" class="nav-link text-gray-800 hover:text-green-700 py-2">Ministries</a> | |
| <a href="#events" class="nav-link text-gray-800 hover:text-green-700 py-2">Events</a> | |
| <a href="#sermons" class="nav-link text-gray-800 hover:text-green-700 py-2">Sermons</a> | |
| <a href="#contact" class="nav-link text-gray-800 hover:text-green-700 py-2">Contact</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-btn" class="text-gray-800 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white w-full px-6 pb-4"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#" class="text-gray-800 hover:text-green-700 py-2 border-b">Home</a> | |
| <a href="#about" class="text-gray-800 hover:text-green-700 py-2 border-b">About</a> | |
| <!-- Ministries Dropdown --> | |
| <div class="dropdown"> | |
| <button class="dropdown-toggle text-gray-800 hover:text-green-700 py-2 border-b w-full text-left flex justify-between items-center"> | |
| Ministries | |
| </button> | |
| <div class="dropdown-content"> | |
| <a href="#children" class="block py-2 text-gray-700 hover:text-green-700">Children's Ministry</a> | |
| <a href="#youth" class="block py-2 text-gray-700 hover:text-green-700">Youth Group</a> | |
| <a href="#worship" class="block py-2 text-gray-700 hover:text-green-700">Worship Arts</a> | |
| <a href="#outreach" class="block py-2 text-gray-700 hover:text-green-700">Outreach</a> | |
| </div> | |
| </div> | |
| <!-- Events Dropdown --> | |
| <div class="dropdown"> | |
| <button class="dropdown-toggle text-gray-800 hover:text-green-700 py-2 border-b w-full text-left flex justify-between items-center"> | |
| Events | |
| </button> | |
| <div class="dropdown-content"> | |
| <a href="#sunday-service" class="block py-2 text-gray-700 hover:text-green-700">Sunday Service</a> | |
| <a href="#bible-study" class="block py-2 text-gray-700 hover:text-green-700">Bible Study</a> | |
| <a href="#mens-breakfast" class="block py-2 text-gray-700 hover:text-green-700">Men's Breakfast</a> | |
| <a href="#fun-day" class="block py-2 text-gray-700 hover:text-green-700">Family Fun Day</a> | |
| </div> | |
| </div> | |
| <a href="#sermons" class="text-gray-800 hover:text-green-700 py-2 border-b">Sermons</a> | |
| <a href="#contact" class="text-gray-800 hover:text-green-700 py-2 border-b">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero flex items-center justify-center text-center text-white pt-20"> | |
| <div class="container mx-auto px-6"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Welcome to Vine Pomona Church</h1> | |
| <p class="text-xl md:text-2xl mb-8">Growing in Faith, Serving in Love</p> | |
| <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4"> | |
| <a href="#events" class="bg-green-700 hover:bg-green-800 text-white px-8 py-3 rounded-full font-semibold transition duration-300">Join Us</a> | |
| <a href="#sermons" class="bg-transparent border-2 border-white hover:bg-white hover:text-green-800 text-white px-8 py-3 rounded-full font-semibold transition duration-300">Watch Sermons</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Service Times --> | |
| <section class="bg-green-800 text-white py-8"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-2xl font-bold">Service Times</h2> | |
| </div> | |
| <div class="flex flex-col md:flex-row md:space-x-12 text-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="font-bold">Sunday Worship</h3> | |
| <p>9:00 AM & 11:00 AM</p> | |
| </div> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="font-bold">Bible Study</h3> | |
| <p>Wednesday 7:00 PM</p> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Prayer Meeting</h3> | |
| <p>Friday 6:30 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Our Story</h2> | |
| <div class="w-20 h-1 bg-green-700 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <img src="https://images.unsplash.com/photo-1452421822248-d49c2f566273?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Church gathering" class="rounded-lg shadow-xl"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-bold text-green-800 mb-4">Rooted in Faith, Growing in Community</h3> | |
| <p class="text-gray-700 mb-4">Founded in 1985, Vine Pomona Church has been a beacon of hope and faith in our community. What began as a small Bible study group in a living room has grown into a vibrant congregation serving Pomona and surrounding areas.</p> | |
| <p class="text-gray-700 mb-6">Our mission is to love God, love people, and make disciples of Jesus Christ. We believe in the power of community and the transformative love of God that changes lives.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="bg-green-700 hover:bg-green-800 text-white px-6 py-3 rounded-full font-semibold text-center transition duration-300">Our Beliefs</a> | |
| <a href="#" class="bg-transparent border-2 border-green-700 hover:bg-green-700 hover:text-white text-green-700 px-6 py-3 rounded-full font-semibold text-center transition duration-300">Meet Our Pastors</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Ministries Section --> | |
| <section id="ministries" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Our Ministries</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Discover how you can get involved and grow in your faith journey</p> | |
| <div class="w-20 h-1 bg-green-700 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Ministry 1 --> | |
| <div id="children" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-green-700 text-4xl mb-4"> | |
| <i class="fas fa-child"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">Children's Ministry</h3> | |
| <p class="text-gray-600 mb-4">Engaging programs for kids ages 2-12 to learn about Jesus in fun, age-appropriate ways.</p> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Learn More →</a> | |
| </div> | |
| <!-- Ministry 2 --> | |
| <div id="youth" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-green-700 text-4xl mb-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">Youth Group</h3> | |
| <p class="text-gray-600 mb-4">A dynamic community for teens to grow in faith and build meaningful relationships.</p> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Learn More →</a> | |
| </div> | |
| <!-- Ministry 3 --> | |
| <div id="worship" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-green-700 text-4xl mb-4"> | |
| <i class="fas fa-music"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">Worship Arts</h3> | |
| <p class="text-gray-600 mb-4">Join our team of musicians, singers, and creatives who help lead our congregation in worship.</p> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Learn More →</a> | |
| </div> | |
| <!-- Ministry 4 --> | |
| <div id="outreach" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-green-700 text-4xl mb-4"> | |
| <i class="fas fa-hands-helping"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">Outreach</h3> | |
| <p class="text-gray-600 mb-4">Serving our local community through food drives, homeless ministry, and neighborhood events.</p> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Learn More →</a> | |
| </div> | |
| <!-- Ministry 5 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-green-700 text-4xl mb-4"> | |
| <i class="fas fa-bible"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">Small Groups</h3> | |
| <p class="text-gray-600 mb-4">Connect with others in intimate settings for Bible study, prayer, and fellowship.</p> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Learn More →</a> | |
| </div> | |
| <!-- Ministry 6 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-green-700 text-4xl mb-4"> | |
| <i class="fas fa-pray"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">Prayer Ministry</h3> | |
| <p class="text-gray-600 mb-4">Join our intercessory prayer team or request prayer for your needs.</p> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Learn More →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upcoming Event --> | |
| <section id="fun-day" class="py-16 bg-green-700 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Family Fun Day</h2> | |
| <p class="text-xl mb-6">Join us for our annual community event with games, food, and fellowship for all ages!</p> | |
| <div class="flex space-x-4 mb-6"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>June 10, 2023</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>10:00 AM - 3:00 PM</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4 mb-8"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> | |
| <span>Pomona Community Park</span> | |
| </div> | |
| </div> | |
| <a href="#" class="bg-white hover:bg-gray-100 text-green-800 px-8 py-3 rounded-full font-semibold inline-block transition duration-300">RSVP Now</a> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div id="countdown" class="flex justify-center md:justify-start space-x-4"> | |
| <div class="countdown-item flex flex-col items-center justify-center p-4 rounded-lg"> | |
| <span id="days" class="text-3xl font-bold">00</span> | |
| <span class="text-sm">Days</span> | |
| </div> | |
| <div class="countdown-item flex flex-col items-center justify-center p-4 rounded-lg"> | |
| <span id="hours" class="text-3xl font-bold">00</span> | |
| <span class="text-sm">Hours</span> | |
| </div> | |
| <div class="countdown-item flex flex-col items-center justify-center p-4 rounded-lg"> | |
| <span id="minutes" class="text-3xl font-bold">00</span> | |
| <span class="text-sm">Minutes</span> | |
| </div> | |
| <div class="countdown-item flex flex-col items-center justify-center p-4 rounded-lg"> | |
| <span id="seconds" class="text-3xl font-bold">00</span> | |
| <span class="text-sm">Seconds</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Events Section --> | |
| <section id="events" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Upcoming Events</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Join us for worship, fellowship, and service</p> | |
| <div class="w-20 h-1 bg-green-700 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Event 1 --> | |
| <div id="sunday-service" class="event-card bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-700 text-white text-center py-2 px-4 rounded-l"> | |
| <div class="text-xl font-bold">15</div> | |
| <div class="text-xs">JUN</div> | |
| </div> | |
| <div class="bg-gray-200 px-4 py-2 rounded-r w-full"> | |
| <div class="font-semibold">Sunday Service</div> | |
| <div class="text-sm text-gray-600">9:00 AM & 11:00 AM</div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">Summer Worship Series</h3> | |
| <p class="text-gray-600 mb-4">Join us as we begin our new summer sermon series "Rooted in Love".</p> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Details →</a> | |
| </div> | |
| <!-- Event 2 --> | |
| <div id="bible-study" class="event-card bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-700 text-white text-center py-2 px-4 rounded-l"> | |
| <div class="text-xl font-bold">17</div> | |
| <div class="text-xs">JUN</div> | |
| </div> | |
| <div class="bg-gray-200 px-4 py-2 rounded-r w-full"> | |
| <div class="font-semibold">Bible Study</div> | |
| <div class="text-sm text-gray-600">7:00 PM - 8:30 PM</div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">Book of Romans Study</h3> | |
| <p class="text-gray-600 mb-4">Deep dive into Paul's letter to the Romans with Pastor Mark.</p> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Details →</a> | |
| </div> | |
| <!-- Event 3 --> | |
| <div id="mens-breakfast" class="event-card bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-700 text-white text-center py-2 px-4 rounded-l"> | |
| <div class="text-xl font-bold">20</div> | |
| <div class="text-xs">JUN</div> | |
| </div> | |
| <div class="bg-gray-200 px-4 py-2 rounded-r w-full"> | |
| <div class="font-semibold">Men's Breakfast</div> | |
| <div class="text-sm text-gray-600">7:30 AM - 9:00 AM</div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">Men's Fellowship</h3> | |
| <p class="text-gray-600 mb-4">Monthly gathering for men to connect and grow spiritually.</p> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Details →</a> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="bg-green-700 hover:bg-green-800 text-white px-8 py-3 rounded-full font-semibold inline-block transition duration-300">View All Events</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sermons Section --> | |
| <section id="sermons" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Recent Sermons</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Watch or listen to messages that will encourage and challenge you</p> | |
| <div class="w-20 h-1 bg-green-700 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Sermon 1 --> | |
| <div class="sermon-card bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1507034589631-9433cc6bc453?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Sermon thumbnail" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <button class="bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full p-4 text-green-700 transition duration-300"> | |
| <i class="fas fa-play text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm text-green-700">June 4, 2023</span> | |
| <span class="text-sm text-gray-500">45:22</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">The Fruit of the Spirit: Love</h3> | |
| <p class="text-gray-600 mb-4">Pastor Mark begins our new series exploring the fruit of the Spirit from Galatians 5.</p> | |
| <div class="flex justify-between"> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Watch</a> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Listen</a> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Notes</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sermon 2 --> | |
| <div class="sermon-card bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1542272201-b1ca555a8503?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sermon thumbnail" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <button class="bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full p-4 text-green-700 transition duration-300"> | |
| <i class="fas fa-play text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm text-green-700">May 28, 2023</span> | |
| <span class="text-sm text-gray-500">38:15</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">Living as Kingdom People</h3> | |
| <p class="text-gray-600 mb-4">Exploring what it means to live according to God's kingdom values in a broken world.</p> | |
| <div class="flex justify-between"> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Watch</a> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Listen</a> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Notes</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sermon 3 --> | |
| <div class="sermon-card bg-white rounded-lg overflow-hidden shadow-md"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1501281330705-3f6d009913ec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sermon thumbnail" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <button class="bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full p-4 text-green-700 transition duration-300"> | |
| <i class="fas fa-play text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm text-green-700">May 21, 2023</span> | |
| <span class="text-sm text-gray-500">42:08</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-green-800 mb-2">The Power of Prayer</h3> | |
| <p class="text-gray-600 mb-4">Understanding prayer as our lifeline to God and weapon against spiritual forces.</p> | |
| <div class="flex justify-between"> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Watch</a> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Listen</a> | |
| <a href="#" class="text-green-700 font-semibold hover:underline">Notes</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="bg-green-700 hover:bg-green-800 text-white px-8 py-3 rounded-full font-semibold inline-block transition duration-300">View Sermon Archive</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-green-800 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Stories of Faith</h2> | |
| <p class="max-w-2xl mx-auto">Hear how God is working in the lives of our church family</p> | |
| <div class="w-20 h-1 bg-white mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Sarah J.</h4> | |
| <p class="text-sm text-gray-600">Member since 2018</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"When I first came to Vine Pomona, I was going through a difficult divorce. The love and support I received from this community helped heal my heart and restore my faith in God's goodness."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Michael T.</h4> | |
| <p class="text-sm text-gray-600">Member since 2015</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"The men's ministry at Vine Pomona has been transformative for me. Through authentic relationships and Bible study, I've grown deeper in my faith and become a better husband and father."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card p-6 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Lisa M." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Lisa M.</h4> | |
| <p class="text-sm text-gray-600">Member since 2020</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"My kids love coming to church because of the amazing children's ministry. Meanwhile, I've found healing and purpose through serving in our outreach programs. Vine Pomona truly feels like family."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-4">Contact Us</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We'd love to hear from you! Reach out with questions, prayer requests, or just to say hello.</p> | |
| <div class="w-20 h-1 bg-green-700 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h3 class="text-2xl font-bold text-green-800 mb-4">Get In Touch</h3> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-map-marker-alt text-green-700 mr-3"></i> | |
| <span class="font-semibold">Address:</span> | |
| </div> | |
| <p class="ml-8">123 Faith Avenue, Pomona, CA 91768</p> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-phone text-green-700 mr-3"></i> | |
| <span class="font-semibold">Phone:</span> | |
| </div> | |
| <p class="ml-8">(909) 555-0123</p> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-envelope text-green-700 mr-3"></i> | |
| <span class="font-semibold">Email:</span> | |
| </div> | |
| <p class="ml-8">info@vinepomona.org</p> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-clock text-green-700 mr-3"></i> | |
| <span class="font-semibold">Office Hours:</span> | |
| </div> | |
| <p class="ml-8">Monday-Thursday: 9:00 AM - 4:00 PM</p> | |
| <p class="ml-8">Friday: 9:00 AM - 12:00 PM</p> | |
| </div> | |
| <div class="flex space-x-4 mt-8"> | |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-pink-600 hover:bg-pink-700 text-white p-3 rounded-full"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-blue-400 hover:bg-blue-500 text-white p-3 rounded-full"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-red-600 hover:bg-red-700 text-white p-3 rounded-full"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 font-semibold mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-700"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 font-semibold mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-700"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="subject" class="block text-gray-700 font-semibold mb-2">Subject</label> | |
| <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-700"> | |
| <option>General Inquiry</option> | |
| <option>Prayer Request</option> | |
| <option>Ministry Question</option> | |
| <option>Event Information</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="message" class="block text-gray-700 font-semibold mb-2">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-700"></textarea> | |
| </div> | |
| <button type="submit" class="bg-green-700 hover:bg-green-800 text-white px-6 py-3 rounded-full font-semibold w-full transition duration-300">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map --> | |
| <div class="h-96 w-full"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3306.837441274246!2d-117.7501239243337!3d34.03913007316415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c3325d9a1a9e4b%3A0x9c8aefc7b5e1e5f5!2sPomona%2C%20CA!5e0!3m2!1sen!2sus!4v1686176787892!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-church text-3xl text-green-500 mr-2"></i> | |
| <span class="text-2xl font-bold">Vine Pomona</span> | |
| </div> | |
| <p class="text-gray-400">Growing in Faith, Serving in Love since 1985.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-green-500 transition duration-300">Home</a></li> | |
| <li><a href="#about" class="footer-link text-gray-400 hover:text-green-500 transition duration-300">About Us</a></li> | |
| <li><a href="#ministries" class="footer-link text-gray-400 hover:text-green-500 transition duration-300">Ministries</a></li> | |
| <li><a href="#events" class="footer-link text-gray-400 hover:text-green-500 transition duration-300">Events</a></li> | |
| <li><a href="#sermons" class="footer-link text-gray-400 hover:text-green-500 transition duration-300">Sermons</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Connect</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-green-500 transition duration-300">Facebook</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-green-500 transition duration-300">Instagram</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-green-500 transition duration-300">YouTube</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-green-500 transition duration-300">Podcast</a></li> | |
| <li><a href="#" class="footer-link text-gray-400 hover:text-green-500 transition duration-300">Newsletter</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Newsletter</h3> | |
| <p class="text-gray-400 mb-4">Subscribe to receive updates and encouragement.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full"> | |
| <button type="submit" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Vine Pomona Church. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-green-500">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-green-500">Terms of Service</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const menuBtn = document.getElementById('menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| menuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Dropdown toggle functionality | |
| document.querySelectorAll('.dropdown-toggle').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const dropdown = button.closest('.dropdown'); | |
| dropdown.classList.toggle('active'); | |
| }); | |
| }); | |
| // Countdown timer for upcoming event | |
| function updateCountdown() { | |
| const eventDate = new Date('June 10, 2023 10:00:00').getTime(); | |
| const now = new Date().getTime(); | |
| const distance = eventDate - now; | |
| const days = Math.floor(distance / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((distance % (1000 * 60)) / 1000); | |
| document.getElementById('days').innerHTML = days.toString().padStart(2, '0'); | |
| document.getElementById('hours').innerHTML = hours.toString().padStart(2, '0'); | |
| document.getElementById('minutes').innerHTML = minutes.toString().padStart(2, '0'); | |
| document.getElementById('seconds').innerHTML = seconds.toString().padStart(2, '0'); | |
| if (distance < 0) { | |
| clearInterval(countdownTimer); | |
| document.getElementById('countdown').innerHTML = "Event has started!"; | |
| } | |
| } | |
| updateCountdown(); | |
| const countdownTimer = setInterval(updateCountdown, 1000); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| // Close any open dropdowns | |
| document.querySelectorAll('.dropdown').forEach(dropdown => { | |
| dropdown.classList.remove('active'); | |
| }); | |
| } | |
| }); | |
| }); | |
| </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=josiahbjavier/test-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |