Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="testimonials-container">
	<div class="progress-bar"></div>
	<div class="fa fa-quote-right fa-quote"></div>
	<div class="fa fa-quote-left fa-quote"></div>
	<p class="testimonial">I've worked with literally hundreds of HTML/CSS developers and I have to say the top spot goes to this guy. This guy is an amazing developer. He stresses on good, clean code and pays heed to the details. I love developers who respect each and every aspect of a throughly thought out design and do their best to put it in code. He goes over and beyond and transforms ART into PIXELS - without a glitch, every time.</p>
	<div class="centered-items">
		<img class="logo" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6" alt="logo" />
		<div class="user-details">
			<h4 class="username">Miyah Myles</h4>
			<p class="role">Marketing</p>
		</div>
	</div>
</div>

<footer>
	<p>
		Created with <i class="fa fa-heart"></i> by 
		<a target="_blank" href="https://florin-pop.com">Florin Pop</a>
		- Read about how I created it
		<a target="_blank" href="https://florin-pop.com/blog/2019/02/how-to-create-a-testimonials-box-component/">in this article</a><br />
		Other projects on
		<a target="_blank" href="https://github.com/florinpop17/work-journal/">Github</a>
	</p>
</footer>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Montserrat');

* {
	box-sizing: border-box;
}

body {
	background-color: rgb(251, 250, 252);
	display: flex;
	font-family: 'Montserrat';
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

.testimonials-container {
	background-color: #476CE4;
	border-radius: 15px;
	color: #FFFFFF;
	font-family: 'Montserrat';
	margin: 20px auto;
	max-width: 768px;
	padding: 50px 80px;
	position: relative;
}

.fa-quote {
	color: rgba(255, 255, 255, 0.3);
	font-size: 28px;
	position: absolute;
	top: 70px;
}

.fa-quote-right {
	left: 40px;
}

.fa-quote-left {
	right: 40px;
}

.testimonial {
	line-height: 28px;
	text-align: justify;
}

.centered-items {
	display: flex;
	justify-content: center;
	align-items: center;
}

.logo {
	border-radius: 50%;
	height: 75px;
	width: 75px;
	object-fit: cover;
}

.user-details {
	margin-left: 10px;
}

.username {
	margin: 0;
}

.role {
	font-weight: normal;
	margin: 2px 0;
}

.progress-bar {
	background-color: #fff;
	height: 4px;
	width: 100%;
	animation: grow 10s linear infinite;
	transform-origin: left;
}

@keyframes grow {
	0% {
		transform: scaleX(0);
	}
}

@media (max-width: 768px) {
	.testimonials-container {
		padding: 20px 30px;
	}
	
	.fa-quote {
		display: none;
	}
}

footer {
	background-color: #222;
	color: #fff;
	font-size: 14px;
	bottom: 0;
	position: fixed;
	left: 0;
	right: 0;
	text-align: center;
}

footer p {
	margin: 10px 0;
}

footer i {
	color: red;
}

footer a {
	color: #3C97BF;
	text-decoration: none;
}
              
            
!

JS

              
                const testimonialsContainer = document.querySelector('.testimonials-container');
const testimonial = testimonialsContainer.querySelector('.testimonial');
const logo = testimonialsContainer.querySelector('.logo');
const username = testimonialsContainer.querySelector('.username');
const role = testimonialsContainer.querySelector('.role');

const testimonials = [
    {
        "name": "Miyah Myles",
        "position": "Marketing",
        "photo": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6",
		"text": "I've worked with literally hundreds of HTML/CSS developers and I have to say the top spot goes to this guy. This guy is an amazing developer. He stresses on good, clean code and pays heed to the details. I love developers who respect each and every aspect of a throughly thought out design and do their best to put it in code. He goes over and beyond and transforms ART into PIXELS - without a glitch, every time."
    },
    {
        "name": "June Cha",
        "position": "Software Engineer",
        "photo": "https://randomuser.me/api/portraits/women/44.jpg",
		"text": "This guy is an amazing frontend developer that delivered the task exactly how we need it, do your self a favor and hire him, you will not be disappointed by the work delivered. He will go the extra mile to make sure that you are happy with your project. I will surely work again with him!"
    },
    {
        "name": "Iida Niskanen",
        "position": "Data Entry",
        "photo": "https://randomuser.me/api/portraits/women/68.jpg",
		"text": "This guy is a hard worker. Communication was also very good with him and he was very responsive all the time, something not easy to find in many freelancers. We'll definitely repeat with him."
    },
    {
        "name": "Renee Sims",
        "position": "Receptionist",
        "photo": "https://randomuser.me/api/portraits/women/65.jpg",
		"text": "This guy does everything he can to get the job done and done right. This is the second time I've hired him, and I'll hire him again in the future."
    },
    {
        "name": "Jonathan Nunfiez",
        "position": "Graphic Designer",
        "photo": "https://randomuser.me/api/portraits/men/43.jpg",
		"text": "I had my concerns that due to a tight deadline this project can't be done. But this guy proved me wrong not only he delivered an outstanding work but he managed to deliver 1 day prior to the deadline. And when I asked for some revisions he made them in MINUTES. I'm looking forward to work with him again and I totally recommend him. Thanks again!"
    },
    {
        "name": "Sasha Ho",
        "position": "Accountant",
        "photo": "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?h=350&auto=compress&cs=tinysrgb",
		"text": "This guy is a top notch designer and front end developer. He communicates well, works fast and produces quality work. We have been lucky to work with him!"
    },
    {
        "name": "Veeti Seppanen",
        "position": "Director",
        "photo": "https://randomuser.me/api/portraits/men/97.jpg",
		"text": "This guy is a young and talented IT professional, proactive and responsible, with a strong work ethic. He is very strong in PSD2HTML conversions and HTML/CSS technology. He is a quick learner, eager to learn new technologies. He is focused and has the good dynamics to achieve due dates and outstanding results."
    }
];
let idx = 1;


function updateTestimonial() {
	let { name, position, photo, text } = testimonials[idx];
	
	testimonial.innerHTML = text;
	logo.src  = photo;
	username.innerHTML = name;
	role.innerHTML = position;
	
	idx++;
	if(idx > testimonials.length -1 ) {
		idx = 0;
	}
}

setInterval(updateTestimonial, 10000);
              
            
!
999px

Console