Create a Unique Testimonial Carousel

I recently finished up a project for a friend who’s a personal trainer. I had complete control over the design and development of the website, and had a lot of fun creating it! One feature I particularly like is the unique testimonial carousel – which I think is pretty unique and looks damn good (if I do say so myself). So, I thought some other people might find it interesting how I went about creating it.

Now, be warned, I am using the (awesome) Slick JavaScript library for the carousel functionality, so any JQuery haters reading this, please show yourself out 😉.

Right, let’s begin!.

1. Let’s Set Up the HTML, CSS, and JavaScript Files

We just need three files for this tutorial:

  • index.html with boilerplate code, jQuery CDN script, our main.js script and some Google fonts to make the text look pretty. I chose Nunito as my font family.
  • style.css with minimal ‘reset‘ styling, our Nunito font, and a .wrapper class, to constrain our content inside of the full width section area.
  • main.js including a jQuery wrapper for when the DOM is ready.
  • index.html
  • style.css
  • main.js 
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="style.css">

   <title>Frontend Hero Demo: Unique Tesimonials Carousel</title>
</head>
<body>

   <section class="feh-testimonials">
      <div class="wrapper">
         
      </div>
   </section>

   <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
   <script type="text/javascript" src="main.js"></script>
    
</body>
</html>
* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: "Nunito", sans-serif;
}
.wrapper {
   position: relative;
   width: 100%;
   max-width: 960px;
   margin: 0 auto;
   padding: 0 15px;
}
jQuery(document).ready(function() {

});

2. Set Up Initial Testimonials Area Styling

Right, now let’s start to create the structure of our testimonials area, by giving it a minimum height and a background colour.

  • style.css 
.feh-testimonials {
   background: red;
   min-height: 600px;
}

Now, we can see the area we’re working with it.

3. Add In Our Title & Description

Next we’ll add in a heading and a paragraph description to tell users what this section is all about.

  • index.html 
<!DOCTYPE html>
<html lang="en">
<head>
   ...
</head>
<body>

    <section class="feh-testimonials">
        <div class="wrapper">
            <h2>Muscle Factory Testimonials</h2>
            <p class="description">Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia sit amet mauris.</p>
        </div>
    </section>

    ...
    
</body>
</html>

3.1. Add Some Text Styling & Breathing Room

Once the index.html file has been updated, we’ll style / center these new elements, as well as giving the .feh-testimonials area a bit of top & bottom padding.

  • style.css 
...

.feh-testimonials {
   ...

   padding: 75px 0;
}
   .feh-testimonials h2, 
   .feh-testimonials p.description {
      color: #fff;
      text-align: center;
   }
   .feh-testimonials h2 {
      margin-bottom: 20px;
      text-transform: uppercase;
   }

Looking better already 🙂

I usually like to install the slick carousel plugin first, so I can see how the slides will render by default, and then style it all up to suit my design.

So, install the slick.js library how you would like, either via NPM, download it manually, or use a CDN etc. In this example I’ll be using a CDN as it’s just super easy to get up and running with it for the purposes of this tutorial.

The slick.js CDN links I’ll be using are down below:

Slick.css

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.css">

I’ll add this CSS link above the style.css in the index.html file.

Slick.js

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script>

… and I’ll add the slick JavaScript script above the main.js script in the index.html file.

  • index.html 
<!DOCTYPE html>
<html lang="en">
<head>
   ...

   <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.css">
   <link rel="stylesheet" type="text/css" href="style.css">

   ...
</head>
<body>

   ...

   <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script>
   <script type="text/javascript" src="main.js"></script>
    
</body>
</html>

5. Let’s Create an Area to Hold Our Testimonials

After our title and description elements – that we’ve just added, I’ll create an area below these that will hold all of our testimonials. I’ll call this .feh-testimonials-wrapper, and include five .feh-testimonial placeholder divs.

Then add some CSS styles for the .feh-testimonials-wrapper (include a temporary white border), and create a rough area height and width for the .feh-testimonial placeholder divs.

And now we can link up slick.js to the .feh-testimonials-wrapper, and see what we get!

  • index.html
  • style.css
  • main.js 
