diff --git a/src/Pages/Testimonial.css b/src/Pages/Testimonial.css index a1abf4f..d0587d9 100644 --- a/src/Pages/Testimonial.css +++ b/src/Pages/Testimonial.css @@ -1,124 +1,169 @@ -*{ - margin:0; - padding: 0; - font-family: 'poppins', sans-serif ; +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Open+Sans:wght@400;500&display=swap'); + +.testimonial { + background-color: #f5e6d3; + padding: 80px 0; + background-image: + linear-gradient(rgba(245, 230, 211, 0.9), rgba(245, 230, 211, 0.9)), + url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a87d5a' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); } -.testimonial{ - background:#f8f8f8; - padding: 2rem 0; +.testimonial .container { + max-width: 1200px; + margin: 0 auto; } -h1{ + +.testimonial h1 { text-align: center; - color: #7c2214; + color: #5c3d2e; + font-family: 'Playfair Display', serif; + font-size: 2.8rem; + margin-bottom: 50px; + text-shadow: 1px 1px 2px rgba(0,0,0,0.1); + position: relative; } -.container{ - margin-top: 5%; +.testimonial h1::after { + content: '☕'; + display: block; + font-size: 1.5rem; + margin-top: 10px; + text-shadow: none; +} + +.single { + background: #fff; + padding: 30px; + border-radius: 15px; + box-shadow: 0 8px 16px rgba(92, 61, 46, 0.1); + margin: 15px; + transition: all 0.3s ease; + border: 1px solid #e6d5c3; + height: 100%; + display: flex; + flex-direction: column; +} + +.single:hover { + transform: translateY(-5px); + box-shadow: 0 12px 20px rgba(92, 61, 46, 0.15); +} + +.image { + text-align: center; margin-bottom: 20px; } -.image-text{ - width:100% ; - height: 300px; - display: block; +.image img { + width: 100px; + height: 100px; + border-radius: 50%; + object-fit: cover; + border: 4px solid #b68f40; + transition: transform 0.3s ease; +} + +.single:hover .image img { + transform: scale(1.05); +} + +.image-text { text-align: center; - padding: 40% 5%; - background: white; - color:black ; - border-radius: 15px; - box-shadow: 0px 2px 6px 3px rgba(0, 0, 0, 0.1); - animation: fadeInUp 1s ease-in-out; /* Added animation */ - - transition: transform 0.3s ease, box-shadow 0.3s ease; + flex-grow: 1; + display: flex; + flex-direction: column; } -.image:hover { - transform: none; - } -.image-text h2{ - font-size: 25px; - text-transform: uppercase; - letter-spacing: 2px; +.image-text h2 { + color: #5c3d2e; + font-size: 1.4rem; + margin-bottom: 10px; + font-family: 'Playfair Display', serif; + font-weight: 600; } -.image-text p{ - font-size: 14px; +.image-text .rating { + color: #b68f40; + font-size: 1.2rem; + margin-bottom: 15px; } -.single{ - position: relative; - margin-bottom: 50px; - +.image-text .testimonial-text { + color: #6b4f3b; + font-size: 1rem; + line-height: 1.7; + font-family: 'Open Sans', sans-serif; + margin-bottom: 0; + font-style: italic; + flex-grow: 1; } -.single:hover { - transform: scale(1.05); - box-shadow: 0px 4px 12px 6px rgba(0, 0, 0, 0.2); - transition: all 0.3s ease-in-out; +.carousel { + padding-bottom: 50px; } -.image{ - position: absolute; - width:100px; - height: 100px; - border: 3px solid #7c2214; - overflow: hidden; - top:15px; - left:125px; - border-radius: 50%; - animation: bounceIn 1s ease-in-out; +.carousel-indicators { + bottom: -50px; } -.image img{ - width: 100%; - object-fit: cover; +.carousel-indicators button { + background-color: #b68f40 !important; + width: 10px !important; + height: 10px !important; + border-radius: 50% !important; + margin: 0 5px !important; + opacity: 0.5; + transition: opacity 0.3s ease; } -.row{ - margin-bottom: 20px; + +.carousel-indicators button.active { + opacity: 1; } -.carousel-indicators{ - left: 0; - top: auto; - bottom: -70px; +.carousel-control-prev-icon, +.carousel-control-next-icon { + background-color: #b68f40; + border-radius: 50%; + padding: 25px; + transition: all 0.3s ease; } -@keyframes fadeInUp { - 0% { - opacity: 0; - transform: translateY(20px); - } - 100% { - opacity: 1; - transform: translateY(0); - } +.carousel-control-prev, +.carousel-control-next { + opacity: 0.7; + width: 5%; } -@keyframes bounceIn { - 0%, 20%, 40%, 60%, 80%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - } - 0% { - opacity: 0; - transform: scale3d(.3, .3, .3); +.carousel-control-prev:hover, +.carousel-control-next:hover { + opacity: 1; +} + +@media (max-width: 768px) { + .testimonial { + padding: 40px 0; } - 20% { - transform: scale3d(1.1, 1.1, 1.1); + + .testimonial h1 { + font-size: 2rem; + margin-bottom: 30px; } - 40% { - transform: scale3d(.9, .9, .9); + + .single { + margin: 10px; + padding: 20px; } - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); + + .image img { + width: 80px; + height: 80px; } - 80% { - transform: scale3d(.97, .97, .97); + + .image-text h2 { + font-size: 1.2rem; } - 100% { - opacity: 1; - transform: scale3d(1, 1, 1); + + .image-text .testimonial-text { + font-size: 0.9rem; } -} +} \ No newline at end of file diff --git a/src/Pages/Testimonial.js b/src/Pages/Testimonial.js index ecadcbe..9227df2 100644 --- a/src/Pages/Testimonial.js +++ b/src/Pages/Testimonial.js @@ -1,44 +1,38 @@ import React from 'react' import './Testimonial.css' - - function Testimonial() { +function Testimonial() { return ( <>
-
-

What Our Customers Say:

-

+

What Our Customer Says

-
+
- - -
-
+ + +
+
- +

Devolina

⭐️⭐️⭐️⭐️

-

- -"Best coffee in town! The aroma of freshly brewed coffee hits you the moment you walk in. Their baristas are true artists, and every cup is a masterpiece.

+

"Best coffee in town! The aroma of freshly brewed coffee hits you the moment you walk in. Their baristas are true artists, and every cup is a masterpiece.

-
- +

Priya Jha

@@ -46,30 +40,28 @@ import './Testimonial.css'

A hidden gem! This coffee shop not only has a fantastic selection of drinks but also a mouth-watering array of pastries.

-
- +

Hellan

⭐️⭐️⭐️⭐️

-

"Perfect spot to unwind. The music is just the right volume, the seating is comfortable, and there’s always a good mix of people.

+

"Perfect spot to unwind. The music is just the right volume, the seating is comfortable, and there's always a good mix of people.

-
-
+
- +

David

@@ -78,12 +70,11 @@ import './Testimonial.css' Porro veritatis obcaecati sequi necessitatibus quidem nemo ratione?

-
- +

John

@@ -92,12 +83,11 @@ import './Testimonial.css' Porro veritatis obcaecati sequi necessitatibus quidem nemo ratione?

-
- +

Sandy

@@ -106,28 +96,25 @@ import './Testimonial.css' Porro veritatis obcaecati sequi necessitatibus quidem nemo ratione?

-
- -
- - +
-
-
-
+
+ + +
+
+ ); } -export default Testimonial; - - +export default Testimonial; \ No newline at end of file