Hugging Face's logo

Spaces:
KERAAUMA
/
ucfuw
Running

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

Create events/sunday

Browse files
Files changed (1) hide show
  1. events/sunday +481 -0
events/sunday ADDED
@@ -0,0 +1,481 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Event Details | 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
+ .nav-link {
21
+ position: relative;
22
+ }
23
+
24
+ .nav-link::after {
25
+ content: '';
26
+ position: absolute;
27
+ width: 0;
28
+ height: 2px;
29
+ bottom: -2px;
30
+ left: 0;
31
+ background-color: #1d4ed8;
32
+ transition: width 0.3s ease;
33
+ }
34
+
35
+ .nav-link:hover::after {
36
+ width: 100%;
37
+ }
38
+
39
+ .event-hero {
40
+ background: linear-gradient(135deg, rgba(29, 78, 216, 0.9) 0%, rgba(101, 42, 132, 0.8) 100%);
41
+ }
42
+
43
+ .event-details-card {
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ .event-details-card:hover {
48
+ transform: translateY(-5px);
49
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
50
+ }
51
+
52
+ .social-icon {
53
+ transition: all 0.3s ease;
54
+ }
55
+
56
+ .social-icon:hover {
57
+ transform: scale(1.1);
58
+ }
59
+
60
+ .map-container {
61
+ height: 400px;
62
+ width: 100%;
63
+ }
64
+ </style>
65
+ </head>
66
+ <body class="bg-gray-50">
67
+ <!-- Navigation -->
68
+ <nav class="bg-white shadow-md sticky top-0 z-50">
69
+ <div class="container mx-auto px-6 py-3">
70
+ <div class="flex justify-between items-center">
71
+ <div class="flex items-center space-x-4">
72
+ <div class="flex items-center">
73
+ <i class="fas fa-cross text-blue-700 text-2xl mr-2"></i>
74
+ <span class="heading-font text-xl font-bold text-blue-800">UCF</span>
75
+ </div>
76
+ <div class="hidden md:flex space-x-8">
77
+ <a href="index.html" class="nav-link text-blue-700 hover:text-blue-800 font-medium">Home</a>
78
+ <a href="about.html" class="nav-link text-gray-700 hover:text-blue-700">About</a>
79
+ <a href="events.html" class="nav-link text-gray-700 hover:text-blue-700">Events</a>
80
+ <a href="sermons.html" class="nav-link text-gray-700 hover:text-blue-700">Sermons</a>
81
+ <a href="connect.html" class="nav-link text-gray-700 hover:text-blue-700">Connect</a>
82
+ </div>
83
+ </div>
84
+ <div class="flex items-center space-x-4">
85
+ <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>
86
+ <button class="md:hidden focus:outline-none">
87
+ <i class="fas fa-bars text-gray-700 text-xl"></i>
88
+ </button>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ </nav>
93
+
94
+ <!-- Event Hero Section -->
95
+ <section class="event-hero text-white py-16 md:py-24">
96
+ <div class="container mx-auto px-6">
97
+ <div class="max-w-4xl">
98
+ <div class="flex items-center mb-6">
99
+ <span class="bg-white text-blue-700 px-3 py-1 rounded-full text-sm font-medium">Worship</span>
100
+ <span class="ml-4 text-blue-200">Sunday, September 10, 2023</span>
101
+ </div>
102
+ <h1 class="heading-font text-4xl md:text-5xl font-bold mb-6">Sunday Worship Service</h1>
103
+ <p class="text-xl mb-8 leading-relaxed">Join us for our weekly worship gathering with music, teaching, and community as we explore what it means to live with purpose in Christ.</p>
104
+ <div class="flex flex-wrap gap-4">
105
+ <div class="flex items-center bg-white bg-opacity-20 px-4 py-2 rounded-full">
106
+ <i class="fas fa-clock mr-2"></i>
107
+ <span>10:00 AM - 11:30 AM</span>
108
+ </div>
109
+ <div class="flex items-center bg-white bg-opacity-20 px-4 py-2 rounded-full">
110
+ <i class="fas fa-map-marker-alt mr-2"></i>
111
+ <span>UCF Chapel</span>
112
+ </div>
113
+ <div class="flex items-center bg-white bg-opacity-20 px-4 py-2 rounded-full">
114
+ <i class="fas fa-user-friends mr-2"></i>
115
+ <span>All Ages Welcome</span>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </section>
121
+
122
+ <!-- Event Details Section -->
123
+ <section class="py-16 bg-white">
124
+ <div class="container mx-auto px-6">
125
+ <div class="flex flex-col lg:flex-row gap-12">
126
+ <!-- Main Content -->
127
+ <div class="lg:w-2/3">
128
+ <div class="mb-12">
129
+ <img src="https://images.unsplash.com/photo-1501287365327-21780a0e9b3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sunday Worship" class="w-full rounded-lg shadow-lg">
130
+ </div>
131
+
132
+ <h2 class="heading-font text-3xl font-bold mb-6 text-gray-800">About This Event</h2>
133
+ <div class="prose max-w-none text-gray-600 mb-8">
134
+ <p>Our Sunday worship services are the heartbeat of UCF. Each week we gather as a community to worship God through music, prayer, and the study of His Word. This week, Pastor Mark will be continuing our series "Living with Purpose" with a message from Ephesians 2:10 titled "Created for Good Works."</p>
135
+
136
+ <p class="mt-4">This service is designed to be welcoming for both long-time believers and those just exploring faith. You'll experience:</p>
137
+ <ul class="mt-4 space-y-2">
138
+ <li class="flex items-start">
139
+ <i class="fas fa-music text-blue-600 mt-1 mr-3"></i>
140
+ <span>Engaging worship music led by our student worship team</span>
141
+ </li>
142
+ <li class="flex items-start">
143
+ <i class="fas fa-book-bible text-blue-600 mt-1 mr-3"></i>
144
+ <span>Practical, biblical teaching that applies to student life</span>
145
+ </li>
146
+ <li class="flex items-start">
147
+ <i class="fas fa-mug-hot text-blue-600 mt-1 mr-3"></i>
148
+ <span>Free coffee and refreshments before and after service</span>
149
+ </li>
150
+ <li class="flex items-start">
151
+ <i class="fas fa-people-group text-blue-600 mt-1 mr-3"></i>
152
+ <span>Opportunities to connect with other students</span>
153
+ </li>
154
+ </ul>
155
+
156
+ <p class="mt-6">Whether you're new to faith or have been following Jesus for years, we'd love to have you join us. Come as you are - there's no dress code or expectations.</p>
157
+ </div>
158
+
159
+ <div class="bg-blue-50 p-6 rounded-lg mb-12">
160
+ <h3 class="text-xl font-semibold mb-4 text-blue-800">Special This Week</h3>
161
+ <p class="text-blue-700 mb-4">After the service, we'll have a special welcome lunch for new students in the fellowship hall. This is a great opportunity to meet other students and learn more about UCF.</p>
162
+ <div class="flex items-center text-blue-700">
163
+ <i class="fas fa-utensils mr-3"></i>
164
+ <span>Lunch is free for all first-time visitors!</span>
165
+ </div>
166
+ </div>
167
+
168
+ <h2 class="heading-font text-3xl font-bold mb-6 text-gray-800">Sermon Details</h2>
169
+ <div class="bg-gray-50 p-6 rounded-lg">
170
+ <h3 class="text-xl font-semibold mb-2 text-gray-800">"Created for Good Works"</h3>
171
+ <p class="text-gray-600 mb-4">Ephesians 2:10 - "For we are his workmanship, created in Christ Jesus for good works, which God prepared beforehand, that we should walk in them."</p>
172
+ <p class="text-gray-600">In this message, Pastor Mark will explore what it means that we are God's workmanship, created for good works. What are these "good works" God has prepared for us? How do we discover and walk in them? This practical message will help students understand their God-given purpose during their college years and beyond.</p>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Sidebar -->
177
+ <div class="lg:w-1/3">
178
+ <div class="event-details-card bg-white p-6 rounded-lg shadow-md sticky top-24 mb-8">
179
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Event Information</h3>
180
+ <div class="space-y-4">
181
+ <div class="flex items-start">
182
+ <i class="fas fa-calendar-day text-blue-600 mt-1 mr-3"></i>
183
+ <div>
184
+ <p class="font-medium text-gray-700">Date & Time</p>
185
+ <p class="text-gray-600">Sunday, September 10, 2023</p>
186
+ <p class="text-gray-600">10:00 AM - 11:30 AM</p>
187
+ </div>
188
+ </div>
189
+ <div class="flex items-start">
190
+ <i class="fas fa-map-marker-alt text-blue-600 mt-1 mr-3"></i>
191
+ <div>
192
+ <p class="font-medium text-gray-700">Location</p>
193
+ <p class="text-gray-600">UCF Chapel</p>
194
+ <p class="text-gray-600">123 Campus Way, University City</p>
195
+ <a href="#map" class="text-blue-600 hover:text-blue-800 text-sm mt-1 inline-block">View on map →</a>
196
+ </div>
197
+ </div>
198
+ <div class="flex items-start">
199
+ <i class="fas fa-user-tag text-blue-600 mt-1 mr-3"></i>
200
+ <div>
201
+ <p class="font-medium text-gray-700">Speaker</p>
202
+ <p class="text-gray-600">Pastor Mark Williams</p>
203
+ </div>
204
+ </div>
205
+ <div class="flex items-start">
206
+ <i class="fas fa-users text-blue-600 mt-1 mr-3"></i>
207
+ <div>
208
+ <p class="font-medium text-gray-700">Audience</p>
209
+ <p class="text-gray-600">All university students</p>
210
+ <p class="text-gray-600">Open to the public</p>
211
+ </div>
212
+ </div>
213
+ <div class="flex items-start">
214
+ <i class="fas fa-tags text-blue-600 mt-1 mr-3"></i>
215
+ <div>
216
+ <p class="font-medium text-gray-700">Tags</p>
217
+ <div class="flex flex-wrap gap-2 mt-1">
218
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Worship</span>
219
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Sermon</span>
220
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Community</span>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <div class="mt-6 pt-6 border-t border-gray-200">
227
+ <h4 class="font-medium mb-3 text-gray-700">Share This Event</h4>
228
+ <div class="flex space-x-3">
229
+ <a href="#" class="social-icon bg-blue-600 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
230
+ <i class="fab fa-facebook-f"></i>
231
+ </a>
232
+ <a href="#" class="social-icon bg-pink-600 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
233
+ <i class="fab fa-instagram"></i>
234
+ </a>
235
+ <a href="#" class="social-icon bg-blue-400 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
236
+ <i class="fab fa-twitter"></i>
237
+ </a>
238
+ <a href="#" class="social-icon bg-red-600 text-white p-2 rounded-full w-10 h-10 flex items-center justify-center">
239
+ <i class="fab fa-youtube"></i>
240
+ </a>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="mt-6">
245
+ <button class="w-full bg-blue-700 hover:bg-blue-800 text-white py-3 rounded-md font-medium transition duration-300 flex items-center justify-center">
246
+ <i class="fas fa-calendar-plus mr-2"></i> Add to Calendar
247
+ </button>
248
+ </div>
249
+ </div>
250
+
251
+ <div class="event-details-card bg-white p-6 rounded-lg shadow-md mb-8">
252
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Related Events</h3>
253
+ <div class="space-y-4">
254
+ <a href="#" class="group flex items-start space-x-4">
255
+ <div class="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-lg overflow-hidden">
256
+ <img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bible Study" class="w-full h-full object-cover">
257
+ </div>
258
+ <div>
259
+ <h4 class="text-gray-800 group-hover:text-blue-700 font-medium">Midweek Bible Study</h4>
260
+ <p class="text-sm text-gray-500">Wednesdays at 7:00 PM</p>
261
+ </div>
262
+ </a>
263
+ <a href="#" class="group flex items-start space-x-4">
264
+ <div class="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-lg overflow-hidden">
265
+ <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Service Project" class="w-full h-full object-cover">
266
+ </div>
267
+ <div>
268
+ <h4 class="text-gray-800 group-hover:text-blue-700 font-medium">Community Service Day</h4>
269
+ <p class="text-sm text-gray-500">September 15 at 9:00 AM</p>
270
+ </div>
271
+ </a>
272
+ <a href="#" class="group flex items-start space-x-4">
273
+ <div class="flex-shrink-0 w-16 h-16 bg-gray-200 rounded-lg overflow-hidden">
274
+ <img src="https://images.unsplash.com/photo-1552674605-db6ffd4facb5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Worship Night" class="w-full h-full object-cover">
275
+ </div>
276
+ <div>
277
+ <h4 class="text-gray-800 group-hover:text-blue-700 font-medium">Friday Worship Night</h4>
278
+ <p class="text-sm text-gray-500">September 8 at 7:30 PM</p>
279
+ </div>
280
+ </a>
281
+ </div>
282
+ <a href="events.html" class="inline-block mt-4 text-blue-700 hover:text-blue-900 font-medium">View All Events →</a>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </section>
288
+
289
+ <!-- Map Section -->
290
+ <section id="map" class="py-16 bg-gray-100">
291
+ <div class="container mx-auto px-6">
292
+ <h2 class="heading-font text-3xl font-bold mb-8 text-center text-gray-800">Location</h2>
293
+ <div class="max-w-4xl mx-auto">
294
+ <div class="map-container rounded-lg shadow-lg overflow-hidden">
295
+ <!-- Embedded Google Map -->
296
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215256627466!2d-73.987844924687!3d40.74844047138911!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1691783726783!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
297
+ </div>
298
+
299
+ <div class="grid md:grid-cols-2 gap-8 mt-8">
300
+ <div class="bg-white p-6 rounded-lg shadow-sm">
301
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Getting There</h3>
302
+ <ul class="space-y-3">
303
+ <li class="flex items-start">
304
+ <i class="fas fa-bus text-blue-600 mt-1 mr-3"></i>
305
+ <div>
306
+ <p class="font-medium text-gray-700">By Campus Shuttle</p>
307
+ <p class="text-gray-600">Take the Blue Line shuttle to the Chapel stop. Runs every 15 minutes on Sundays.</p>
308
+ </div>
309
+ </li>
310
+ <li class="flex items-start">
311
+ <i class="fas fa-car text-blue-600 mt-1 mr-3"></i>
312
+ <div>
313
+ <p class="font-medium text-gray-700">By Car</p>
314
+ <p class="text-gray-600">Free parking available in Lot C behind the chapel building.</p>
315
+ </div>
316
+ </li>
317
+ <li class="flex items-start">
318
+ <i class="fas fa-walking text-blue-600 mt-1 mr-3"></i>
319
+ <div>
320
+ <p class="font-medium text-gray-700">Walking</p>
321
+ <p class="text-gray-600">10 minute walk from the main quad. Follow signs to the chapel.</p>
322
+ </div>
323
+ </li>
324
+ </ul>
325
+ </div>
326
+
327
+ <div class="bg-white p-6 rounded-lg shadow-sm">
328
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Accessibility</h3>
329
+ <ul class="space-y-3">
330
+ <li class="flex items-start">
331
+ <i class="fas fa-wheelchair text-blue-600 mt-1 mr-3"></i>
332
+ <div>
333
+ <p class="font-medium text-gray-700">Wheelchair Access</p>
334
+ <p class="text-gray-600">Fully accessible with ramps and elevators. Reserved seating available.</p>
335
+ </div>
336
+ </li>
337
+ <li class="flex items-start">
338
+ <i class="fas fa-ear-deaf text-blue-600 mt-1 mr-3"></i>
339
+ <div>
340
+ <p class="font-medium text-gray-700">Hearing Assistance</p>
341
+ <p class="text-gray-600">Hearing aid compatible devices available at the welcome desk.</p>
342
+ </div>
343
+ </li>
344
+ <li class="flex items-start">
345
+ <i class="fas fa-blind text-blue-600 mt-1 mr-3"></i>
346
+ <div>
347
+ <p class="font-medium text-gray-700">Visual Assistance</p>
348
+ <p class="text-gray-600">Large print bulletins available. Service animals welcome.</p>
349
+ </div>
350
+ </li>
351
+ </ul>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </section>
357
+
358
+ <!-- CTA Section -->
359
+ <section class="py-16 bg-blue-800 text-white">
360
+ <div class="container mx-auto px-6 text-center">
361
+ <h2 class="heading-font text-3xl md:text-4xl font-bold mb-6">Ready to Join Us?</h2>
362
+ <p class="max-w-2xl mx-auto text-blue-200 mb-8">We'd love to welcome you this Sunday! No need to register - just show up and we'll help you get connected.</p>
363
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
364
+ <a href="events.html" class="bg-white text-blue-800 hover:bg-gray-100 px-8 py-3 rounded-md text-center font-medium transition duration-300">View All Events</a>
365
+ <a href="connect.html" class="border-2 border-white hover:bg-white hover:bg-opacity-10 px-8 py-3 rounded-md text-center font-medium transition duration-300">Get Connected</a>
366
+ </div>
367
+ </div>
368
+ </section>
369
+
370
+ <!-- Footer -->
371
+ <footer class="bg-gray-900 text-white pt-16 pb-8">
372
+ <div class="container mx-auto px-6">
373
+ <div class="grid md:grid-cols-4 gap-8 mb-12">
374
+ <div>
375
+ <div class="flex items-center mb-6">
376
+ <i class="fas fa-cross text-blue-500 text-2xl mr-2"></i>
377
+ <span class="heading-font text-xl font-bold">UCF</span>
378
+ </div>
379
+ <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>
380
+ <div class="flex space-x-4">
381
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-facebook-f"></i></a>
382
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-instagram"></i></a>
383
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-twitter"></i></a>
384
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-youtube"></i></a>
385
+ </div>
386
+ </div>
387
+
388
+ <div>
389
+ <h3 class="text-lg font-semibold mb-6">Quick Links</h3>
390
+ <ul class="space-y-3">
391
+ <li><a href="index.html" class="text-white font-medium hover:text-white transition duration-300">Home</a></li>
392
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
393
+ <li><a href="events.html" class="text-gray-400 hover:text-white transition duration-300">Events</a></li>
394
+ <li><a href="sermons.html" class="text-gray-400 hover:text-white transition duration-300">Sermons</a></li>
395
+ <li><a href="connect.html" class="text-gray-400 hover:text-white transition duration-300">Connect</a></li>
396
+ </ul>
397
+ </div>
398
+
399
+ <div>
400
+ <h3 class="text-lg font-semibold mb-6">Resources</h3>
401
+ <ul class="space-y-3">
402
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Bible Studies</a></li>
403
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Prayer Requests</a></li>
404
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Mission Trips</a></li>
405
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Leadership</a></li>
406
+ <li><a href="give.html" class="text-gray-400 hover:text-white transition duration-300">Give Online</a></li>
407
+ </ul>
408
+ </div>
409
+
410
+ <div>
411
+ <h3 class="text-lg font-semibold mb-6">Contact Us</h3>
412
+ <ul class="space-y-3">
413
+ <li class="flex items-start">
414
+ <i class="fas fa-map-marker-alt text-gray-400 mt-1 mr-3"></i>
415
+ <span class="text-gray-400">123 Campus Way<br>University City, ST 12345</span>
416
+ </li>
417
+ <li class="flex items-center">
418
+ <i class="fas fa-phone-alt text-gray-400 mr-3"></i>
419
+ <span class="text-gray-400">(555) 123-4567</span>
420
+ </li>
421
+ <li class="flex items-center">
422
+ <i class="fas fa-envelope text-gray-400 mr-3"></i>
423
+ <span class="text-gray-400">hello@universitycf.org</span>
424
+ </li>
425
+ </ul>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="border-t border-gray-800 pt-8">
430
+ <div class="flex flex-col md:flex-row justify-between items-center">
431
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 University Christian Fellowship. All rights reserved.</p>
432
+ <div class="flex space-x-6">
433
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Privacy Policy</a>
434
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition duration-300">Terms of Use</a>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </footer>
440
+
441
+ <script>
442
+ // Simple JavaScript for mobile menu toggle
443
+ document.addEventListener('DOMContentLoaded', function() {
444
+ const mobileMenuButton = document.querySelector('button.md\\:hidden');
445
+ const mobileMenu = document.querySelector('.md\\:flex.space-x-8');
446
+
447
+ mobileMenuButton.addEventListener('click', function() {
448
+ mobileMenu.classList.toggle('hidden');
449
+ mobileMenu.classList.toggle('flex');
450
+ mobileMenu.classList.toggle('flex-col');
451
+ mobileMenu.classList.toggle('absolute');
452
+ mobileMenu.classList.toggle('top-16');
453
+ mobileMenu.classList.toggle('left-0');
454
+ mobileMenu.classList.toggle('w-full');
455
+ mobileMenu.classList.toggle('bg-white');
456
+ mobileMenu.classList.toggle('p-4');
457
+ mobileMenu.classList.toggle('space-y-4');
458
+ mobileMenu.classList.toggle('space-x-0');
459
+ mobileMenu.classList.toggle('shadow-md');
460
+ });
461
+
462
+ // Smooth scrolling for anchor links
463
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
464
+ anchor.addEventListener('click', function (e) {
465
+ e.preventDefault();
466
+
467
+ const targetId = this.getAttribute('href');
468
+ if (targetId === '#') return;
469
+
470
+ const targetElement = document.querySelector(targetId);
471
+ if (targetElement) {
472
+ targetElement.scrollIntoView({
473
+ behavior: 'smooth'
474
+ });
475
+ }
476
+ });
477
+ });
478
+ });
479
+ </script>
480
+ </body>
481
+ </html>