...

   <section class="feh-testimonials">
      <div class="wrapper">
         <h2>Muscle Factory Testimonials</h2>
         <p class="description">Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia sit amet mauris.</p>

         <div class="feh-testimonials-wrapper">
            <div class="feh-testimonial">Lipsum...</div>
            <div class="feh-testimonial">Lipsum...</div>
            <div class="feh-testimonial">Lipsum...</div>
            <div class="feh-testimonial">Lipsum...</div>
            <div class="feh-testimonial">Lipsum...</div>
         </div>
         
   	</div>
   </section>

   ...
   .feh-testimonials-wrapper {
      border: 2px solid #fff;
   }
   .feh-testimonial {
      height: 225px;
      max-width: 600px;
   }
jQuery(document).ready(function() {

   jQuery('.feh-testimonials-wrapper').slick({
      
   });
});

And now we are left with a (technically) working carousel 🙂

6. Adding In Our Testimonial Quotes

Right, we now have a working carousel, let’s add in five sample testimonials, of varying length – using Lorem Ipsum to start fleshing this area out and making it look like a proper component.

I’ll use loremipsum.io to generate the text.

  • index.html 
...

<div class="feh-testimonials-wrapper">
   <div class="feh-testimonial">
      <blockquote>
         <p>
            "Lorem ipsum odor amet, consectetuer adipiscing elit. Dapibus platea libero varius suspendisse lacinia pellentesque interdum diam phasellus. Eget per mattis ex feugiat posuere nullam. Commodo id facilisi enim lacus nibh dolor hendrerit massa. Ad nascetur hendrerit, eleifend nisl curae urna. Blandit magna placerat sed ultrices nam nisi dignissim. Iaculis rhoncus eget proin erat dui lacinia duis pretium. Proin mi mi ex pellentesque massa praesent scelerisque duis vestibulum. Senectus proin netus vitae ipsum molestie porta."
         </p>
      </blockquote>
      <cite>Ralph</cite>
   </div>
   <div class="feh-testimonial">
      <blockquote>
         <p>
            "Dis torquent curae massa adipiscing accumsan; leo molestie. In accumsan nullam ex platea vitae euismod nibh. Montes lacus consectetur velit posuere dui lobortis. Vehicula ipsum orci sapien mi non aliquet tortor urna. Bibendum cras vel laoreet sed consectetur hendrerit dui."
         </p>
      </blockquote>
      <cite>Tim</cite>
   </div>
   <div class="feh-testimonial">
      <blockquote>
         <p>
            "Leo nibh ac potenti, vulputate ipsum nulla non a. Aliquam felis ultrices viverra, libero consectetur pellentesque cras. Varius parturient phasellus pellentesque parturient est vitae per."
         </p>
         <p>
            Massa magnis nunc condimentum sem tempor. In faucibus suscipit natoque ipsum vivamus lacus. At metus fringilla per morbi erat. Nascetur erat blandit aenean senectus mus odio. Felis cursus maximus, litora et luctus cubilia sed. 
         <p>
            Orci purus est gravida vulputate, massa porttitor. Fusce fusce vitae a inceptos per mauris risus dis maximus.
         </p>
      </blockquote>
      <cite>Isla</cite>
   </div>
   <div class="feh-testimonial">
      <blockquote>
         <p>
            "Suspendisse erat posuere vestibulum, vivamus sociosqu varius. Conubia suscipit odio habitasse interdum natoque elit laoreet eleifend.
         </p>
         <p>
            Ligula aptent vehicula aliquam in per. Taciti venenatis litora molestie dictumst dui efficitur nisl. Dapibus sodales ex volutpat dictum maecenas auctor semper. Ullamcorper bibendum urna ridiculus cras curabitur habitasse sodales.
         </p>
         <p>
            Nulla ultrices nisl sem primis pellentesque integer quam convallis parturient."
         </p>
      </blockquote>
      <cite>Bernard</cite>
   </div>
   <div class="feh-testimonial">
      <blockquote>
         <p>
            "Dictumst nulla pretium dictum diam vitae luctus ad quam. Fames justo facilisis metus eleifend nulla aenean. Facilisi quisque cursus dapibus consequat rhoncus duis. Hac mus nullam pellentesque neque litora. Inceptos varius cras penatibus non duis lobortis sociosqu. Non finibus dapibus fermentum, sem cursus vehicula ex senectus. Id montes nullam nec ullamcorper, quisque consectetur vivamus himenaeos."
         </p>
      </blockquote>
      <cite>Homer</cite>
   </div>
</div>

...

And now we have five testimonials with author name using two new elements: blockquote and cite.

7. Begin Styling the Testimonials

With all the content in its place, we can begin the fun part, which is styling everything up!

