Merge pull request #705 from SanikaBhalerao1345/main

added most loved products section

index.html

@@ -417,6 +417,55 @@ <h3>Ergonomic Gaming Chair</h3>
         </div>
     </div>
 
+    <div class="most-loved-products">
+        <h2>Our Most Loved Products</h2>
+        <div class="product-slider">
+          <div class="product-card">
+            <img src="images/gaming-chair.jpg" alt="Gaming Chair">
+            <h3>Gaming Chair</h3>
+          </div>
+          <div class="product-card">
+            <img src="images/wireless-headset.jpg" alt="Wireless Headset">
+            <h3>Wireless Headset</h3>
+          </div>
+          <div class="product-card">
+            <img src="images/gaming-keyboard.jpg" alt="Mechanical Gaming Keyboard">
+            <h3>Mechanical Gaming Keyboard</h3>
+          </div>
+          <div class="product-card">
+            <img src="images/gaming-mouse.jpg" alt="High Performing Gaming Mouse">
+            <h3>High Performing Gaming Mouse</h3>
+          </div>
+          <div class="product-card">
+            <img src="images/apple-vr-headset.jpg" alt="VR Headset by Apple">
+            <h3>VR Headset by Apple</h3>
+          </div>
+          <div class="product-card">
+            <img src="images/wireless-headset-2.jpg" alt="VR Headset">
+            <h3>VR Headset</h3>
+          </div>
+          <div class="product-card">
+            <img src="images/wireless-controller.jpg" alt="Wireless Controller">
+            <h3>Wireless Controller</h3>
+          </div>
+          <!-- Duplicate first few items for seamless effect -->
+          <div class="product-card">
+            <img src="images/gaming-chair-2.jpg" alt="Gaming Laptop">
+            <h3>Gaming Laptop</h3>
+          </div>
+          <div class="product-card">
+            <img src="images/gaming-laptop.jpg" alt="Gaming Laptop">
+            <h3>Gaming Laptop</h3>
+          </div>
+          <div class="product-card">
+            <img src="images/gaming-keyboard-mouse.jpg" alt="Mechanical Gaming Keyboard and Mouse">
+            <h3>Mechanical Gaming Keyboard and Mouse</h3>
+          </div>
+        </div>
+      </div>
+
+
+
     <!-- FAQ Section -->
     <section id="faq">
         <div class="faq-container">
@@ -754,6 +803,7 @@ <h2>Feedback Form</h2>
 
     </script>
     </div>
+
 </body>
 
 

style.css

@@ -2252,3 +2252,61 @@ button {
     font-size: 18px;
   }
 }
+.most-loved-products {
+  text-align: center;
+  padding: 2rem;
+  background: linear-gradient(120deg, #f7562d, #f533a4, rgb(235, 235, 82));
+  color: #0a0a0a;
+  overflow: hidden; /* Hide overflow for sliding effect */
+}
+
+.most-loved-products h2 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  color: #000;
+}
+
+.product-slider {
+  display: flex;
+  gap: 1.5rem;
+  animation: slide 20s linear infinite;
+}
+
+.product-card {
+  min-width: 150px; /* Ensures each card is the same width */
+  background-color: #2b2b2b;
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.product-card:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+}
+
+.product-card img {
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+}
+
+.product-card h3 {
+  font-size: 1rem;
+  color: #ffffff;
+  margin: 0.5rem 0 0;
+  font-weight: 600;
+}
+
+/* Keyframes for sliding effect */
+@keyframes slide {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(calc(-40px * 7)); /* Adjust based on the total width of all items */
+  }
+}