Copy Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonial Layout</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section id="testimonial">
<h2>Testimonials</h2>
<h3>Feedback from our happy clients!</h3>
<div class="feedback-display">
<span class="material-icons" id="previous">
chevron_left
</span>
<ul>
<li class="active">
<img src="face.jpeg" alt="user image" />
<p class="quote">"Great service, completed on time."</p>
<p class="quote-name">John Smith</p>
</li>
<li>
<img src="face2.jpeg" alt="user image" />
<p class="quote">"Professionals who did the job right the first time."</p>
<p class="quote-name">Jane Smith</p>
</li>
<li>
<img src="face3.jpeg" alt="user image" />
<p class="quote">"I really wasn't sure of what I needed, but they guided me through my project
with expert knowledge.."</p>
<p class="quote-name">Tom Smith</p>
</li>
<li>
<img src="face4.jpeg" alt="user image" />
<p class="quote">"Friendly and timely service!"</p>
<p class="quote-name">James Smith</p>
</li>
</ul>
<span class="material-icons" id="next">
chevron_right
</span>
</div>
</section>
</main>
<script src="main.js"></script>
</body>
</html>
Copy Code
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@keyframes fadeIn {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
@keyframes fadeOut {
from{
opacity: 1;
}
to{
opacity: 0;
}
}
*{
padding:0;
margin:0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-size:14pt;
}
body{
background:rgb(33, 33, 34);
}
#testimonial{
width:60%;
margin:20px auto;
color:rgb(150, 148, 148);
}
h2{
font-size:2.5rem;
color:#fff;
text-transform: uppercase;
width:100%;
text-align: center;
padding-bottom:20px;
position: relative;
}
h2::after{
width:200px;
content: ' ';
height:2px;
background:red;
display: table;
position:absolute;
top:100%;
left:calc(50% - 100px);
}
h3{
font-weight: 500;
text-align: center;
font-size:1rem;
padding:20px 0 10px;
}
.quote{
font-weight:700;
font-size:1.4rem;
color:#fff;
text-align:center;
padding:20px;
}
.quote-name{
text-align: center;
}
.feedback-display{
display:flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
min-height:50vh;
}
.feedback-display .material-icons{
font-size:5rem;
color:red;
cursor: pointer;
transition: all .3s ease-out;
}
.feedback-display .material-icons:hover{
color:rgb(168, 2, 2);
}
.feedback-display ul{
list-style-type: none;
width:60%;
}
.feedback-display ul li{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.feedback-display ul li:not(.active) {
display:none;
transition: all .3s ease-out;
opacity: 0;
}
.feedback-display ul li.active {
animation:fadeIn 5000ms forwards;
}
.feedback-display ul li img{
width:300px;
height:300px;
border-radius:50%;
margin:20px auto;
}
@media screen and (max-width:850px) {
#testimonial{
width:100%;
}
}
@media screen and (max-width:600px) {
.feedback-display ul li img{
width:200px;
height:200px;
}
.feedback-display ul {
width:80%;
}
}
Copy Code
(() => {
const next = document.getElementById('next'),
previous = document.getElementById('previous');
const action = {
process: (el, cur, selector) => {
cur.classList.toggle('active')
if (el == null || el == undefined) {
cur.parentElement.querySelector(selector).classList.add('active')
} else {
el.classList.add('active');
}
},
};
next.addEventListener('click', e => {
let current = document.querySelector('.active'),
nextEl = current.nextElementSibling;
action.process(nextEl, current, 'li')
})
previous.addEventListener('click', e => {
let current = document.querySelector('.active'),
nextEl = current.previousElementSibling;
action.process(nextEl, current, 'li:last-of-type')
})
})()
