Skip to content

Commit

Permalink
Merge pull request #1535 from srishti023/featurebranch
Browse files Browse the repository at this point in the history 
fix: testimonial page Responsiveness and ratings added
  • Loading branch information
@apu52
apu52 authored Oct 26, 2024
2 parents eabc7f4 + 687921e commit e83673b
Showing 1 changed file with 75 additions and 198 deletions.
273 changes: 75 additions & 198 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1469,218 +1469,95 @@ <h3 style="color: rgb(20, 80, 234); font-style: italic;font-family: Cambria, Coc
<br /><br /><br /><br />

<!-- Testimonials Section -->
<section id="testimo" class="testimo">
<section style=" width: 100%;
height: 100%;" id="testimo" class="testimo">
<h2 class="testimonial-heading section__title" align-items="center" data-aos="fade-in">Testimonials</h2>
<div class="container" style="display: flex; flex-wrap: wrap">
<div
class="card text-center card1"
style="
height: 450px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 10px;
perspective: 1000px;
transition: transform 0.8s;
"
>
<div
class="card-inner"
style="
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transition: transform 0.8s;
"
>
<div
class="card-front"
style="
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
"
>
<img
src="./img/testimonial1.jpg"
class="card-img-top"
alt="Broccoli"
style="width: 100%; height: 100%; object-fit: cover"
/>
</div>
<div
class="card-back"
style="
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: rotateY(180deg);
background-color: rgb(228, 224, 238);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: black;
"
>
<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 class="container" style="display: flex; flex-wrap: wrap; justify-content: center;">

<!-- Testimonial Card 1 -->
<div class="card text-center card1" style="height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px; perspective: 1000px; transition: transform 0.8s;">
<div class="card-inner" style="position: relative; width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; transition: transform 0.8s;">
<div class="card-front" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden;">
<img src="./img/testimonial1.jpg" class="card-img-top" alt="Broccoli" style="width: 100%; height: 100%; object-fit: cover" />
</div>
<div class="card-back" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); background-color: rgb(228, 224, 238); display: flex; flex-direction: column; justify-content: center; align-items: center; color: black;">
<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 class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
</div>
</div>
</div>
</div>
<div
class="card text-center card1"
style="
height: 450px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 10px;
perspective: 1000px;
transition: transform 0.8s;
"
>
<div
class="card-inner"
style="
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transition: transform 0.8s;
"
>
<div
class="card-front"
style="
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
"
>
<img
src="./img/testimonial2.jpg"
class="card-img-top"
alt="Tomato"
style="width: 100%; height: 100%; object-fit: cover"
/>
</div>
<div
class="card-back"
style="
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: rotateY(180deg);
background-color: rgb(228, 224, 238);;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: black;
"
>
<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>

<!-- Testimonial Card 2 -->
<div class="card text-center card1" style="height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px; perspective: 1000px; transition: transform 0.8s;">
<div class="card-inner" style="position: relative; width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; transition: transform 0.8s;">
<div class="card-front" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden;">
<img src="./img/testimonial2.jpg" class="card-img-top" alt="Tomato" style="width: 100%; height: 100%; object-fit: cover" />
</div>
<div class="card-back" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); background-color: rgb(228, 224, 238); display: flex; flex-direction: column; justify-content: center; align-items: center; color: black;">
<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="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
</div>
</div>
</div>
<div
class="card text-center card1"
style="
height: 450px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 10px;
perspective: 1000px;
transition: transform 0.8s;
"
>
<div
class="card-inner"
style="
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transition: transform 0.8s;
"
>
<div
class="card-front"
style="
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
"
>
<img
src="./img/testimonial3.jpg"
class="card-img-top"
alt="Broccoli"
style="width: 100%; height: 100%; object-fit: cover"
/>
</div>
<div
class="card-back"
style="
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: rotateY(180deg);
background-color: rgb(228, 224, 238);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: black;
"
>
<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>

<!-- Testimonial Card 3 -->
<div class="card text-center card1" style="height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px; perspective: 1000px; transition: transform 0.8s;">
<div class="card-inner" style="position: relative; width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; transition: transform 0.8s;">
<div class="card-front" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden;">
<img src="./img/testimonial3.jpg" class="card-img-top" alt="Broccoli" style="width: 100%; height: 100%; object-fit: cover" />
</div>
<div class="card-back" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); background-color: rgb(228, 224, 238); display: flex; flex-direction: column; justify-content: center; align-items: center; color: black;">
<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 class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
</div>
</div>
</div>
</div>

</div>
</section>
</section>
<style>
.star-rating {
display: flex;
justify-content: center;
margin: 10px 0;
}

.star-rating .fa-star {
font-size: 20px; /* Adjust the size of the stars */
color: lightgray; /* Default color for unselected stars */
}

.star-rating .fa-star.checked {
color: gold; /* Color for selected stars */
}
</style>

<!-- <section class="testimonials" id="testimonials">
<h2 class="testimonial-heading section__title" align-items="center" data-aos="fade-in">Testimonials</h2>
Expand Down

0 comments on commit e83673b

Please sign in to comment.