Skip to content

Commit

Permalink
added global review card
Browse files Browse the repository at this point in the history
  • Loading branch information
@dhruv8433
dhruv8433 committed Jun 16, 2024
1 parent 644aa64 commit de4e27c
Show file tree
Hide file tree
Showing 2 changed files with 212 additions and 62 deletions.
175 changes: 113 additions & 62 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,84 +314,135 @@ <h3>Juices</h3>
</div>
</section>

<section class="testimonial-container" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170"
data-aos-easing="ease-in-out">
<section class="testimonial-container" data-aos="zoom-in" data-aos-duration="1000" data-aos-offset="170" data-aos-easing="ease-in-out">
<h2 class="tagline pt-5"> Our Happy Clients </h2>
<p class="description">
At Foodie, we pride ourselves on delivering delicious meals & exceptional service. Don't just take our word
for it - hear what our satisfied customers have to say!
</p>
<div id="testimonials" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="img-box my-5">
<img src="Images/testimonials/client1.jpg" alt="">
</div>
<div class="carousel-caption">
<h3 class="overview">Matt Gilbert</h3>
<p class="testimonial-text">Foodie never disappoints! The food is always fresh, delicious, and
delivered right on time. My go-to for all my meals!</p>
<div class="star-rating">
<ul class="list-inline d-flex justify-content-center">
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-regular fa-star"></i></li>
<li><i class="fa-regular fa-star"></i></li>
</ul>
<div class="row" style="padding: 20px;">
<!-- Global Review Card -->
<div class="col-md-4">
<div class="global-review-card">
<div class="card">
<div class="card-body">
<h5 class="card-title">Reviews And Ratings</h5>
<div class="rating" style="margin-top: 10px;">
<span class="rating-value">4.2</span>
<div class="" style="margin-left: 20px;">
<span class="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-regular fa-star"></i>
</span>
<p class="rating-count">Based on 456 Ratings</p>
</div>
</div>

<hr>
<div class="text-rating">
<p>Reliability</p>
<p>4.5</p></div>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="4.5" aria-valuemin="0" aria-valuemax="5"></div>
</div>
<div class="text-rating">
<p>Payout Rating</p>
<p>4.8</p></div>
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" style="width: 96%" aria-valuenow="4.8" aria-valuemin="0" aria-valuemax="5"></div>
</div>
<div class="text-rating">
<p>Positive Solution</p>
<p>4.5</p></div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="4.5" aria-valuemin="0" aria-valuemax="5"></div>
</div>
</div>

<p class="summery" style="margin-left: 20px; color: rgb(95, 95, 255);">Show summery</p>
</div>
</div>
<div class="carousel-item">
<div class="img-box my-5">
<img src="Images/testimonials/client2.jpg" alt="">
</div>
<div class="carousel-caption">
<h3 class="overview">John Doe</h3>
<p class="testimonial-text">I love the variety on Foodie! There's something for everyone, and
the delivery service is incredibly reliable</p>
<div class="star-rating">
<ul class="list-inline d-flex justify-content-center">
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-regular fa-star"></i></li>
<li><i class="fa-regular fa-star"></i></li>
</div>
<!-- Carousel -->
<div class="col-md-8">
<div id="testimonials" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="img-box my-5">
<img src="Images/testimonials/client1.jpg" alt="">
</div>
<div class="carousel-caption">
<h3 class="overview">Matt Gilbert</h3>
<p class="testimonial-text">Foodie never disappoints! The food is always fresh, delicious, and
delivered right on time. My go-to for all my meals!</p>
<div class="star-rating">
<ul class="list-inline d-flex justify-content-center">
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-regular fa-star"></i></li>
<li><i class="fa-regular fa-star"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="img-box my-5">
<img src="Images/testimonials/client3.jpg" alt="">
</div>
<div class="carousel-caption">
<h3 class="overview">Laren Green</h3>
<p class="testimonial-text">Fantastic service and mouth-watering dishes! Foodie has made my
dining experience so much more convenient.</p>
<div class="star-rating">
<ul class="list-inline d-flex justify-content-center">
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-regular fa-star"></i></li>
<li><i class="fa-regular fa-star"></i></li>
</ul>
<div class="carousel-item">
<div class="img-box my-5">
<img src="Images/testimonials/client2.jpg" alt="">
</div>
<div class="carousel-caption">
<h3 class="overview">John Doe</h3>
<p class="testimonial-text">I love the variety on Foodie! There's something for everyone, and
the delivery service is incredibly reliable</p>
<div class="star-rating">
<ul class="list-inline d-flex justify-content-center">
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-regular fa-star"></i></li>
<li><i class="fa-regular fa-star"></i></li>
</div>
</div>
</div>
<div class="carousel-item">
<div class="img-box my-5">
<img src="Images/testimonials/client3.jpg" alt="">
</div>
<div class="carousel-caption">
<h3 class="overview">Laren Green</h3>
<p class="testimonial-text">Fantastic service and mouth-watering dishes! Foodie has made my
dining experience so much more convenient.</p>
<div class="star-rating">
<ul class="list-inline d-flex justify-content-center">
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-solid fa-star"></i></li>
<li><i class="fa-regular fa-star"></i></li>
<li><i class="fa-regular fa-star"></i></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Carousel controls-->
<button class="carousel-control-prev" data-bs-target="#testimonials" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" data-bs-target="#testimonials" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Carousel controls-->
<button class="carousel-control-prev" data-bs-target="#testimonials" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" data-bs-target="#testimonials" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>



<section class="picture-gallery" data-aos="fade-in" data-aos-duration="2000">
<div class="row g-0">
<div class="col-3">
Expand Down
99 changes: 99 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -599,3 +599,102 @@ body{
transform: rotate(360deg);
}
}

.testimonial-section {
padding: 2rem;
background-color: #f9f9f9;
}

.testimonial-tagline {
text-align: center;
font-size: 2rem;
margin-bottom: 1rem;
}

.testimonial-description {
text-align: center;
font-size: 1.2rem;
margin-bottom: 2rem;
}

.global-review-card .card {
border: none;
background: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.global-review-card .card-body {
text-align: start;
}

.rating-value {
font-size: 2rem;
font-weight: bold;
}

.stars {
color: #f8ce0b;
font-size: 1.5rem;
}

.rating{
display: flex;
justify-content: start;
}

.rating-count {
font-size: 0.9rem;
color: #888;
}

.progress {
height: 1rem;
background: #e9ecef;
}

.progress-bar {
background: #17a2b8;
line-height: 1rem;
font-size: 0.75rem;
text-align: left;
padding-left: 0.5rem;
}

.row {
display: flex;
align-items: center;
}

.img-box img {
width: 100%;
border-radius: 50%;
}

.overview {
font-size: 1.25rem;
font-weight: bold;
}

.testimonial-text {
font-size: 1rem;
margin: 0.5rem 0;
}

.star-rating .list-inline {
padding-left: 0;
margin: 0;
}

.star-rating .list-inline li {
color: #f8ce0b;
font-size: 1.5rem;
}

.text-rating{
display: flex;
justify-content: space-between;
}

.summery:hover {
cursor: pointer;
}

0 comments on commit de4e27c

Please sign in to comment.