417 lines
18 KiB
HTML
417 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hopeful Hearts Foundation</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: '#1a563c',
|
|
secondary: '#2d7d4c',
|
|
accent: '#64b58e'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 1s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.hero-image {
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.hero-image:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.donate-btn {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.donate-btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.progress-bar {
|
|
transition: width 1.5s ease-in-out;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-800">
|
|
<div class="min-h-screen flex flex-col">
|
|
<!-- Header -->
|
|
<header class="bg-white shadow-md sticky top-0 z-50">
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<div class="flex items-center">
|
|
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mr-3">
|
|
<i class="fas fa-heart text-white"></i>
|
|
</div>
|
|
<h1 class="text-xl font-bold text-primary">Hopeful Hearts</h1>
|
|
</div>
|
|
|
|
<nav class="hidden md:block">
|
|
<ul class="flex space-x-8">
|
|
<li><a href="#mission" class="hover:text-secondary transition-colors">Mission</a></li>
|
|
<li><a href="#impact" class="hover:text-secondary transition-colors">Impact</a></li>
|
|
<li><a href="#donate" class="hover:text-secondary transition-colors">Donate</a></li>
|
|
<li><a href="#contact" class="hover:text-secondary transition-colors">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<button class="md:hidden text-gray-600">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative bg-gradient-to-r from-primary to-secondary text-white">
|
|
<div class="container mx-auto px-4 py-24 md:py-32 relative">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
|
<div class="fade-in">
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">Hearts Need Healing</h1>
|
|
<p class="text-xl mb-8 max-w-lg">
|
|
We're on a mission to support vulnerable families with essential resources,
|
|
creating hope and stability for their future.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="#donate" class="bg-white text-primary hover:bg-gray-100 px-8 py-3 rounded-lg font-semibold donate-btn transition-all">
|
|
Donate Now
|
|
</a>
|
|
<a href="#impact" class="border-2 border-white text-white hover:bg-white hover:text-primary px-8 py-3 rounded-lg font-semibold transition-all">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<img src="https://images.pexels.com/photos/6257780/pexels-photo-6257780.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="A woman advocates for peace with a handmade sign during a protest." class="hero-image rounded-xl shadow-xl w-full h-80 object-cover">
|
|
<p class="absolute bottom-4 right-4 bg-white text-primary px-3 py-2 rounded-lg text-sm">
|
|
Photo by RDNE Stock project on Pexels
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Mission Section -->
|
|
<section id="mission" class="py-20 bg-white">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Our Mission</h2>
|
|
<p class="max-w-2xl mx-auto text-gray-600">
|
|
Supporting families in need through comprehensive programs and community resources.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="bg-gray-50 rounded-xl p-6 fade-in border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mb-4">
|
|
<i class="fas fa-hand-holding-heart text-white"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3">Community Support</h3>
|
|
<p class="text-gray-600">
|
|
Providing essential resources and services to families facing hardship.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-xl p-6 fade-in border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mb-4">
|
|
<i class="fas fa-utensils text-white"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3">Food Security</h3>
|
|
<p class="text-gray-600">
|
|
Ensuring every family has access to nutritious meals and food assistance.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-xl p-6 fade-in border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
|
|
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mb-4">
|
|
<i class="fas fa-school text-white"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3">Educational Support</h3>
|
|
<p class="text-gray-600">
|
|
Helping children succeed through educational resources and tutoring programs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Impact Section -->
|
|
<section id="impact" class="py-20 bg-gray-50">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Our Impact</h2>
|
|
<p class="max-w-2xl mx-auto text-gray-600">
|
|
Together we've made a difference in the lives of families across our community.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
|
<div class="fade-in">
|
|
<h3 class="text-2xl font-bold mb-6">How Your Support Makes a Difference</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
|
|
<p>120+ families receive food assistance monthly</p>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
|
|
<p>85+ children receive educational support</p>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
|
|
<p>65+ families receive emergency aid</p>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
|
|
<p>40+ community events held annually</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 fade-in">
|
|
<div class="mb-6">
|
|
<h4 class="font-bold text-lg mb-4">Our Goal Reached</h4>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span>$15,000 raised</span>
|
|
<span>75% of goal reached</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-3">
|
|
<div class="bg-primary h-3 progress-bar w-3/4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="font-bold text-lg mb-4">Fundraising Progress</h4>
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<span>Food Assistance Fund</span>
|
|
<span class="text-sm font-semibold">$3,500 / $5,000</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-secondary h-2 w-7/10"></div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<span>Education Support</span>
|
|
<span class="text-sm font-semibold">$4,200 / $6,000</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-secondary h-2 w-7/10"></div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<span>Emergency Aid Program</span>
|
|
<span class="text-sm font-semibold">$2,800 / $3,000</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-secondary h-2 w-9/10"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Donation Section -->
|
|
<section id="donate" class="py-20 bg-white">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Support Our Cause</h2>
|
|
<p class="max-w-2xl mx-auto text-gray-600">
|
|
Your contribution directly helps families in need. Every dollar matters.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="bg-gradient-to-br from-primary to-secondary rounded-xl shadow-lg p-6 text-white fade-in transform hover:-translate-y-2 transition-transform duration-300">
|
|
<h3 class="text-xl font-bold mb-4">One-Time Donation</h3>
|
|
<p class="mb-6">Make a single contribution today.</p>
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="text-sm">$10</div>
|
|
<div class="text-sm">$25</div>
|
|
<div class="text-sm">$50</div>
|
|
</div>
|
|
<a href="#" class="block bg-white text-primary hover:bg-gray-100 py-3 rounded-lg font-semibold text-center transition-all transform hover:scale-105">
|
|
Donate Now
|
|
</a>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-secondary to-accent rounded-xl shadow-lg p-6 text-white fade-in transform hover:-translate-y-2 transition-transform duration-300">
|
|
<h3 class="text-xl font-bold mb-4">Monthly Support</h3>
|
|
<p class="mb-6">Become a regular donor and make lasting change.</p>
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="text-sm">$10</div>
|
|
<div class="text-sm">$25</div>
|
|
<div class="text-sm">$50</div>
|
|
</div>
|
|
<a href="#" class="block bg-white text-secondary hover:bg-gray-100 py-3 rounded-lg font-semibold text-center transition-all transform hover:scale-105">
|
|
Monthly Support
|
|
</a>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-accent to-primary rounded-xl shadow-lg p-6 text-white fade-in transform hover:-translate-y-2 transition-transform duration-300">
|
|
<h3 class="text-xl font-bold mb-4">Corporate Sponsors</h3>
|
|
<p class="mb-6">Support our mission through business partnerships.</p>
|
|
<a href="#" class="block bg-white text-accent hover:bg-gray-100 py-3 rounded-lg font-semibold text-center transition-all transform hover:scale-105">
|
|
Partner With Us
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="py-20 bg-gray-50">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Get in Touch</h2>
|
|
<p class="max-w-2xl mx-auto text-gray-600">
|
|
We'd love to hear from you. Contact us with questions or to learn more about our programs.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="bg-white rounded-xl shadow-md p-6 fade-in">
|
|
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mb-4">
|
|
<i class="fas fa-envelope text-white"></i>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-2">Email Us</h3>
|
|
<p class="text-gray-600">info@hopefulhearts.org</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 fade-in">
|
|
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mb-4">
|
|
<i class="fas fa-phone text-white"></i>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-2">Call Us</h3>
|
|
<p class="text-gray-600">(555) 123-4567</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 fade-in">
|
|
<div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center mb-4">
|
|
<i class="fas fa-map-marker-alt text-white"></i>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-2">Visit Us</h3>
|
|
<p class="text-gray-600">123 Hope Street<br>Community City, CC 55555</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-primary text-white py-12">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-4">Hopeful Hearts</h3>
|
|
<p class="text-gray-200">
|
|
Supporting families in need through comprehensive programs and community resources.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="font-bold mb-4">Quick Links</h4>
|
|
<ul class="space-y-2 text-gray-200">
|
|
<li><a href="#mission" class="hover:text-white transition-colors">Our Mission</a></li>
|
|
<li><a href="#impact" class="hover:text-white transition-colors">Our Impact</a></li>
|
|
<li><a href="#donate" class="hover:text-white transition-colors">Donate</a></li>
|
|
<li><a href="#contact" class="hover:text-white transition-colors">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="font-bold mb-4">Connect</h4>
|
|
<div class="flex space-x-4">
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-accent transition-colors">
|
|
<i class="fab fa-facebook-f"></i>
|
|
</a>
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-accent transition-colors">
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
<a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-accent transition-colors">
|
|
<i class="fab fa-instagram"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="font-bold mb-4">Newsletter</h4>
|
|
<p class="text-gray-200 mb-4">Stay updated on our programs and events.</p>
|
|
<form class="flex">
|
|
<input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg text-gray-800 w-full focus:outline-none">
|
|
<button class="bg-secondary px-4 py-2 rounded-r-lg hover:bg-accent transition-colors">Join</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
|
|
<p>© 2023 Hopeful Hearts Foundation. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Smooth scrolling for navigation links
|
|
const links = document.querySelectorAll('a[href^="#"]');
|
|
|
|
links.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const targetId = this.getAttribute('href');
|
|
const targetElement = document.querySelector(targetId);
|
|
|
|
if (targetElement) {
|
|
window.scrollTo({
|
|
top: targetElement.offsetTop - 80,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Animate progress bars on scroll
|
|
const progressBars = document.querySelectorAll('.progress-bar');
|
|
const animateBars = () => {
|
|
progressBars.forEach(bar => {
|
|
const width = bar.style.width;
|
|
setTimeout(() => {
|
|
bar.style.width = width;
|
|
}, 100);
|
|
});
|
|
};
|
|
|
|
window.addEventListener('scroll', animateBars);
|
|
animateBars();
|
|
});
|
|
</script>
|
|
</div>
|
|
<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 148.76s</div></body>
|
|
</html> |