Skip to content

Commit

Permalink
Merge pull request #221 from tarunkumar2005/main
Browse files Browse the repository at this point in the history 
Enhanced the testeminals Section properly and professionally
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 8, 2024
2 parents 95da8eb + 56ee7a5 commit a47f424
Show file tree
Hide file tree
Showing 2 changed files with 224 additions and 60 deletions.
132 changes: 87 additions & 45 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -736,51 +736,93 @@ <h2>Ratings:</h2>
</form>
</div>

<div class="reviews-list">
<h3>What Others Are Saying</h3>
<!-- Example Review -->
<div class="review">
<h4>John Doe - Paris</h4>
<p>⭐⭐⭐⭐⭐</p>
<p>
Amazing experience in Paris! The Eiffel Tower was breathtaking, and
the food was incredible. Highly recommend!
</p>
</div>
<div class="review">
<h4>Rahul Mehta - Dubai</h4>
<p>⭐⭐⭐⭐</p>
<p>
Dubai is a must-visit destination! The Burj Khalifa and desert
safari were highlights of the trip. Just a bit expensive.
</p>
</div>

<div class="review">
<h4>Emily Johnson - London</h4>
<p>⭐⭐⭐⭐⭐</p>
<p>
London's history and architecture are stunning. The Tower of London
and Buckingham Palace were fascinating to explore.
</p>
</div>

<div class="review">
<h4>Michael Lee - Goa</h4>
<p>⭐⭐⭐⭐</p>
<p>
Goa's beaches are beautiful, and the nightlife is vibrant. Great
place for a fun and laid-back vacation.
</p>
</div>

<div class="review">
<h4>Aditi Patel - New York</h4>
<p>⭐⭐⭐⭐⭐</p>
<p>
New York City is amazing! Central Park, Times Square, and the Statue
of Liberty were all incredible. Highly recommend!
</p>
<div class="reviews-container">
<h2 class="reviews-title">What Others Are Saying</h2>
<div class="reviews-list">
<div class="review-card">
<div class="review-header">
<img src="https://i.pravatar.cc/100?img=1" alt="John Doe" class="reviewer-avatar">
<div class="reviewer-info">
<h3 class="reviewer-name">John Doe</h3>
<p class="reviewer-location">Paris</p>
</div>
</div>
<div class="review-rating">
<span class="star-rating" aria-label="5 out of 5 stars">★★★★★</span>
</div>
<p class="review-text">
Amazing experience in Paris! The Eiffel Tower was breathtaking, and
the food was incredible. Highly recommend!
</p>
</div>

<div class="review-card">
<div class="review-header">
<img src="https://i.pravatar.cc/100?img=2" alt="Rahul Mehta" class="reviewer-avatar">
<div class="reviewer-info">
<h3 class="reviewer-name">Rahul Mehta</h3>
<p class="reviewer-location">Dubai</p>
</div>
</div>
<div class="review-rating">
<span class="star-rating" aria-label="4 out of 5 stars">★★★★☆</span>
</div>
<p class="review-text">
Dubai is a must-visit destination! The Burj Khalifa and desert
safari were highlights of the trip. Just a bit expensive.
</p>
</div>

<div class="review-card">
<div class="review-header">
<img src="https://i.pravatar.cc/100?img=3" alt="Emily Johnson" class="reviewer-avatar">
<div class="reviewer-info">
<h3 class="reviewer-name">Emily Johnson</h3>
<p class="reviewer-location">London</p>
</div>
</div>
<div class="review-rating">
<span class="star-rating" aria-label="5 out of 5 stars">★★★★★</span>
</div>
<p class="review-text">
London's history and architecture are stunning. The Tower of London
and Buckingham Palace were fascinating to explore.
</p>
</div>

<div class="review-card">
<div class="review-header">
<img src="https://i.pravatar.cc/100?img=4" alt="Michael Lee" class="reviewer-avatar">
<div class="reviewer-info">
<h3 class="reviewer-name">Michael Lee</h3>
<p class="reviewer-location">Goa</p>
</div>
</div>
<div class="review-rating">
<span class="star-rating" aria-label="4 out of 5 stars">★★★★☆</span>
</div>
<p class="review-text">
Goa's beaches are beautiful, and the nightlife is vibrant. Great
place for a fun and laid-back vacation.
</p>
</div>

<div class="review-card">
<div class="review-header">
<img src="https://i.pravatar.cc/100?img=5" alt="Aditi Patel" class="reviewer-avatar">
<div class="reviewer-info">
<h3 class="reviewer-name">Aditi Patel</h3>
<p class="reviewer-location">New York</p>
</div>
</div>
<div class="review-rating">
<span class="star-rating" aria-label="5 out of 5 stars">★★★★★</span>
</div>
<p class="review-text">
New York City is amazing! Central Park, Times Square, and the Statue
of Liberty were all incredible. Highly recommend!
</p>
</div>
</div>
</div>
</section>
Expand Down
152 changes: 137 additions & 15 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -645,33 +645,155 @@ body.dark-mode {
background-color: #0056b3;
}

.reviews-container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
background-color: #f8f9fa;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.reviews-title {
font-size: 2.5em;
color: #2c3e50;
text-align: center;
margin-bottom: 40px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}

.reviews-list {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}

.review {
.review-card {
background: white;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}

.review h4 {
font-size: 1.2em;
margin-bottom: 5px;
.review-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.review p {
margin: 5px 0;
.review-header {
display: flex;
align-items: center;
padding: 20px;
background-color: #ecf0f1;
border-bottom: 2px solid #e0e0e0;
}

.reviews-list {
display: flex;
flex-direction: column;
gap: 20px;
.reviewer-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
margin-right: 20px;
border: 3px solid #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.reviewer-info {
flex-grow: 1;
}

.reviewer-name {
font-size: 1.3em;
margin: 0;
color: #34495e;
font-weight: 600;
}

.reviewer-location {
font-size: 0.95em;
color: #7f8c8d;
margin: 5px 0 0;
font-style: italic;
}

.review-rating {
padding: 15px 20px;
border-bottom: 1px solid #eee;
background-color: #f9f9f9;
}

.star-rating {
color: #f1c40f;
font-size: 1.4em;
letter-spacing: 3px;
}

.review-text {
padding: 20px;
font-size: 1em;
line-height: 1.7;
color: #444;
flex-grow: 1;
background-color: #ffffff;
border-radius: 0 0 15px 15px;
}

@media (max-width: 768px) {
.reviews-list {
grid-template-columns: 1fr;
}

.reviews-title {
font-size: 2em;
}

.review-card {
max-width: 400px;
margin: 0 auto;
}
}

@media (max-width: 480px) {
.reviews-container {
padding: 20px 10px;
}

.review-header {
flex-direction: column;
text-align: center;
}

.reviewer-avatar {
margin-right: 0;
margin-bottom: 10px;
}

.reviewer-info {
text-align: center;
}
}

/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.review-card {
animation: fadeIn 0.5s ease-out forwards;
opacity: 0;
}

.review-card:nth-child(1) { animation-delay: 0.1s; }
.review-card:nth-child(2) { animation-delay: 0.2s; }
.review-card:nth-child(3) { animation-delay: 0.3s; }
.review-card:nth-child(4) { animation-delay: 0.4s; }
.review-card:nth-child(5) { animation-delay: 0.5s; }

.review-item {
padding: 20px;
border: 1px solid #ccc; /* Light border in light mode */
Expand Down

0 comments on commit a47f424

Please sign in to comment.