Merge pull request #1249 from SuhainaFathimaM/main

added styles to flipkart plus page
arghadipmanna101 · Jun 18, 2024 · 3c73106 · 3c73106
2 parents 9ddef15 + ae9428e
commit 3c73106
Showing 1 changed file with 31 additions and 0 deletions.
diff --git a/plus/index.html b/plus/index.html
@@ -36,6 +36,12 @@
                 font-weight: bold;
                 box-shadow: inset 0 0 500px 0px black;
                 text-shadow: 0 0 14px black;
+                transition: background-size 0.5s ease-in-out;
+
+            }
+
+            .banner:hover {
+                background-size: 120%; 
             }
 
             section .container {
@@ -47,6 +53,11 @@
                 flex-wrap: wrap;
                 gap: 20px;
                 justify-content: center;
+                transition: transform 0.5s ease-in-out;
+            }
+
+            .product-list:hover {
+                transform: translateX(-10px); 
             }
 
             .product {
@@ -55,24 +66,44 @@
                 border-radius: 4px;
                 width: calc(25% - 20px);
                 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                transition: box-shadow 0.3s ease-in-out;
+            }
+
+            .product:hover {
+                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 
             }
 
             .product img {
                 width: 100%;
                 border-bottom: 1px solid #eee;
                 padding-bottom: 15px;
+                transition: transform 0.3s ease-in-out;
+            }
+
+            .product img:hover {
+                transform: scale(1.1); 
             }
 
             .product .name {
                 font-size: 18px;
                 font-weight: bold;
                 margin: 10px 0;
+                transition: color 0.3s ease-in-out;
+            }
+
+            .product .name:hover {
+                color: #97b3e0; 
             }
 
             .product .price {
                 color: #2874f0;
                 font-size: 16px;
                 font-weight: bold;
+                transition: color 0.3s ease-in-out; 
+            }
+
+            .product .price:hover {
+                color: #007bff; 
             }
         </style>
         <h3 class="text-center">Welcome to Flipkart Plus Zone</h3>