-
Notifications
You must be signed in to change notification settings - Fork 0
/
food_relief.html
141 lines (124 loc) · 3.71 KB
/
food_relief.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Relief - Donation Advisory</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #e9ecef; /* Light grey background */
color: #333;
}
.container {
padding: 2em;
max-width: 800px;
margin: auto;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
animation: fadeIn 1.5s ease-in-out;
}
h2 {
color: #007bff; /* Blue color */
animation: slideIn 1s ease-in-out;
}
form {
display: flex;
flex-direction: column;
animation: fadeInUp 1s ease-in-out;
}
label {
margin-top: 1em;
font-weight: bold;
}
input, textarea, select {
padding: 0.5em;
margin-top: 0.5em;
border: 1px solid #ccc;
border-radius: 4px;
transition: border-color 0.3s ease;
}
input:focus, textarea:focus, select:focus {
border-color: #007bff; /* Blue color */
outline: none;
}
button {
margin-top: 1em;
padding: 0.75em;
border: none;
border-radius: 4px;
background-color: #007bff; /* Blue color */
color: white;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3; /* Darker blue for hover */
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeInUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Food Relief Donations</h2>
<p>Your contributions are vital in providing essential food supplies to disaster-affected regions. Here are some ways you can help:</p>
<ul>
<li>Non-perishable food items</li>
<li>Canned goods</li>
<li>Packaged meals</li>
<li>Dry staples (rice, beans, etc.)</li>
</ul>
<p>Please ensure that all food items are unopened and within their expiration date. Fill out the form below to let us know what you plan to donate:</p>
<form action="submit-donation.html" method="post">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required>
<label for="phone">Your Phone Number:</label>
<input type="tel" id="phone" name="phone">
<label for="food-type">Type of Food to Donate:</label>
<select id="food-type" name="food-type" required>
<option value="">Select food type</option>
<option value="non-perishable">Non-perishable food items</option>
<option value="canned-goods">Canned goods</option>
<option value="packaged-meals">Packaged meals</option>
<option value="dry-staples">Dry staples (rice, beans, etc.)</option>
</select>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" required min="1">
<label for="comments">Additional Comments (Optional):</label>
<textarea id="comments" name="comments" rows="4"></textarea>
<button type="submit">Submit Donation</button>
</form>
</div>
</body>
</html>