I’m going to start by separating out each .feh-testimonial div – by giving them a white background colour, some padding and a curved border.

But just one thing before we do so… to achieve the white background for each testimonial, we need to add in an extra div inside the .feh-testimonial div, basically wrapping the blockquote & cite. I’l call this new div .feh-testimonial-inner.

  • index.html 
<div class="feh-testimonial">
   <div class="feh-testimonial-inner">
      <blockquote>
         ...
      </blockquote>
   </div>
</div>

Now, I’ll style this .feh-testimonial-inner.

  • style.css 
...

.feh-testimonial {
   ...
}
   .feh-testimonial-inner {
      background: #fff;
      border-radius: 12px;
      padding: 25px;
   }

I do believe it’s starting to take shape 🎉

8. Center Testimonials & Remove Pagination

in our demo, we can see that each testimonial is centered, so let’s go ahead and add this option in our slick options, and while we’re at it – we can go ahead and remove the next / previous buttons. And the last thing here for the moment is to set the variable width to true

(Note: I’m not entirely sure why I need to set the variable with to true, but trial and error have revealed that this is needed for this type of carousel 🤷🏻‍♂️).

  • main.js 
jQuery('.feh-testimonials-wrapper').slick({
   centerMode: true,
   arrows: false,
   variableWidth: true
});

And we’re left this.

9. More Testimonial Styling

We’re at a point now where we can just about finish the styling for each testimonial. We now need to add a few styles to the .feh-testimonial element, such as:

  • Add some margins between each testimonial.
  • Decrease each testimonial opacity.
  • Add some bottom padding.
  • Make the testimonials skewed slightly.
  • And add in a nice easing transition property (for a bit later).
  • style.css 
...

   .feh-testimonial {
      height: 225px;
      max-width: 600px;

      margin: 0 15px;
      opacity: 0.3;
      padding-bottom: 120px;
      transform: skewX(-15deg);
      transition: all 0.3s ease;
   }

...

One last thing, we need to do do here is add some rules to allow us to easily vertically center our testimonials. You don’t have to worry about this part really, I’m just adding some flexbox goodness to the carousel.

  • style.css 
.feh-testimonial {
   ...
}

.slick-track { display: flex; }
.slick-track .slick-slide { display: flex; height: auto; align-items: center; justify-content: center; }

Things are moving in the right direction 🙂

10. Deskewing the Text

As we skewed the .feh-testimonial div by negative 15 degrees in the previous step, this also skewed everything inside of the div, including the text. We need to deskew the blockquote to make it look normal again. I’ll do this by inverting the skew by 15 degrees (and adjusting the top and bottom margins a tad).

  • style.css 
...

.feh-testimonial blockquote {
   margin: -2px -20px;
   transform: skewX(15deg);
}

And now we are left with correctly aligned text (dashed border added to illustrate deskew).

11. Styling Active Slide

In Step 9 we decreased the opacity for all slides. Now we need to make the active slide highlighted. We can see from the inspector panel that the active slide has a class of .slick-active, so we’ll target this class and make this slide stand out.

Underneath the existing .feh-testimonial class, I’ll add in this new .slick-active class and make the opacity: 1.

  • style.css 
.feh-testimonial {
   ...
}
.feh-testimonial.slick-active {
   opacity: 1;
}

And now we have a white, highlighted active slide.

And that easing transition we added to .feh-testimonial in step 9, makes the opacity transition so much nicer.

12. Add Speech Bubble Tail

At this point, let’s create a ‘speech bubble tail’ to finish off the testimonial area. This will be where the author’s name can go.

12.1. Create the SVG Speech Bubble ‘Tail’

I’ve just created this simple speech bubble in Adobe Illustrator with the pen tool, and then removed the ‘tail’ via the pathfinder tool, which I’ve then exported as an SVG file in our main directory.

Please note that the above speech bubble is black, only for illustration purposes, otherwise it would be quite difficult to see if it was white 🙂

12.2. Adding the Speech Bubble Tail In

We could add in our speech bubble tail as a standalone image, but I like to avoid decorative images as a personal preference, so instead I’ll create a pseudo ::before element and add it in here as a background image.

  • style.css 
.feh-testimonial-inner::before {
   position: absolute;
   content: "";
   width: 50px;
   height: 50px;
   bottom: 0px;
   left: 35px;
   background: url(speech-tail.svg) left / contain no-repeat;
}

