Hugging Face's logo

Spaces:
CIAG
/
undefined
Running

App Files Community
CIAG commited on
Commit
eabaa66
·
verified ·
1 Parent(s): 3076d1e

créer un site xeb de comerse

Browse files
Files changed (2) hide show
  1. index.html +4 -4
  2. shop.html +316 -0
index.html CHANGED
@@ -62,8 +62,8 @@
62
  </div>
63
  <div class="hidden md:flex space-x-8">
64
  <a href="index.html" class="text-gray-700 hover:text-primary-600 transition">Accueil</a>
65
- <a href="shop.html" class="text-gray-700 hover:text-primary-600 transition">Boutique</a>
66
- <a href="#" class="text-gray-700 hover:text-primary-600 transition">Panier</a>
67
  <a href="#" class="text-gray-700 hover:text-primary-600 transition">Contact</a>
68
  </div>
69
  <button class="md:hidden text-gray-700">
@@ -188,8 +188,8 @@
188
  <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Quick Links</h4>
189
  <ul class="space-y-2">
190
  <li><a href="index.html" class="text-gray-400 hover:text-white transition">Accueil</a></li>
191
- <li><a href="shop.html" class="text-gray-400 hover:text-white transition">Boutique</a></li>
192
- <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
193
  <li><a href="#" class="text-gray-400 hover:text-white transition">Livraison</a></li>
194
  </ul>
195
  </div>
 
62
  </div>
63
  <div class="hidden md:flex space-x-8">
64
  <a href="index.html" class="text-gray-700 hover:text-primary-600 transition">Accueil</a>
65
+ <a href="shop.html" class="text-primary-600 font-medium">Boutique</a>
66
+ <a href="#" class="text-gray-700 hover:text-primary-600 transition">Panier</a>
67
  <a href="#" class="text-gray-700 hover:text-primary-600 transition">Contact</a>
68
  </div>
69
  <button class="md:hidden text-gray-700">
 
188
  <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Quick Links</h4>
189
  <ul class="space-y-2">
190
  <li><a href="index.html" class="text-gray-400 hover:text-white transition">Accueil</a></li>
191
+ <li><a href="shop.html" class="text-white font-medium">Boutique</a></li>
192
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
193
  <li><a href="#" class="text-gray-400 hover:text-white transition">Livraison</a></li>
194
  </ul>
195
  </div>
