From 46fe9bb85d095af6b298502c6d50155735640c05 Mon Sep 17 00:00:00 2001 From: Shreya Pandey Date: Sun, 13 Oct 2024 19:36:44 +0530 Subject: [PATCH] Add: Review Section with slider view --- index.html | 69 +++++++++++++++++++++++++++++++++- style.css | 108 ++++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 165 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index e29e9f9b..81675e62 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@ + @@ -407,7 +408,53 @@

Frequently Asked Questions

-
+
+

What Our Customers Say

+
+
+ + +
+
+ John Doe +
John Doe
+
★★★★★
+

The tools on this website are fantastic! It has made gaming much more enjoyable and efficient. Highly recommend!

+
+
+ + +
+
+ Jane Smith +
Jane Smith
+
★★★★☆
+

Great products, but I wish there were more options available for casual gamers. Still, amazing service overall!

+
+
+ + +
+
+ Alex Johnson +
Alex Johnson
+
★★★★★
+

Excellent customer service! I had an issue with my order, but it was resolved quickly. Definitely will buy again.

+
+
+ +
+ + +
+ + +
+
+
+
+ +
@@ -552,6 +599,24 @@

Feedback Form

alert('Item added to cart'); // Show alert }); + + + + diff --git a/style.css b/style.css index aea5e48b..5ca53c42 100644 --- a/style.css +++ b/style.css @@ -1368,21 +1368,109 @@ button:hover img { /* Body styles for consistency */ #review-body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - background-color: rgb(71,61,61); + text-align: center; + background-color: #eaf6fd; + padding: 40px 20px; } - /* Review Section Container */ - .reviews-container { - max-width: 800px; - margin: 40px auto; + .reviewer-img { + border-radius: 50%; + margin-bottom: 10px; + width: 120px; + height: 120px; + } + + .reviewer-name { + font-size: 18px; + font-weight: bold; + margin: 10px 0; + } + + .review-card { + background-color: white; padding: 20px; - background-color:rgb(71,61,61); - border: 1px solid #ddd; border-radius: 10px; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + text-align: center; + max-width: 350px; + margin: 0 auto; + } + + .review-rating { + color: #FFD700; + font-size: 20px; + margin-bottom: 10px; + } + +.swiper-pagination { + position: relative; + bottom: 1px !important; + text-align: center; + } + + .swiper-pagination-bullet { + width: 12px; + height: 12px; + opacity: 1; + } + + .swiper-container { + position: relative; + } + + .swiper-button-next, .swiper-button-prev { + color: #2d3945 !important; + background-color: #9D8A3C; + padding: 10px; + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 10; + cursor: pointer; + } + + .swiper-button-next { + right: 25rem !important; + } + + .swiper-button-prev { + left: 25rem !important; + } + + /* Responsive behavior for smaller screens */ + @media screen and (max-width: 1110px) { + .swiper-button-next, .swiper-button-prev { + width: 30px; + height: 30px; + padding: 5px; + } + + .swiper-button-next { + right: 10rem !important; + } + + .swiper-button-prev { + left: 10rem !important; + } + } + + .swiper-button-next:hover, .swiper-button-prev:hover { + background-color: #DFC458; + transition: background-color 0.3s ease; + } + +#review-body { + font-family: Arial, sans-serif; + margin: 0; + padding: 1rem; + background-color: rgb(71,61,61); } /* Section Title */