Skip to content

Commit

Permalink
Marquee effect in testimonial section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Archiesachin
Archiesachin committed Jun 9, 2024
1 parent 94cb263 commit 5ff1120
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 41 deletions.
137 changes: 100 additions & 37 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="./Image-Gallery/style.css">
<link rel="stylesheet" href="./Image-Gallery/stylecaptions.css">
Expand All @@ -30,6 +31,7 @@
<link rel="stylesheet" href="mouseEffect.css">
<script src="Theme.js" defer></script>


<link rel="stylesheet" href="path/to/aos.css">
<script src="path/to/aos.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
Expand Down Expand Up @@ -741,51 +743,108 @@ <h2 class="section__title" data-aos="zoom-in">

<section class="testimonials" id="testimonials">
<h2 class="testimonial-heading section__title" align-items="center" data-aos="fade-in">Testimonials</h2>
<div class="testimonial-container">
<div class="testimonial-user" data-aos="fade-up">
<img class="testi-img" src="./img/testimonial1.jpg" alt="">
<div>
<p><sup><i class="fas fa-quote-left"></i></sup>TourGuide made our dream vacation a reality! From the
breathtaking landscapes to the seamless logistics, every moment was a new adventure. The personalized
itinerary and expert guides added a special touch to our journey. We can't wait to book our next trip with
TourGuide!<sup><i class="fas fa-quote-right"></i></sup></p>
<div class="user-info">
<h3>Joseph</h3>
</div>
</div>
</div>
<div class="testimonial-user" data-aos="fade-up">
<img class="testi-img" src="./img/Abhisek Tamang.jpg" alt="">
<div>
<p><sup><i class="fas fa-quote-left"></i></sup>Our cultural tour with TourGuide exceeded all expectations.
The
immersive experiences, knowledgeable guides, and carefully curated activities allowed us to connect with
the
local culture in a way we never thought possible. Thanks to TourGuide.<sup><i
class="fas fa-quote-right"></i></sup></p>
<div class="user-info">
<h3>Charles</h3>
</div>
</div>
</div>
<div class="testimonial-user" data-aos="fade-up">
<img class="testi-img" src="./img/testimonial2.jpg" alt="">
<div>
<p><sup><i class="fas fa-quote-left"></i></sup>Traveling with the family has never been easier! TourGuide
took
care of every detail, ensuring a stress-free and enjoyable vacation for all. The kid-friendly activities
and
family-oriented guides made our trip unforgettable.<sup><i class="fas fa-quote-right"></i></sup></p>
<div class="user-info">
<h3>Katie</h3>
<div class="marquee">
<div class="track">
<div class="content">
<div class="testimonial-container">
<div class="testimonial-user">
<img class="testi-img" src="./img/testimonial1.jpg" alt="">
<div>
<p><sup><i class="fas fa-quote-left"></i></sup>TourGuide made our dream vacation a reality! From the
breathtaking landscapes to the seamless logistics, every moment was a new adventure. The personalized
itinerary and expert guides added a special touch to our journey. We can't wait to book our next trip with
TourGuide!<sup><i class="fas fa-quote-right"></i></sup></p>
<div class="user-info">
<h3>Joseph</h3>
</div>
</div>
</div>
<div class="testimonial-user" >
<img class="testi-img" src="./img/Abhisek Tamang.jpg" alt="">
<div>
<p><sup><i class="fas fa-quote-left"></i></sup>Our cultural tour with TourGuide exceeded all expectations.
The
immersive experiences, knowledgeable guides, and carefully curated activities allowed us to connect with
the
local culture in a way we never thought possible. Thanks to TourGuide.<sup><i
class="fas fa-quote-right"></i></sup></p>
<div class="user-info">
<h3>Charles</h3>
</div>
</div>
</div>
<div class="testimonial-user" >
<img class="testi-img" src="./img/testimonial2.jpg" alt="">
<div>
<p><sup><i class="fas fa-quote-left"></i></sup>Traveling with the family has never been easier! TourGuide
took
care of every detail, ensuring a stress-free and enjoyable vacation for all. The kid-friendly activities
and
family-oriented guides made our trip unforgettable.<sup><i class="fas fa-quote-right"></i></sup></p>
<div class="user-info">
<h3>Katie</h3>
</div>
</div>
</div>
<div class="testimonial-user">
<img class="testi-img" src="./img/testimonial1.jpg" alt="">
<div>
<p><sup><i class="fas fa-quote-left"></i></sup>TourGuide made our dream vacation a reality! From the
breathtaking landscapes to the seamless logistics, every moment was a new adventure. The personalized
itinerary and expert guides added a special touch to our journey. We can't wait to book our next trip with
TourGuide!<sup><i class="fas fa-quote-right"></i></sup></p>
<div class="user-info">
<h3>Joseph</h3>
</div>
</div>
</div>
<div class="testimonial-user" >
<img class="testi-img" src="./img/Abhisek Tamang.jpg" alt="">
<div>
<p><sup><i class="fas fa-quote-left"></i></sup>Our cultural tour with TourGuide exceeded all expectations.
The
immersive experiences, knowledgeable guides, and carefully curated activities allowed us to connect with
the
local culture in a way we never thought possible. Thanks to TourGuide.<sup><i
class="fas fa-quote-right"></i></sup></p>
<div class="user-info">
<h3>Charles</h3>
</div>
</div>
</div>
<div class="testimonial-user" >
<img class="testi-img" src="./img/testimonial2.jpg" alt="">
<div>
<p><sup><i class="fas fa-quote-left"></i></sup>Traveling with the family has never been easier! TourGuide
took
care of every detail, ensuring a stress-free and enjoyable vacation for all. The kid-friendly activities
and
family-oriented guides made our trip unforgettable.<sup><i class="fas fa-quote-right"></i></sup></p>
<div class="user-info">
<h3>Katie</h3>
</div>
</div>
</div>
</div>

