Spaces:

CIAG
/

undefined

Running

App Files Files Community

CIAG commited on Oct 19, 2025

Commit

5b0d773

verified ·

1 Parent(s): eabaa66

Manual changes saved

Browse files

Files changed (1) hide show

shop.html +21 -21

shop.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Boutique - Chromatic Canvas</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <style>
@@ -19,13 +19,13 @@
             <div class="flex justify-between h-16 items-center">
                 <div class="flex items-center">
                     <a href="index.html" class="text-primary-600 font-bold text-xl flex items-center">
-                        <i data-feather="shopping-bag" class="mr-2"></i> Colorful Commerce
                     </a>
                 </div>
                 <div class="hidden md:flex space-x-8">
-                    <a href="index.html" class="text-gray-700 hover:text-primary-600 transition">Accueil</a>
-                    <a href="shop.html" class="text-primary-600 font-medium">Boutique</a>
-                    <a href="#" class="text-gray-700 hover:text-primary-600 transition">Panier</a>
                     <a href="#" class="text-gray-700 hover:text-primary-600 transition">Contact</a>
                 </div>
                 <button class="md:hidden text-gray-700">
@@ -37,14 +37,14 @@
     <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div class="flex justify-between items-center mb-12">
-            <h1 class="text-3xl font-bold text-gray-900">Nos Produits</h1>
             <div class="flex items-center space-x-4">
                 <div class="relative">
                     <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">
-                        <option>Trier par</option>
-                        <option>Prix croissant</option>
-                        <option>Prix décroissant</option>
-                        <option>Nouveautés</option>
                     </select>
                     <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-500 w-4 h-4"></i>
                 </div>
@@ -59,19 +59,19 @@
             <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 product-card">
                 <div class="relative">
                     <img src="http://static.photos/technology/640x360/1" alt="Product" class="w-full h-64 object-cover">
-                    <div class="absolute top-3 right-3 bg-primary-600 text-white px-2 py-1 rounded-full text-xs font-medium">Nouveau</div>
                 </div>
                 <div class="p-6">
                     <div class="flex justify-between items-start">
                         <div>
                             <h3 class="text-lg font-bold text-gray-900">Smartphone Pro</h3>
-                            <p class="text-gray-600 text-sm">Haute performance</p>
                         </div>
                         <span class="text-primary-600 font-bold">599€</span>
                     </div>
                     <div class="mt-4 flex justify-between items-center">
                         <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
-                            Ajouter au panier
                         </button>
                         <button class="text-gray-500 hover:text-primary-600 transition">
                             <i data-feather="heart" class="w-5 h-5"></i>
@@ -88,14 +88,14 @@
                 <div class="p-6">
                     <div class="flex justify-between items-start">
                         <div>
-                            <h3 class="text-lg font-bold text-gray-900">Casque Audio</h3>
-                            <p class="text-gray-600 text-sm">Qualité studio</p>
                         </div>
                         <span class="text-primary-600 font-bold">199€</span>
                     </div>
                     <div class="mt-4 flex justify-between items-center">
                         <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
-                            Ajouter au panier
                         </button>
                         <button class="text-gray-500 hover:text-primary-600 transition">
                             <i data-feather="heart" class="w-5 h-5"></i>
@@ -113,8 +113,8 @@
                 <div class="p-6">
                     <div class="flex justify-between items-start">
                         <div>
-                            <h3 class="text-lg font-bold text-gray-900">Montre Connectée</h3>
-                            <p class="text-gray-600 text-sm">Suivi santé</p>
                         </div>
                         <div>
                             <span class="text-gray-400 line-through text-sm mr-2">249€</span>
@@ -123,7 +123,7 @@
                     </div>
                     <div class="mt-4 flex justify-between items-center">
                         <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
-                            Ajouter au panier
                         </button>
                         <button class="text-gray-500 hover:text-primary-600 transition">
                             <i data-feather="heart" class="w-5 h-5"></i>
@@ -140,8 +140,8 @@
                 <div class="p-6">
                     <div class="flex justify-between items-start">
                         <div>
