Hugging Face's logo

Spaces:
KERAAUMA
/
ucfuw
Running

App Files Community
KERAAUMA commited on
Commit
55ddfe2
·
verified ·
1 Parent(s): 1faeeb0

Create give.html

Browse files
Files changed (1) hide show
  1. give.html +391 -0
give.html ADDED
@@ -0,0 +1,391 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Give | University Christian Fellowship</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ }
15
+
16
+ .heading-font {
17
+ font-family: 'Playfair Display', serif;
18
+ }
19
+
20
+ .hero-section {
21
+ background: linear-gradient(135deg, rgba(29, 78, 216, 0.9) 0%, rgba(101, 42, 132, 0.8) 100%), url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
22
+ background-size: cover;
23
+ background-position: center;
24
+ }
25
+
26
+ .nav-link {
27
+ position: relative;
28
+ }
29
+
30
+ .nav-link::after {
31
+ content: '';
32
+ position: absolute;
33
+ width: 0;
34
+ height: 2px;
35
+ bottom: -2px;
36
+ left: 0;
37
+ background-color: #1d4ed8;
38
+ transition: width 0.3s ease;
39
+ }
40
+
41
+ .nav-link:hover::after {
42
+ width: 100%;
43
+ }
44
+
45
+ .giving-card {
46
+ transition: all 0.3s ease;
47
+ }
48
+
49
+ .giving-card:hover {
50
+ transform: translateY(-5px);
51
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
52
+ }
53
+
54
+ .impact-item {
55
+ transition: all 0.3s ease;
56
+ }
57
+
58
+ .impact-item:hover {
59
+ transform: scale(1.05);
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-gray-50">
64
+ <!-- Navigation -->
65
+ <nav class="bg-white shadow-md sticky top-0 z-50">
66
+ <div class="container mx-auto px-6 py-3">
67
+ <div class="flex justify-between items-center">
68
+ <div class="flex items-center space-x-4">
69
+ <div class="flex items-center">
70
+ <i class="fas fa-cross text-blue-700 text-2xl mr-2"></i>
71
+ <span class="heading-font text-xl font-bold text-blue-800">UCF</span>
72
+ </div>
73
+ <div class="hidden md:flex space-x-8">
74
+ <a href="index.html" class="nav-link text-gray-700 hover:text-blue-700">Home</a>
75
+ <a href="about.html" class="nav-link text-gray-700 hover:text-blue-700">About</a>
76
+ <a href="events.html" class="nav-link text-gray-700 hover:text-blue-700">Events</a>
77
+ <a href="sermons.html" class="nav-link text-gray-700 hover:text-blue-700">Sermons</a>
78
+ <a href="connect.html" class="nav-link text-gray-700 hover:text-blue-700">Connect</a>
79
+ </div>
80
+ </div>
81
+ <div class="flex items-center space-x-4">
82
+ <a href="give.html" class="hidden md:block bg-blue-700 hover:bg-blue-800 text-white px-4 py-2 rounded-md transition duration-300">Give</a>
83
+ <button class="md:hidden focus:outline-none">
84
+ <i class="fas fa-bars text-gray-700 text-xl"></i>
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </nav>
90
+
91
+ <!-- Hero Section -->
92
+ <section class="hero-section text-white">
93
+ <div class="container mx-auto px-6 py-24 md:py-32 text-center">
94
+ <h1 class="heading-font text-4xl md:text-6xl font-bold mb-6">Generosity Changes Lives</h1>
95
+ <p class="text-xl mb-8 leading-relaxed max-w-3xl mx-auto">Your giving enables our ministry to impact students, support missions, and serve our community.</p>
96
+ </div>
97
+ </section>
98
+
99
+ <!-- Church Giving Section -->
100
+ <section class="py-16 bg-white">
101
+ <div class="container mx-auto px-6">
102
+ <div class="text-center mb-16">
103
+ <h2 class="heading-font text-3xl md:text-4xl font-bold mb-4 text-gray-800">Church Giving</h2>
104
+ <p class="max-w-2xl mx-auto text-gray-600">Your financial support helps sustain and grow our ministry to students.</p>
105
+ </div>
106
+
107
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
108
+ <!-- Operations Card -->
109
+ <div class="giving-card bg-gray-50 rounded-lg p-8 shadow-sm">
110
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
111
+ <i class="fas fa-church text-blue-700 text-2xl"></i>
112
+ </div>
113
+ <h3 class="text-xl font-semibold mb-4 text-center text-gray-800">Ministry Operations</h3>
114
+ <p class="text-gray-600 mb-4">Supports our weekly gatherings, Bible studies, worship services, and facility needs that create spaces for students to encounter God.</p>
115
+ <ul class="text-gray-600 space-y-2 mb-6">
116
+ <li class="flex items-start">
117
+ <i class="fas fa-check text-blue-700 mt-1 mr-2"></i>
118
+ <span>Venue rentals for large gatherings</span>
119
+ </li>
120
+ <li class="flex items-start">
121
+ <i class="fas fa-check text-blue-700 mt-1 mr-2"></i>
122
+ <span>Sound and technical equipment</span>
123
+ </li>
124
+ <li class="flex items-start">
125
+ <i class="fas fa-check text-blue-700 mt-1 mr-2"></i>
126
+ <span>Printing and materials</span>
127
+ </li>
128
+ </ul>
129
+ </div>
130
+
131
+ <!-- Missions Card -->
132
+ <div class="giving-card bg-gray-50 rounded-lg p-8 shadow-sm">
133
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
134
+ <i class="fas fa-globe-americas text-blue-700 text-2xl"></i>
135
+ </div>
136
+ <h3 class="text-xl font-semibold mb-4 text-center text-gray-800">Missions Support</h3>
137
+ <p class="text-gray-600 mb-4">Funds mission trips, local outreach, and global partnerships that share God's love in tangible ways.</p>
138
+ <ul class="text-gray-600 space-y-2 mb-6">
139
+ <li class="flex items-start">
140
+ <i class="fas fa-check text-blue-700 mt-1 mr-2"></i>
141
+ <span>Student mission trip scholarships</span>
142
+ </li>
143
+ <li class="flex items-start">
144
+ <i class="fas fa-check text-blue-700 mt-1 mr-2"></i>
145
+ <span>Local homeless ministry partnerships</span>
146
+ </li>
147
+ <li class="flex items-start">
148
+ <i class="fas fa-check text-blue-700 mt-1 mr-2"></i>
149
+ <span>International church planting efforts</span>
150
+ </li>
151
+ </ul>
152
+ </div>
153
+
154
+ <!-- Community Card -->
155
+ <div class="giving-card bg-gray-50 rounded-lg p-8 shadow-sm">
156
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
157
+ <i class="fas fa-hands-helping text-blue-700 text-2xl"></i>
158
+ </div>
159
+ <h3 class="text-xl font-semibold mb-4 text-center text-gray-800">Community Needs</h3>
160
+ <p class="text-gray-600 mb-4">Provides meals, emergency assistance, and resources for students in difficult situations.</p>
161
+ <ul class="text-gray-600 space-y-2 mb-6">
162
+ <li class="flex items-start">
163
+ <i class="fas fa-check text-blue-700 mt-1 mr-2"></i>
164
+ <span>Weekly free meals for students</span>
165
+ </li>
166
+ <li class="flex items-start">
167
+ <i class="fas fa-check text-blue-700 mt-1 mr-2"></i>
168
+ <span>Emergency housing assistance</span>
169
+ </li>
170
+ <li class="flex items-start">
171
+ <i class="fas fa-check text-blue-700 mt-1 mr-2"></i>
172
+ <span>Textbook and school supply funds</span>
173
+ </li>
174
+ </ul>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="max-w-3xl mx-auto bg-blue-50 rounded-lg p-8 mb-12">
179
+ <h3 class="text-xl font-semibold mb-4 text-center text-blue-800">How to Give to UCF</h3>
180
+ <div class="grid md:grid-cols-2 gap-6">
181
+ <div class="bg-white p-6 rounded-lg shadow-sm">
182
+ <div class="flex items-center mb-4">
183
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
184
+ <i class="fas fa-mobile-alt text-blue-700"></i>
185
+ </div>
186
+ <h4 class="font-semibold text-gray-800">Online Giving</h4>
187
+ </div>
188
+ <p class="text-gray-600 mb-4">Set up one-time or recurring donations through our secure online portal.</p>
189
+ <a href="#" class="inline-block bg-blue-700 hover:bg-blue-800 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">Give Online</a>
190
+ </div>
191
+ <div class="bg-white p-6 rounded-lg shadow-sm">
192
+ <div class="flex items-center mb-4">
193
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
194
+ <i class="fas fa-envelope text-blue-700"></i>
195
+ </div>
196
+ <h4 class="font-semibold text-gray-800">Mail a Check</h4>
197
+ </div>
198
+ <p class="text-gray-600 mb-4">Make checks payable to "University Christian Fellowship" and mail to:</p>
199
+ <p class="text-sm text-gray-500">123 Campus Way, University City, ST 12345</p>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </section>
205
+
206
+ <!-- Supporters Section -->
207
+ <section class="py-16 bg-gray-100">
208
+ <div class="container mx-auto px-6">
209
+ <div class="text-center mb-16">
210
+ <h2 class="heading-font text-3xl md:text-4xl font-bold mb-4 text-gray-800">Partner With Us</h2>
211
+ <p class="max-w-2xl mx-auto text-gray-600">Become a financial supporter to help sustain our staff and organizational needs.</p>
212
+ </div>
213
+
214
+ <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden mb-12">
215
+ <div class="md:flex">
216
+ <div class="md:w-1/2 p-8">
217
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Why Become a Supporter?</h3>
218
+ <p class="text-gray-600 mb-6">Our ministry depends on the generous support of individuals and churches who believe in our mission to reach college students with the Gospel.</p>
219
+ <p class="text-gray-600 mb-6">As a supporter, your gifts directly enable us to:</p>
220
+ <ul class="text-gray-600 space-y-3 mb-6">
221
+ <li class="flex items-start">
222
+ <i class="fas fa-check-circle text-blue-700 mt-1 mr-3"></i>
223
+ <span>Employ campus ministers who mentor students</span>
224
+ </li>
225
+ <li class="flex items-start">
226
+ <i class="fas fa-check-circle text-blue-700 mt-1 mr-3"></i>
227
+ <span>Provide leadership training for student leaders</span>
228
+ </li>
229
+ <li class="flex items-start">
230
+ <i class="fas fa-check-circle text-blue-700 mt-1 mr-3"></i>
231
+ <span>Develop discipleship programs and resources</span>
232
+ </li>
233
+ <li class="flex items-start">
234
+ <i class="fas fa-check-circle text-blue-700 mt-1 mr-3"></i>
235
+ <span>Maintain organizational infrastructure</span>
236
+ </li>
237
+ </ul>
238
+ </div>
239
+ <div class="md:w-1/2 bg-blue-50 p-8">
240
+ <h3 class="text-xl font-semibold mb-4 text-blue-800">Support Options</h3>
241
+ <div class="space-y-6">
242
+ <div class="bg-white p-4 rounded-lg shadow-sm">
243
+ <h4 class="font-semibold text-gray-800 mb-2">Monthly Partner</h4>
244
+ <p class="text-gray-600 text-sm mb-3">Commit to consistent monthly support that provides stability for our ministry.</p>
245
+ <a href="#" class="text-blue-700 hover:text-blue-800 text-sm font-medium">Learn More <i class="fas fa-arrow-right ml-1"></i></a>
246
+ </div>
247
+ <div class="bg-white p-4 rounded-lg shadow-sm">
248
+ <h4 class="font-semibold text-gray-800 mb-2">Annual Gift</h4>
249
+ <p class="text-gray-600 text-sm mb-3">Make a one-time annual contribution to support special initiatives.</p>
250
+ <a href="#" class="text-blue-700 hover:text-blue-800 text-sm font-medium">Learn More <i class="fas fa-arrow-right ml-1"></i></a>
251
+ </div>
252
+ <div class="bg-white p-4 rounded-lg shadow-sm">
253
+ <h4 class="font-semibold text-gray-800 mb-2">Legacy Giving</h4>
254
+ <p class="text-gray-600 text-sm mb-3">Include UCF in your estate planning to impact future generations.</p>
255
+ <a href="#" class="text-blue-700 hover:text-blue-800 text-sm font-medium">Learn More <i class="fas fa-arrow-right ml-1"></i></a>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="max-w-3xl mx-auto text-center">
263
+ <p class="text-gray-600 mb-8">Ready to become a financial partner or have questions about supporting our ministry?</p>
264
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
265
+ <a href="#" class="bg-blue-700 hover:bg-blue-800 text-white px-8 py-3 rounded-md text-center font-medium transition duration-300">Become a Supporter</a>
266
+ <a href="connect.html" class="border-2 border-blue-700 text-blue-700 hover:bg-blue-50 px-8 py-3 rounded-md text-center font-medium transition duration-300">Contact Our Team</a>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </section>
271
+
272
+ <!-- Impact Section -->
273
+ <section class="py-16 bg-white">
274
+ <div class="container mx-auto px-6">
275
+ <div class="text-center mb-16">
276
+ <h2 class="heading-font text-3xl md:text-4xl font-bold mb-4 text-gray-800">Your Giving Makes an Impact</h2>
277
+ <p class="max-w-2xl mx-auto text-gray-600">See how generosity is transforming lives through UCF.</p>
278
+ </div>
279
+
280
+ <div class="grid md:grid-cols-3 gap-8">
281
+ <div class="impact-item bg-gray-50 rounded-lg p-8 text-center">
282
+ <div class="text-5xl font-bold text-blue-700 mb-4">85%</div>
283
+ <p class="text-gray-600">of our operational budget comes from faithful givers like you</p>
284
+ </div>
285
+ <div class="impact-item bg-gray-50 rounded-lg p-8 text-center">
286
+ <div class="text-5xl font-bold text-blue-700 mb-4">120+</div>
287
+ <p class="text-gray-600">students served weekly through meals and community</p>
288
+ </div>
289
+ <div class="impact-item bg-gray-50 rounded-lg p-8 text-center">
290
+ <div class="text-5xl font-bold text-blue-700 mb-4">25</div>
291
+ <p class="text-gray-600">students sent on mission trips last year through your support</p>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </section>
296
+
297
+ <!-- Footer -->
298
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
299
+ <div class="container mx-auto px-6">
300
+ <div class="grid md:grid-cols-4 gap-8 mb-12">
301
+ <div>
302
+ <div class="flex items-center mb-6">
303
+ <i class="fas fa-cross text-blue-500 text-2xl mr-2"></i>
304
+ <span class="heading-font text-xl font-bold">UCF</span>
305
+ </div>
306
+ <p class="text-gray-400 mb-4">University Christian Fellowship is a campus ministry dedicated to helping students grow in their relationship with Jesus Christ.</p>
307
+ <div class="flex space-x-4">
308
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-facebook-f"></i></a>
309
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-instagram"></i></a>
310
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-twitter"></i></a>
311
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-youtube"></i></a>
312
+ </div>
313
+ </div>
314
+
315
+ <div>
316
+ <h3 class="text-lg font-semibold mb-6">Quick Links</h3>
317
+ <ul class="space-y-3">
318
+ <li><a href="index.html" class="text-white font-medium hover:text-white transition duration-300">Home</a></li>
319
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
320
+ <li><a href="events.html" class="text-gray-400 hover:text-white transition duration-300">Events</a></li>
321
+ <li><a href="sermons.html" class="text-gray-400 hover:text-white transition duration-300">Sermons</a></li>
322
+ <li><a href="connect.html" class="text-gray-400 hover:text-white transition duration-300">Connect</a></li>
323
+ </ul>
324
+ </div>
325
+
326
+ <div>
327
+ <h3 class="text-lg font-semibold mb-6">Resources</h3>
328
+ <ul class="space-y-3">
329
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Bible Studies</a></li>
330
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Prayer Requests</a></li>
331
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Mission Trips</a></li>
332
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Leadership</a></li>
333
+ <li><a href="give.html" class="text-gray-400 hover:text-white transition duration-300">Give Online</a></li>
334
+ </ul>
335
+ </div>
336
+
337
+ <div>
338
+ <h3 class="text-lg font-semibold mb-6">Contact Us</h3>
339
+ <ul class="space-y-3">
340
+ <li class="flex items-start">
341
+ <i class="fas fa-map-marker-alt text-gray-400 mt-1 mr-3"></i>
342
+ <span class="text-gray-400">123 Campus Way<br>University City, ST 12345</span>
343
+ </li>
344
+ <li class="flex items-center">
345
+ <i class="fas fa-phone-alt text-gray-400 mr-3"></i>
346
+ <span class="text-gray-400">(555) 123-4567</span>
347
+ </li>
348
+ <li class="flex items-center">
349
+ <i class="fas fa-envelope text-gray-400 mr-3"></i>
350
+ <span class="text-gray-400">hello@universitycf.org</span>
351
+ </li>
352
+ </ul>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="border-t border-gray-800 pt-8">
357
+ <div class="flex flex-col md:flex-row justify-between items-center">
358
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 University Christian Fellowship. All rights reserved.</p>
359
+ <div class="flex space-x-6">
360
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Privacy Policy</a>
361
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Terms of Use</a>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </footer>
367
+
368
+ <script>
369
+ // Simple JavaScript for mobile menu toggle
370
+ document.addEventListener('DOMContentLoaded', function() {
371
+ const mobileMenuButton = document.querySelector('button.md\\:hidden');
372
+ const mobileMenu = document.querySelector('.md\\:flex.space-x-8');
373
+
374
+ mobileMenuButton.addEventListener('click', function() {
375
+ mobileMenu.classList.toggle('hidden');
376
+ mobileMenu.classList.toggle('flex');
377
+ mobileMenu.classList.toggle('flex-col');
378
+ mobileMenu.classList.toggle('absolute');
379
+ mobileMenu.classList.toggle('top-16');
380
+ mobileMenu.classList.toggle('left-0');
381
+ mobileMenu.classList.toggle('w-full');
382
+ mobileMenu.classList.toggle('bg-white');
383
+ mobileMenu.classList.toggle('p-4');
384
+ mobileMenu.classList.toggle('space-y-4');
385
+ mobileMenu.classList.toggle('space-x-0');
386
+ mobileMenu.classList.toggle('shadow-md');
387
+ });
388
+ });
389
+ </script>
390
+ </body>
391
+ </html>