testmonials

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GSRMA Testimonials</title>
<style>

.carousel-overlay {
background-color: #F8FAFC; /* soft transparent blue overlay */
max-width: 1000px;
margin: 0 auto;
padding: 3rem 2rem;
border-radius: 12px;
color: #1C5E81; /* default text color */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.carousel {
text-align: center;
}

.heading-main {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #40599C;
}

.heading-sub {
font-size: 1.5rem;
font-weight: 600;
color: #C8451E;
margin-bottom: 2rem;
}

.testimonial {
display: none;
opacity: 0;
transition: opacity 1s ease-in-out;
}

.testimonial.active {
display: block;
opacity: 1;
}

.quote {
font-style: italic;
font-size: 1.5rem;
margin: 1.5rem 0;
}

.author {
font-weight: 600;
font-style: italic;
color: #1C5E81;
}

.dots {
margin-top: 1.5rem;
}

.dot {
height: 12px;
width: 12px;
margin: 0 6px;
background-color: #ccc;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}

.dot.active {
background-color: #C8451E;
}

</style>
</head>
<body>

<section class="testimonial-section" aria-label="Testimonials Carousel">
<div class="carousel-overlay">
<div class="carousel">
<h3 class="heading-main">Natural Gas is Better!</h3>
<h4 class="heading-sub">It’s the perfect time to MAKE the SWITCH to natural gas! <br>Discover how natural gas has made a difference for these local home and business owners. <br>Read on to see why natural gas is better </h4>

<div class="testimonial active" role="group" aria-roledescription="slide" aria-label="Testimonial 1 of 3">
<p class="quote">“"We’re always surprised by how affordable natural gas is. Plus, a professional kitchen can’t run on electricity alone.”</p>
<p class="author">Jimmy & Beth Bay, Restaurant Owners
</p>
</div>

<div class="testimonial" role="group" aria-roledescription="slide" aria-label="Testimonial 2 of 3">
<p class="quote"> "As a young family, energy efficiency was a top priority when we were searching for our new home. That’s why we chose a natural gas home."</p>
<p class="author">Spencer & Somer Preston, Residential Customers
</p>
</div>

<div class="testimonial" role="group" aria-roledescription="slide" aria-label="Testimonial 3 of 3">
<p class="quote">”We just completed our first phase of The Enclave at Deer Moss Creek and, yes, we have natural gas grills. We’re meeting the demands of today’s consumer - and they all want natural gas.”</p>
<p class="author">Charles Rigdon, Real Estate Developer</p>
</div>

<div class="dots" role="tablist" aria-label="Testimonial Navigation">
<span class="dot active" role="tab" aria-selected="true" tabindex="0" aria-label="View testimonial 1"></span>
<span class="dot" role="tab" aria-selected="false" tabindex="0" aria-label="View testimonial 2"></span>
<span class="dot" role="tab" aria-selected="false" tabindex="0" aria-label="View testimonial 3"></span>
</div>
</div>
</div>
</section>

function nextTestimonial() {
testimonials[index].classList.remove('active');
dots[index].classList.remove('active');
dots[index].setAttribute('aria-selected', 'false');

index = (index + 1) % testimonials.length;

testimonials[index].classList.add('active');
dots[index].classList.add('active');
dots[index].setAttribute('aria-selected', 'true');
}

dots.forEach((dot, i) => {
dot.addEventListener('click', () => {
setActive(i);
resetInterval();
});
dot.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
setActive(i);
resetInterval();
}
});
});

function setActive(i) {
testimonials[index].classList.remove('active');
dots[index].classList.remove('active');
dots[index].setAttribute('aria-selected', 'false');

index = i;

testimonials[index].classList.add('active');
dots[index].classList.add('active');
dots[index].setAttribute('aria-selected', 'true');
}

function resetInterval() {
clearInterval(interval);
interval = setInterval(nextTestimonial, 8000);
}
</script>

</body>
</html>