Skip to content

Commit

Permalink
testimonials updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@DevNandini02
DevNandini02 committed Jul 29, 2024
1 parent 8c9fd5b commit 5846276
Showing 1 changed file with 271 additions and 2 deletions.
273 changes: 271 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,62 @@
display: none;
}
}
/* testimonials */
.card1 {
width: 330px;
height: 450px;
transition: opacity 0.5s ease;
}

.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transition: transform 0.8s;
}

.card1:hover .card-inner {
transform: rotateY(180deg);
}

.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

.card-back {
transform: rotateY(180deg);
background-color: rgb(228, 224, 238);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: black;
}

.card-img-top {
height: 300px;
width: 100%;
object-fit: cover;
}


@media (max-width: 995px) {
.row1 {
flex-direction: column;
align-items: center;
}

.card1 {
width: 80%;
margin-bottom: 20px;
}
}

</style>
<link rel="stylesheet" href="imstyle.css">
Expand Down Expand Up @@ -1288,7 +1344,220 @@ <h3 style="color: rgb(151, 6, 241); font-style: italic;font-family: Cambria, Coc
<br /><br /><br /><br />

<!-- Testimonials Section -->
<section class="testimonials" id="testimonials">
<section 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>
</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>
</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/Abhisek Tamang.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>
</div>
</div>
</div>
</div>
</section>

<!-- <section class="testimonials" id="testimonials">
<h2 class="testimonial-heading section__title" align-items="center" data-aos="fade-in">Testimonials</h2>
<div class="marquee">
<div class="track">
Expand Down Expand Up @@ -1390,7 +1659,7 @@ <h3>Katie</h3>
</div>
</div>
</section>
</section> -->

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

Expand Down

0 comments on commit 5846276

Please sign in to comment.