Hugging Face's logo

Spaces:
driir
/
e-mage
Running

App Files Community
driir commited on
Commit
51722a4
·
verified ·
1 Parent(s): 9e5facf

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +480 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: E Mage
3
- emoji: 😻
4
- colorFrom: blue
5
- colorTo: blue
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: e-mage
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: gray
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,480 @@
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" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Portfolio d'art et d'illustration contemporaine. Découvrez mes créations artistiques uniques en décoration moderne.">
7
+ <meta name="keywords" content="art, décoration, illustration, portfolio artistique, créations artistiques">
8
+ <title>Olivia Art | Portfolio d'Illustration</title>
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
13
+
14
+ body {
15
+ font-family: 'Montserrat', sans-serif;
16
+ background-color: #f8f8f8;
17
+ color: #333;
18
+ }
19
+
20
+ .language-selector {
21
+ transition: all 0.3s ease;
22
+ }
23
+
24
+ .language-selector:hover {
25
+ transform: scale(1.1);
26
+ }
27
+
28
+ .gallery-item {
29
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
30
+ }
31
+
32
+ .gallery-item:hover {
33
+ transform: translateY(-5px);
34
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
35
+ }
36
+
37
+ .nav-link {
38
+ position: relative;
39
+ }
40
+
41
+ .nav-link::after {
42
+ content: '';
43
+ position: absolute;
44
+ width: 0;
45
+ height: 2px;
46
+ bottom: -2px;
47
+ left: 0;
48
+ background-color: #6b8e23;
49
+ transition: width 0.3s ease;
50
+ }
51
+
52
+ .nav-link:hover::after {
53
+ width: 100%;
54
+ }
55
+
56
+ input:focus, textarea:focus {
57
+ outline: none;
58
+ box-shadow: 0 0 0 2px rgba(107, 142, 35, 0.3);
59
+ }
60
+
61
+ @media (max-width: 768px) {
62
+ .mobile-menu {
63
+ transform: translateX(-100%);
64
+ transition: transform 0.3s ease;
65
+ }
66
+
67
+ .mobile-menu.active {
68
+ transform: translateX(0);
69
+ }
70
+ }
71
+ </style>
72
+ </head>
73
+ <body>
74
+ <!-- Header -->
75
+ <header class="bg-white shadow-sm sticky top-0 z-50">
76
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
77
+ <a href="#" class="text-2xl font-bold text-olive-800">OLIVIA ART</a>
78
+
79
+ <!-- Desktop Navigation -->
80
+ <nav class="hidden md:flex space-x-8">
81
+ <a href="#home" class="nav-link text-gray-700 hover:text-olive-800">Accueil</a>
82
+ <a href="#portfolio" class="nav-link text-gray-700 hover:text-olive-800">Portfolio</a>
83
+ <a href="#about" class="nav-link text-gray-700 hover:text-olive-800">À propos</a>
84
+ <a href="#contact" class="nav-link text-gray-700 hover:text-olive-800">Contact</a>
85
+ </nav>
86
+
87
+ <!-- Language Selector -->
88
+ <div class="hidden md:flex space-x-2">
89
+ <button class="language-selector px-2 py-1 rounded-full text-sm bg-olive-100 text-olive-800">FR</button>
90
+ <button class="language-selector px-2 py-1 rounded-full text-sm bg-gray-100 text-gray-600">EN</button>
91
+ <button class="language-selector px-2 py-1 rounded-full text-sm bg-gray-100 text-gray-600">FI</button>
92
+ </div>
93
+
94
+ <!-- Mobile Menu Button -->
95
+ <button id="mobile-menu-button" class="md:hidden text-gray-700">
96
+ <i class="fas fa-bars text-2xl"></i>
97
+ </button>
98
+ </div>
99
+
100
+ <!-- Mobile Menu -->
101
+ <div id="mobile-menu" class="mobile-menu md:hidden fixed inset-0 bg-white z-50 p-8">
102
+ <div class="flex justify-between items-center mb-8">
103
+ <a href="#" class="text-2xl font-bold text-olive-800">OLIVIA ART</a>
104
+ <button id="close-mobile-menu" class="text-gray-700">
105
+ <i class="fas fa-times text-2xl"></i>
106
+ </button>
107
+ </div>
108
+
109
+ <nav class="flex flex-col space-y-6 mb-8">
110
+ <a href="#home" class="nav-link text-gray-700 hover:text-olive-800 text-xl">Accueil</a>
111
+ <a href="#portfolio" class="nav-link text-gray-700 hover:text-olive-800 text-xl">Portfolio</a>
112
+ <a href="#about" class="nav-link text-gray-700 hover:text-olive-800 text-xl">À propos</a>
113
+ <a href="#contact" class="nav-link text-gray-700 hover:text-olive-800 text-xl">Contact</a>
114
+ </nav>
115
+
116
+ <div class="flex space-x-4">
117
+ <button class="language-selector px-3 py-1 rounded-full bg-olive-100 text-olive-800">FR</button>
118
+ <button class="language-selector px-3 py-1 rounded-full bg-gray-100 text-gray-600">EN</button>
119
+ <button class="language-selector px-3 py-1 rounded-full bg-gray-100 text-gray-600">FI</button>
120
+ </div>
121
+
122
+ <div class="mt-8 flex space-x-6">
123
+ <a href="#" class="text-gray-700 hover:text-olive-800"><i class="fab fa-facebook-f text-2xl"></i></a>
124
+ <a href="#" class="text-gray-700 hover:text-olive-800"><i class="fab fa-instagram text-2xl"></i></a>
125
+ </div>
126
+ </div>
127
+ </header>
128
+
129
+ <!-- Hero Section -->
130
+ <section id="home" class="py-20 md:py-32 bg-white">
131
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
132
+ <div class="md:w-1/2 mb-12 md:mb-0">
133
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Art & Illustration Contemporaine</h1>
134
+ <p class="text-lg text-gray-600 mb-8">Créations uniques mêlant tradition et modernité pour votre décoration intérieure.</p>
135
+ <div class="flex space-x-4">
136
+ <a href="#portfolio" class="px-6 py-3 bg-olive-600 text-white rounded-full hover:bg-olive-700 transition">Voir le portfolio</a>
137
+ <a href="#contact" class="px-6 py-3 border border-olive-600 text-olive-600 rounded-full hover:bg-olive-50 transition">Me contacter</a>
138
+ </div>
139
+ </div>
140
+ <div class="md:w-1/2 flex justify-center">
141
+ <img src="https://images.unsplash.com/photo-1586771107445-d3ca888129ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Illustration artistique" class="rounded-lg shadow-xl max-w-full h-auto md:max-w-md">
142
+ </div>
143
+ </div>
144
+ </section>
145
+
146
+ <!-- Portfolio Section -->
147
+ <section id="portfolio" class="py-20 bg-gray-50">
148
+ <div class="container mx-auto px-4">
149
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-4">Mon Portfolio</h2>
150
+ <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Découvrez une sélection de mes dernières créations artistiques.</p>
151
+
152
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
153
+ <!-- Portfolio Item 1 -->
154
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md">
155
+ <img src="https://images.unsplash.com/photo-1579783902614-a3fb39268bdf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Illustration botanique" class="w-full h-64 object-cover">
156
+ <div class="p-6">
157
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Flore Urbaine</h3>
158
+ <p class="text-gray-600 mb-4">Série d'illustrations botaniques modernes</p>
159
+ <a href="#" class="text-olive-600 hover:text-olive-800 font-medium">Voir plus →</a>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Portfolio Item 2 -->
164
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md">
165
+ <img src="https://images.unsplash.com/photo-1589998059171-988d887df646?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Illustration abstraite" class="w-full h-64 object-cover">
166
+ <div class="p-6">
167
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Abstractions</h3>
168
+ <p class="text-gray-600 mb-4">Exploration de formes et couleurs</p>
169
+ <a href="#" class="text-olive-600 hover:text-olive-800 font-medium">Voir plus →</a>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Portfolio Item 3 -->
174
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md">
175
+ <img src="https://images.unsplash.com/photo-1578301978018-300aec7879cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Illustration minimaliste" class="w-full h-64 object-cover">
176
+ <div class="p-6">
177
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Minimalisme</h3>
178
+ <p class="text-gray-600 mb-4">L'essence de la simplicité</p>
179
+ <a href="#" class="text-olive-600 hover:text-olive-800 font-medium">Voir plus →</a>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Portfolio Item 4 -->
184
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md">
185
+ <img src="https://images.unsplash.com/photo-1579547945413-497e1b99dac0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Illustration géométrique" class="w-full h-64 object-cover">
186
+ <div class="p-6">
187
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Géométrie Sacrée</h3>
188
+ <p class="text-gray-600 mb-4">Harmonie des formes</p>
189
+ <a href="#" class="text-olive-600 hover:text-olive-800 font-medium">Voir plus →</a>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Portfolio Item 5 -->
194
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md">
195
+ <img src="https://images.unsplash.com/photo-1579762715118-a6f1d4b934f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Illustration typographique" class="w-full h-64 object-cover">
196
+ <div class="p-6">
197
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Typographie Expérimentale</h3>
198
+ <p class="text-gray-600 mb-4">L'art des lettres</p>
199
+ <a href="#" class="text-olive-600 hover:text-olive-800 font-medium">Voir plus →</a>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Portfolio Item 6 -->
204
+ <div class="gallery-item bg-white rounded-lg overflow-hidden shadow-md">
205
+ <img src="https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Illustration numérique" class="w-full h-64 object-cover">
206
+ <div class="p-6">
207
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Paysages Numériques</h3>
208
+ <p class="text-gray-600 mb-4">Créations digitales</p>
209
+ <a href="#" class="text-olive-600 hover:text-olive-800 font-medium">Voir plus →</a>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <div class="text-center mt-12">
215
+ <a href="#" class="px-6 py-3 border border-olive-600 text-olive-600 rounded-full hover:bg-olive-50 transition">Voir tout le portfolio</a>
216
+ </div>
217
+ </div>
218
+ </section>
219
+
220
+ <!-- About Section -->
221
+ <section id="about" class="py-20 bg-white">
222
+ <div class="container mx-auto px-4">
223
+ <div class="flex flex-col md:flex-row items-center">
224
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
225
+ <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Olivia artiste" class="rounded-lg shadow-xl w-full max-w-md mx-auto">
226
+ </div>
227
+ <div class="md:w-1/2">
228
+ <h2 class="text-3xl font-bold text-gray-800 mb-6">À propos de moi</h2>
229
+ <p class="text-gray-600 mb-6">Je m'appelle Olivia et je suis illustratrice et artiste visuelle basée à Paris. Mon travail explore les frontières entre l'art traditionnel et les techniques numériques modernes.</p>
230
+ <p class="text-gray-600 mb-6">Diplômée des Beaux-Arts de Paris, j'ai développé un style unique qui mêle minimalisme et complexité, avec une palette de couleurs souvent inspirée par la nature.</p>
231
+ <p class="text-gray-600 mb-8">Mes œuvres ont été exposées dans plusieurs galeries en Europe et font partie de collections privées internationales.</p>
232
+
233
+ <div class="bg-olive-50 p-6 rounded-lg">
234
+ <h3 class="text-xl font-semibold text-olive-800 mb-4">Expositions récentes</h3>
235
+ <ul class="space-y-3">
236
+ <li class="flex items-start">
237
+ <span class="text-olive-600 mr-3">•</span>
238
+ <span>Galerie Moderne, Paris - 2023</span>
239
+ </li>
240
+ <li class="flex items-start">
241
+ <span class="text-olive-600 mr-3">•</span>
242
+ <span>Art Basel, Miami - 2022</span>
243
+ </li>
244
+ <li class="flex items-start">
245
+ <span class="text-olive-600 mr-3">•</span>
246
+ <span>Design Week, Helsinki - 2021</span>
247
+ </li>
248
+ </ul>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </section>
254
+
255
+ <!-- Testimonials -->
256
+ <section class="py-20 bg-gray-50">
257
+ <div class="container mx-auto px-4">
258
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Ce qu'ils disent de mon travail</h2>
259
+
260
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
261
+ <!-- Testimonial 1 -->
262
+ <div class="bg-white p-8 rounded-lg shadow-sm">
263
+ <div class="flex items-center mb-4">
264
+ <div class="text-yellow-400 mr-2">
265
+ <i class="fas fa-star"></i>
266
+ <i class="fas fa-star"></i>
267
+ <i class="fas fa-star"></i>
268
+ <i class="fas fa-star"></i>
269
+ <i class="fas fa-star"></i>
270
+ </div>
271
+ </div>
272
+ <p class="text-gray-600 mb-6">"Les illustrations d'Olivia ont transformé notre espace de bureau. Son style unique apporte une touche de sophistication et de créativité à notre environnement de travail."</p>
273
+ <div class="flex items-center">
274
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
275
+ <div>
276
+ <h4 class="font-semibold text-gray-800">Sophie Martin</h4>
277
+ <p class="text-sm text-gray-500">Directrice artistique, Studio Bleu</p>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Testimonial 2 -->
283
+ <div class="bg-white p-8 rounded-lg shadow-sm">
284
+ <div class="flex items-center mb-4">
285
+ <div class="text-yellow-400 mr-2">
286
+ <i class="fas fa-star"></i>
287
+ <i class="fas fa-star"></i>
288
+ <i class="fas fa-star"></i>
289
+ <i class="fas fa-star"></i>
290
+ <i class="fas fa-star"></i>
291
+ </div>
292
+ </div>
293
+ <p class="text-gray-600 mb-6">"J'ai commandé une pièce sur mesure pour ma maison et le résultat a dépassé toutes mes attentes. Olivia a su capturer exactement ce que je voulais."</p>
294
+ <div class="flex items-center">
295
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
296
+ <div>
297
+ <h4 class="font-semibold text-gray-800">Thomas Lefèvre</h4>
298
+ <p class="text-sm text-gray-500">Collectionneur d'art</p>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Testimonial 3 -->
304
+ <div class="bg-white p-8 rounded-lg shadow-sm">
305
+ <div class="flex items-center mb-4">
306
+ <div class="text-yellow-400 mr-2">
307
+ <i class="fas fa-star"></i>
308
+ <i class="fas fa-star"></i>
309
+ <i class="fas fa-star"></i>
310
+ <i class="fas fa-star"></i>
311
+ <i class="fas fa-star-half-alt"></i>
312
+ </div>
313
+ </div>
314
+ <p class="text-gray-600 mb-6">"Travailler avec Olivia pour notre dernière campagne a été un plaisir. Son approche artistique a parfaitement complété notre vision créative."</p>
315
+ <div class="flex items-center">
316
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
317
+ <div>
318
+ <h4 class="font-semibold text-gray-800">Emma Johnson</h4>
319
+ <p class="text-sm text-gray-500">Directrice marketing, Vert Design</p>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </section>
326
+
327
+ <!-- Contact Section -->
328
+ <section id="contact" class="py-20 bg-olive-800 text-white">
329
+ <div class="container mx-auto px-4">
330
+ <div class="max-w-4xl mx-auto">
331
+ <h2 class="text-3xl font-bold text-center mb-4">Travaillons ensemble</h2>
332
+ <p class="text-center text-olive-100 max-w-2xl mx-auto mb-12">Que ce soit pour une commande, une collaboration ou simplement pour discuter d'art, n'hésitez pas à me contacter.</p>
333
+
334
+ <div class="bg-white rounded-lg shadow-xl p-8 md:p-12">
335
+ <form id="contact-form" class="space-y-6">
336
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
337
+ <div>
338
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nom</label>
339
+ <input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-olive-500">
340
+ </div>
341
+ <div>
342
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
343
+ <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-olive-500">
344
+ </div>
345
+ </div>
346
+ <div>
347
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Sujet</label>
348
+ <input type="text" id="subject" name="subject" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-olive-500">
349
+ </div>
350
+ <div>
351
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
352
+ <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-olive-500"></textarea>
353
+ </div>
354
+ <div class="flex items-center">
355
+ <input type="checkbox" id="consent" name="consent" required class="mr-2">
356
+ <label for="consent" class="text-gray-700 text-sm">J'accepte que mes données soient utilisées pour répondre à ma demande.</label>
357
+ </div>
358
+ <button type="submit" class="w-full md:w-auto px-8 py-3 bg-olive-600 text-white rounded-lg hover:bg-olive-700 transition">Envoyer le message</button>
359
+ </form>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </section>
364
+
365
+ <!-- Newsletter -->
366
+ <section class="py-16 bg-gray-100">
367
+ <div class="container mx-auto px-4 text-center">
368
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Restez informé</h2>
369
+ <p class="text-gray-600 max-w-2xl mx-auto mb-8">Abonnez-vous à ma newsletter pour recevoir des mises à jour sur mes nouvelles créations et expositions.</p>
370
+
371
+ <form class="max-w-md mx-auto flex">
372
+ <input type="email" placeholder="Votre email" required class="flex-grow px-4 py-3 rounded-l-lg border border-gray-300 focus:border-olive-500 focus:outline-none">
373
+ <button type="submit" class="px-6 py-3 bg-olive-600 text-white rounded-r-lg hover:bg-olive-700 transition">S'abonner</button>
374
+ </form>
375
+ </div>
376
+ </section>
377
+
378
+ <!-- Footer -->
379
+ <footer class="bg-gray-900 text-white py-12">
380
+ <div class="container mx-auto px-4">
381
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
382
+ <div>
383
+ <h3 class="text-xl font-bold mb-4">OLIVIA ART</h3>
384
+ <p class="text-gray-400">Art et illustration contemporaine pour des espaces uniques.</p>
385
+ </div>
386
+ <div>
387
+ <h4 class="font-semibold mb-4">Navigation</h4>
388
+ <ul class="space-y-2">
389
+ <li><a href="#home" class="text-gray-400 hover:text-white transition">Accueil</a></li>
390
+ <li><a href="#portfolio" class="text-gray-400 hover:text-white transition">Portfolio</a></li>
391
+ <li><a href="#about" class="text-gray-400 hover:text-white transition">À propos</a></li>
392
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
393
+ </ul>
394
+ </div>
395
+ <div>
396
+ <h4 class="font-semibold mb-4">Mentions légales</h4>
397
+ <ul class="space-y-2">
398
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li>
399
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions générales</a></li>
400
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li>
401
+ </ul>
402
+ </div>
403
+ <div>
404
+ <h4 class="font-semibold mb-4">Réseaux sociaux</h4>
405
+ <div class="flex space-x-4">
406
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-facebook-f"></i></a>
407
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-instagram"></i></a>
408
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-pinterest-p"></i></a>
409
+ <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-behance"></i></a>
410
+ </div>
411
+
412
+ <h4 class="font-semibold mt-6 mb-2">Langue</h4>
413
+ <div class="flex space-x-2">
414
+ <button class="language-selector px-2 py-1 rounded-full text-sm bg-olive-800 text-white">FR</button>
415
+ <button class="language-selector px-2 py-1 rounded-full text-sm bg-gray-700 text-gray-400">EN</button>
416
+ <button class="language-selector px-2 py-1 rounded-full text-sm bg-gray-700 text-gray-400">FI</button>
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm">
422
+ <p>© 2023 Olivia Art. Tous droits réservés.</p>
423
+ </div>
424
+ </div>
425
+ </footer>
426
+
427
+ <script>
428
+ // Mobile menu toggle
429
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
430
+ const mobileMenu = document.getElementById('mobile-menu');
431
+ const closeMobileMenu = document.getElementById('close-mobile-menu');
432
+
433
+ mobileMenuButton.addEventListener('click', () => {
434
+ mobileMenu.classList.add('active');
435
+ document.body.style.overflow = 'hidden';
436
+ });
437
+
438
+ closeMobileMenu.addEventListener('click', () => {
439
+ mobileMenu.classList.remove('active');
440
+ document.body.style.overflow = '';
441
+ });
442
+
443
+ // Close mobile menu when clicking on a link
444
+ const mobileLinks = document.querySelectorAll('#mobile-menu a');
445
+ mobileLinks.forEach(link => {
446
+ link.addEventListener('click', () => {
447
+ mobileMenu.classList.remove('active');
448
+ document.body.style.overflow = '';
449
+ });
450
+ });
451
+
452
+ // Form submission
453
+ const contactForm = document.getElementById('contact-form');
454
+ contactForm.addEventListener('submit', (e) => {
455
+ e.preventDefault();
456
+
457
+ // Here you would typically send the form data to a server
458
+ // For this example, we'll just show an alert
459
+ alert('Merci pour votre message! Je vous répondrai dès que possible.');
460
+ contactForm.reset();
461
+ });
462
+
463
+ // Language selector functionality
464
+ const languageButtons = document.querySelectorAll('.language-selector');
465
+ languageButtons.forEach(button => {
466
+ button.addEventListener('click', () => {
467
+ // In a real implementation, this would change the language
468
+ // For this example, we'll just toggle the active state
469
+ languageButtons.forEach(btn => {
470
+ btn.classList.remove('bg-olive-800', 'text-white');
471
+ btn.classList.add('bg-gray-100', 'text-gray-600');
472
+ });
473
+
474
+ button.classList.remove('bg-gray-100', 'text-gray-600');
475
+ button.classList.add('bg-olive-800', 'text-white');
476
+ });
477
+ });
478
+ </script>
479
+ <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=driir/e-mage" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
480
+ </html>