-                            <h3 class="text-lg font-bold text-gray-900">Enceinte Bluetooth</h3>
-                            <p class="text-gray-600 text-sm">Son puissant</p>
                         </div>
                         <span class="text-primary-600 font-bold">129€</span>
                     </div>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shop - Sarra Swidi</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <style>
             <div class="flex justify-between h-16 items-center">
                 <div class="flex items-center">
                     <a href="index.html" class="text-primary-600 font-bold text-xl flex items-center">
+                        <i data-feather="shopping-bag" class="mr-2"></i> Sarra Swidi
                     </a>
                 </div>
                 <div class="hidden md:flex space-x-8">
+                    <a href="index.html" class="text-gray-700 hover:text-primary-600 transition">home page</a>
+                    <a href="shop.html" class="text-primary-600 font-medium">Shop</a>
+                    <a href="#" class="text-gray-700 hover:text-primary-600 transition">Basket</a>
                     <a href="#" class="text-gray-700 hover:text-primary-600 transition">Contact</a>
                 </div>
                 <button class="md:hidden text-gray-700">
     <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div class="flex justify-between items-center mb-12">
+            <h1 class="text-3xl font-bold text-gray-900">Our products</h1>
             <div class="flex items-center space-x-4">
                 <div class="relative">
                     <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">
+                        <option>sort by</option>
+                        <option>Ascending price</option>
+                        <option>Price descending<option>
+                        <option>what's new</option>
                     </select>
                     <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-500 w-4 h-4"></i>
                 </div>
             <div class="bg-white rounded-xl overflow-hidden shadow-md transition duration-300 product-card">
                 <div class="relative">
                     <img src="http://static.photos/technology/640x360/1" alt="Product" class="w-full h-64 object-cover">
+                    <div class="absolute top-3 right-3 bg-primary-600 text-white px-2 py-1 rounded-full text-xs font-medium">New</div>
                 </div>
                 <div class="p-6">
                     <div class="flex justify-between items-start">
                         <div>
                             <h3 class="text-lg font-bold text-gray-900">Smartphone Pro</h3>
+                            <p class="text-gray-600 text-sm">High performance</p>
                         </div>
                         <span class="text-primary-600 font-bold">599€</span>
                     </div>
                     <div class="mt-4 flex justify-between items-center">
                         <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
+                            Add to cart
                         </button>
                         <button class="text-gray-500 hover:text-primary-600 transition">
                             <i data-feather="heart" class="w-5 h-5"></i>
                 <div class="p-6">
                     <div class="flex justify-between items-start">
                         <div>
+                            <h3 class="text-lg font-bold text-gray-900">Headphones</h3>
+                            <p class="text-gray-600 text-sm">Studio quality</p>
                         </div>
                         <span class="text-primary-600 font-bold">199€</span>
                     </div>
                     <div class="mt-4 flex justify-between items-center">
                         <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
+                           add to cart
                         </button>
                         <button class="text-gray-500 hover:text-primary-600 transition">
                             <i data-feather="heart" class="w-5 h-5"></i>
                 <div class="p-6">
                     <div class="flex justify-between items-start">
                         <div>
+                            <h3 class="text-lg font-bold text-gray-900">Smart Watch</h3>
+                            <p class="text-gray-600 text-sm">Health monitoring</p>
                         </div>
                         <div>
                             <span class="text-gray-400 line-through text-sm mr-2">249€</span>
                     </div>
                     <div class="mt-4 flex justify-between items-center">
                         <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
+                            Add to cart
                         </button>
                         <button class="text-gray-500 hover:text-primary-600 transition">
                             <i data-feather="heart" class="w-5 h-5"></i>
                 <div class="p-6">
                     <div class="flex justify-between items-start">
                         <div>
+                            <h3 class="text-lg font-bold text-gray-900">Bluetooth speaker</h3>
+                            <p class="text-gray-600 text-sm">Powerful sound</p>
                         </div>
                         <span class="text-primary-600 font-bold">129€</span>
                     </div>