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

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

.testimonials-container {
  font-family: "Gugi";
  font-size: 20px;
  color: #fff;
  background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%);
  max-width: 700px;
  margin: 20px auto;
  padding: 50px 80px;
  border-radius: 15px;
  position: relative;
}

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

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

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

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

.username {
  margin: 0;
}

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

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

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

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

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

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

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

@media (max-width: 376px) {
  .testimonial {
    line-height: 20px;
    margin: 10px auto;
  }
}

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 index = 1;

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

setInterval(updateTestimonial, 5000);