Skip to content

Commit

Permalink
khushi-joshi-05#1053 solved
Browse files Browse the repository at this point in the history 
As per the mention issue and correction needed I have made changes in the services page
  • Loading branch information
@Vikashchou-dhary
Vikashchou-dhary committed Jun 19, 2024
1 parent 9ac2494 commit 04fb5af
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 122 deletions.
16 changes: 7 additions & 9 deletions Css-files/services.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,15 @@ body{
}

.head_container_service {
height: fit-content;
background-image: url(/Images/food.jpg);
}

.first_cont {
flex-wrap: wrap;
}

.items {
overflow: hidden;
max-width: 230px;
max-width: 180px;
}

.items img {
Expand All @@ -93,9 +92,11 @@ body{

.testimonalsection {
padding-top: 20px;
background: linear-gradient(#0d49a3, #428cfa);

}

.fa-star,
.fa-star
.fa-star-half-stroke {
color: goldenrod;
}
Expand Down Expand Up @@ -132,10 +133,6 @@ body{

}

.testimonal__swiper:hover {
border-radius: 50%;
}

.testimonal__swiper>div {
background-color: rgb(138, 37, 37);
height: 33%;
Expand All @@ -145,7 +142,7 @@ body{

.testimonal__swiper:hover>div {
height: 200%;
border-radius: 20%;

}

.testimonal__swiper * {
Expand All @@ -158,6 +155,7 @@ body{

.second_cont {
flex-wrap: wrap;
background-color: black;
}

.deals {
Expand Down
4 changes: 2 additions & 2 deletions Css-files/services1.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
align-items: center;
flex-wrap: wrap;
gap: 100px 50px;
padding: 100px 50px;
padding: 55px 50px 0 50px;
}
/* background cards size and rounding */
.container .card
Expand All @@ -20,7 +20,7 @@
display: flex;
justify-content: center;
align-items: flex-start;
width: 350px;
width: 305px;
height: 300px;
background: #fff;
border-radius: 20px;
Expand Down
223 changes: 112 additions & 111 deletions Html-files/services.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,127 +124,128 @@ <h2>Meal Delivery Subscription</h2>


<section class="service_container">

<section class="testimonalsection" id="testimonal">
<div class="section1">
<hr />
<h2 class=section__title data-aos="zoom-out-up" data-aos-duration="1000" data-aos-offset="170"
data-aos-easing="ease-in-out">CUSTOMER OPINION</h2>
<hr />
</div>
<div class="testimonal__container" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170"
data-aos-easing="ease-in-out">
<div class="testimonal__swiper">
<div>
<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" style=" border-radius: 50%; object-fit: cover;">
<h2 class="testimonal__title">Riya Jain</h2>
<p class="testimonal__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus
quidem
nostrum neque molestiae fugiat id ex consequatur atque quia quisquam hic
accusamus
dolores sapiente, ipsum maxime, quo odit ut.
</p>

<section class="testimonalsection" id="testimonal">
<div class="section1">
<hr />
<h2 class=section__title data-aos="zoom-out-up" data-aos-duration="1000" data-aos-offset="170"
data-aos-easing="ease-in-out">CUSTOMER OPINION</h2>
<hr />
</div>
<div class="testimonal__container" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170"
data-aos-easing="ease-in-out">
<div class="testimonal__swiper">
<div>
<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" style=" border-radius: 50%; object-fit: cover;">
<h2 class="testimonal__title">Riya Jain</h2>
<p class="testimonal__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus
quidem
nostrum neque molestiae fugiat id ex consequatur atque quia quisquam hic
accusamus
dolores sapiente, ipsum maxime, quo odit ut.
</p>

<div class="testimonal__stars">
<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 class="testimonal__stars">
<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>
</div>
</div>
<div class="testimonal__swiper">
<div>
<article class="testimonal__card">
<img src="https://t3.ftcdn.net/jpg/02/43/12/34/360_F_243123463_zTooub557xEWABDLk0jJklDyLSGl2jrr.jpg"
alt="" class="testimonal__image" style=" border-radius: 50%; object-fit: cover;">
<h2 class="testimonal__title">Sudhanshu Sharma</h2>
<p class="testimonal__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus
quidem
nostrum neque molestiae fugiat id ex consequatur atque quia quisquam hic
accusamus
dolores sapiente, ipsum maxime, quo odit ut.
</p>
<div class="testimonal__swiper">
<div>
<article class="testimonal__card">
<img src="https://t3.ftcdn.net/jpg/02/43/12/34/360_F_243123463_zTooub557xEWABDLk0jJklDyLSGl2jrr.jpg"
alt="" class="testimonal__image" style=" border-radius: 50%; object-fit: cover;">
<h2 class="testimonal__title">Sudhanshu Sharma</h2>
<p class="testimonal__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus
quidem
nostrum neque molestiae fugiat id ex consequatur atque quia quisquam hic
accusamus
dolores sapiente, ipsum maxime, quo odit ut.
</p>

<div class="testimonal__stars">
<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 class="testimonal__stars">
<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>
</div>
</div>
<div class="testimonal__swiper">
<div>
<article class="testimonal__card">
<img src="https://blogs.kcl.ac.uk/editlab/files/2017/04/Elena-2-Cropped-200x2801.jpg"
alt="" class="testimonal__image" style=" border-radius: 50%; object-fit: cover;">
<h2 class="testimonal__title">Angel Dravid</h2>
<p class="testimonal__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus
quidem
nostrum neque molestiae fugiat id ex consequatur atque quia quisquam hic
accusamus
dolores sapiente, ipsum maxime, quo odit ut.
</p>
<div class="testimonal__swiper">
<div>
<article class="testimonal__card">
<img src="https://blogs.kcl.ac.uk/editlab/files/2017/04/Elena-2-Cropped-200x2801.jpg"
alt="" class="testimonal__image" style=" border-radius: 50%; object-fit: cover;">
<h2 class="testimonal__title">Angel Dravid</h2>
<p class="testimonal__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus
quidem
nostrum neque molestiae fugiat id ex consequatur atque quia quisquam hic
accusamus
dolores sapiente, ipsum maxime, quo odit ut.
</p>

<div class="testimonal__stars">
<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 class="testimonal__stars">
<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>
</div>
</div>
<div class="testimonal__swiper">
<div>
<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" style=" border-radius: 50%; object-fit: cover;">
<h2 class="testimonal__title">Priya Sharma</h2>
<p class="testimonal__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus
quidem
nostrum neque molestiae fugiat id ex consequatur atque quia quisquam hic
accusamus
dolores sapiente, ipsum maxime, quo odit ut.
</p>
<div class="testimonal__swiper">
<div>
<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" style=" border-radius: 50%; object-fit: cover;">
<h2 class="testimonal__title">Priya Sharma</h2>
<p class="testimonal__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptatibus
quidem
nostrum neque molestiae fugiat id ex consequatur atque quia quisquam hic
accusamus
dolores sapiente, ipsum maxime, quo odit ut.
</p>

<div class="testimonal__stars">
<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 class="testimonal__stars">
<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>
</div>
</div>
</div>
</section>
</section>

<div class="second_cont">
<div class="deals" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170"
data-aos-easing="ease-in-out">
<i class="fa-solid fa-gift"></i>
<p>Gift Card and Voucher Redemption</p>
</div>
<div class="deals" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170"
data-aos-easing="ease-in-out">
<i class="fa-solid fa-ticket"></i>
<p>Exclusive Offers and Promotions </p>
</div>
</div>
<div class="second_cont">
<div class="deals" data-aos="zoom-out-right" data-aos-duration="1000" data-aos-offset="170"
data-aos-easing="ease-in-out">
<i class="fa-solid fa-gift"></i>
<p>Gift Card and Voucher Redemption</p>
</div>
<div class="deals" data-aos="zoom-out-left" data-aos-duration="1000" data-aos-offset="170"
data-aos-easing="ease-in-out">
<i class="fa-solid fa-ticket"></i>
<p>Exclusive Offers and Promotions </p>
</div>
</div>

</section>

<footer>
Expand Down

0 comments on commit 04fb5af

Please sign in to comment.