diff --git a/images/apple-vr-headset.jpg b/images/apple-vr-headset.jpg new file mode 100644 index 0000000..557d088 Binary files /dev/null and b/images/apple-vr-headset.jpg differ diff --git a/images/gaming-chair-2.jpg b/images/gaming-chair-2.jpg new file mode 100644 index 0000000..a5d5de1 Binary files /dev/null and b/images/gaming-chair-2.jpg differ diff --git a/images/gaming-chair.jpg b/images/gaming-chair.jpg new file mode 100644 index 0000000..5797e20 Binary files /dev/null and b/images/gaming-chair.jpg differ diff --git a/images/gaming-keyboard-mouse.jpg b/images/gaming-keyboard-mouse.jpg new file mode 100644 index 0000000..855bf80 Binary files /dev/null and b/images/gaming-keyboard-mouse.jpg differ diff --git a/images/gaming-keyboard.jpg b/images/gaming-keyboard.jpg new file mode 100644 index 0000000..a4b549f Binary files /dev/null and b/images/gaming-keyboard.jpg differ diff --git a/images/gaming-laptop.jpg b/images/gaming-laptop.jpg new file mode 100644 index 0000000..1de5c23 Binary files /dev/null and b/images/gaming-laptop.jpg differ diff --git a/images/gaming-mouse.jpg b/images/gaming-mouse.jpg new file mode 100644 index 0000000..5f3de5a Binary files /dev/null and b/images/gaming-mouse.jpg differ diff --git a/images/wireless-controller.jpg b/images/wireless-controller.jpg new file mode 100644 index 0000000..785d161 Binary files /dev/null and b/images/wireless-controller.jpg differ diff --git a/images/wireless-headset-2.jpg b/images/wireless-headset-2.jpg new file mode 100644 index 0000000..108ac43 Binary files /dev/null and b/images/wireless-headset-2.jpg differ diff --git a/images/wireless-headset.jpg b/images/wireless-headset.jpg new file mode 100644 index 0000000..b46f259 Binary files /dev/null and b/images/wireless-headset.jpg differ diff --git a/index.html b/index.html index 71a1524..4cf7058 100644 --- a/index.html +++ b/index.html @@ -417,6 +417,55 @@

Ergonomic Gaming Chair

+
+

Our Most Loved Products

+
+
+ Gaming Chair +

Gaming Chair

+
+
+ Wireless Headset +

Wireless Headset

+
+
+ Mechanical Gaming Keyboard +

Mechanical Gaming Keyboard

+
+
+ High Performing Gaming Mouse +

High Performing Gaming Mouse

+
+
+ VR Headset by Apple +

VR Headset by Apple

+
+
+ VR Headset +

VR Headset

+
+
+ Wireless Controller +

Wireless Controller

+
+ +
+ Gaming Laptop +

Gaming Laptop

+
+
+ Gaming Laptop +

Gaming Laptop

+
+
+ Mechanical Gaming Keyboard and Mouse +

Mechanical Gaming Keyboard and Mouse

+
+
+
+ + +
@@ -754,6 +803,7 @@

Feedback Form

+ diff --git a/style.css b/style.css index e7a1df4..fe19adb 100644 --- a/style.css +++ b/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 */ + } +}