Hugging Face's logo

Spaces:
ahmedamine19
/
science-horizon
Running

App Files Community
ahmedamine19 commited on
Commit
e43fb35
·
verified ·
1 Parent(s): 0e709e7

creer un site scientifiques - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +601 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Science Horizon
3
- emoji: 🌖
4
- colorFrom: pink
5
- colorTo: pink
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: science-horizon
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
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,601 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Science Horizon | Découvertes Scientifiques</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
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
12
+ }
13
+ .card-hover {
14
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .animated-underline {
21
+ position: relative;
22
+ display: inline-block;
23
+ }
24
+ .animated-underline::after {
25
+ content: '';
26
+ position: absolute;
27
+ width: 100%;
28
+ height: 2px;
29
+ bottom: -2px;
30
+ left: 0;
31
+ background-color: #3b82f6;
32
+ transform: scaleX(0);
33
+ transition: transform 0.3s ease;
34
+ }
35
+ .animated-underline:hover::after {
36
+ transform: scaleX(1);
37
+ }
38
+ .gallery-item {
39
+ transition: all 0.3s ease;
40
+ }
41
+ .gallery-item:hover {
42
+ transform: scale(1.03);
43
+ }
44
+ .floating {
45
+ animation: floating 3s ease-in-out infinite;
46
+ }
47
+ @keyframes floating {
48
+ 0% { transform: translateY(0px); }
49
+ 50% { transform: translateY(-10px); }
50
+ 100% { transform: translateY(0px); }
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="font-sans bg-gray-50">
55
+ <!-- Navigation -->
56
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
57
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
58
+ <div class="flex justify-between h-16">
59
+ <div class="flex items-center">
60
+ <div class="flex-shrink-0 flex items-center">
61
+ <i class="fas fa-atom text-blue-600 text-2xl mr-2"></i>
62
+ <span class="text-xl font-bold text-gray-900">Science Horizon</span>
63
+ </div>
64
+ <div class="hidden md:ml-10 md:flex md:space-x-8">
65
+ <a href="#accueil" class="animated-underline text-blue-600 inline-flex items-center px-1 pt-1 text-sm font-medium">Accueil</a>
66
+ <a href="#actualites" class="animated-underline text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Actualités</a>
67
+ <a href="#recherche" class="animated-underline text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Recherche</a>
68
+ <a href="#galerie" class="animated-underline text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Galerie</a>
69
+ <a href="#contact" class="animated-underline text-gray-500 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium">Contact</a>
70
+ </div>
71
+ </div>
72
+ <div class="hidden md:flex items-center">
73
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
74
+ <i class="fas fa-user-plus mr-2"></i>S'inscrire
75
+ </button>
76
+ </div>
77
+ <div class="-mr-2 flex items-center md:hidden">
78
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none">
79
+ <span class="sr-only">Ouvrir menu</span>
80
+ <i class="fas fa-bars"></i>
81
+ </button>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Mobile menu -->
87
+ <div id="mobile-menu" class="hidden md:hidden">
88
+ <div class="pt-2 pb-3 space-y-1">
89
+ <a href="#accueil" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Accueil</a>
90
+ <a href="#actualites" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Actualités</a>
91
+ <a href="#recherche" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Recherche</a>
92
+ <a href="#galerie" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Galerie</a>
93
+ <a href="#contact" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Contact</a>
94
+ <div class="mt-4 pl-3">
95
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium w-full transition duration-300">
96
+ <i class="fas fa-user-plus mr-2"></i>S'inscrire
97
+ </button>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </nav>
102
+
103
+ <!-- Hero Section -->
104
+ <section id="accueil" class="hero-gradient text-white py-20">
105
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
106
+ <div class="md:flex items-center justify-between">
107
+ <div class="md:w-1/2 mb-10 md:mb-0">
108
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Explorez les frontières de la science</h1>
109
+ <p class="text-xl mb-8 text-blue-100">Découvrez les dernières avancées scientifiques et technologiques qui façonnent notre monde.</p>
110
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
111
+ <button class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-md font-medium transition duration-300">
112
+ <i class="fas fa-book-open mr-2"></i>En savoir plus
113
+ </button>
114
+ <button class="border border-white text-white hover:bg-blue-700 px-6 py-3 rounded-md font-medium transition duration-300">
115
+ <i class="fas fa-video mr-2"></i>Vidéos
116
+ </button>
117
+ </div>
118
+ </div>
119
+ <div class="md:w-1/2 flex justify-center">
120
+ <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
121
+ alt="Illustration scientifique"
122
+ class="rounded-lg shadow-xl floating w-full max-w-md">
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </section>
127
+
128
+ <!-- Actualités Scientifiques -->
129
+ <section id="actualites" class="py-16 bg-white">
130
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
131
+ <div class="text-center mb-12">
132
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Actualités Scientifiques</h2>
133
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">Les dernières découvertes et innovations qui repoussent les limites de la connaissance humaine.</p>
134
+ </div>
135
+
136
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
137
+ <!-- Article 1 -->
138
+ <div class="bg-white rounded-lg overflow-hidden shadow-md card-hover">
139
+ <div class="relative h-48 overflow-hidden">
140
+ <img src="https://images.unsplash.com/photo-1507413245164-6160d8298b31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
141
+ alt="Télescope spatial"
142
+ class="w-full h-full object-cover">
143
+ <div class="absolute top-2 right-2 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded">
144
+ Astronomie
145
+ </div>
146
+ </div>
147
+ <div classp-6">
148
+ <div class="flex items-center text-sm text-gray-500 mb-2">
149
+ <span><i class="far fa-calendar-alt mr-1"></i> 15 Juin 2023</span>
150
+ <span class="mx-2">•</span>
151
+ <span><i class="far fa-clock mr-1"></i> 5 min de lecture</span>
152
+ </div>
153
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Nouvelle exoplanète potentiellement habitable découverte</h3>
154
+ <p class="text-gray-600 mb-4">Des astronomes ont identifié une exoplanète située dans la zone habitable de son étoile, avec des conditions propices à la présence d'eau liquide.</p>
155
+ <a href="#" class="text-blue-600 font-medium inline-flex items-center">
156
+ Lire la suite <i class="fas fa-arrow-right ml-2"></i>
157
+ </a>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Article 2 -->
162
+ <div class="bg-white rounded-lg overflow-hidden shadow-md card-hover">
163
+ <div class="relative h-48 overflow-hidden">
164
+ <img src="https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1447&q=80"
165
+ alt="Robotique médicale"
166
+ class="w-full h-full object-cover">
167
+ <div class="absolute top-2 right-2 bg-green-600 text-white text-xs font-bold px-2 py-1 rounded">
168
+ Médecine
169
+ </div>
170
+ </div>
171
+ <div class="p-6">
172
+ <div class="flex items-center text-sm text-gray-500 mb-2">
173
+ <span><i class="far fa-calendar-alt mr-1"></i> 10 Juin 2023</span>
174
+ <span class="mx-2">•</span>
175
+ <span><i class="far fa-clock mr-1"></i> 4 min de lecture</span>
176
+ </div>
177
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Percée dans la chirurgie robotique mini-invasive</h3>
178
+ <p class="text-gray-600 mb-4">Une nouvelle génération de robots chirurgicaux permet des interventions avec une précision inégalée et des temps de récupération réduits.</p>
179
+ <a href="#" class="text-blue-600 font-medium inline-flex items-center">
180
+ Lire la suite <i class="fas fa-arrow-right ml-2"></i>
181
+ </a>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Article 3 -->
186
+ <div class="bg-white rounded-lg overflow-hidden shadow-md card-hover">
187
+ <div class="relative h-48 overflow-hidden">
188
+ <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
189
+ alt="Énergie renouvelable"
190
+ class="w-full h-full object-cover">
191
+ <div class="absolute top-2 right-2 bg-yellow-600 text-white text-xs font-bold px-2 py-1 rounded">
192
+ Énergie
193
+ </div>
194
+ </div>
195
+ <div class="p-6">
196
+ <div class="flex items-center text-sm text-gray-500 mb-2">
197
+ <span><i class="far fa-calendar-alt mr-1"></i> 5 Juin 2023</span>
198
+ <span class="mx-2">•</span>
199
+ <span><i class="far fa-clock mr-1"></i> 6 min de lecture</span>
200
+ </div>
201
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Record d'efficacité pour les panneaux solaires nouvelle génération</h3>
202
+ <p class="text-gray-600 mb-4">Des chercheurs ont développé des cellules photovoltaïques atteignant un rendement de conversion de 32,5%, un record mondial pour cette technologie.</p>
203
+ <a href="#" class="text-blue-600 font-medium inline-flex items-center">
204
+ Lire la suite <i class="fas fa-arrow-right ml-2"></i>
205
+ </a>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="text-center mt-12">
211
+ <button class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-md font-medium transition duration-300">
212
+ <i class="fas fa-newspaper mr-2"></i>Voir toutes les actualités
213
+ </button>
214
+ </div>
215
+ </div>
216
+ </section>
217
+
218
+ <!-- Recherche et Découvertes -->
219
+ <section id="recherche" class="py-16 bg-gray-50">
220
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
221
+ <div class="text-center mb-12">
222
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Recherche & Découvertes</h2>
223
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">Explorez les domaines de recherche les plus prometteurs et leurs applications potentielles.</p>
224
+ </div>
225
+
226
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
227
+ <div class="bg-white p-8 rounded-lg shadow-md">
228
+ <div class="flex items-center mb-6">
229
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
230
+ <i class="fas fa-dna text-blue-600 text-xl"></i>
231
+ </div>
232
+ <h3 class="text-xl font-bold text-gray-900">Génétique et Biotechnologie</h3>
233
+ </div>
234
+ <p class="text-gray-600 mb-6">Les avancées en édition génomique, notamment avec CRISPR, ouvrent de nouvelles perspectives pour le traitement des maladies génétiques et l'amélioration des cultures.</p>
235
+ <ul class="space-y-3">
236
+ <li class="flex items-center">
237
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
238
+ <span>Thérapies géniques innovantes</span>
239
+ </li>
240
+ <li class="flex items-center">
241
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
242
+ <span>Biologie synthétique</span>
243
+ </li>
244
+ <li class="flex items-center">
245
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
246
+ <span>Médecine personnalisée</span>
247
+ </li>
248
+ </ul>
249
+ </div>
250
+
251
+ <div class="bg-white p-8 rounded-lg shadow-md">
252
+ <div class="flex items-center mb-6">
253
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
254
+ <i class="fas fa-brain text-purple-600 text-xl"></i>
255
+ </div>
256
+ <h3 class="text-xl font-bold text-gray-900">Intelligence Artificielle</h3>
257
+ </div>
258
+ <p class="text-gray-600 mb-6">L'IA transforme tous les secteurs, de la santé à l'industrie, avec des algorithmes toujours plus performants et des applications révolutionnaires.</p>
259
+ <ul class="space-y-3">
260
+ <li class="flex items-center">
261
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
262
+ <span>Apprentissage profond</span>
263
+ </li>
264
+ <li class="flex items-center">
265
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
266
+ <span>Réseaux neuronaux</span>
267
+ </li>
268
+ <li class="flex items-center">
269
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
270
+ <span>IA éthique et responsable</span>
271
+ </li>
272
+ </ul>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
277
+ <div class="md:flex">
278
+ <div class="md:w-1/2 p-8 md:p-12">
279
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Devenez contributeur scientifique</h3>
280
+ <p class="text-gray-600 mb-6">Rejoignez notre communauté de chercheurs et partagez vos découvertes avec un public passionné par la science.</p>
281
+ <ul class="space-y-4 mb-8">
282
+ <li class="flex items-start">
283
+ <i class="fas fa-check text-blue-500 mt-1 mr-3"></i>
284
+ <span>Accès à une plateforme de publication scientifique</span>
285
+ </li>
286
+ <li class="flex items-start">
287
+ <i class="fas fa-check text-blue-500 mt-1 mr-3"></i>
288
+ <span>Collaboration avec des experts internationaux</span>
289
+ </li>
290
+ <li class="flex items-start">
291
+ <i class="fas fa-check text-blue-500 mt-1 mr-3"></i>
292
+ <span>Visibilité pour vos recherches</span>
293
+ </li>
294
+ </ul>
295
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
296
+ <i class="fas fa-user-plus mr-2"></i>S'inscrire comme chercheur
297
+ </button>
298
+ </div>
299
+ <div class="md:w-1/2 bg-gray-100 flex items-center justify-center p-8">
300
+ <img src="https://images.unsplash.com/photo-1575505586569-646b2ca898fc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1466&q=80"
301
+ alt="Chercheur scientifique"
302
+ class="rounded-lg shadow-md w-full max-w-md">
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </section>
308
+
309
+ <!-- Galerie Scientifique -->
310
+ <section id="galerie" class="py-16 bg-white">
311
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
312
+ <div class="text-center mb-12">
313
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Galerie Scientifique</h2>
314
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">Images captivantes qui illustrent la beauté et la complexité de la science.</p>
315
+ </div>
316
+
317
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
318
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md">
319
+ <img src="https://images.unsplash.com/photo-1535378620166-273708d44e4c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80"
320
+ alt="Microscope électronique"
321
+ class="w-full h-64 object-cover">
322
+ <div class="p-4 bg-white">
323
+ <h3 class="font-medium text-gray-900">Microscopie électronique</h3>
324
+ <p class="text-sm text-gray-500">Structure cristalline à l'échelle nanométrique</p>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md">
329
+ <img src="https://images.unsplash.com/photo-1575722290270-626b0208df99?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
330
+ alt="Télescope spatial"
331
+ class="w-full h-64 object-cover">
332
+ <div class="p-4 bg-white">
333
+ <h3 class="font-medium text-gray-900">Nébuleuse d'Orion</h3>
334
+ <p class="text-sm text-gray-500">Pépinière d'étoiles à 1,344 années-lumière</p>
335
+ </div>
336
+ </div>
337
+
338
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md">
339
+ <img src="https://images.unsplash.com/photo-1581093057306-c4113b1e05c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
340
+ alt="Robot industriel"
341
+ class="w-full h-64 object-cover">
342
+ <div class="p-4 bg-white">
343
+ <h3 class="font-medium text-gray-900">Robotique avancée</h3>
344
+ <p class="text-sm text-gray-500">Bras robotisé pour assemblage de précision</p>
345
+ </div>
346
+ </div>
347
+
348
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md">
349
+ <img src="https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1447&q=80"
350
+ alt="Chirurgie robotique"
351
+ class="w-full h-64 object-cover">
352
+ <div class="p-4 bg-white">
353
+ <h3 class="font-medium text-gray-900">Chirurgie assistée</h3>
354
+ <p class="text-sm text-gray-500">Robot Da Vinci pour interventions mini-invasives</p>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md">
359
+ <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
360
+ alt="Panneaux solaires"
361
+ class="w-full h-64 object-cover">
362
+ <div class="p-4 bg-white">
363
+ <h3 class="font-medium text-gray-900">Énergie solaire</h3>
364
+ <p class="text-sm text-gray-500">Parc photovoltaïque nouvelle génération</p>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="gallery-item rounded-lg overflow-hidden shadow-md">
369
+ <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
370
+ alt="Laboratoire scientifique"
371
+ class="w-full h-64 object-cover">
372
+ <div class="p-4 bg-white">
373
+ <h3 class="font-medium text-gray-900">Recherche en laboratoire</h3>
374
+ <p class="text-sm text-gray-500">Équipe travaillant sur des échantillons biologiques</p>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <div class="text-center mt-12">
380
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
381
+ <i class="fas fa-images mr-2"></i>Voir toute la galerie
382
+ </button>
383
+ </div>
384
+ </div>
385
+ </section>
386
+
387
+ <!-- Formulaire de Contact -->
388
+ <section id="contact" class="py-16 bg-gray-50">
389
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
390
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
391
+ <div class="mb-12 lg:mb-0">
392
+ <h2 class="text-3xl font-bold text-gray-900 mb-6">Contactez-nous</h2>
393
+ <p class="text-lg text-gray-600 mb-8">Vous avez des questions sur nos recherches ou souhaitez collaborer avec notre équipe? N'hésitez pas à nous contacter.</p>
394
+
395
+ <div class="space-y-6">
396
+ <div class="flex items-start">
397
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
398
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
399
+ </div>
400
+ <div class="ml-4">
401
+ <h3 class="text-lg font-medium text-gray-900">Adresse</h3>
402
+ <p class="text-gray-600">42 Avenue des Sciences, 75005 Paris, France</p>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="flex items-start">
407
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
408
+ <i class="fas fa-phone-alt text-blue-600"></i>
409
+ </div>
410
+ <div class="ml-4">
411
+ <h3 class="text-lg font-medium text-gray-900">Téléphone</h3>
412
+ <p class="text-gray-600">+33 1 23 45 67 89</p>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="flex items-start">
417
+ <div class="flex-shrink-0 bg-blue-100 p-3 rounded-full">
418
+ <i class="fas fa-envelope text-blue-600"></i>
419
+ </div>
420
+ <div class="ml-4">
421
+ <h3 class="text-lg font-medium text-gray-900">Email</h3>
422
+ <p class="text-gray-600">[email protected]</p>
423
+ </div>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="mt-10">
428
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Suivez-nous</h3>
429
+ <div class="flex space-x-4">
430
+ <a href="#" class="bg-gray-200 hover:bg-gray-300 p-3 rounded-full transition duration-300">
431
+ <i class="fab fa-twitter text-gray-700"></i>
432
+ </a>
433
+ <a href="#" class="bg-gray-200 hover:bg-gray-300 p-3 rounded-full transition duration-300">
434
+ <i class="fab fa-facebook-f text-gray-700"></i>
435
+ </a>
436
+ <a href="#" class="bg-gray-200 hover:bg-gray-300 p-3 rounded-full transition duration-300">
437
+ <i class="fab fa-linkedin-in text-gray-700"></i>
438
+ </a>
439
+ <a href="#" class="bg-gray-200 hover:bg-gray-300 p-3 rounded-full transition duration-300">
440
+ <i class="fab fa-youtube text-gray-700"></i>
441
+ </a>
442
+ </div>
443
+ </div>
444
+ </div>
445
+
446
+ <div class="bg-white p-8 rounded-lg shadow-md">
447
+ <h3 class="text-xl font-bold text-gray-900 mb-6">Envoyez-nous un message</h3>
448
+ <form id="contactForm">
449
+ <div class="mb-6">
450
+ <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Nom complet</label>
451
+ <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
452
+ </div>
453
+ <div class="mb-6">
454
+ <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Adresse email</label>
455
+ <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
456
+ </div>
457
+ <div class="mb-6">
458
+ <label for="subject" class="block text-sm font-medium text-gray-700 mb-2">Sujet</label>
459
+ <select id="subject" name="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
460
+ <option value="question">Question générale</option>
461
+ <option value="collaboration">Proposition de collaboration</option>
462
+ <option value="media">Demande média</option>
463
+ <option value="other">Autre</option>
464
+ </select>
465
+ </div>
466
+ <div class="mb-6">
467
+ <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Message</label>
468
+ <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required></textarea>
469
+ </div>
470
+ <div class="flex items-center mb-6">
471
+ <input id="consent" name="consent" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" required>
472
+ <label for="consent" class="ml-2 block text-sm text-gray-700">
473
+ J'accepte que mes informations soient utilisées pour répondre à ma demande.
474
+ </label>
475
+ </div>
476
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
477
+ <i class="fas fa-paper-plane mr-2"></i>Envoyer le message
478
+ </button>
479
+ </form>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </section>
484
+
485
+ <!-- Newsletter -->
486
+ <section class="py-12 bg-blue-600 text-white">
487
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
488
+ <div class="md:flex md:items-center md:justify-between">
489
+ <div class="md:w-1/2 mb-6 md:mb-0">
490
+ <h3 class="text-2xl font-bold mb-2">Abonnez-vous à notre newsletter</h3>
491
+ <p class="text-blue-100">Recevez les dernières actualités scientifiques directement dans votre boîte mail.</p>
492
+ </div>
493
+ <div class="md:w-1/2">
494
+ <form class="flex flex-col sm:flex-row gap-3">
495
+ <input type="email" placeholder="Votre adresse email" class="flex-grow px-4 py-3 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 text-gray-900">
496
+ <button type="submit" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-md font-medium transition duration-300 whitespace-nowrap">
497
+ <i class="fas fa-envelope mr-2"></i>S'abonner
498
+ </button>
499
+ </form>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </section>
504
+
505
+ <!-- Footer -->
506
+ <footer class="bg-gray-900 text-white pt-12 pb-8">
507
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
508
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
509
+ <div>
510
+ <h3 class="text-lg font-bold mb-4">Science Horizon</h3>
511
+ <p class="text-gray-400">Explorer, découvrir, innover. Notre mission est de rendre la science accessible à tous.</p>
512
+ </div>
513
+ <div>
514
+ <h3 class="text-lg font-bold mb-4">Navigation</h3>
515
+ <ul class="space-y-2">
516
+ <li><a href="#accueil" class="text-gray-400 hover:text-white transition duration-300">Accueil</a></li>
517
+ <li><a href="#actualites" class="text-gray-400 hover:text-white transition duration-300">Actualités</a></li>
518
+ <li><a href="#recherche" class="text-gray-400 hover:text-white transition duration-300">Recherche</a></li>
519
+ <li><a href="#galerie" class="text-gray-400 hover:text-white transition duration-300">Galerie</a></li>
520
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
521
+ </ul>
522
+ </div>
523
+ <div>
524
+ <h3 class="text-lg font-bold mb-4">Domaine de recherche</h3>
525
+ <ul class="space-y-2">
526
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Astronomie</a></li>
527
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Biologie</a></li>
528
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Physique</a></li>
529
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Chimie</a></li>
530
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">IA & Robotique</a></li>
531
+ </ul>
532
+ </div>
533
+ <div>
534
+ <h3 class="text-lg font-bold mb-4">Ressources</h3>
535
+ <ul class="space-y-2">
536
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Publications</a></li>
537
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
538
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Événements</a></li>
539
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">FAQ</a></li>
540
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Politique de confidentialité</a></li>
541
+ </ul>
542
+ </div>
543
+ </div>
544
+ <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
545
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Science Horizon. Tous droits réservés.</p>
546
+ <div class="flex space-x-6">
547
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
548
+ <i class="fab fa-twitter"></i>
549
+ </a>
550
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
551
+ <i class="fab fa-facebook-f"></i>
552
+ </a>
553
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
554
+ <i class="fab fa-linkedin-in"></i>
555
+ </a>
556
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
557
+ <i class="fab fa-youtube"></i>
558
+ </a>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </footer>
563
+
564
+ <script>
565
+ // Mobile menu toggle
566
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
567
+ const menu = document.getElementById('mobile-menu');
568
+ menu.classList.toggle('hidden');
569
+ });
570
+
571
+ // Form submission
572
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
573
+ e.preventDefault();
574
+ alert('Merci pour votre message! Nous vous répondrons dès que possible.');
575
+ this.reset();
576
+ });
577
+
578
+ // Smooth scrolling for anchor links
579
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
580
+ anchor.addEventListener('click', function(e) {
581
+ e.preventDefault();
582
+ const targetId = this.getAttribute('href');
583
+ const targetElement = document.querySelector(targetId);
584
+
585
+ if (targetElement) {
586
+ window.scrollTo({
587
+ top: targetElement.offsetTop - 80,
588
+ behavior: 'smooth'
589
+ });
590
+
591
+ // Close mobile menu if open
592
+ const mobileMenu = document.getElementById('mobile-menu');
593
+ if (!mobileMenu.classList.contains('hidden')) {
594
+ mobileMenu.classList.add('hidden');
595
+ }
596
+ }
597
+ });
598
+ });
599
+ </script>
600
+ <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=ahmedamine19/science-horizon" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
601
+ </html>