shop.html ADDED
@@ -0,0 +1,316 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Boutique - Chromatic Canvas</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ .product-card:hover {
11
+ transform: translateY(-5px);
12
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
13
+ }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-50 font-sans antialiased">
17
+ <nav class="bg-white/80 backdrop-blur-md shadow-sm">
18
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
19
+ <div class="flex justify-between h-16 items-center">
20
+ <div class="flex items-center">
21
+ <a href="index.html" class="text-primary-600 font-bold text-xl flex items-center">
22
+ <i data-feather="shopping-bag" class="mr-2"></i> Colorful Commerce
23
+ </a>
24
+ </div>
25
+ <div class="hidden md:flex space-x-8">
26
+ <a href="index.html" class="text-gray-700 hover:text-primary-600 transition">Accueil</a>
27
+ <a href="shop.html" class="text-primary-600 font-medium">Boutique</a>
28
+ <a href="#" class="text-gray-700 hover:text-primary-600 transition">Panier</a>
29
+ <a href="#" class="text-gray-700 hover:text-primary-600 transition">Contact</a>
30
+ </div>
31
+ <button class="md:hidden text-gray-700">
32
+ <i data-feather="menu"></i>
33
+ </button>
34
+ </div>
35
+ </div>
36
+ </nav>
37
+
38
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
39
+ <div class="flex justify-between items-center mb-12">
40
+ <h1 class="text-3xl font-bold text-gray-900">Nos Produits</h1>
41
+ <div class="flex items-center space-x-4">
42
+ <div class="relative">
43
+ <select class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-primary-500">
44
+ <option>Trier par</option>
45
+ <option>Prix croissant</option>
46
+ <option>Prix décroissant</option>
47
+ <option>Nouveautés</option>
48
+ </select>
49
+ <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-500 w-4 h-4"></i>
50
+ </div>
51
+ <button class="bg-white p-2 rounded-lg border border-gray-300">
52
+ <i data-feather="filter" class="text-gray-700 w-5 h-5"></i>
53
+ </button>
54
+ </div>
55
+ </div>
56
+
57
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
58
+ <!-- Product 1 -->
59
+ <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 product-card">
60
+ <div class="relative">
61
+ <img src="http://static.photos/technology/640x360/1" alt="Product" class="w-full h-64 object-cover">
62
+ <div class="absolute top-3 right-3 bg-primary-600 text-white px-2 py-1 rounded-full text-xs font-medium">Nouveau</div>
63
+ </div>
64
+ <div class="p-6">
65
+ <div class="flex justify-between items-start">
66
+ <div>
67
+ <h3 class="text-lg font-bold text-gray-900">Smartphone Pro</h3>
68
+ <p class="text-gray-600 text-sm">Haute performance</p>
69
+ </div>
70
+ <span class="text-primary-600 font-bold">599€</span>
71
+ </div>
72
+ <div class="mt-4 flex justify-between items-center">
73
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
74
+ Ajouter au panier
75
+ </button>
76
+ <button class="text-gray-500 hover:text-primary-600 transition">
77
+ <i data-feather="heart" class="w-5 h-5"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Product 2 -->
84
+ <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 product-card">
85
+ <div class="relative">
86
+ <img src="http://static.photos/technology/640x360/2" alt="Product" class="w-full h-64 object-cover">
87
+ </div>
88
+ <div class="p-6">
89
+ <div class="flex justify-between items-start">
90
+ <div>
91
+ <h3 class="text-lg font-bold text-gray-900">Casque Audio</h3>
92
+ <p class="text-gray-600 text-sm">Qualité studio</p>
93
+ </div>
94
+ <span class="text-primary-600 font-bold">199€</span>
95
+ </div>
96
+ <div class="mt-4 flex justify-between items-center">
97
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
98
+ Ajouter au panier
99
+ </button>
100
+ <button class="text-gray-500 hover:text-primary-600 transition">
101
+ <i data-feather="heart" class="w-5 h-5"></i>
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Product 3 -->
108
+ <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 product-card">
109
+ <div class="relative">
110
+ <img src="http://static.photos/technology/640x360/3" alt="Product" class="w-full h-64 object-cover">
111
+ <div class="absolute top-3 right-3 bg-red-500 text-white px-2 py-1 rounded-full text-xs font-medium">-20%</div>
112
+ </div>
113
+ <div class="p-6">
114
+ <div class="flex justify-between items-start">
115
+ <div>
116
+ <h3 class="text-lg font-bold text-gray-900">Montre Connectée</h3>
117
+ <p class="text-gray-600 text-sm">Suivi santé</p>
118
+ </div>
119
+ <div>
120
+ <span class="text-gray-400 line-through text-sm mr-2">249€</span>
121
+ <span class="text-primary-600 font-bold">199€</span>
122
+ </div>
123
+ </div>
124
+ <div class="mt-4 flex justify-between items-center">
125
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
126
+ Ajouter au panier
127
+ </button>
128
+ <button class="text-gray-500 hover:text-primary-600 transition">
129
+ <i data-feather="heart" class="w-5 h-5"></i>
130
+ </button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Product 4 -->
136
+ <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 product-card">
137
+ <div class="relative">
138
+ <img src="http://static.photos/technology/640x360/4" alt="Product" class="w-full h-64 object-cover">
139
+ </div>
140
+ <div class="p-6">
141
+ <div class="flex justify-between items-start">
142
+ <div>
143
+ <h3 class="text-lg font-bold text-gray-900">Enceinte Bluetooth</h3>
144
+ <p class="text-gray-600 text-sm">Son puissant</p>
145
+ </div>
146
+ <span class="text-primary-600 font-bold">129€</span>
147
+ </div>
148
+ <div class="mt-4 flex justify-between items-center">
149
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
150
+ Ajouter au panier
151
+ </button>
152
+ <button class="text-gray-500 hover:text-primary-600 transition">
153
+ <i data-feather="heart" class="w-5 h-5"></i>
154
+ </button>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Product 5 -->
160
+ <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 product-card">
161
+ <div class="relative">
162
+ <img src="http://static.photos/technology/640x360/5" alt="Product" class="w-full h-64 object-cover">
163
+ </div>
164
+ <div class="p-6">
165
+ <div class="flex justify-between items-start">
166
+ <div>
167
+ <h3 class="text-lg font-bold text-gray-900">Clavier Mécanique</h3>
168
+ <p class="text-gray-600 text-sm">RGB personnalisable</p>
169
+ </div>
170
+ <span class="text-primary-600 font-bold">89€</span>
171
+ </div>
172
+ <div class="mt-4 flex justify-between items-center">
173
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
174
+ Ajouter au panier
175
+ </button>
176
+ <button class="text-gray-500 hover:text-primary-600 transition">
177
+ <i data-feather="heart" class="w-5 h-5"></i>
178
+ </button>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Product 6 -->
184
+ <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 product-card">
185
+ <div class="relative">
186
+ <img src="http://static.photos/technology/640x360/6" alt="Product" class="w-full h-64 object-cover">
187
+ <div class="absolute top-3 right-3 bg-primary-600 text-white px-2 py-1 rounded-full text-xs font-medium">Bestseller</div>
188
+ </div>
189
+ <div class="p-6">
190
+ <div class="flex justify-between items-start">
191
+ <div>
192
+ <h3 class="text-lg font-bold text-gray-900">Souris Gaming</h3>
193
+ <p class="text-gray-600 text-sm">16000 DPI</p>
194
+ </div>
195
+ <span class="text-primary-600 font-bold">79€</span>
196
+ </div>
197
+ <div class="mt-4 flex justify-between items-center">
198
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
199
+ Ajouter au panier
200
+ </button>
201
+ <button class="text-gray-500 hover:text-primary-600 transition">
202
+ <i data-feather="heart" class="w-5 h-5"></i>
203
+ </button>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <!-- Product 7 -->
209
+ <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 product-card">
210
+ <div class="relative">
211
+ <img src="http://static.photos/technology/640x360/7" alt="Product" class="w-full h-64 object-cover">
212
+ </div>
213
+ <div class="p-6">
214
+ <div class="flex justify-between items-start">
215
+ <div>
216
+ <h3 class="text-lg font-bold text-gray-900">Chargeur Sans Fil</h3>
217
+ <p class="text-gray-600 text-sm">15W rapide</p>
218
+ </div>
219
+ <span class="text-primary-600 font-bold">39€</span>
220
+ </div>
221
+ <div class="mt-4 flex justify-between items-center">
222
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
223
+ Ajouter au panier
224
+ </button>
225
+ <button class="text-gray-500 hover:text-primary-600 transition">
226
+ <i data-feather="heart" class="w-5 h-5"></i>
227
+ </button>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Product 8 -->
233
+ <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 product-card">
234
+ <div class="relative">
235
+ <img src="http://static.photos/technology/640x360/8" alt="Product" class="w-full h-64 object-cover">
236
+ </div>
237
+ <div class="p-6">
238
+ <div class="flex justify-between items-start">
239
+ <div>
240
+ <h3 class="text-lg font-bold text-gray-900">Écran 4K</h3>
241
+ <p class="text-gray-600 text-sm">27 pouces</p>
242
+ </div>
243
+ <span class="text-primary-600 font-bold">349€</span>
244
+ </div>
245
+ <div class="mt-4 flex justify-between items-center">
246
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
247
+ Ajouter au panier
248
+ </button>
249
+ <button class="text-gray-500 hover:text-primary-600 transition">
250
+ <i data-feather="heart" class="w-5 h-5"></i>
251
+ </button>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <div class="mt-12 flex justify-center">
258
+ <nav class="flex items-center space-x-2">
259
+ <button class="px-3 py-1 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 transition">
260
+ <i data-feather="chevron-left" class="w-4 h-4"></i>
261
+ </button>
262
+ <button class="px-3 py-1 rounded-lg bg-primary-600 text-white">1</button>
263
+ <button class="px-3 py-1 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 transition">2</button>
264
+ <button class="px-3 py-1 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 transition">3</button>
265
+ <button class="px-3 py-1 rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 transition">
266
+ <i data-feather="chevron-right" class="w-4 h-4"></i>
267
+ </button>
268
+ </nav>
269
+ </div>
270
+ </main>
271
+
272
+ <footer class="bg-gray-900 text-white py-12">
273
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
274
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
275
+ <div>
276
+ <h3 class="text-lg font-bold mb-4">Colorful Commerce</h3>
277
+ <p class="text-gray-400">Votre destination pour des produits créatifs et uniques.</p>
278
+ </div>
279
+ <div>
280
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Navigation</h4>
281
+ <ul class="space-y-2">
282
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Accueil</a></li>
283
+ <li><a href="shop.html" class="text-gray-400 hover:text-white transition">Boutique</a></li>
284
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Panier</a></li>
285
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
286
+ </ul>
287
+ </div>
288
+ <div>
289
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Aide</h4>
290
+ <ul class="space-y-2">
291
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
292
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Livraison</a></li>
293
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Retours</a></li>
294
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Paiement</a></li>
295
+ </ul>
296
+ </div>
297
+ <div>
298
+ <h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Contact</h4>
299
+ <ul class="space-y-2">
300
+ <li class="text-gray-400">contact@colorfulcommerce.com</li>
301
+ <li class="text-gray-400">+33 1 23 45 67 89</li>
302
+ <li class="text-gray-400">Paris, France</li>
303
+ </ul>
304
+ </div>
305
+ </div>
306
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400 text-sm">
307
+ <p>© 2023 Colorful Commerce. Tous droits réservés.</p>
308
+ </div>
309
+ </div>
310
+ </footer>
311
+
312
+ <script>
313
+ feather.replace();
314
+ </script>
315
+ </body>
316
+ </html>