Skip to content

Commit

Permalink
Merge pull request #374 from Shreya-Pandey-01/feature/review-section
Browse files Browse the repository at this point in the history 
Add: #339 Issue :  Review Section with amazing slider view
  • Loading branch information
@swaraj-das
swaraj-das authored Oct 14, 2024
2 parents e068907 + 46fe9bb commit 81e4685
Show file tree
Hide file tree
Showing 2 changed files with 165 additions and 12 deletions.
69 changes: 67 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
</head>

<body>
Expand Down Expand Up @@ -412,7 +413,53 @@ <h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>

<!--review section-->

<section id="review-body">
<section id="review-body">
<h1 class="reviews-title" data-aos="fade-right">What Our Customers Say</h1>
<div class="swiper-container">
<div class="swiper-wrapper">

<!-- First review -->
<div class="swiper-slide">
<div class="review-card" data-aos="fade-right">
<img src="https://th.bing.com/th/id/OIP.rKAJNI-t3QhaZ53Os8P5TwHaHa?rs=1&pid=ImgDetMain" alt="John Doe" class="reviewer-img">
<div class="reviewer-name">John Doe</div>
<div class="review-rating">★★★★★</div>
<p class="review-text">The tools on this website are fantastic! It has made gaming much more enjoyable and efficient. Highly recommend!</p>
</div>
</div>

<!-- Second review -->
<div class="swiper-slide">
<div class="review-card" data-aos="fade-right">
<img src="https://th.bing.com/th/id/OIP.q10JcSV8pb4VJV_RW6MzvwHaHa?rs=1&pid=ImgDetMain" alt="Jane Smith" class="reviewer-img">
<div class="reviewer-name">Jane Smith</div>
<div class="review-rating">★★★★☆</div>
<p class="review-text">Great products, but I wish there were more options available for casual gamers. Still, amazing service overall!</p>
</div>
</div>

<!-- Third review -->
<div class="swiper-slide">
<div class="review-card" data-aos="fade-right">
<img src="https://petapixel.com/assets/uploads/2019/02/download-4.jpeg" alt="Alex Johnson" class="reviewer-img">
<div class="reviewer-name">Alex Johnson</div>
<div class="review-rating">★★★★★</div>
<p class="review-text">Excellent customer service! I had an issue with my order, but it was resolved quickly. Definitely will buy again.</p>
</div>
</div>

</div>

<!-- Add Pagination -->
<div class="swiper-pagination"></div>

<!-- Add Navigation Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>

<!-- <section id="review-body">
<div class="reviews-container">
<h1 class="reviews-title" data-aos="fade-right">What Our Customers Say</h1>
Expand All @@ -435,7 +482,7 @@ <h1 class="reviews-title" data-aos="fade-right">What Our Customers Say</h1>
</div>
</div>
</section>
</section> -->


<section id="contact" data-aos="fade-right">
Expand Down Expand Up @@ -557,6 +604,24 @@ <h2>Feedback Form</h2>
alert('Item added to cart'); // Show alert
});

</script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});

</script>

<!-- this script is for twitter icon starts -->
Expand Down
108 changes: 98 additions & 10 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1426,21 +1426,109 @@ button {

/* 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 */
Expand Down

0 comments on commit 81e4685

Please sign in to comment.