Nothing too crazy here, I’ve just created an absolute positioned ::before element, positioned it to the bottom, indented it a bit to the left, given it a height and width, and included the image as a background image.

Our tail is in, and we’ll tweak the bottom position a bit later on.

13. Indent Text

Next up, is to start indenting the text inside our blockquotes, to make it look like each line is following the -15 degree angle. Now, be warned – this part is a bit… tedious.

The idea is to create <span> elements for each line of text, with an associated margin class, so we can control the left margin, line… by… line.

I’ll first create a primary .feh-indent class that will make all of our spans display as inline-block, instead of inline. Then I’ll create a list of generic classes with varying units of left padding. This should give us a good base to get going.

  • style.css 
.feh-testimonial blockquote {
   ...
}

   /** 
    * Indentation classes
    */
   span.feh-indent { display: inline-block; }

   .feh-indent-2 { margin-left: 2px; }
   .feh-indent-4 { margin-left: 4px; }
   .feh-indent-6 { margin-left: 6px; }
   .feh-indent-8 { margin-left: 8px; }
   .feh-indent-10 { margin-left: 10px; }
   .feh-indent-12 { margin-left: 12px; }
   .feh-indent-14 { margin-left: 14px; }
   .feh-indent-16 { margin-left: 16px; }
   .feh-indent-18 { margin-left: 18px; }
   .feh-indent-20 { margin-left: 20px; }
   .feh-indent-22 { margin-left: 22px; }
   .feh-indent-24 { margin-left: 24px; }
   .feh-indent-26 { margin-left: 26px; }
   .feh-indent-28 { margin-left: 28px; }
   .feh-indent-30 { margin-left: 30px; }
   .feh-indent-32 { margin-left: 32px; }
   .feh-indent-34 { margin-left: 34px; }
   .feh-indent-36 { margin-left: 36px; }
   .feh-indent-38 { margin-left: 38px; }
   .feh-indent-40 { margin-left: 40px; }
   .feh-indent-42 { margin-left: 42px; }
   .feh-indent-44 { margin-left: 44px; }
   .feh-indent-46 { margin-left: 46px; }
   .feh-indent-48 { margin-left: 48px; }
   .feh-indent-50 { margin-left: 50px; }

Now, let’s break up our first blockquote text area, and add in the .feh-indent span to each line, as well as .feh-indent-20 to indent all lines by 20px. This will give us an idea on what margins we will need to tweak going forward.

  • index.html 
<blockquote>
   <p>
      <span class="feh-indent feh-indent-20">"Lorem ipsum odor amet, consectetuer adipiscing elit. Dapibus platea</span> 
      <span class="feh-indent feh-indent-20">libero varius lacinia pellentesque interdum diam phasellus. Eget per</span>
      <span class="feh-indent feh-indent-20">ex feugiat posuere nullam. Commodo id facilisi enim lacus nibh dolor</span>
      <span class="feh-indent feh-indent-20">hendrerit massa. Ad nascetur hendrerit, eleifend nisl curae urna.</span> 
      <span class="feh-indent feh-indent-20">Blandit magna placerat sed ultrices nam nisi dignissim. Iaculis rhoncus</span> 
      <span class="feh-indent feh-indent-20">eget proin erat dui lacinia duis pretium. Proin mi mi ex pellentesque</span>
      <span class="feh-indent feh-indent-20">massa praesent scelerisque duis vestibulum. Senectus proin netus vitae</span>
      <span class="feh-indent feh-indent-20">ipsum molestie porta."</span>
   </p>
</blockquote>

So, indenting all of the spans by 20 pixels, gives us a nice overview of things, and what we might need to change. For example, already we can see the first line is still too close to the left hand white background. So we might want to double the pixels of the first line, or even add a little extra.

From here, I’m just going to eyeball the left margin of each line with the inspector panel open, and adjust each line accordingly. I can see that 46px might be the desired value for the first line.

You could also use Protractor, the chrome extension to help simplify this part a bit also.

Anywho, after playing around with the inspector panel margins, here are the values I have used for the first testimonial.

  • index.html 
