You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
380 lines
8.3 KiB
380 lines
8.3 KiB
<?php include('includes/header.php'); ?>
|
|
|
|
<style>
|
|
/* DonateEase Stylesheet */
|
|
@media (max-width: 768px) {
|
|
.causes-grid {
|
|
flex-wrap: wrap; /* Allow wrapping on smaller screens */
|
|
}
|
|
.cause {
|
|
flex: 1 1 100%; /* Make each card take full width */
|
|
}
|
|
}
|
|
|
|
/* General Styles */
|
|
body {
|
|
font-family: "Arial", sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
color: #2e1789; /* Dark green for headings */
|
|
}
|
|
|
|
p {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
/* Header */
|
|
header {
|
|
background: #3a7736; /* Green header background */
|
|
padding: 1rem 0;
|
|
color: white;
|
|
}
|
|
|
|
.navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-links {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.nav-links li {
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: white;
|
|
font-weight: bold;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: #8ccf78; /* Light green hover color */
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.btn-primary,
|
|
.btn-secondary {
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
color: white;
|
|
font-weight: bold;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #4caf50; /* Primary green button */
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #388e3c; /* Darker green hover */
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #8bc34a; /* Secondary green button */
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #689f38; /* Darker secondary green */
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
background: url("assets/images/hero-bg.jpg") no-repeat center center/cover;
|
|
height: 100vh;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-text h1 {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hero-text p {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Featured Causes */
|
|
.featured-causes {
|
|
padding: 2rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.causes-grid {
|
|
display: flex;
|
|
gap: 2rem;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.cause {
|
|
background: white;
|
|
border: 1px solid #c8e6c9; /* Light green border */
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
width: 400px;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.cause:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.cause img {
|
|
width: 100%;
|
|
height: 150px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.cause h3 {
|
|
margin: 1rem 0;
|
|
font-size: 1.25rem;
|
|
color: #2e7d32; /* Heading green */
|
|
}
|
|
|
|
.cause p {
|
|
padding: 0 1rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Testimonials */
|
|
.testimonials {
|
|
background: #e8f5e9; /* Light green background */
|
|
padding: 2rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.testimonial-slider {
|
|
display: flex;
|
|
gap: 2rem;
|
|
overflow-x: auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.testimonial {
|
|
background: white;
|
|
border: 1px solid #c8e6c9; /* Light green border */
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
flex: 0 0 300px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.testimonial p {
|
|
font-style: italic;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.testimonial h4 {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
color: #2c5f27; /* Dark green */
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
background: #2e7d32; /* Dark green footer */
|
|
color: white;
|
|
padding: 1rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
footer .social-links {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
footer .social-links a {
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
footer .social-links a:hover {
|
|
color: #8ccf78; /* Light green hover */
|
|
}
|
|
|
|
|
|
|
|
.hero {
|
|
background: url("donation.jpg") no-repeat center center/cover;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: white;
|
|
position: relative;
|
|
}
|
|
.hero-text {
|
|
z-index: 1;
|
|
position: relative;
|
|
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.causes-grid {
|
|
display: flex;
|
|
justify-content: space-between; /* Space between items */
|
|
align-items: stretch; /* Ensure all cards have the same height */
|
|
gap: 1rem; /* Add spacing between items */
|
|
flex-wrap: nowrap; /* Prevent wrapping to a new line */
|
|
}
|
|
|
|
.cause {
|
|
flex: 1; /* Ensure all cards have equal width */
|
|
max-width: 300px; /* Optional: Limit the width of each card */
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.cause img {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
}
|
|
</style>
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero-text">
|
|
<h1>Transform Lives with Your Support</h1>
|
|
<p>
|
|
Join us in creating a better future for those in need. Every
|
|
contribution makes a difference.
|
|
</p>
|
|
<a href="donate.html" class="btn-primary">Donate Now</a>
|
|
<a href="causes.php" class="btn-secondary">Explore Causes</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Causes Section -->
|
|
<section class="featured-causes">
|
|
<div class="container">
|
|
<h2>Featured Causes</h2>
|
|
<div class="causes-grid">
|
|
<div class="cause">
|
|
<img src="education.jpg" alt="Education for All" />
|
|
<h3>Education for All</h3>
|
|
<p>
|
|
Help us provide education to underprivileged children in rural
|
|
areas.
|
|
</p>
|
|
<br>
|
|
<a href="education.html" class="btn-secondary">Learn More</a>
|
|
<br>
|
|
</div>
|
|
<div class="cause">
|
|
<img src="healthcare.jpg" alt="Healthcare Access" />
|
|
<h3>Healthcare Access</h3>
|
|
<p>Support health camps and medical aid for remote communities.</p>
|
|
<br>
|
|
<a href="healthcare.html" class="btn-secondary">Learn More</a>
|
|
<br>
|
|
</div>
|
|
<div class="cause">
|
|
<img src="disaster.jpg" alt="Disaster Relief" />
|
|
<br>
|
|
<h3>Disaster Relief</h3>
|
|
<br>
|
|
<p>
|
|
Provide immediate assistance to families affected by disasters.
|
|
</p>
|
|
<a href="disaster.html" class="btn-secondary">Learn More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials Section -->
|
|
<section class="testimonials">
|
|
<div class="container">
|
|
<h2>What Our Donors Say</h2>
|
|
<div class="testimonial-slider">
|
|
<div class="testimonial">
|
|
<p>
|
|
"DonateEase made it so simple to contribute to a cause I care
|
|
about. Seeing the impact of my donation is truly rewarding."
|
|
</p>
|
|
<h4>- Dikshya Sharma</h4>
|
|
</div>
|
|
<div class="testimonial">
|
|
<p>
|
|
"The transparency of this platform builds trust. I know my money
|
|
is making a real difference."
|
|
</p>
|
|
<h4>- Shristi Adhikari</h4>
|
|
</div>
|
|
<div class="testimonial">
|
|
<p>
|
|
"The transparency of this platform builds trust. I know my money
|
|
is making a real difference."
|
|
</p>
|
|
<h4>- Jyoti Tamang</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Call to Action Section -->
|
|
<section class="call-to-action">
|
|
<div class="container mt-3">
|
|
<h2>Ready to Make a Difference?</h2>
|
|
<br>
|
|
<a href="donate.html" class="btn-primary ">Donate Now</a>
|
|
</div>
|
|
</section>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-md-12 text-center">
|
|
<?php if (isset($_SESSION['user_email'])): ?>
|
|
<p>Welcome, <?= htmlspecialchars($_SESSION['user_email']) ?>! You are logged in.</p>
|
|
<?php else: ?>
|
|
<p>Welcome! Please log in to access more features.</p>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php include('includes/footer.php'); ?>
|
|
|