| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Williams AME Church</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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#1a3a6d', |
| secondary: '#e63946', |
| accent: '#f4a261', |
| light: '#f8f9fa', |
| dark: '#212529' |
| }, |
| fontFamily: { |
| sans: ['Georgia', 'serif'], |
| heading: ['"Playfair Display"', 'serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;700&display=swap'); |
| |
| body { |
| font-family: 'Roboto', sans-serif; |
| scroll-behavior: smooth; |
| line-height: 1.6; |
| } |
| |
| h1, h2, h3, h4 { |
| font-family: 'Playfair Display', serif; |
| } |
| |
| .loading-screen { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(135deg, #1a3a6d, #e63946, #f4a261); |
| z-index: 9999; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| opacity: 1; |
| transition: opacity 1.5s ease-in-out; |
| } |
| |
| .loading-content { |
| text-align: center; |
| z-index: 10; |
| animation: fadeIn 2s ease-in-out; |
| } |
| |
| .loading-logo { |
| font-size: 4rem; |
| margin-bottom: 1rem; |
| color: white; |
| text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); |
| } |
| |
| .loading-title { |
| font-family: 'Playfair Display', serif; |
| font-size: 2.5rem; |
| color: white; |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); |
| margin-bottom: 0.5rem; |
| } |
| |
| .loading-subtitle { |
| font-size: 1.2rem; |
| color: rgba(255, 255, 255, 0.9); |
| max-width: 800px; |
| margin: 0 auto; |
| } |
| |
| .loading-screen.hidden { |
| opacity: 0; |
| pointer-events: none; |
| } |
| |
| .light-leak { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); |
| opacity: 0; |
| animation: lightLeak 4s ease-in-out infinite; |
| } |
| |
| .light-leak:nth-child(2) { |
| animation-delay: 1s; |
| } |
| |
| .light-leak:nth-child(3) { |
| animation-delay: 2s; |
| } |
| |
| .light-leak:nth-child(4) { |
| animation-delay: 3s; |
| } |
| |
| @keyframes lightLeak { |
| 0% { opacity: 0; transform: scale(0.5); } |
| 50% { opacity: 0.8; transform: scale(1.2); } |
| 100% { opacity: 0; transform: scale(1.5); } |
| } |
| |
| .logo { |
| animation: fadeIn 2s ease-in-out; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(-20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .nav-link { |
| position: relative; |
| transition: all 0.3s ease; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: -5px; |
| left: 0; |
| background-color: #e63946; |
| transition: width 0.3s ease; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| .service-card { |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| } |
| |
| .service-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
| } |
| |
| .event-card { |
| transition: all 0.3s ease; |
| } |
| |
| .event-card:hover { |
| transform: scale(1.02); |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
| } |
| |
| .fade-in { |
| opacity: 0; |
| transform: translateY(20px); |
| transition: opacity 0.6s ease-out, transform 0.6s ease-out; |
| } |
| |
| .fade-in.appear { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .parallax { |
| background-attachment: fixed; |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: cover; |
| } |
| |
| .btn-primary { |
| background-color: #1a3a6d; |
| color: white; |
| padding: 12px 24px; |
| border-radius: 4px; |
| transition: all 0.3s ease; |
| font-weight: bold; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| |
| .btn-primary:hover { |
| background-color: #e63946; |
| transform: translateY(-3px); |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); |
| } |
| |
| .btn-secondary { |
| background-color: #e63946; |
| color: white; |
| padding: 12px 24px; |
| border-radius: 4px; |
| transition: all 0.3s ease; |
| font-weight: bold; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| |
| .btn-secondary:hover { |
| background-color: #1a3a6d; |
| transform: translateY(-3px); |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); |
| } |
| |
| .text-shadow { |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.3); |
| } |
| |
| .section-title { |
| position: relative; |
| display: inline-block; |
| margin-bottom: 2rem; |
| } |
| |
| .section-title::after { |
| content: ''; |
| position: absolute; |
| bottom: -10px; |
| left: 0; |
| width: 50%; |
| height: 3px; |
| background: #e63946; |
| } |
| |
| .section-title.center::after { |
| left: 25%; |
| } |
| |
| .gallery-img { |
| transition: all 0.5s ease; |
| transform: scale(1); |
| } |
| |
| .gallery-img:hover { |
| transform: scale(1.05); |
| filter: brightness(1.1); |
| } |
| |
| footer { |
| background-color: #1a3a6d; |
| } |
| |
| .social-icon { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| width: 40px; |
| height: 40px; |
| background: rgba(255,255,255,0.1); |
| border-radius: 50%; |
| margin: 0 5px; |
| transition: all 0.3s ease; |
| } |
| |
| .social-icon:hover { |
| background: #e63946; |
| transform: translateY(-5px); |
| } |
| |
| .contact-card { |
| transition: all 0.3s ease; |
| } |
| |
| .contact-card:hover { |
| transform: translateY(-5px); |
| } |
| |
| .map-container { |
| height: 400px; |
| } |
| |
| @media (max-width: 768px) { |
| .hero { |
| height: 70vh; |
| } |
| } |
| </style> |
| </head> |
| <body class="text-dark"> |
| |
| <div class="loading-screen" id="loadingScreen"> |
| <div class="absolute inset-0 overflow-hidden"> |
| <div class="light-leak"></div> |
| <div class="light-leak"></div> |
| <div class="light-leak"></div> |
| <div class="light-leak"></div> |
| </div> |
| <div class="loading-content"> |
| <div class="logo mb-6"> |
| <i class="fas fa-church loading-logo"></i> |
| <h1 class="loading-title">Williams AME Church</h1> |
| <p class="loading-subtitle">A Place of Worship and Community</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <nav class="fixed w-full bg-white shadow-md z-50"> |
| <div class="container mx-auto px-4 py-3 flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center justify-between w-full md:w-auto"> |
| <div class="flex items-center"> |
| <i class="fas fa-church text-primary text-2xl mr-2"></i> |
| <span class="font-heading text-primary text-xl font-bold">Williams AME Church</span> |
| </div> |
| <div class="md:hidden"> |
| <button id="menu-toggle" class="text-primary focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| <div id="menu" class="hidden md:flex flex-col md:flex-row items-center w-full md:w-auto mt-4 md:mt-0"> |
| <a href="#home" class="nav-link px-4 py-2 text-lg">Home</a> |
| <a href="#about" class="nav-link px-4 py-2 text-lg">About</a> |
| <a href="#services" class="nav-link px-4 py-2 text-lg">Services</a> |
| <a href="#events" class="nav-link px-4 py-2 text-lg">Events</a> |
| <a href="#gallery" class="nav-link px-4 py-2 text-lg">Gallery</a> |
| <a href="#contact" class="nav-link px-4 py-2 text-lg">Contact</a> |
| <a href="#donate" class="btn-primary mt-2 md:mt-0 md:ml-4">Donate</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="hero parallax bg-primary text-white flex items-center justify-center" style="height: 100vh; background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic.vecteezy.com%2Fsystem%2Fresources%2Fpreviews%2F027%2F103%2F360%2Fnon_2x%2Fenergetic-audience-during-a-live-music-performance-free-photo.jpg&f=1&nofb=1&ipt=d2d706363b7b1b9a8fde16165cd4555e12de11fde699e27bc5fce9074582dff3');"> |
| <div class="absolute inset-0 bg-black bg-opacity-50"></div> |
| <div class="container mx-auto px-4 text-center z-10"> |
| <h1 class="text-4xl md:text-6xl font-heading mb-4 text-shadow">Welcome to Williams AME Church</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">A place of worship, community, and spiritual growth for all ages</p> |
| <a href="#about" class="btn-primary inline-block">Learn More</a> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-light"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="section-title center text-3xl md:text-4xl font-heading">Our Story</h2> |
| <p class="text-xl max-w-3xl mx-auto">Founded in 1872, Williams AME Church has been a cornerstone of our community for over 150 years</p> |
| </div> |
| |
| <div class="flex flex-col md:flex-row items-center mb-16 fade-in"> |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
| <h3 class="text-2xl font-heading mb-4">Our Mission</h3> |
| <p class="text-lg mb-4">Williams AME Church is dedicated to serving God and our community through worship, education, and outreach. We strive to be a beacon of hope, love, and support for all who enter our doors.</p> |
| <p class="text-lg">Our mission is to create a welcoming environment where people of all ages can grow in faith, find community, and serve others.</p> |
| </div> |
| <div class="md:w-1/2"> |
| <img src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Church interior" class="rounded-lg shadow-lg"> |
| </div> |
| </div> |
| |
| <div class="flex flex-col md:flex-row items-center fade-in"> |
| <div class="md:w-1/2 mb-10 md:mb-0 md:order-2 md:pl-10"> |
| <h3 class="text-2xl font-heading mb-4">Our Values</h3> |
| <ul class="text-lg list-disc pl-6"> |
| <li class="mb-2">Faith in God and His Word</li> |
| <li class="mb-2">Love and compassion for all people</li> |
| <li class="mb-2">Community service and outreach</li> |
| <li class="mb-2">Educational excellence and spiritual growth</li> |
| <li>Respect for all ages and backgrounds</li> |
| </ul> |
| </div> |
| <div class="md:w-1/2 md:order-1"> |
| <img src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Church community" class="rounded-lg shadow-lg"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="section-title center text-3xl md:text-4xl font-heading">Our Services</h2> |
| <p class="text-xl max-w-3xl mx-auto">Join us for worship, fellowship, and spiritual growth</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="service-card bg-light p-8 rounded-lg text-center shadow-md"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-praying-hands text-5xl"></i> |
| </div> |
| <h3 class="text-2xl font-heading mb-4">Sunday Worship</h3> |
| <p class="mb-4">Sunday School: 9:00 AM</p> |
| <p class="mb-4">Worship Service: 10:00 AM</p> |
| <p class="mb-4">Evening Service: 6:00 PM (First Sunday)</p> |
| </div> |
| |
| <div class="service-card bg-light p-8 rounded-lg text-center shadow-md"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-book-open text-5xl"></i> |
| </div> |
| <h3 class="text-2xl font-heading mb-4">Weekly Activities</h3> |
| <p class="mb-4">Bible Study: Wednesday 7:00 PM</p> |
| <p class="mb-4">Youth Group: Friday 6:30 PM</p> |
| <p class="mb-4">Prayer Meeting: Thursday 7:00 PM</p> |
| </div> |
| |
| <div class="service-card bg-light p-8 rounded-lg text-center shadow-md"> |
| <div class="text-primary mb-4"> |
| <i class="fas fa-users text-5xl"></i> |
| </div> |
| <h3 class="text-2xl font-heading mb-4">Special Events</h3> |
| <p class="mb-4">Monthly Community Dinners</p> |
| <p class="mb-4">Annual Vacation Bible School</p> |
| <p class="mb-4">Senior Citizens Ministry</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="events" class="py-20 bg-light"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="section-title center text-3xl md:text-4xl font-heading">Upcoming Events</h2> |
| <p class="text-xl max-w-3xl mx-auto">Join us for special events and community gatherings</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div class="event-card bg-white p-8 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-primary text-white p-4 rounded-lg mr-4"> |
| <span class="block text-2xl font-bold">15</span> |
| <span class="block">JUN</span> |
| </div> |
| <div> |
| <h3 class="text-2xl font-heading mb-2">Community Picnic</h3> |
| <p class="text-secondary"><i class="fas fa-map-marker-alt mr-2"></i> Church Grounds</p> |
| </div> |
| </div> |
| <p class="mb-4">Join us for our annual community picnic with food, games, and fellowship for the whole family.</p> |
| <a href="#" class="text-primary font-bold">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
| </div> |
| |
| <div class="event-card bg-white p-8 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-primary text-white p-4 rounded-lg mr-4"> |
| <span class="block text-2xl font-bold">22</span> |
| <span class="block">JUN</span> |
| </div> |
| <div> |
| <h3 class="text-2xl font-heading mb-2">Youth Leadership Conference</h3> |
| <p class="text-secondary"><i class="fas fa-map-marker-alt mr-2"></i> Fellowship Hall</p> |
| </div> |
| </div> |
| <p class="mb-4">Empowering our young leaders with workshops, discussions, and mentorship opportunities.</p> |
| <a href="#" class="text-primary font-bold">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
| </div> |
| |
| <div class="event-card bg-white p-8 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-primary text-white p-4 rounded-lg mr-4"> |
| <span class="block text-2xl font-bold">30</span> |
| <span class="block">JUN</span> |
| </div> |
| <div> |
| <h3 class="text-2xl font-heading mb-2">Senior Citizens Ministry</h3> |
| <p class="text-secondary"><i class="fas fa-map-marker-alt mr-2"></i> Main Building</p> |
| </div> |
| </div> |
| <p class="mb-4">Monthly gathering for our senior members with special activities and fellowship.</p> |
| <a href="#" class="text-primary font-bold">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
| </div> |
| |
| <div class="event-card bg-white p-8 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-primary text-white p-4 rounded-lg mr-4"> |
| <span class="block text-2xl font-bold">05</span> |
| <span class="block">JUL</span> |
| </div> |
| <div> |
| <h3 class="text-2xl font-heading mb-2">Back to School Bash</h3> |
| <p class="text-secondary"><i class="fas fa-map-marker-alt mr-2"></i> Church Grounds</p> |
| </div> |
| </div> |
| <p class="mb-4">Helping families prepare for the school year with supplies, resources, and community support.</p> |
| <a href="#" class="text-primary font-bold">Learn More <i class="fas fa-arrow-right ml-2"></i></a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="gallery" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="section-title center text-3xl md:text-4xl font-heading">Our Community</h2> |
| <p class="text-xl max-w-3xl mx-auto">Moments of worship, fellowship, and service</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="overflow-hidden rounded-lg shadow-lg"> |
| <img src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Community gathering" class="gallery-img w-full h-64 object-cover"> |
| </div> |
| <div class="overflow-hidden rounded-lg shadow-lg"> |
| <img src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Worship service" class="gallery-img w-full h-64 object-cover"> |
| </div> |
| <div class="overflow-hidden rounded-lg shadow-lg"> |
| <img src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Community service" class="gallery-img w-full h-64 object-cover"> |
| </div> |
| <div class="overflow-hidden rounded-lg shadow-lg"> |
| <img src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Youth group" class="gallery-img w-full h-64 object-cover"> |
| </div> |
| <div class="overflow-hidden rounded-lg shadow-lg"> |
| <img src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Senior ministry" class="gallery-img w-full h-64 object-cover"> |
| </div> |
| <div class="overflow-hidden rounded-lg shadow-lg"> |
| <img src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Children's ministry" class="gallery-img w-full h-64 object-cover"> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-light"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-16"> |
| <h2 class="section-title center text-3xl md:text-4xl font-heading">Contact Us</h2> |
| <p class="text-xl max-w-3xl mx-auto">We'd love to hear from you</p> |
| </div> |
| |
| <div class="flex flex-col md:flex-row"> |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
| <div class="contact-card bg-white p-8 rounded-lg shadow-md mb-8"> |
| <h3 class="text-2xl font-heading mb-4">Get In Touch</h3> |
| <div class="mb-4"> |
| <p class="flex items-center mb-2"> |
| <i class="fas fa-map-marker-alt text-primary mr-4 text-xl"></i> |
| 123 Faith Avenue, Community City, CC 12345 |
| </p> |
| <p class="flex items-center mb-2"> |
| <i class="fas fa-phone text-primary mr-4 text-xl"></i> |
| (123) 456-7890 |
| </p> |
| <p class="flex items-center mb-2"> |
| <i class="fas fa-envelope text-primary mr-4 text-xl"></i> |
| info@williamsame.org |
| </p> |
| </div> |
| <div class="mt-8"> |
| <h4 class="text-xl font-heading mb-4">Office Hours</h4> |
| <p class="mb-2">Monday - Friday: 9:00 AM - 5:00 PM</p> |
| <p class="mb-2">Saturday: 10:00 AM - 2:00 PM</p> |
| <p>Sunday: Closed (except for services)</p> |
| </div> |
| </div> |
| |
| <div class="contact-card bg-white p-8 rounded-lg shadow-md"> |
| <h3 class="text-2xl font-heading mb-4">Follow Us</h3> |
| <div class="flex"> |
| <a href="#" class="social-icon"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="social-icon"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="social-icon"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="social-icon"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <div class="bg-white p-8 rounded-lg shadow-md"> |
| <h3 class="text-2xl font-heading mb-6">Send Us a Message</h3> |
| <form> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="name">Name</label> |
| <input type="text" id="name" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="email">Email</label> |
| <input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="subject">Subject</label> |
| <input type="text" id="subject" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2" for="message">Message</label> |
| <textarea id="message" rows="5" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea> |
| </div> |
| <button type="submit" class="btn-primary w-full">Send Message</button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="text-white"> |
| <div class="container mx-auto px-4 py-12"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-8 md:mb-0"> |
| <div class="flex items-center mb-4"> |
| <i class="fas fa-church text-white text-3xl mr-3"></i> |
| <span class="font-heading text-2xl">Williams AME Church</span> |
| </div> |
| <p class="max-w-md">A place of worship, community, and spiritual growth for all ages.</p> |
| </div> |
| |
| <div class="flex flex-col items-center md:items-end"> |
| <div class="mb-4"> |
| <h4 class="text-xl font-heading mb-2">Quick Links</h4> |
| <ul class="flex flex-wrap justify-center md:justify-end"> |
| <li class="mx-2"><a href="#home" class="hover:text-accent">Home</a></li> |
| <li class="mx-2"><a href="#about" class="hover:text-accent">About</a></li> |
| <li class="mx-2"><a href="#services" class="hover:text-accent">Services</a></li> |
| <li class="mx-2"><a href="#events" class="hover:text-accent">Events</a></li> |
| <li class="mx-2"><a href="#contact" class="hover:text-accent">Contact</a></li> |
| </ul> |
| </div> |
| <p>© 2023 Williams AME Church. All rights reserved.</p> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| window.addEventListener('load', function() { |
| setTimeout(function() { |
| document.getElementById('loadingScreen').classList.add('hidden'); |
| }, 3000); |
| }); |
| |
| |
| document.getElementById('menu-toggle').addEventListener('click', function() { |
| const menu = document.getElementById('menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| function fadeInElements() { |
| const fadeElements = document.querySelectorAll('.fade-in'); |
| |
| fadeElements.forEach(element => { |
| const elementTop = element.getBoundingClientRect().top; |
| const elementVisible = 150; |
| |
| if (elementTop < window.innerHeight - elementVisible) { |
| element.classList.add('appear'); |
| } |
| }); |
| } |
| |
| window.addEventListener('scroll', fadeInElements); |
| fadeInElements(); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| window.scrollTo({ |
| top: target.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| |
| |
| const menu = document.getElementById('menu'); |
| if (!menu.classList.contains('hidden')) { |
| menu.classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| </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=SVINT/w-ame" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