<blockquote>
   <p>
      <span class="feh-indent feh-indent-46">"Lorem ipsum odor amet, consectetuer adipiscing elit. Dapibus platea</span> 
      <span class="feh-indent feh-indent-42">libero varius lacinia pellentesque interdum diam phasellus. Eget per</span>
      <span class="feh-indent feh-indent-34">ex feugiat posuere nullam. Commodo id facilisi enim lacus nibh dolor</span>
      <span class="feh-indent feh-indent-30">hendrerit massa. Ad nascetur hendrerit, eleifend nisl curae urna.</span> 
      <span class="feh-indent feh-indent-26">Blandit magna placerat sed ultrices nam nisi dignissim. Iaculis rhoncus</span> 
      <span class="feh-indent feh-indent-18">eget proin erat dui lacinia duis pretium. Proin mi mi ex pellentesque</span>
      <span class="feh-indent feh-indent-12">massa praesent scelerisque duis vestibulum. Senectus proin netus vitae</span>
      <span class="feh-indent feh-indent-6">ipsum molestie porta."</span>
   </p>
</blockquote>

And now, I have a pretty nice -15 degree ‘padding’ for each line.

Let’s go ahead and do the above for all of the other testimonials. Below are all of my testimonials and .feh-indent margin values.

  • index.html 
...

<div class="feh-testimonials-wrapper">
   <div class="feh-testimonial">
      <div class="feh-testimonial-inner">
         <blockquote>
            <p>
               <span class="feh-indent feh-indent-46">"Lorem ipsum odor amet, consectetuer adipiscing elit. Dapibus platea</span> 
               <span class="feh-indent feh-indent-42">libero varius lacinia pellentesque interdum diam phasellus. Eget per</span>
               <span class="feh-indent feh-indent-34">ex feugiat posuere nullam. Commodo id facilisi enim lacus nibh dolor</span>
               <span class="feh-indent feh-indent-30">hendrerit massa. Ad nascetur hendrerit, eleifend nisl curae urna.</span> 
               <span class="feh-indent feh-indent-24">Blandit magna placerat sed ultrices nam nisi dignissim. Iaculis rhoncus</span> 
               <span class="feh-indent feh-indent-18">eget proin erat dui lacinia duis pretium. Proin mi mi ex pellentesque</span>
               <span class="feh-indent feh-indent-12">massa praesent scelerisque duis vestibulum. Senectus proin netus vitae</span>
               <span class="feh-indent feh-indent-6">ipsum molestie porta."</span>
            </p>
         </blockquote>
         <cite>Ralph</cite>
      </div>
   </div>
   <div class="feh-testimonial">
      <div class="feh-testimonial-inner">
         <blockquote>
            <p>
               <span class="feh-indent feh-indent-32">"Dis torquent curae massa adipiscing accumsan; leo molestie. In accumsan</span> 
               <span class="feh-indent feh-indent-26">nullam ex platea vitae euismod nibh. Montes lacus consectetur velit</span> 
               <span class="feh-indent feh-indent-20">posuere dui lobortis. Vehicula ipsum orci sapien mi non aliquet tortor </span>
               <span class="feh-indent feh-indent-14">urna. Bibendum cras vel laoreet sed consectetur hendrerit dui."</span>
            </p>
         </blockquote>
         <cite>Tim</cite>
      </div>
   </div>
   <div class="feh-testimonial">
      <div class="feh-testimonial-inner">
         <blockquote>
            <p>
               <span class="feh-indent feh-indent-44">"Leo nibh ac potenti, vulputate ipsum nulla non a. Aliquam felis ultrices</span> 
               <span class="feh-indent feh-indent-40">viverra, libero consectetur pellentesque cras. Varius parturient phasellus</span> 
               <span class="feh-indent feh-indent-34">pellentesque parturient est vitae per.</span>
            </p>
            <p>
               <span class="feh-indent feh-indent-28">Massa magnis nunc condimentum sem tempor. In faucibus suscipit</span> 
               <span class="feh-indent feh-indent-22">natoque ipsum vivamus lacus. At metus fringilla per morbi erat. Nascetur</span> 
               <span class="feh-indent feh-indent-16">erat blandit aenean senectus mus odio. Felis cursus maximus, litora et.</span>
            <p>
               <span class="feh-indent feh-indent-10">Orci purus est gravida vulputate, massa porttitor. Fusce fusce vitae a inceptos</span>
               <span class="feh-indent feh-indent-4">per mauris risus dis maximus."</span>
            </p>
         </blockquote>
         <cite>Isla</cite>
      </div>
   </div>
   <div class="feh-testimonial">
      <div class="feh-testimonial-inner">
         <blockquote>
            <p>
               <span class="feh-indent feh-indent-42">"Suspendisse erat posuere vestibulum, vivamus sociosqu varius.</span>
               <span class="feh-indent feh-indent-36">Conubia suscipit odio habitasse interdum natoque elit laoreet eleifend.</span>
            </p>
            <p>
               <span class="feh-indent feh-indent-30">Ligula aptent vehicula aliquam in per. Taciti venenatis litora molestie</span>
               <span class="feh-indent feh-indent-24">dictumst dui efficitur nisl. Dapibus sodales ex volutpat dictum maecenas</span> 
               <span class="feh-indent feh-indent-18">auctor semper. Ullamcorper bibendum urna ridiculus cras curabitur</span> 
               <span class="feh-indent feh-indent-12">habitasse sodales.</span>
            </p>
            <p>
               <span class="feh-indent feh-indent-6">Nulla ultrices nisl sem primis pellentesque integer quam convallis."</span>
            </p>
         </blockquote>
         <cite>Bernard</cite>
      </div>
   </div>
   <div class="feh-testimonial">
      <div class="feh-testimonial-inner">
         <blockquote>
            <p>
               <span class="feh-indent feh-indent-40">"Dictumst nulla pretium dictum diam vitae luctus ad quam. Fames justo</span> 
               <span class="feh-indent feh-indent-34">facilisis metus eleifend nulla aenean. Facilisi quisque cursus dapibus</span>
               <span class="feh-indent feh-indent-28">consequat rhoncus duis. Hac mus nullam pellentesque neque litora. Inceptos</span>
               <span class="feh-indent feh-indent-24">varius cras penatibus non duis lobortis sociosqu. Non finibus dapibus</span>
               <span class="feh-indent feh-indent-16">fermentum, sem cursus vehicula ex senectus. Id montes nullam nec</span>
               <span class="feh-indent feh-indent-10">ullamcorper, quisque consectetur vivamus himenaeos."</span>
            </p>
         </blockquote>
         <cite>Homer</cite>
      </div>
   </div>
