From 56ee7a581ac37ff5f23d7e63ec3a42576c3c5e9e Mon Sep 17 00:00:00 2001 From: tarunkumar2005 Date: Mon, 7 Oct 2024 22:25:44 +0530 Subject: [PATCH] Enhanced the testeminals Section properly and professionally --- index.html | 132 ++++++++++++++++++++++++++++++---------------- style.css | 152 +++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 224 insertions(+), 60 deletions(-) diff --git a/index.html b/index.html index 8ac9e068..97881818 100644 --- a/index.html +++ b/index.html @@ -567,51 +567,93 @@

Leave a Review

-
-

What Others Are Saying

- -
-

John Doe - Paris

-

⭐⭐⭐⭐⭐

-

- Amazing experience in Paris! The Eiffel Tower was breathtaking, and - the food was incredible. Highly recommend! -

-
-
-

Rahul Mehta - Dubai

-

⭐⭐⭐⭐

-

- Dubai is a must-visit destination! The Burj Khalifa and desert - safari were highlights of the trip. Just a bit expensive. -

-
- -
-

Emily Johnson - London

-

⭐⭐⭐⭐⭐

-

- London's history and architecture are stunning. The Tower of London - and Buckingham Palace were fascinating to explore. -

-
- -
-

Michael Lee - Goa

-

⭐⭐⭐⭐

-

- Goa's beaches are beautiful, and the nightlife is vibrant. Great - place for a fun and laid-back vacation. -

-
- -
-

Aditi Patel - New York

-

⭐⭐⭐⭐⭐

-

- New York City is amazing! Central Park, Times Square, and the Statue - of Liberty were all incredible. Highly recommend! -

+
+

What Others Are Saying

+
+
+
+ John Doe +
+

John Doe

+

Paris

+
+
+
+ ★★★★★ +
+

+ Amazing experience in Paris! The Eiffel Tower was breathtaking, and + the food was incredible. Highly recommend! +

+
+ +
+
+ Rahul Mehta +
+

Rahul Mehta

+

Dubai

+
+
+
+ ★★★★☆ +
+

+ Dubai is a must-visit destination! The Burj Khalifa and desert + safari were highlights of the trip. Just a bit expensive. +

+
+ +
+
+ Emily Johnson +
+

Emily Johnson

+

London

+
+
+
+ ★★★★★ +
+

+ London's history and architecture are stunning. The Tower of London + and Buckingham Palace were fascinating to explore. +

+
+ +
+
+ Michael Lee +
+

Michael Lee

+

Goa

+
+
+
+ ★★★★☆ +
+

+ Goa's beaches are beautiful, and the nightlife is vibrant. Great + place for a fun and laid-back vacation. +

+
+ +
+
+ Aditi Patel +
+

Aditi Patel

+

New York

+
+
+
+ ★★★★★ +
+

+ New York City is amazing! Central Park, Times Square, and the Statue + of Liberty were all incredible. Highly recommend! +

+
diff --git a/style.css b/style.css index 5a624c39..adb18b29 100644 --- a/style.css +++ b/style.css @@ -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 */