Merge pull request #1256 from ShristiSharan/fix#1021

Feat-#1021:Modified the Category Selection and Environment/locahost documentation updated

README.md

@@ -115,8 +115,15 @@
    ```bash
    git switch -c <your-branch-name>
    ```
+6. **Setup Environment:** 
+   ```bash
+      npm install
+   ```
+
+7. **To preview:** Go to index.html and "Go Live" to view in localhost
+
 
-6. **Make changes:** Deployment failed with the following error:
+8. **Make changes:** Deployment failed with the following error:
 ```bash
    Resource is limited - try again in 2 hours (more than 100, code: "api-deployments-free-per-day").
 ```

css/categories.css

@@ -0,0 +1,159 @@
+.categorylist-wrapper {
+  width: 100vw;
+  overflow-x: scroll;
+  /* z-index: 500; */
+}
+
+.categorylist-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+
+.categories {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  background-color: rgb(255, 253, 253);
+  position: relative;
+  padding: 0 4%;
+  width: 100%;
+  min-width: 1000px;
+  box-shadow: 0 0 10px rgb(87, 110, 172);
+
+}
+
+.categories>li {
+  position: static;
+  display: inline-block;
+  padding: 20px 15px;
+  /* cursor: pointer; */
+}
+
+.categories li a {
+  text-decoration: none;
+}
+
+.categories > li > .subcategories-container {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  padding: 15px;
+  gap: 15px 5px;
+  flex-wrap: wrap;
+  width: auto;
+  max-width: 300px;
+  height: auto;
+  left: 100%;
+  top: 0;
+  font-size: 14px;
+  overflow: hidden;
+  z-index: 500;
+  border: 1px solid #ddd;
+}
+
+.categories > li:hover > .subcategories-container {
+  display: block;
+}
+
+.categories > li:hover {
+  background-color: #bac8f6;
+  transition: all 0.5s;
+  border-radius: 20px;
+}
+
+.categories > li > .subcategories-container > .subcategories-list > li {
+  margin: 15px 0;
+  flex: 1 1 200px;
+  list-style-type: none;
+}
+
+.categories > li > .subcategories-container > .subcategories-list > li:hover {
+  color: rgb(112, 112, 166);
+}
+.categories li ul li img{
+  display: none;
+}
+
+#category-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.category {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease 0.1s, width 2s, height 2.5s;
+
+}
+
+.category:hover {
+  transform: scale(1.1025);
+}
+
+.category h3 {
+  font-size: 18px;
+  color: #333333;
+}
+
+/*adding transition property to the images of the cateogory-grid section*/
+#category-grid img {
+  transition: transform 0.3s ease-in-out;
+}
+
+#category-grid img:hover {
+  transform: scale(1.1);
+  opacity: 0.82;
+}
+
+#categories {
+    list-style: none;
+    padding: 0;
+}
+
+.category-item {
+    position: relative;
+    padding: 10px;
+    cursor: pointer;
+}
+
+.category-item a {
+    text-decoration: none;
+    color: #000;
+}
+
+.subcategories-container {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 100%;
+    background: #fff;
+    border: 1px solid #ddd;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+}
+
+.subcategories-list {
+    list-style: none;
+    margin: 0;
+    padding: 10px;
+}
+
+.subcategories-list li {
+    margin: 0;
+    padding: 5px 0;
+}
+
+.subcategories-list li a {
+    text-decoration: none;
+    color: #000;
+}
+
+.category-item:hover .subcategories-container {
+    display: block;
+}

css/index.css

@@ -129,34 +129,7 @@ body {
   display: none;
 }
 
-/*#category-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 40px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  margin-left: 20px;
-  margin-right: 20px;
-}
-
-.category {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.3s ease 0.1s, width 2s, height 2.5s;
 
-}
-
-.category:hover {
-  transform: scale(1.1025);
-}
-
-.category h3 {
-  font-size: 18px;
-  color: #333333;
-}*/
-
-/*Other Top Deals*/
 #category-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -201,7 +174,7 @@ body {
 .category-container:hover .show-items-btn {
   display: block;
 }
-
+ 
 /* Responsive adjustments */
 @media (max-width: 768px) {
   #category-grid {
@@ -234,6 +207,8 @@ body {
   line-height: 20px;
   font-size: 12px;
   z-index: 1000;
+  margin-top: 25px;
+
 }
 .grocery{
   left:5%;
@@ -260,7 +235,7 @@ body {
   left:70%;
 }
 .twowheelers{
-  left:80%;
+  right:15%;
 }
 
 .dropdownbox > div > div + div{
@@ -720,7 +695,7 @@ Search Bar
   font-weight: 500;
   font-size: 16px;
   color: #878787;
-
+}
 .brand-directory{
   background-color: white;
   padding: 20px 30px;
@@ -731,4 +706,4 @@ Search Bar
 .brand-directory-heading{
   font-weight: 24px;
   color:black ;
-
+}

js/categoryjs.js

@@ -122,4 +122,4 @@ document.addEventListener("DOMContentLoaded", function () {
             });
         })
         .catch(error => console.error('Error fetching category data:', error));
-});
+});