</div>

...

14. Position the Speech Bubble Tail & Author

Each testimonial has a different height because of the varying text inside, thus a different bottom value is needed for both elements (speech bubble tail & author). We can add a unique identifier to each testimonial, to allow us to easily position the ‘tail’ and author by adding the testimonial’s author as a class.

We can see that the first testimonial is by Ralph. What I’m going to do is to add Ralph as a class to the parent .feh-testimonial div (in lowercase).

Then we can simply use this to uniquely position both the ‘tail’ and name for each testimonial 

<div class="feh-testimonial ralph">

I’ll do the same for the rest of the testimonials below.

  • index.html 
<div class="feh-testimonial ralph">
   <div class="feh-testimonial-inner">
      <blockquote>
         ...
      </blockquote>
      <cite>Ralph</cite>
   </div>
</div>
<div class="feh-testimonial tim">
   <div class="feh-testimonial-inner">
      <blockquote>
         ...
      </blockquote>
      <cite>Tim</cite>
   </div>
</div>
<div class="feh-testimonial isla">
   <div class="feh-testimonial-inner">
      <blockquote>
         ...
      </blockquote>
      <cite>Isla</cite>
   </div>
</div>
<div class="feh-testimonial bernard">
   <div class="feh-testimonial-inner">
      <blockquote>
         ...
      </blockquote>
      <cite>Bernard</cite>
   </div>
</div>
<div class="feh-testimonial homer">
   <div class="feh-testimonial-inner">
      <blockquote>
         ...
      </blockquote>
      <cite>Homer</cite>
   </div>
</div>

14.1. Position the Testimonial Author / Citation

We’ll first add some default styles to the cite element, just below the blockquote area. (Don’t worry, the blue background is only temporary).

  • style.css 
.feh-testimonial blockquote {
   ...		
}

.feh-testimonial cite {
   position: absolute;
   background-color: blue;
   left: 100px;
   bottom: 0px;
}

...

And we now have a nice default position to the bottom left for each citation, leaving us to now add a unique bottom position for Ralph, and the other citations 🙂

I’ll create an area for all of our testimonial authors under blockquote & cite. Then using the inspector panel, I’ll tweak the bottom position for Ralph’s name by playing around with the bottom value.

  • style.css 
.feh-testimonial blockquote {
   ...
}
.feh-testimonial cite {
   ...
}

/**
 * Specific Testimonial Authors
 */
.feh-testimonial.ralph cite { bottom: 80px; }

