Multitab Testimonial Card using HTML, CSS & JavaScript

Multitab Testimonial Card using HTML, CSS & JavaScript

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.

<!DOCTYPE html> <html> <head> <title>Multitab Testimonial Card || Learningrobo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="testimonials-container"> <i class="fas fa-quote-left"></i> <p class="text"></p> <strong class="name"></strong> <div class="authors-container"> <div class="author selected"> <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359554__340.png" alt=""> </div> <div class="author"> <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553__340.png" alt=""> </div> <div class="author"> <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359554__340.png" alt=""> </div> <div class="author"> <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553__340.png" alt=""> </div> <div class="author"> <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359554__340.png" alt=""> </div> </div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css 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;
  } 
JavaScript makes the page work functionally. At last, create a JavaScript file with the name script.js, and remember that you have got need to make a file with a .js extension.


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');
	});
}
We hope you would like this Multitab Testimonial Card using HTML, CSS & JavaScript.

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.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome
OnlineEditor
HTMLTools