Download index.html from GMA2/finally: direct link, hf CLI and curl.
- Browser
- Download file 32.5 kB
-
https://huggingface.co/spaces/GMA2/finally/resolve/main/index.html
- Command line
-
hf download hf://spaces/GMA2/finally/index.html
-
curl -L -o index.html https://huggingface.co/spaces/GMA2/finally/resolve/main/index.html
32.5 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Civitan International - Building Better Communities</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"> | |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| color: #333; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Roboto', sans-serif; | |
| font-weight: 700; | |
| } | |
| .civitan-blue { | |
| color: #005596; | |
| } | |
| .bg-civitan-blue { | |
| background-color: #005596; | |
| } | |
| .border-civitan-blue { | |
| border-color: #005596; | |
| } | |
| .civitan-yellow { | |
| color: #FFCC00; | |
| } | |
| .bg-civitan-yellow { | |
| background-color: #FFCC00; | |
| } | |
| .border-civitan-yellow { | |
| border-color: #FFCC00; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #005596 0%, #0077C8 100%); | |
| } | |
| .timeline { | |
| position: relative; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 100px 0; | |
| } | |
| .timeline::after { | |
| content: ''; | |
| position: absolute; | |
| width: 6px; | |
| background-color: #005596; | |
| top: 0; | |
| bottom: 0; | |
| left: 50%; | |
| margin-left: -3px; | |
| border-radius: 10px; | |
| } | |
| .timeline-event { | |
| padding: 10px 40px; | |
| position: relative; | |
| width: 50%; | |
| opacity: 0; | |
| } | |
| .timeline-event.left { | |
| left: 0; | |
| transform: translateX(-100px); | |
| } | |
| .timeline-event.right { | |
| left: 50%; | |
| transform: translateX(100px); | |
| } | |
| .timeline-event::after { | |
| content: ''; | |
| position: absolute; | |
| width: 25px; | |
| height: 25px; | |
| right: -17px; | |
| background-color: #005596; | |
| border: 4px solid white; | |
| top: 15px; | |
| border-radius: 50%; | |
| z-index: 1; | |
| } | |
| .timeline-event.right::after { | |
| left: -17px; | |
| } | |
| .timeline-content { | |
| padding: 20px 30px; | |
| background-color: white; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| position: relative; | |
| transition: all 0.3s ease; | |
| border-left: 4px solid #FFCC00; | |
| } | |
| .timeline-event:hover .timeline-content { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .timeline h3 { | |
| font-weight: 700; | |
| color: #005596; | |
| margin-bottom: 10px; | |
| font-size: 1.25rem; | |
| } | |
| .timeline p { | |
| line-height: 1.6; | |
| color: #555; | |
| } | |
| .service-card { | |
| transition: all 0.3s ease; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| border-top: 4px solid #005596; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| @media screen and (max-width: 768px) { | |
| .timeline::after { | |
| left: 31px; | |
| } | |
| .timeline-event { | |
| width: 100%; | |
| padding-left: 70px; | |
| padding-right: 25px; | |
| } | |
| .timeline-event.left, .timeline-event.right { | |
| left: 0; | |
| transform: none; | |
| } | |
| .timeline-event::after { | |
| left: 18px; | |
| } | |
| .timeline-event.right::after { | |
| left: 18px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm fixed w-full z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-20 items-center"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <img class="h-12 w-auto" src="https://www.civitan.org/wp-content/uploads/2021/01/civitan-logo.png" alt="Civitan Logo"> | |
| <span class="ml-3 text-xl font-bold civitan-blue">Civitan International</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#" class="text-gray-900 hover:text-civitan-blue px-3 py-2 text-sm font-medium">Home</a> | |
| <a href="#" class="text-gray-900 hover:text-civitan-blue px-3 py-2 text-sm font-medium">About</a> | |
| <a href="#" class="text-gray-900 hover:text-civitan-blue px-3 py-2 text-sm font-medium">Projects</a> | |
| <a href="#" class="text-gray-900 hover:text-civitan-blue px-3 py-2 text-sm font-medium">Timeline</a> | |
| <a href="#" class="text-gray-900 hover:text-civitan-blue px-3 py-2 text-sm font-medium">Contact</a> | |
| <button class="bg-civitan-blue hover:bg-blue-800 text-white px-6 py-2 rounded-md text-sm font-medium transition duration-300"> | |
| Join Us | |
| </button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white pt-32 pb-20 relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div class="z-10"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Building Better Communities <span class="text-blue-200">Together</span></h1> | |
| <p class="text-xl mb-8 text-blue-100 max-w-2xl">For over 100 years, Civitan International has been empowering people to create positive change in their communities through service and leadership.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <button class="bg-white text-civitan-blue hover:bg-blue-50 px-8 py-3 rounded-lg text-lg font-semibold transition duration-300 shadow-lg"> | |
| Learn More | |
| </button> | |
| <button class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-10 px-8 py-3 rounded-lg text-lg font-semibold transition duration-300"> | |
| Watch Video <i class="fas fa-play ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="relative hidden md:block"> | |
| <img src="https://www.civitan.org/wp-content/uploads/2021/01/civitan-hero.jpg" alt="Community Service" class="rounded-lg shadow-2xl floating"> | |
| <div class="absolute -bottom-6 -left-6 bg-civitan-yellow w-32 h-32 rounded-lg -z-10"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Mission & Values</h2> | |
| <div class="w-24 h-1 bg-civitan-blue mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-6">Who We Are</h3> | |
| <p class="text-gray-600 mb-6 text-lg leading-relaxed"> | |
| Civitan International is a global organization of community service clubs founded in 1917. Our members are dedicated to serving individual and community needs with an emphasis on helping people with developmental disabilities. | |
| </p> | |
| <p class="text-gray-600 mb-8 text-lg leading-relaxed"> | |
| With clubs in over 30 countries, we bring together people from all walks of life to create positive change through volunteer service, leadership development, and community building. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-hands-helping text-civitan-blue text-xl"></i> | |
| </div> | |
| <span class="font-medium text-gray-700">Service</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-users text-civitan-blue text-xl"></i> | |
| </div> | |
| <span class="font-medium text-gray-700">Community</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-heart text-civitan-blue text-xl"></i> | |
| </div> | |
| <span class="font-medium text-gray-700">Compassion</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="bg-gray-50 p-6 rounded-lg service-card"> | |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-globe-americas text-civitan-blue text-2xl"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-3">Global Reach</h4> | |
| <p class="text-gray-600">Active in over 30 countries with thousands of members worldwide.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg service-card"> | |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-hand-holding-heart text-civitan-blue text-2xl"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-3">Service Focus</h4> | |
| <p class="text-gray-600">Special emphasis on helping people with developmental disabilities.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg service-card"> | |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-user-graduate text-civitan-blue text-2xl"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-3">Leadership</h4> | |
| <p class="text-gray-600">Developing community leaders through training and mentorship.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg service-card"> | |
| <div class="bg-blue-100 w-14 h-14 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-calendar-check text-civitan-blue text-2xl"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-gray-900 mb-3">100+ Years</h4> | |
| <p class="text-gray-600">A century of service since our founding in 1917.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Timeline Section --> | |
| <section class="py-20 bg-gray-50 relative overflow-hidden"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Journey Through Time</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">From our humble beginnings to our global impact today</p> | |
| <div class="w-24 h-1 bg-civitan-blue mx-auto mt-6"></div> | |
| </div> | |
| <div class="timeline"> | |
| <!-- 1917-1920s --> | |
| <div class="timeline-event left"> | |
| <div class="timeline-content"> | |
| <h3>1917 — Founding of Civitan</h3> | |
| <p>Civitan International was founded in Birmingham, Alabama by a group of businessmen led by Dr. Courtney W. Shropshire. The name "Civitan" comes from the Latin "civitas," meaning citizenship.</p> | |
| </div> | |
| </div> | |
| <!-- 1920s --> | |
| <div class="timeline-event right"> | |
| <div class="timeline-content"> | |
| <h3>1920s — Early Expansion</h3> | |
| <p>The organization quickly expanded beyond Alabama, establishing clubs across the United States. The first international club was formed in Windsor, Ontario, Canada in 1921.</p> | |
| </div> | |
| </div> | |
| <!-- 1930s --> | |
| <div class="timeline-event left"> | |
| <div class="timeline-content"> | |
| <h3>1930s — Service During Hard Times</h3> | |
| <p>During the Great Depression, Civitan clubs focused on helping those most in need, providing food, clothing, and other assistance to struggling families in their communities.</p> | |
| </div> | |
| </div> | |
| <!-- 1940s --> | |
| <div class="timeline-event right"> | |
| <div class="timeline-content"> | |
| <h3>1940s — War Efforts</h3> | |
| <p>Civitans supported the war effort during World War II through bond drives, blood donations, and assistance to military families. Many clubs adopted the motto "Builders of Good Citizenship."</p> | |
| </div> | |
| </div> | |
| <!-- 1950s --> | |
| <div class="timeline-event left"> | |
| <div class="timeline-content"> | |
| <h3>1950s — Research Foundation</h3> | |
| <p>The Civitan International Research Center was established in 1956 at the University of Alabama at Birmingham, focusing on developmental disabilities research.</p> | |
| </div> | |
| </div> | |
| <!-- 1960s --> | |
| <div class="timeline-event right"> | |
| <div class="timeline-content"> | |
| <h3>1960s — International Growth</h3> | |
| <p>Civitan expanded its international presence with new clubs in Europe and Asia. The organization also began its long-standing partnership with Special Olympics.</p> | |
| </div> | |
| </div> | |
| <!-- 1970s --> | |
| <div class="timeline-event left"> | |
| <div class="timeline-content"> | |
| <h3>1970s — Focus on Disabilities</h3> | |
| <p>Civitan formally adopted service to people with developmental disabilities as its major focus, leading to numerous community programs and support services.</p> | |
| </div> | |
| </div> | |
| <!-- 1980s --> | |
| <div class="timeline-event right"> | |
| <div class="timeline-content"> | |
| <h3>1980s — Research Advances</h3> | |
| <p>The Civitan International Research Center made significant contributions to understanding developmental disorders like autism and Down syndrome.</p> | |
| </div> | |
| </div> | |
| <!-- 1990s --> | |
| <div class="timeline-event left"> | |
| <div class="timeline-content"> | |
| <h3>1990s — Global Service</h3> | |
| <p>Civitan clubs worldwide increased their international service projects, including disaster relief efforts and global health initiatives.</p> | |
| </div> | |
| </div> | |
| <!-- 2000s --> | |
| <div class="timeline-event right"> | |
| <div class="timeline-content"> | |
| <h3>2000s — Modernization</h3> | |
| <p>The organization modernized its structure and programs while maintaining its core values. Youth programs like Junior Civitan and Campus Civitan grew significantly.</p> | |
| </div> | |
| </div> | |
| <!-- 2010s --> | |
| <div class="timeline-event left"> | |
| <div class="timeline-content"> | |
| <h3>2010s — Centennial Celebration</h3> | |
| <p>Civitan celebrated its 100th anniversary in 2017 with special projects and events worldwide. The Research Center continued groundbreaking work in neurodevelopmental disorders.</p> | |
| </div> | |
| </div> | |
| <!-- Present --> | |
| <div class="timeline-event right"> | |
| <div class="timeline-content"> | |
| <h3>Present — Continuing the Legacy</h3> | |
| <p>Today, Civitan International continues its mission with thousands of members in over 30 countries, creating positive change through service, leadership, and research.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Impactful Projects</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Creating positive change in communities worldwide</p> | |
| <div class="w-24 h-1 bg-civitan-blue mx-auto mt-6"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl"> | |
| <div class="h-48 bg-civitan-blue relative overflow-hidden"> | |
| <img src="https://www.civitan.org/wp-content/uploads/2021/01/civitan-projects-accessibility.jpg" alt="Accessibility Project" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black opacity-30"></div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-wheelchair text-civitan-blue"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900">Accessibility Initiatives</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Creating accessible spaces and opportunities for people with disabilities through community partnerships and advocacy.</p> | |
| <a href="#" class="text-civitan-blue font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl"> | |
| <div class="h-48 bg-civitan-blue relative overflow-hidden"> | |
| <img src="https://www.civitan.org/wp-content/uploads/2021/01/civitan-projects-research.jpg" alt="Research Project" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black opacity-30"></div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-flask text-civitan-blue"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900">Research Funding</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Supporting groundbreaking research at the Civitan International Research Center focused on developmental disabilities.</p> | |
| <a href="#" class="text-civitan-blue font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl"> | |
| <div class="h-48 bg-civitan-blue relative overflow-hidden"> | |
| <img src="https://www.civitan.org/wp-content/uploads/2021/01/civitan-projects-youth.jpg" alt="Youth Project" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-black opacity-30"></div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-child text-civitan-blue"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900">Youth Programs</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Empowering the next generation through Junior Civitan and Campus Civitan clubs that develop leadership and service skills.</p> | |
| <a href="#" class="text-civitan-blue font-medium inline-flex items-center">Learn More <i class="fas fa-arrow-right ml-2"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <button class="bg-civitan-blue hover:bg-blue-800 text-white px-8 py-3 rounded-lg text-lg font-semibold transition duration-300 shadow-lg inline-flex items-center"> | |
| View All Projects <i class="fas fa-arrow-right ml-3"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-civitan-blue text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Make a Difference?</h2> | |
| <p class="text-xl text-blue-100 max-w-3xl mx-auto mb-10">Join thousands of Civitans worldwide who are building better communities through service and leadership.</p> | |
| <div class="flex flex-wrap justify-center gap-6"> | |
| <button class="bg-white text-civitan-blue hover:bg-blue-50 px-8 py-3 rounded-lg text-lg font-semibold transition duration-300 shadow-lg"> | |
| Join a Club | |
| </button> | |
| <button class="bg-civitan-yellow text-gray-900 hover:bg-yellow-500 px-8 py-3 rounded-lg text-lg font-semibold transition duration-300"> | |
| Donate Now | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> | |
| <div> | |
| <img src="https://www.civitan.org/wp-content/uploads/2021/01/civitan-logo.png" alt="Civitan Logo" class="h-12 mb-6"> | |
| <p class="text-gray-400 mb-6">Building better communities through service since 1917.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-6">Quick Links</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Our History</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Research Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Find a Club</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Member Resources</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-6">Get Involved</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Join Civitan</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Donate</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Volunteer</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Start a Club</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Corporate Partnerships</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-6">Contact Us</h3> | |
| <address class="not-italic text-gray-400"> | |
| <p class="mb-3">Civitan International</p> | |
| <p class="mb-3">P.O. Box 130744</p> | |
| <p class="mb-3">Birmingham, AL 35213</p> | |
| <p class="mb-6">United States</p> | |
| <p class="mb-3"><a href="tel:+12005919100" class="hover:text-white">+1 (205) 591-9100</a></p> | |
| <p><a href="mailto:info@civitan.org" class="hover:text-white">info@civitan.org</a></p> | |
| </address> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Civitan International. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Privacy Policy</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Terms of Service</a> | |
| <a href="#" class="text-gray-500 hover:text-white text-sm">Cookie Policy</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // GSAP Animations for Timeline | |
| gsap.registerPlugin(ScrollTrigger); | |
| const timelineEvents = document.querySelectorAll('.timeline-event'); | |
| timelineEvents.forEach((event, index) => { | |
| gsap.from(event, { | |
| scrollTrigger: { | |
| trigger: event, | |
| start: "top 80%", | |
| toggleActions: "play none none none" | |
| }, | |
| x: event.classList.contains('left') ? -100 : 100, | |
| opacity: 0, | |
| duration: 0.8, | |
| delay: index * 0.1, | |
| ease: "power2.out" | |
| }); | |
| }); | |
| // Add hover effects to timeline content | |
| const timelineContents = document.querySelectorAll('.timeline-content'); | |
| timelineContents.forEach(content => { | |
| content.addEventListener('mouseenter', () => { | |
| gsap.to(content, { | |
| scale: 1.03, | |
| duration: 0.3, | |
| ease: "power2.out" | |
| }); | |
| }); | |
| content.addEventListener('mouseleave', () => { | |
| gsap.to(content, { | |
| scale: 1, | |
| duration: 0.3, | |
| ease: "power2.out" | |
| }); | |
| }); | |
| }); | |
| // Service card animations | |
| const serviceCards = document.querySelectorAll('.service-card'); | |
| serviceCards.forEach((card, index) => { | |
| gsap.from(card, { | |
| scrollTrigger: { | |
| trigger: card, | |
| start: "top 80%", | |
| toggleActions: "play none none none" | |
| }, | |
| y: 50, | |
| opacity: 0, | |
| duration: 0.6, | |
| delay: index * 0.1, | |
| ease: "back.out(1.2)" | |
| }); | |
| }); | |
| }); | |
| </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=GMA2/finally" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |