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.
259 lines
7.8 KiB
259 lines
7.8 KiB
6 months ago
|
<?php include 'includes/header.php'; ?>
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>About Us</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
/* Global Styles */
|
||
|
|
body {
|
||
|
|
font-family: 'Arial', sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
background-color: #f1f8f4;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, h2 {
|
||
|
|
text-align: center;
|
||
|
|
color: #2e7d32;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
text-align: center;
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Container for Left and Right Sections */
|
||
|
|
.about-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 20px;
|
||
|
|
gap: 30px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Left Section for Image */
|
||
|
|
.left-side {
|
||
|
|
flex: 1;
|
||
|
|
max-width: 40%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left-side img {
|
||
|
|
width: 110%;
|
||
|
|
height: 300px; /* Adjust this value to your desired height */
|
||
|
|
border-radius: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Right Section for About Content */
|
||
|
|
.right-side {
|
||
|
|
flex: 1;
|
||
|
|
max-width: 55%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-content {
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 30px;
|
||
|
|
border-radius: 12px;
|
||
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-content h2 {
|
||
|
|
color: #2e7d32;
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-content p {
|
||
|
|
font-size: 1rem;
|
||
|
|
line-height: 1.6;
|
||
|
|
color: #555;
|
||
|
|
}
|
||
|
|
/* Mission and Vision Section Container */
|
||
|
|
.mission-vision-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between; /* Equal spacing */
|
||
|
|
padding: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Mission and Vision Card Styles */
|
||
|
|
.mission-vision-card {
|
||
|
|
flex: 1; /* Allow cards to grow equally */
|
||
|
|
max-width: 48%; /* Control width for better spacing */
|
||
|
|
background-color: #fff; /* White background for cards */
|
||
|
|
padding: 30px; /* Inner padding for content */
|
||
|
|
border-radius: 12px; /* Rounded corners */
|
||
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
|
||
|
|
text-align: center; /* Center text */
|
||
|
|
margin: 10px; /* Margin for spacing between boxes */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Card Title and Paragraph Styles */
|
||
|
|
.mission-vision-card h3 {
|
||
|
|
color: #2e7d32; /* Header color */
|
||
|
|
font-size: 1.8rem; /* Header size */
|
||
|
|
}
|
||
|
|
|
||
|
|
.mission-vision-card p {
|
||
|
|
font-size: 1rem; /* Paragraph size */
|
||
|
|
line-height: 1.6; /* Line height for readability */
|
||
|
|
color: #555; /* Text color */
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Contact Us Section */
|
||
|
|
.contact-section {
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-section h1 {
|
||
|
|
color: #2e7d32;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-grid {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 20px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card {
|
||
|
|
text-align: center;
|
||
|
|
width: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card img {
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
border-radius: 50%;
|
||
|
|
object-fit: cover;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card h4 {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card p {
|
||
|
|
font-size: 1rem;
|
||
|
|
color: #555;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card button {
|
||
|
|
background-color: #2e7d32;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
padding: 8px 15px;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
transition: background-color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact-card button:hover {
|
||
|
|
background-color: #1b5e20;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive Design */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.about-container {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left-side {
|
||
|
|
max-width: 100%;
|
||
|
|
height: 400px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.right-side {
|
||
|
|
max-width: 100%;
|
||
|
|
height: auto;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mission-vision-card {
|
||
|
|
width: 90%; /* Ensure cards are responsive */
|
||
|
|
margin: 0 auto; /* Center the cards */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="about-container">
|
||
|
|
<div class="left-side">
|
||
|
|
<img src="donations.jpg" alt="DonateEase Image">
|
||
|
|
</div>
|
||
|
|
<div class="right-side">
|
||
|
|
<div class="about-content">
|
||
|
|
<h2>About Us</h2>
|
||
|
|
<p>DonateEase is a platform designed to help individuals and organizations donate effortlessly. Our mission is to provide a seamless and secure way to donate to causes that matter, improving the lives of people in need.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Mission and Vision Section with Card Layout -->
|
||
|
|
<div class="mission-vision-container">
|
||
|
|
<div class="mission-vision-card">
|
||
|
|
<h3>Our Mission</h3>
|
||
|
|
<p>Our mission is to connect people with causes that need their support the most. Through our platform, we aim to foster a community of kindness, making it easier to donate and contribute to various causes globally.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mission-vision-card">
|
||
|
|
<h3>Our Vision</h3>
|
||
|
|
<p>We envision a world where every person has the opportunity to give, and every cause receives the support it needs. Together, we can create a global network of givers, helping to make a real difference in the world.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Contact Us Section -->
|
||
|
|
<div class="contact-section">
|
||
|
|
<h1>Our Team</h1>
|
||
|
|
<div class="contact-grid">
|
||
|
|
<div class="contact-card">
|
||
|
|
<img src="ashok.jpg" alt="Ashok Sedhain">
|
||
|
|
<h4>Ashok Sedhain</h4>
|
||
|
|
<p>+977 9840200020</p>
|
||
|
|
<button onclick="window.location.href='https://www.facebook.com/ashok.sedhain.7?mibextid=ZbWKwL'">Visit Profile</button>
|
||
|
|
</div>
|
||
|
|
<div class="contact-card">
|
||
|
|
<img src="deekshya.jpg" alt="Diksha Rai">
|
||
|
|
<h4>Diksha Rai</h4>
|
||
|
|
<p>+977 9842587018</p>
|
||
|
|
<button onclick="window.location.href='https://www.facebook.com/dikshya.themnuhang?mibextid=ZbWKwL'">Visit Profile</button>
|
||
|
|
</div>
|
||
|
|
<div class="contact-card">
|
||
|
|
<img src="jyoti.jpg" alt="Jyoti Yadav">
|
||
|
|
<h4>Jyoti Yadav</h4>
|
||
|
|
<p>+977 9761782008</p>
|
||
|
|
<button onclick="window.location.href='https://www.facebook.com/profile.php?id=100036298035305&mibextid=ZbWKwL'">Visit Profile</button>
|
||
|
|
</div>
|
||
|
|
<div class="contact-card">
|
||
|
|
<img src="niraj.jpg" alt="Niraj Pandit">
|
||
|
|
<h4>Niraj Pandit</h4>
|
||
|
|
<p>+977 9842192040</p>
|
||
|
|
<button onclick="window.location.href='https://www.facebook.com/niraj.pandit.794628?mibextid=ZbWKwL'">Visit Profile</button>
|
||
|
|
</div>
|
||
|
|
<div class="contact-card">
|
||
|
|
<img src="shristi.jpg" alt="Shristi Ghalan">
|
||
|
|
<h4>Shristi Ghalan</h4>
|
||
|
|
<p>+977 9803666391</p>
|
||
|
|
<button onclick="window.location.href='https://www.facebook.com/davidbrown'">Visit Profile</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<?php include 'includes/footer.php'; ?>
|
||
|
|
|
||
|
|
<!-- Optionally add any extra scripts -->
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|