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

Jump to bottom

made customer opinions in slide format #712

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

made customer opinions in slide format #712

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
261 changes: 149 additions & 112 deletions Html-files/services.html
View file
Open in desktop
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