I’ve settled with 80px, as this looks good to my eye.

14.2. Positioning the Speech Bubble Tail

Let us now, tweak the bottom position for Ralph’s testimonial tail background image. Again, I’ll use the inspector panel to ‘eye-ball’ it, by tweaking the bottom value until it sits flush to the white background area.

  • style.css 
/**
 * Specific Testimonial Authors
 */
.feh-testimonial.ralph cite { bottom: 80px; }
.feh-testimonial.ralph .feh-testimonial-inner::before { bottom: 74px; }

74px to the bottom works a treat here, and we now have a nicely style ‘speech bubble’ for Ralph.

I’ll do the same for all of the other testimonials now.

  • style.css 
...

/**
 * Specific Testimonial Authors
*/
.feh-testimonial.ralph .feh-testimonial-inner::before { bottom: 74px; }
.feh-testimonial.ralph cite { bottom: 80px; } 

.feh-testimonial.tim .feh-testimonial-inner::before { bottom: 117px; }
.feh-testimonial.tim cite { bottom: 124px; } 

.feh-testimonial.isla .feh-testimonial-inner::before { bottom: 74px; }
.feh-testimonial.isla cite { bottom: 80px; }

.feh-testimonial.bernard .feh-testimonial-inner::before { bottom: 84px; }
.feh-testimonial.bernard cite { bottom: 92px; } 

.feh-testimonial.homer .feh-testimonial-inner::before { bottom: 95px; }
.feh-testimonial.homer cite { bottom: 103px; }

...

And now, all of our testimonials are looking pixel perfect. Oh, I’ve also removed the blue background colour, and made the text colour white for the author.

15. Add Background Pattern Image

To add a bit of ‘texture’ to this testimonials area, I’ve downloaded a free SVG pattern background from freepik, and then changed the colour to red to suit our design in Adobe Illustrator. I’ve called this red-pattern-bg.png.

We could include this as a background image in the main .wrapper div, which is inside of .feh-testimonials, but I think the area is a tad too small in width at 960px, so I’m going to create a new parent wrapper that will be wider by 100px, to accommodate this red pattern image.

  • index.html
  • style.css 
<section class="feh-testimonials">

   <div class="wrapper-bg">

      <div class="wrapper">
         ...
      </div>

</div>
* {
   ...
}

.wrapper-bg {
   position: relative;
   width: 100%;
   max-width: 1060px;
   margin: 0 auto;
   padding: 100px 15px;
   background: url(red-pattern-bg.png) center center / cover no-repeat;
}

.wrapper {
   ...
}

In our CSS, you can see that I’ve sandwiched the new .wrapper-bg between our reset styles and the .wrapper block. I have also just copied the styles from the original .wrapper and changed the max-width to 1060px, and included the image as a background image.

15.1. Border Removal & Clean up

Three last little tweaks here is to:

  • Remove the top and bottom padding from the .feh-testimonials div, as we have added 100px padding to the .wrapper-bg div, and this padding is no longer needed here.
  • Remove the white border.
  • Add some space between the testimonials, and the heading / paragraph description.
  • style.css 
.feh-testimonials {
   ...
   padding: 0;
}

.feh-testimonials p.description {
   margin-bottom: 50px;
}

And then we can now remove the white border from .feh-testimonials-wrapper div, by just deleting the entire rule block, as its empty now.

16. Adding Gradients to Sides

With our newly created .wrapper-bg div, we can use this (or more specifically its ::before and ::after selectors) to add red gradients, so it appears that the testimonials each side of the main centered testimonial are fading into the background.

  • style.css 
.wrapper-bg {
   ...
}
.wrapper-bg::before, 
.wrapper-bg::after {
    position: absolute;
    width: 200px;
    height: 100%;
    content: "";
    bottom: 0px;
    left: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 100%);
}
.wrapper-bg::after {
    background: linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 0) 100%);
    right: 0;
    left: auto;
}

Let’s breakdown what we’ve just added here.

Each pseudo selector for .wrapper-bg, is absolute positioned to the left and righthand side, is 200px in width, 100% height, and we’ve added a red background gradient – with the help of CSS Gradient.

And now, we are left with this unique (in my opinion anywho) testimonials carousel – Enjoy!

If this tutorial has helped you, I wouldn't say no to a coffee as a tip ☕️

Buy Me a Coffee at ko-fi.com

Leave a Reply

Your email address will not be published. Required fields are marked *