-solve the flex issue in the products section across the entire proje…

…ct. (#9) -add some categories to the carousel and create or edit js code . - finsh shoping page - creat Product item html file Co-authored-by: abdulrahman <[email protected]>
AQuadic · Oct 30, 2024 · d876f19 · d876f19
1 parent 2376197
commit d876f19
Show file tree

Hide file tree

Showing 12 changed files with 3,882 additions and 849 deletions.
diff --git a/assets/images/AppleWatchBanner.svg b/assets/images/AppleWatchBanner.svg
diff --git a/assets/images/shoing bannar.svg b/assets/images/shoing bannar.svg
diff --git a/src/PoroductItem.html b/src/PoroductItem.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div class="p-1  h-80  w-1/4 ">
+        <div class="border p-2 items-center gap-2 rounded-sm justify-center relative  border-[#e4e7e9] flex flex-col  ">
+            <div class="relative  group">
+                <div class="w-0 h-[3px] transition-all duration-500 group-hover:w-5  bg-[#eac70b]">
+                </div>
+            <!--image-->
+                <img src="./../assets/images/Image.svg" class="w-5/6 m-auto" alt="Image" />
+
+                <!-- Overlay -->
+                <div
+                    class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                    <div class="flex space-x-4">
+                        <div
+                            class="p-2 cursor-pointer	 bg-[#f8f8f8] rounded-full flex justify-center items-center">
+                            <i class="fa-regular fa-heart"></i>
+                        </div>
+                        <div
+                            class="p-2 cursor-pointer	 bg-[#f8f8f8] rounded-full flex justify-center items-center">
+                            <i class="fa-solid fa-cart-shopping"></i>
+                        </div>
+                        <div
+                            class="p-2 cursor-pointer	  bg-[#f98131] rounded-full flex justify-center items-center">
+                            <i class="fa-regular text-white fa-eye"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        <!--rating -->
+            <div class="flex justify-start items-center w-full">
+                <i class="fas fa-star text-yellow-500 text-sm"></i>
+                <i class="fas fa-star text-yellow-500 text-sm"></i>
+                <i class="fas fa-star text-yellow-500 text-sm"></i>
+                <i class="fas fa-star text-yellow-500 text-sm"></i>
+                <i class="fas fa-star-half-alt text-yellow-500 text-sm"></i>
+                <span class="text-[#76868e] text-sm"> (52,677)</span>
+            </div>
+        <!-- price -->
+            <div class="  ">
+                <h5 class=" my-1 text-[#191c1e] text-sm ">أقوى سبراي للجسم طارد للذباب والناموس
+                    FLYKILLER </h5>
+                <span class=" text-[#2ca4f3] text-sm  leading-tight">$2,300</span>
+            </div>
+        <!-- padge -->
+            <span
+                class=" absolute top-2 text-white px-3 text-xs py-1.5 left-2 bg-[#ee5858] rounded-sm ">
+                Hot
+            </span>
+        </div>
+         </div>
+</body>
+</html>