</div>
</div>
</div>

</section>













<!----------------------------------------------------- FAQ section ---------------------- -->

<section>
Expand Down Expand Up @@ -831,6 +890,7 @@ <h3 class="faq-title">Can I make changes to my booking or cancel it if needed?</
<i class="fas fa-times"></i>
</button>
</div>


</div>
</section>
Expand Down Expand Up @@ -1552,6 +1612,9 @@ <h4>Reach Out To Us</h4>
</script>





</html><!-- New bubble background start -->


Expand Down
4 changes: 4 additions & 0 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,3 +133,7 @@ document.getElementById('emailInput').addEventListener('focus', function() {
document.getElementById('emailInput').addEventListener('blur', function() {
document.getElementById('send').classList.remove('focused');
});




35 changes: 31 additions & 4 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1806,7 +1806,7 @@ body {
.testimonials {
/* z-index: 100; */
background-color: var(--secondary-color);
max-width: var(--max-width);
/* max-width: var(--max-width); */
padding: 5rem 5rem;
margin-top: -3rem;
}
Expand All @@ -1818,12 +1818,36 @@ body {
font-weight: 600;
}

.marquee {
position: relative;
width: 100vw;
max-width: 100%;
height: 500px;
overflow-x: hidden;
display: inline-block;
}

.track {
position: absolute;
/* white-space: nowrap;
will-change: transform; */
animation: marquee 32s linear infinite;
}

@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}


.testimonial-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 50px;
padding: 20px;
}

.testimonial-container::-webkit-scrollbar{
display: none;
}

.testimonial-user {
Expand Down Expand Up @@ -1860,6 +1884,9 @@ body {
box-shadow: 0 0 0 10px var(--testimonials-img-border);
}




.fa-quote-left,
.fa-quote-right {
font-size: 16px;
Expand Down

0 comments on commit 5ff1120

Please sign in to comment.