finally / index.html
GMA2's picture
Add 2 files
d2f3c7e verified
Raw History Blame Contribute Delete
32.5 kB
<!DOCTYPE html>
<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>