1. Hover effect for Best Deal for You section 2. Hover effect for Sho…

…p Now Under 500 Rs section 3. Hover effect for Top Selection section 4. Hover effect for Mobile Phone Under 15000 Rs section 5. Hover effect for Suggested for You section 6. Hover effect for Best of Electronics section 7. Hover effect for Best Deal for You section 8. Hover effect for Shop Now Under 500 Rs section 9. Hover effect for Top Selection section 10. Hover effect for Mobile Phone Under 15000 Rs section 11. Hover effect for Search Bar
arghadipmanna101 · Aug 10, 2024 · 440e09f · 440e09f
1 parent d6734d9
commit 440e09f
Showing 1 changed file with 217 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -456,6 +456,223 @@ <h4>Login</h4>
             opacity: 0.82;
         }
 
+        /* Hover effect for "Best Deal for You" section */
+#best-deal-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#best-deal-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for "Shop Now Under 500 Rs" section */
+#shopUnder500-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#shopUnder500-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for "Top Selection" section */
+#top-selection-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#top-selection-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for "Mobile Phone Under 15000 Rs" section */
+#mobileUnder15000-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#mobileUnder15000-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for "Suggested for You" section */
+#rendom-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#rendom-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for "Best of Electronics" section */
+#bestOfElectronics-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#bestOfElectronics-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for "Best Deal for You" section */
+#best-deal-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#best-deal-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for "Shop Now Under 500 Rs" section */
+#shopUnder500-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#shopUnder500-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for "Top Selection" section */
+#top-selection-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#top-selection-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for "Select Your Choice" section */
+#seletcYourChoice-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#seletcYourChoice-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for "Mobile Phone Under 15000 Rs" section */
+#mobileUnder15000-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#mobileUnder15000-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for "Suggested for You" section */
+#rendom-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#rendom-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for "Best of Electronics" section */
+#bestOfElectronics-product .products {
+    margin: 0 auto;
+    padding: 5px;
+    transition: transform 0.3s ease-in-out;
+}
+
+#bestOfElectronics-product .products:hover {
+    transform: scale(1.1);
+    opacity: 0.82;
+}
+
+/* Hover effect for FAQ section */
+.faq-card {
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+  text-align: left;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.faq-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
+}
+
+
+/* Hover effect for "Search Bar"  */
+#searchbar input {
+    transition: border-color 0.3s ease-in-out;
+}
+
+#searchbar input:focus {
+    border-color: #2874F0; /* Change the border color on focus */
+}
+
+/* Hover effect for "Account Dropdown"  */
+#navbarDropdown .nav-link img {
+    transition: transform 0.3s ease-in-out;
+}
+
+#navbarDropdown .nav-link img:hover {
+    transform: scale(1.1);
+}
+
+/* Hover effect for "Cart Icon"  */
+.cartLogoandname img {
+    transition: transform 0.3s ease-in-out;
+}
+
+.cartLogoandname img:hover {
+    transform: scale(1.1);
+}
+
+/* Hover effect for "Become a Seller Icon"  */
+.navItem4 img {
+    transition: transform 0.3s ease-in-out;
+}
+
+.navItem4 img:hover {
+    transform: scale(1.1);
+}
+
+/* Hover effect for "More Links Dropdown"  */
+#moreLinksDropdown .nav-link img {
+    transition: transform 0.3s ease-in-out;
+}
+
+#moreLinksDropdown .nav-link img:hover {
+    transform: scale(1.1);
+}
+
         @media screen and (max-width: 1200px) {
             .signupin .leftpanal {
                 width: 30vw;