Card Design, JavaScript

Testimonial box template using Html, CSS and javascript

Hello everyone, today we will learn how to create a testimonial box using Html, CSS, and javascript. In the last session, we discussed how to create an Email verification template in Html, CSS, and javascript languages. But now we are gonna learn how to create a testimonial Html template.

Testimonial box means:

The text or image shows something good about a person or a product. It describes something good about a person working in a field or company. It may have an image with text. It can contain an image, name, and description of a person/product.

This box contains a text at the top “testimonial box” and then below it has a box that contains all the text. It is rectangular in shape. At the top, it has a progress line which shows the progress of one person, and after sometimes it finishes. After that, it changes the image and text of the person and then appears as a new person with his/her details.

So, it has a description about that person which describes something good about that person. Then we have an image of that person in a circular form which looks absolutely awesome. Then on the right side, we have the name of that person and below his/her name we have the skill of that person.

All this content is presented in a rectangular box and it’s working in the form of a slider and it looks very pretty. I hope you like it.

How to create a testimonial box?

For creating a responsive testimonial box we need to create three files in our IDE.

Html code:

Starting with an html file. Create an Html file and name it box.html and save it in any folder. Then copy this code and paste it into your Html created file. Html is used for creating the skeleton of the project like image, name, skill, description, etc.

<!--fantacydesign.com-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Testimonial Box</title>
  </head>
  <body>
    <h1>Testimonial <span>Box</span></h1>
    <div class="testimonial-container">
      <div class="progress-bar"></div>
      <div class="fas fa-quote-right fa-quote"></div>
      <div class="fas 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="user">
        <img
          src="https://randomuser.me/api/portraits/women/46.jpg"
          alt="user"
          class="user-image"
        />
        <div class="user-details">
          <h4 class="username">Miyah Myles</h4>
          <p class="role">Marketing</p>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"

integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="

crossorigin="anonymous"

<title>Testimonial Box</title>

</head>

<body>

<h1>Testimonial <span>Box</span></h1>

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>

<img

src="https://randomuser.me/api/portraits/women/46.jpg"

alt="user"

class="user-image"

<h4 class="username">Miyah Myles</h4>

<p class="role">Marketing</p>

</div>

</body>

</html>

CSS code:

Now, create a CSS file and name it box.css and save it in the same folder of your device. Copy the below code and paste it into your CSS file. It is used for designing our project and making it responsive across all the devices. So, without using it we can’t design our project and we are unable to make our project responsive.

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

* {
  box-sizing: border-box;
}

body {
  background-color: #1DBF73;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 10px;
}
h1{
  font-size: 40px;
  font-weight: bold;
  color: #fff;
}
span{
  font-size: 42px;
  font-weight: bold;
  color: #262626
}
.testimonial-container {
  background-color: #1DBF73;
  color: #fff;
  border-radius: 15px;
  margin: 20px auto;
  padding: 50px 80px;
  max-width: 768px;
  position: relative;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.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;
}

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

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

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

.user .username {
  margin: 0;
}

.user .role {
  font-weight: normal;
  margin: 10px 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) {
  .testimonial-container {
    padding: 20px 30px;
  }

  .fa-quote {
    display: none;
  }
}

100

101

102

103

104

105

106

107

108

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

* {

box-sizing: border-box;

}

body {

background-color: #1DBF73;

font-family: 'Montserrat', sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

margin: 0;

padding: 10px;

}

h1{

font-size: 40px;

font-weight: bold;

color: #fff;

}

span{

font-size: 42px;

font-weight: bold;

color: #262626

}

.testimonial-container {

background-color: #1DBF73;

color: #fff;

border-radius: 15px;

margin: 20px auto;

padding: 50px 80px;

max-width: 768px;

position: relative;

box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

.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;

}

.user {

display: flex;

align-items: center;

justify-content: center;

}

.user .user-image {

border-radius: 50%;

height: 75px;

width: 75px;

object-fit: cover;

}

.user .user-details {

margin-left: 10px;

}

.user .username {

margin: 0;

}

.user .role {

font-weight: normal;

margin: 10px 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) {

.testimonial-container {

padding: 20px 30px;

}

.fa-quote {

display: none;

}

Javascript code:

Once again create a file of javascript and name this file as box.js and also it in the same folder. Javascript is used for adding functionalities to our project. It is very helpful for creating any type of project which is responsive and functional.

const testimonialsContainer = document.querySelector('.testimonials-container')
const testimonial = document.querySelector('.testimonial')
const userImage = document.querySelector('.user-image')
const username = document.querySelector('.username')
const role = document.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() {
  const { name, position, photo, text } = testimonials[idx]

  testimonial.innerHTML = text
  userImage.src = photo
  username.innerHTML = name
  role.innerHTML = position

  idx++

  if (idx > testimonials.length - 1) {
    idx = 0
  }
}

setInterval(updateTestimonial, 10000)

const testimonialsContainer = document.querySelector('.testimonials-container')

const testimonial = document.querySelector('.testimonial')

const userImage = document.querySelector('.user-image')

const username = document.querySelector('.username')

const role = document.querySelector('.role')

const testimonials = [

{

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.",

{

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!',

{

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.",

{

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.",

{

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!",

{

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!',

{

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() {

const { name, position, photo, text } = testimonials[idx]

testimonial.innerHTML = text

userImage.src = photo

username.innerHTML = name

role.innerHTML = position

idx++

if (idx > testimonials.length - 1) {

idx = 0

}

setInterval(updateTestimonial, 10000)

By copying all these codes you can create a testimonial box and see your output in the browser.

Therefore, by using this method, you can create it by using HTML, CSS, and javascript. So, If you are facing any error in making it then no problem. I have created a zip file so that it can solve your problems. You just need to download it and extract all these files. Then open the file and run the file of Html and you will get your output in the browser.

Therefore, if you find this post helpful then must like it, share it, and comment. If you are facing any error in your code you have any questions/queries then comment below. I will try to reach out to you as soon as possible.

So, Thanks for reading this post.

Download Source File