Skip to content

Commit

Permalink
made customer opinions in slide format
Browse files Browse the repository at this point in the history 
Issue resolved: Anjaliavv51#639
  • Loading branch information
@Kajalmehta29
Kajalmehta29 committed Oct 23, 2024
1 parent d393add commit b64bc63
Showing 1 changed file with 149 additions and 112 deletions.
261 changes: 149 additions & 112 deletions Html-files/services.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -457,123 +457,160 @@ <h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Retro
</div>
</div>
</div>
<!-- Add Swiper.js CDN for slider functionality -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

<section class="service_container">


<h2 class=section__title
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%); margin-top: 10vh;">CUSTOMER OPINIONS</h2>
<!-- <div class="main-cards"> -->
<div class="testimonal__container">
<div class="testimonal__swiper">
<!-- <div class="column"> -->
<div class="cards">
<article class="testimonal__card">
<img
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fHww"
alt class="testimonal__image">
<h2 class="testimonal__title"
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Riya
Jain</h2>
<p class="testimonal__description"
style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
Wide selection of items.It's nice website
for vintage collection lovers.
</p>

<div class="testimonal__stars"
style="color: yellow;">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</article>
</div>
<section class="service_container">
<h2 class="section__title" style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%); margin-top: 10vh;">CUSTOMER OPINIONS</h2>

<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Testimonial 1 -->
<div class="swiper-slide">
<article class="testimonial__card">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fHww"
width="400px" height="auto" alt="Photo of Riya Jain" class="testimonial__image">
<h2 class="testimonial__title" style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Riya Jain</h2>
<p class="testimonial__description" style="font-family: var(--ff-poppins); color: hsl(208, 7%,46%);">
Wide selection of items. It's a nice website for vintage collection lovers.
</p>
<div class="testimonial__stars" style="color: yellow;">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
<div class="testimonal__swiper">
<div class="cards">
<article class="testimonal__card">
<img
src="https://t3.ftcdn.net/jpg/02/43/12/34/360_F_243123463_zTooub557xEWABDLk0jJklDyLSGl2jrr.jpg"
alt class="testimonal__image">
<h2 class="testimonal__title"
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Sudhanshu
Sharma</h2>
<p class="testimonal__description"
style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
Must purchase the items in the website. Very Nice, Good Products!
</p>

<div class="testimonal__stars"
style="color: yellow;">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</article>
</div>
</article>
</div>

<!-- Testimonial 2 -->
<div class="swiper-slide">
<article class="testimonial__card">
<img src="https://t3.ftcdn.net/jpg/02/43/12/34/360_F_243123463_zTooub557xEWABDLk0jJklDyLSGl2jrr.jpg"
width="400px" height="auto" alt="Photo of Sudhanshu Sharma" class="testimonial__image">
<h2 class="testimonial__title" style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Sudhanshu Sharma</h2>
<p class="testimonial__description" style="font-family: var(--ff-poppins); color: hsl(208, 7%,46%);">
Must purchase the items on the website. Very nice, good products!
</p>
<div class="testimonial__stars" style="color: yellow;">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</div>
<!-- <div class="main-cards"> -->
<div class="testimonal__container upper">
<div class="testimonal__swiper">
<!-- <div class="column-2"> -->
<div class="cards">
<article class="testimonal__card">
<img
src="https://blogs.kcl.ac.uk/editlab/files/2017/04/Elena-2-Cropped-200x2801.jpg"
alt class="testimonal__image">
<h2 class="testimonal__title"
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Angel
Dravid</h2>
<p class="testimonal__description"
style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
Good delivery and offers.Good Service.Must
checkout.
</p>

<div class="testimonal__stars"
style="color: yellow;">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</article>
</div>
</article>
</div>

<!-- Testimonial 3 -->
<div class="swiper-slide">
<article class="testimonial__card">
<img src="https://blogs.kcl.ac.uk/editlab/files/2017/04/Elena-2-Cropped-200x2801.jpg"
width="400px" height="auto" alt="Photo of Angel Dravid" class="testimonial__image">
<h2 class="testimonial__title" style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Angel Dravid</h2>
<p class="testimonial__description" style="font-family: var(--ff-poppins); color: hsl(208, 7%,46%);">
Good delivery and offers. Good service. Must checkout.
</p>
<div class="testimonial__stars" style="color: yellow;">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
<div class="testimonal__swiper">
<div class="cards">
<article class="testimonal__card">
<img
src="https://cdn2.psychologytoday.com/assets/styles/manual_crop_1_91_1_1528x800/public/field_blog_entry_images/2018-09/shutterstock_648907024.jpg?itok=7lrLYx-B"
alt class="testimonal__image">
<h2 class="testimonal__title"
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Priya
Sharma</h2>
<p class="testimonal__description"
style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">
Nice offer above $5000.The items are very
delicious.
</p>

<div class="testimonal__stars"
style="color: yellow;">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</article>
</div>
</article>
</div>

<!-- Testimonial 4 -->
<div class="swiper-slide">
<article class="testimonial__card">
<img src="https://cdn2.psychologytoday.com/assets/styles/manual_crop_1_91_1_1528x800/public/field_blog_entry_images/2018-09/shutterstock_648907024.jpg?itok=7lrLYx-B"
width="400px" height="auto" alt="Photo of Priya Sharma" class="testimonial__image">
<h2 class="testimonial__title" style="font-family: var(--ff-philosopher); color: hsl(203, 30%, 26%);">Priya Sharma</h2>
<p class="testimonial__description" style="font-family: var(--ff-poppins); color: hsl(208, 7%,46%);">
Nice offer above $5000. The items are very delicious.
</p>
<div class="testimonial__stars" style="color: yellow;">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</div>
</article>
</div>
</div>

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

<!-- Custom styles to adjust Swiper navigation buttons -->
<style>

.testimonial__content {
display: flex;
align-items: center;
gap: 30px;
}


.testimonial__image {
width: 200px;
height: 200px;
border-radius: 100%;
object-fit: cover;
margin-left: 39rem;
}


.testimonial__title {
text-align: center;
}
.testimonial__description {
text-align: center;
}
.testimonial__stars {
text-align: center;
}

.swiper-button-next,
.swiper-button-prev {
top: 105%;
transform: translateY(-50%);
color: black;
}
.swiper-button-prev {
left: 400px;
}
.swiper-button-next {
right: 400px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 40px;
}
</style>

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



<div class="second_cont" style="font-family: Garamond;">
<div class="deals">
Expand Down

0 comments on commit b64bc63

Please sign in to comment.