Hello developers, today in this blog, you'll learn how to create a Multitab Testimonial Card using HTML, CSS & JavaScript.
A testimonial is a card with a statement that comments on the success of how good someone or something is. Testimonials help the user to build trust in the product. The testimonials card may contain the person's name, profile picture, and some statement and it might also be with a star rating.
In this Multitab Testimonial Card, there are five testimonial cards with a statement, the name of the person, and the person's profile icon. Each testimonials card has a profile icon below the comment, the name of the person is between the comment and the profile of the person, and some content about the person.
The multitab is done mainly using JavaScript. When you click on the person's icon you will be viewing the respective person's comment.
The source code of this Multitab Testimonial Card is given below, if you want the source code of this program, you can copy it. You can use this Multitab Testimonial Card code on your projects.
Multitab Testimonial Card [Source Code]
To make this website, you would like to make two files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
* {
box-sizing: border-box;
}
body {
background: #eee;
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.testimonials-container {
color: rgba(255, 255, 255, 0.8);
display: flex;
flex-direction: column;
align-items: center;
padding: 70px 50px 50px;
transition: all 0.3s ease-in;
margin: 20px;
max-width: 100%;
}
.fa-quote-left {
color: rgba(0, 0, 0, 0.15);
font-size: 50px;
}
.text {
line-height: 30px;
margin: 40px 0 20px;
min-height: 150px;
max-width: 600px;
text-align: justify;
word-spacing: 5px;
}
.name {
align-self: flex-end;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
}
.authors-container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.author {
margin: 30px 30px 0;
cursor: pointer;
}
.author.selected img {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
transform: scale(1.2);
}
.author img {
transition: all 0.3s ease-in;
border-radius: 50%;
width: 50px;
height: 50px;
}
.credit{
text-align: center;
color: #000;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}
const authorsEl = document.querySelectorAll('.author');
const container = document.querySelector('.testimonials-container');
const nameEl = document.querySelector('.name');
const textEl = document.querySelector('.text');
const testimonials = [{
text: '"First, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis."',
name: 'Christ Jennifer',
color: '#00C9A7'
},{
text: '"Second, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis."',
name: 'James',
color: '#FF676D'
},{
text: '"Third, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis."',
name: 'Fransis Merry',
color: '#9D50BB'
},{
text: '"Fourth, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis."',
name: 'Kumaran',
color: '#F16529'
},{
text: '"Fifth, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis."',
name: 'Afrah Khan',
color: '#021B79'
}];
addTestimonial(0);
authorsEl.forEach((author, idx) => {
author.addEventListener('click', (e) => {
addTestimonial(idx);
author.classList.add('selected');
})
});
function addTestimonial(idx) {
const testimonial = testimonials[idx];
nameEl.innerHTML = testimonial.name;
textEl.innerHTML = testimonial.text;
container.style.background = testimonial.color;
container.style.boxShadow = '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)';
authorsEl.forEach(author => {
author.classList.remove('selected');
});
}
Thank you for reading our blog. If you face any problem in creating this Multitab Testimonial Card using HTML, CSS & JavaScript, then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team