Hugging Face's logo

Spaces:
echodram
/
values
Running

App Files Community
echodram commited on
Commit
7de6e71
·
verified ·
1 Parent(s): d6f1411

translate all texts to french - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +567 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Values
3
- emoji: 🐨
4
  colorFrom: green
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: values
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,567 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Center for Biblical Studies - About Us</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <link rel="stylesheet" href="styles.css">
11
+ </head>
12
+
13
+ <body class="font-sans bg-gray-50">
14
+ <!-- Navigation -->
15
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
16
+ <div class="max-w-7xl mx-auto px-4">
17
+ <div class="flex justify-between items-center h-20">
18
+ <div class="flex items-center">
19
+ <i class="fas fa-bible text-3xl text-amber-500 mr-2"></i>
20
+ <span class="text-xl font-bold text-gray-800">Centre d'Études Bibliques</span>
21
+ </div>
22
+ <div class="hidden md:flex space-x-8 items-center">
23
+ <a href="index.html"
24
+ class="nav-link text-gray-800 hover:text-amber-500 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Accueil</a>
25
+ <a href="blogs.html"
26
+ class="nav-link text-gray-800 hover:text-amber-500 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Blogs</a>
27
+ <a href="values.html"
28
+ class="nav-link text-gray-800 hover:text-amber-500 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Nos
29
+ Valeurs</a>
30
+
31
+ <div class="language-selector ml-4">
32
+ <button class="flex items-center text-gray-800 hover:text-amber-500">
33
+ <i class="fas fa-globe mr-1"></i>
34
+ <span>English</span>
35
+ <i class="fas fa-chevron-down ml-1 text-xs"></i>
36
+ </button>
37
+ <div class="language-dropdown">
38
+ <a href="#" class="flex items-center">
39
+ <span class="mr-2">🇬🇧</span> English
40
+ </a>
41
+ <a href="#" class="flex items-center">
42
+ <span class="mr-2">🇫🇷</span> Français
43
+ </a>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ <div class="md:hidden">
48
+ <button class="mobile-menu-button p-2 focus:outline-none">
49
+ <i class="fas fa-bars text-gray-800 text-xl"></i>
50
+ </button>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ <!-- Mobile menu -->
55
+ <div class="mobile-menu hidden md:hidden bg-white">
56
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
57
+ <a href="index.html"
58
+ class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-amber-500">Home</a>
59
+ <a href="blogs.html"
60
+ class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-amber-500">Blogs</a>
61
+ <a href="values.html"
62
+ class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 hover:text-amber-500">Our
63
+ Values</a>
64
+ <div class="pt-2 border-t border-gray-200">
65
+ <div class="flex items-center px-3 py-2">
66
+ <i class="fas fa-globe mr-2 text-gray-800"></i>
67
+ <span class="text-gray-800 mr-2">Language:</span>
68
+ <select class="border border-gray-300 rounded px-2 py-1 text-sm">
69
+ <option>English</option>
70
+ <option>Français</option>
71
+ </select>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </nav>
77
+
78
+ <!-- About Hero Section -->
79
+ <section id="about-hero" class="about-hero flex items-center justify-center text-center text-white relative">
80
+ <div class="px-4 max-w-4xl mx-auto">
81
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 animate-fade-in">À Propos de Notre Ministère</h1>
82
+ <p class="text-xl md:text-2xl mb-8">Découvrez notre mission, nos valeurs et l'équipe dédiée à l'étude biblique et à l'éducation chrétienne.</p>
83
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
84
+ <a href="#mission"
85
+ class="btn-primary bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-full text-lg transition duration-300">
86
+ <i class="fas fa-cross mr-2"></i> Notre Mission
87
+ </a>
88
+ <a href="#team"
89
+ class="btn-primary bg-transparent hover:bg-white hover:text-gray-900 border-2 border-white text-white font-bold py-3 px-6 rounded-full text-lg transition duration-300">
90
+ <i class="fas fa-users mr-2"></i> Rencontrer l'Équipe
91
+ </a>
92
+ </div>
93
+ </div>
94
+ <div class="absolute bottom-10 left-0 right-0 text-center">
95
+ <a href="#about-content" class="text-white animate-bounce">
96
+ <i class="fas fa-chevron-down text-3xl"></i>
97
+ </a>
98
+ </div>
99
+ </section>
100
+
101
+ <!-- About Content Section -->
102
+ <section id="about-content" class="py-20 bg-white">
103
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
104
+ <div class="text-center mb-16">
105
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Notre Histoire</h2>
106
+ <div class="w-20 h-1 bg-amber-500 mx-auto"></div>
107
+ <p class="text-gray-600 max-w-4xl mx-auto mt-6 text-lg">
108
+ Fondé en 2005, le Centre d'Études Bibliques a été créé pour offrir une étude biblique rigoureuse
109
+ accessible à tous les croyants. Ce qui a commencé comme un petit groupe d'étude est devenu un ministère
110
+ international touchant des milliers de personnes à travers nos publications, ressources en ligne et programmes éducatifs.
111
+ </p>
112
+ </div>
113
+
114
+ <!-- Timeline -->
115
+ <div class="relative max-w-4xl mx-auto">
116
+ <div class="relative grid grid-cols-1 gap-8">
117
+ <!-- Timeline Item 1 -->
118
+ <div class="timeline-item relative pl-16 pb-16">
119
+ <div
120
+ class="absolute left-0 top-0 flex items-center justify-center w-10 h-10 rounded-full bg-amber-500 text-white">
121
+ <i class="fas fa-seedling"></i>
122
+ </div>
123
+ <h3 class="text-xl font-bold text-gray-800 mb-2">2005 - Débuts Modestes</h3>
124
+ <p class="text-gray-600">
125
+ Commencé comme un groupe d'étude biblique hebdomadaire dans le sous-sol d'une église locale avec seulement 12 membres.
126
+ Notre fondateur, le Dr Michael Johnson, a vu le besoin d'une compréhension biblique plus profonde parmi les croyants laïcs.
127
+ </p>
128
+ </div>
129
+
130
+ <!-- Timeline Item 2 -->
131
+ <div class="timeline-item relative pl-16 pb-16">
132
+ <div
133
+ class="absolute left-0 top-0 flex items-center justify-center w-10 h-10 rounded-full bg-amber-500 text-white">
134
+ <i class="fas fa-book"></i>
135
+ </div>
136
+ <h3 class="text-xl font-bold text-gray-800 mb-2">2010 - Première Publication</h3>
137
+ <p class="text-gray-600">
138
+ Publication de notre premier guide d'étude sur l'Évangile de Jean, devenu rapidement une ressource
139
+ utilisée par les églises à travers le pays. Cela marqua notre transition vers un ministère d'édition.
140
+ </p>
141
+ </div>
142
+
143
+ <!-- Timeline Item 3 -->
144
+ <div class="timeline-item relative pl-16 pb-16">
145
+ <div
146
+ class="absolute left-0 top-0 flex items-center justify-center w-10 h-10 rounded-full bg-amber-500 text-white">
147
+ <i class="fas fa-globe"></i>
148
+ </div>
149
+ <h3 class="text-xl font-bold text-gray-800 mb-2">2015 - Expansion Numérique</h3>
150
+ <p class="text-gray-600">
151
+ Lancement de notre plateforme en ligne, rendant nos ressources disponibles mondialement.
152
+ Notre premier voyage d'étude international en Israël a connecté l'Écriture avec son contexte géographique.
153
+ </p>
154
+ </div>
155
+
156
+ <!-- Timeline Item 4 -->
157
+ <div class="timeline-item relative pl-16">
158
+ <div
159
+ class="absolute left-0 top-0 flex items-center justify-center w-10 h-10 rounded-full bg-amber-500 text-white">
160
+ <i class="fas fa-church"></i>
161
+ </div>
162
+ <h3 class="text-xl font-bold text-gray-800 mb-2">2020 - Aujourd'hui</h3>
163
+ <p class="text-gray-600">
164
+ Nous servons maintenant plus de 50 000 abonnés dans 120 pays avec une équipe de 12 érudits et
165
+ éducateurs.
166
+ Nos ressources sont utilisées dans les séminaires, églises et études personnelles à travers le monde.
167
+ </p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </section>
173
+
174
+ <!-- Mission Section -->
175
+ <section id="mission" class="py-20 bg-gray-50">
176
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
177
+ <div class="text-center mb-16">
178
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Notre Mission & Valeurs</h2>
179
+ <div class="w-20 h-1 bg-amber-500 mx-auto"></div>
180
+ <p class="text-gray-600 max-w-2xl mx-auto mt-4">Principes directeurs qui façonnent tout ce que nous faisons</p>
181
+ </div>
182
+
183
+ <div class="grid md:grid-cols-3 gap-8">
184
+ <!-- Mission Card 1 -->
185
+ <div
186
+ class="mission-card bg-white p-8 rounded-lg shadow-md text-center transition duration-300 hover:shadow-lg">
187
+ <div class="mission-icon mb-4 text-4xl text-gray-700">
188
+ <i class="fas fa-bible"></i>
189
+ </div>
190
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Fidélité Biblique</h3>
191
+ <p class="text-gray-600">
192
+ Nous nous engageons envers l'autorité et la suffisance des Écritures, les interprétant de manière responsable
193
+ dans leurs contextes historiques et littéraires.
194
+ </p>
195
+ </div>
196
+
197
+ <!-- Mission Card 2 -->
198
+ <div
199
+ class="mission-card bg-white p-8 rounded-lg shadow-md text-center transition duration-300 hover:shadow-lg">
200
+ <div class="mission-icon mb-4 text-4xl text-gray-700">
201
+ <i class="fas fa-graduation-cap"></i>
202
+ </div>
203
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Excellence Académique</h3>
204
+ <p class="text-gray-600">
205
+ Notre équipe maintient les plus hauts standards d'érudition tout en rendant les concepts
206
+ théologiques complexes accessibles à tous les croyants.
207
+ </p>
208
+ </div>
209
+
210
+ <!-- Mission Card 3 -->
211
+ <div
212
+ class="mission-card bg-white p-8 rounded-lg shadow-md text-center transition duration-300 hover:shadow-lg">
213
+ <div class="mission-icon mb-4 text-4xl text-gray-700">
214
+ <i class="fas fa-hands-helping"></i>
215
+ </div>
216
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Application Pratique</h3>
217
+ <p class="text-gray-600">
218
+ Nous comblons le fossé entre la connaissance biblique et la vie chrétienne, aidant les croyants
219
+ à appliquer les Écritures à la vie quotidienne.
220
+ </p>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="mt-16 bg-amber-50 border-l-4 border-amber-500 p-6 rounded">
225
+ <div class="flex">
226
+ <div class="flex-shrink-0">
227
+ <i class="fas fa-quote-left text-3xl text-amber-500"></i>
228
+ </div>
229
+ <div class="ml-4">
230
+ <p class="text-lg italic text-gray-700">
231
+ "Notre vision est de voir chaque croyant équipé d'une compréhension profonde des Écritures qui
232
+ transforme leur relation avec Dieu et influence leurs communautés pour Christ."
233
+ </p>
234
+ <p class="mt-4 font-medium text-gray-800">
235
+ — Dr Michael Johnson, Fondateur & Directeur
236
+ </p>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </section>
242
+
243
+ <!-- Team Section -->
244
+ <section id="team" class="py-20 bg-white">
245
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
246
+ <div class="text-center mb-16">
247
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Rencontrez Notre Équipe</h2>
248
+ <div class="w-20 h-1 bg-amber-500 mx-auto"></div>
249
+ <p class="text-gray-600 max-w-2xl mx-auto mt-4">Érudits et éducateurs dévoués engagés envers la vérité biblique</p>
250
+ </div>
251
+
252
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
253
+ <!-- Team Member 1 -->
254
+ <div class="team-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
255
+ <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
256
+ alt="Dr. Michael Johnson" class="w-full h-64 object-cover">
257
+ <div class="p-6">
258
+ <h3 class="text-xl font-bold text-gray-800 mb-1">Dr Michael Johnson</h3>
259
+ <p class="text-amber-500 font-medium mb-3">Fondateur & Directeur</p>
260
+ <p class="text-gray-600 mb-4">
261
+ PhD in Biblical Studies from Oxford University. Specializes in Pauline epistles and early
262
+ church history.
263
+ Author of 12 books on biblical interpretation.
264
+ </p>
265
+ <div class="flex space-x-4">
266
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition duration-300">
267
+ <i class="fab fa-twitter"></i>
268
+ </a>
269
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition duration-300">
270
+ <i class="fab fa-linkedin"></i>
271
+ </a>
272
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition duration-300">
273
+ <i class="fas fa-envelope"></i>
274
+ </a>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Team Member 2 -->
280
+ <div class="team-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
281
+ <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80"
282
+ alt="Dr. Elizabeth Thompson" class="w-full h-64 object-cover">
283
+ <div class="p-6">
284
+ <h3 class="text-xl font-bold text-gray-800 mb-1">Dr. Elizabeth Thompson</h3>
285
+ <p class="text-amber-500 font-medium mb-3">Senior Researcher</p>
286
+ <p class="text-gray-600 mb-4">
287
+ PhD in Old Testament Studies from Yale Divinity School. Expert in Hebrew poetry and wisdom
288
+ literature.
289
+ Leads our Holy Land study tours.
290
+ </p>
291
+ <div class="flex space-x-4">
292
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition duration-300">
293
+ <i class="fab fa-twitter"></i>
294
+ </a>
295
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition duration-300">
296
+ <i class="fab fa-linkedin"></i>
297
+ </a>
298
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition duration-300">
299
+ <i class="fas fa-envelope"></i>
300
+ </a>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Team Member 3 -->
306
+ <div class="team-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
307
+ <img src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
308
+ alt="Dr. Robert Chen" class="w-full h-64 object-cover">
309
+ <div class="p-6">
310
+ <h3 class="text-xl font-bold text-gray-800 mb-1">Dr. Robert Chen</h3>
311
+ <p class="text-amber-500 font-medium mb-3">Theology Department Head</p>
312
+ <p class="text-gray-600 mb-4">
313
+ PhD in Systematic Theology from Princeton Theological Seminary. Focuses on Christology and
314
+ theological method.
315
+ Editor of our quarterly theological journal.
316
+ </p>
317
+ <div class="flex space-x-4">
318
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition duration-300">
319
+ <i class="fab fa-twitter"></i>
320
+ </a>
321
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition duration-300">
322
+ <i class="fab fa-linkedin"></i>
323
+ </a>
324
+ <a href="#" class="text-gray-500 hover:text-amber-500 transition duration-300">
325
+ <i class="fas fa-envelope"></i>
326
+ </a>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <div class="text-center mt-12">
333
+ <a href="#contact"
334
+ class="btn-primary inline-block bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-full text-lg transition duration-300">
335
+ <i class="fas fa-paper-plane mr-2"></i> Contact Our Team
336
+ </a>
337
+ </div>
338
+ </div>
339
+ </section>
340
+
341
+ <!-- Stats Section -->
342
+ <section class="py-16 bg-amber-500 text-white">
343
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
344
+ <div class="grid md:grid-cols-4 gap-8 text-center">
345
+ <div class="p-4">
346
+ <div class="text-4xl font-bold mb-2">18</div>
347
+ <div class="text-lg">Years Serving</div>
348
+ </div>
349
+ <div class="p-4">
350
+ <div class="text-4xl font-bold mb-2">50K+</div>
351
+ <div class="text-lg">Subscribers</div>
352
+ </div>
353
+ <div class="p-4">
354
+ <div class="text-4xl font-bold mb-2">120</div>
355
+ <div class="text-lg">Countries Reached</div>
356
+ </div>
357
+ <div class="p-4">
358
+ <div class="text-4xl font-bold mb-2">12</div>
359
+ <div class="text-lg">Scholars</div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </section>
364
+
365
+ <!-- Contact Section -->
366
+ <section id="contact" class="py-20 bg-gray-50">
367
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
368
+ <div class="text-center mb-16">
369
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Get In Touch</h2>
370
+ <div class="w-20 h-1 bg-amber-500 mx-auto"></div>
371
+ <p class="text-gray-600 max-w-2xl mx-auto mt-4">We'd love to hear from you. Reach out with questions,
372
+ comments, or speaking inquiries.</p>
373
+ </div>
374
+
375
+ <div class="grid md:grid-cols-2 gap-12">
376
+ <div>
377
+ <form class="space-y-6">
378
+ <div>
379
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
380
+ <input type="text" id="name"
381
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500"
382
+ placeholder="Your name">
383
+ </div>
384
+ <div>
385
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email
386
+ Address</label>
387
+ <input type="email" id="email"
388
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500"
389
+ placeholder="Your email">
390
+ </div>
391
+ <div>
392
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>
393
+ <select id="subject"
394
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500">
395
+ <option>General Inquiry</option>
396
+ <option>Speaking Request</option>
397
+ <option>Study Tour Information</option>
398
+ <option>Publication Questions</option>
399
+ </select>
400
+ </div>
401
+ <div>
402
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
403
+ <textarea id="message" rows="5"
404
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-amber-500 focus:border-amber-500"
405
+ placeholder="Your message"></textarea>
406
+ </div>
407
+ <div>
408
+ <button type="submit"
409
+ class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-md transition duration-300">
410
+ Send Message
411
+ </button>
412
+ </div>
413
+ </form>
414
+ </div>
415
+ <div>
416
+ <div class="bg-white p-8 rounded-lg shadow-md h-full">
417
+ <h3 class="text-xl font-bold text-gray-800 mb-6">Contact Information</h3>
418
+
419
+ <div class="space-y-6">
420
+ <div class="flex items-start">
421
+ <div class="flex-shrink-0 mt-1">
422
+ <i class="fas fa-map-marker-alt text-amber-500 text-xl"></i>
423
+ </div>
424
+ <div class="ml-4">
425
+ <h4 class="text-lg font-medium text-gray-800">Our Location</h4>
426
+ <p class="text-gray-600">123 Biblical Way<br>Jerusalem, Israel 12345</p>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="flex items-start">
431
+ <div class="flex-shrink-0 mt-1">
432
+ <i class="fas fa-envelope text-amber-500 text-xl"></i>
433
+ </div>
434
+ <div class="ml-4">
435
+ <h4 class="text-lg font-medium text-gray-800">Email Us</h4>
436
+ <p class="text-gray-600">info@biblicalstudies.org<br>support@biblicalstudies.org</p>
437
+ </div>
438
+ </div>
439
+
440
+ <div class="flex items-start">
441
+ <div class="flex-shrink-0 mt-1">
442
+ <i class="fas fa-phone-alt text-amber-500 text-xl"></i>
443
+ </div>
444
+ <div class="ml-4">
445
+ <h4 class="text-lg font-medium text-gray-800">Call Us</h4>
446
+ <p class="text-gray-600">+1 (555) 123-4567<br>Mon-Fri, 9am-5pm EST</p>
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="mt-8">
452
+ <h4 class="text-lg font-medium text-gray-800 mb-4">Follow Us</h4>
453
+ <div class="flex space-x-4">
454
+ <a href="#"
455
+ class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 hover:bg-amber-500 hover:text-white transition duration-300">
456
+ <i class="fab fa-facebook-f"></i>
457
+ </a>
458
+ <a href="#"
459
+ class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 hover:bg-amber-500 hover:text-white transition duration-300">
460
+ <i class="fab fa-twitter"></i>
461
+ </a>
462
+ <a href="#"
463
+ class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 hover:bg-amber-500 hover:text-white transition duration-300">
464
+ <i class="fab fa-instagram"></i>
465
+ </a>
466
+ <a href="#"
467
+ class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-700 hover:bg-amber-500 hover:text-white transition duration-300">
468
+ <i class="fab fa-youtube"></i>
469
+ </a>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </section>
477
+
478
+ <!-- Footer -->
479
+ <footer class="bg-gray-800 text-white py-12">
480
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
481
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
482
+ <div>
483
+ <div class="flex items-center mb-4">
484
+ <i class="fas fa-bible text-3xl text-amber-500 mr-2"></i>
485
+ <span class="text-xl font-bold">Center for Biblical Studies</span>
486
+ </div>
487
+ <p class="text-gray-400">Equipping believers with biblical knowledge for faithful living and
488
+ effective ministry.</p>
489
+ </div>
490
+
491
+ <div>
492
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
493
+ <ul class="space-y-2">
494
+ <li><a href="index.html"
495
+ class="text-gray-400 hover:text-amber-500 transition duration-300">Home</a></li>
496
+ <li><a href="blog.html"
497
+ class="text-gray-400 hover:text-amber-500 transition duration-300">Blogs</a></li>
498
+ <li><a href="#contact"
499
+ class="text-gray-400 hover:text-amber-500 transition duration-300">Contact</a></li>
500
+ </ul>
501
+ </div>
502
+
503
+ <div>
504
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
505
+ <ul class="space-y-2">
506
+ <li><a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300">Study
507
+ Guides</a></li>
508
+ <li><a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300">Online
509
+ Courses</a></li>
510
+ <li><a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300">Research
511
+ Papers</a></li>
512
+ </ul>
513
+ </div>
514
+
515
+ <div>
516
+ <h3 class="text-lg font-semibold mb-4">Newsletter</h3>
517
+ <p class="text-gray-400 mb-4">Subscribe to receive new blog posts and updates directly to your
518
+ inbox.</p>
519
+ <form class="flex">
520
+ <input type="email" placeholder="Your email"
521
+ class="px-4 py-2 w-full rounded-l-md focus:outline-none text-gray-800">
522
+ <button type="submit"
523
+ class="bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded-r-md transition duration-300">
524
+ <i class="fas fa-paper-plane"></i>
525
+ </button>
526
+ </form>
527
+ </div>
528
+ </div>
529
+
530
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
531
+ <p class="text-gray-400 text-sm">© 2023 Center for Biblical Studies. All rights reserved.</p>
532
+ <div class="flex space-x-6 mt-4 md:mt-0">
533
+ <a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300">Privacy Policy</a>
534
+ <a href="#" class="text-gray-400 hover:text-amber-500 transition duration-300">Terms of Service</a>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </footer>
539
+
540
+ <script>
541
+ // Mobile menu toggle
542
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
543
+ const mobileMenu = document.querySelector('.mobile-menu');
544
+
545
+ mobileMenuButton.addEventListener('click', () => {
546
+ mobileMenu.classList.toggle('hidden');
547
+ });
548
+
549
+ // Smooth scrolling for anchor links
550
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
551
+ anchor.addEventListener('click', function (e) {
552
+ e.preventDefault();
553
+
554
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
555
+ behavior: 'smooth'
556
+ });
557
+
558
+ // Close mobile menu if open
559
+ if (!mobileMenu.classList.contains('hidden')) {
560
+ mobileMenu.classList.add('hidden');
561
+ }
562
+ });
563
+ });
564
+ </script>
565
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=echodram/values" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
566
+
567
+ </html>