Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhanced Testimonial Section By Adding Card Carousel #400

Merged
merged 3 commits into from
Oct 14, 2024
Merged

Enhanced Testimonial Section By Adding Card Carousel #400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c24d7a
Enhanced Testimonial Section By Adding Card Carousel
Pragyaa3 Oct 14, 2024
86e809d
Merge branch 'main' into Carousel
Pragyaa3 Oct 14, 2024
a75edd6
Merge branch 'main' into Carousel
Pragyaa3 Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added images/boy1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/boy2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/girl1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/girl2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
157 changes: 85 additions & 72 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>

<body>
Expand Down Expand Up @@ -411,78 +410,89 @@ <h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>
</div>
</section>

<!--review section-->

<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>
<!-- testimonial -->

<div id="page" class="site">
<div class="container-swipe">
<div class="testi">
<div class="head">
<h3>Testimonials</h3>
<p>What Our Customers Say</p>
</div>
<div class="body swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<div class="wrapper">
<div class="thumbnail">
<img src="images/girl1.png" alt="">
</div>
<div class="aside">
<p>I’ve been searching for the perfect gaming accessories for ages, and I finally found them on this website! The variety available is truly impressive; I was able to find exactly what I needed to enhance my gaming experience. The quality of the products exceeded my expectations.</p>
<div class="name">
<h4>Sarah malik</h4>
<p>★★★★★</p>
</div>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="wrapper">
<div class="thumbnail">
<img src="images/boy2.png" alt="">
</div>
<div class="aside">
<p>Shopping on this website was a breeze! I love how user-friendly the interface is; it made navigating through the different categories so easy. I was able to find exactly what I needed without any hassle. The checkout process was smooth, and I received my items promptly</p>
<div class="name">
<h4>John Doe</h4>
<p>★★★★☆</p>
</div>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="wrapper">
<div class="thumbnail">
<img src="images/boy1.png" alt="">
</div>
<div class="aside">
<p>My order arrived much faster than I anticipated, which was a huge plus. The customer support team was incredibly helpful when I had a question about my order. I purchased a gaming headset, and it works perfectly! It has made a significant difference in my gaming sessions.</p>
<div class="name">
<h4>Alex Johnson</h4>
<p>★★★★★</p>
</div>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="wrapper">
<div class="thumbnail">
<img src="images/girl2.png" alt="">
</div>
<div class="aside">
<p>As a serious gamer, I always look for high-quality gear that can enhance my performance. I stumbled upon this website and was blown away by the selection! I purchased a gaming mouse and a mechanical keyboard, and both have drastically improved my gameplay. .</p>
<div class="name">
<h4>Emily Davismore</h4>
<p>★★★★☆</p>
</div>
</div>
</div>
</li>
</ul>
<!-- pagination -->
<div class="swiper-pagination"></div>

<!-- navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

</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>

<div class="review-card" data-aos="fade-right">
<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 class="review-card" data-aos="fade-right">
<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 class="review-card" data-aos="fade-right">
<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>
</section> -->
</div>


<!-- testimonial end -->



<section id="contact" data-aos="fade-right">
Expand Down Expand Up @@ -630,6 +640,9 @@ <h2>Feedback Form</h2>
<!-- this script is for twitter icon ends -->

<!-- Scripts -->
<!-- testimonial script -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script src="script.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
Expand Down
22 changes: 22 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,3 +183,25 @@ document.querySelectorAll('.faq input[type="checkbox"]').forEach((checkbox) => {
}
});
});


function testimonialJs() {
const swiper = new Swiper('.swiper', {
autoHeight: true,
loop: true,

// If we need pagination
pagination: {
el: '.swiper-pagination',
},

// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},


});
}
testimonialJs();
Loading