Пишем код HTML:
Пишем стиль:
Пишем jquery:
Смотрим наш результат:
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">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;
}
JavaScript:
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);