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.
131 lines
4.4 KiB
131 lines
4.4 KiB
<?php
|
|
// You can add PHP processing here if needed
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Food Donation</title>
|
|
<style>
|
|
/* General Styles */
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f7f9f7; /* Light background color */
|
|
color: #333; /* Dark text color for better readability */
|
|
}
|
|
|
|
/* Header Section */
|
|
header {
|
|
padding: 40px;
|
|
color: rgb(10, 10, 10); /* White text in header */
|
|
text-align: center; /* Center header content */
|
|
border-bottom: 4px solid #5cae5c; /* Darker green bottom border */
|
|
}
|
|
|
|
h1 {
|
|
font-size: 40px; /* Larger font size for the main title */
|
|
margin: 0; /* Remove default margin */
|
|
}
|
|
|
|
p {
|
|
font-size: 20px; /* Font size for the description */
|
|
margin: 10px 0 0; /* Add margin for spacing */
|
|
}
|
|
|
|
/* Organization Selection Section */
|
|
#organization-selection {
|
|
padding: 20px;
|
|
background-color: white; /* White background for contrast */
|
|
border-radius: 8px; /* Rounded corners */
|
|
max-width: 500px; /* Limit width */
|
|
margin: 40px auto; /* Center on the page with space above and below */
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
|
|
}
|
|
|
|
h2 {
|
|
font-size: 28px; /* Font size for section title */
|
|
margin-bottom: 15px; /* Margin below the title */
|
|
color: #77c774; /* Green color for section title */
|
|
}
|
|
|
|
label {
|
|
font-size: 16px; /* Font size for labels */
|
|
display: block; /* Display labels as block elements */
|
|
margin-bottom: 5px; /* Margin below labels */
|
|
color: #555; /* Dark grey color for labels */
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 100%; /* Full width input */
|
|
padding: 7px; /* Padding for input */
|
|
margin-bottom: 15px; /* Margin below input */
|
|
border: 1px solid #ccc; /* Light grey border */
|
|
border-radius: 4px; /* Rounded corners */
|
|
font-size: 16px; /* Font size for input */
|
|
transition: border-color 0.3s ease; /* Smooth transition for border */
|
|
}
|
|
|
|
input[type="text"]:focus {
|
|
border-color: #77c774; /* Change border color on focus */
|
|
outline: none; /* Remove default outline */
|
|
}
|
|
|
|
button {
|
|
background-color: #5cae5c; /* Darker green button */
|
|
color: white; /* White text on button */
|
|
padding: 12px 20px; /* Padding for button */
|
|
border: none; /* Remove default border */
|
|
border-radius: 4px; /* Rounded corners */
|
|
font-size: 18px; /* Font size for button */
|
|
cursor: pointer; /* Pointer cursor on hover */
|
|
transition: background-color 0.3s ease; /* Smooth transition */
|
|
width: 100%; /* Full width button */
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #4a9a4a; /* Darker green on hover */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section id="food-page">
|
|
<header>
|
|
<h1>Food Donation</h1>
|
|
<p>
|
|
Join us in helping those in need by donating food and making a
|
|
difference in our community.
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Organization Selection -->
|
|
<div id="organization-selection">
|
|
<h2>Enter Organization/Orphanage Name</h2>
|
|
<form action="donation-forn.php" method="POST">
|
|
<label for="organization-name">Organization Name:</label>
|
|
<input
|
|
type="text"
|
|
id="organization-name"
|
|
name="organization-name"
|
|
placeholder="Enter organization name"
|
|
required
|
|
/>
|
|
|
|
<button type="submit" >Proceed to Donation</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
|
|
<?php
|
|
// Handle form submission
|
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
|
$organization_name = $_POST['organization-name'];
|
|
|
|
// You can process or store the submitted data here, e.g., store in the database
|
|
echo "<p>Thank you for selecting: $organization_name</p>";
|
|
}
|
|
?>
|
|
|