Author: Michal Szymanski
MDB Pro required
This lesson requires MDB Pro package. If you use MDB Free please be aware that some elements may not work as expected.
Get MDB PRO
Step 1 - testimonials
Go to the Testimonials Docs
and copy the code for Testimonials v.2.
Next, place it inside <!--Section: testimonials-->,
below the heading.
Note: Don't copy <section> tags and the heading because we already did it.
It should look like this:
<!--Section: testimonials-->
<section id="testimonials" class="text-center py-5" style="background-color: #eee;">
<!-- Container -->
<div class="container">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold mb-5">Testimonials</h2>
<!-- Carousel Wrapper -->
<div id="carousel-example-1" class="carousel no-flex testimonial-carousel slide carousel-fade"
data-ride="carousel" data-interval="false">
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto mb-4">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg" class="rounded-circle img-fluid"
alt="First sample avatar image">
</div>
<!--Content-->
<p>
<i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Dolore cum accusamus eveniet
molestias voluptatum inventore laboriosam labore sit, aspernatur praesentium iste
impedit quidem dolor veniam.
</p>
<h4 class="font-weight-bold">Anna Deynah</h4>
<h6 class="font-weight-bold my-3">Founder at ET Company</h6>
<!--Review-->
<i class="fa fa-star amber-text"> </i>
<i class="fa fa-star amber-text"> </i>
<i class="fa fa-star amber-text"> </i>
<i class="fa fa-star amber-text"> </i>
<i class="fa fa-star-half-full amber-text"> </i>
</div>
</div>
<!--First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto mb-4">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="rounded-circle img-fluid"
alt="Second sample avatar image">
</div>
<!--Content-->
<p>
<i class="fa fa-quote-left"></i> Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore. </p>
<h4 class="font-weight-bold">Maria Kate</h4>
<h6 class="font-weight-bold my-3">Photographer at Studio LA</h6>
<!--Review-->
<i class="fa fa-star amber-text"> </i>
<i class="fa fa-star amber-text"> </i>
<i class="fa fa-star amber-text"> </i>
<i class="fa fa-star amber-text"> </i>
<i class="fa fa-star amber-text"> </i>
</div>
</div>
<!--Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="testimonial">
<!--Avatar-->
<div class="avatar mx-auto mb-4">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="rounded-circle img-fluid"
alt="Third sample avatar image">
</div>
<!--Content-->
<p>
<i class="fa fa-quote-left"></i> Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.</p>
<h4 class="font-weight-bold">John Doe</h4>
<h6 class="font-weight-bold my-3">Front-end Developer in NY</h6>
<!--Review-->
<i class="fa fa-star amber-text"> </i>
<i class="fa fa-star amber-text"> </i>
<i class="fa fa-star amber-text"> </i>
<i class="fa fa-star amber-text"> </i>
<i class="fa fa-star-o amber-text"> </i>
</div>
</div>
<!--Third slide-->
</div>
<!--Slides-->
<!--Controls-->
<a class="carousel-item-prev left carousel-control" href="#carousel-example-1" role="button"
data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-item-next right carousel-control" href="#carousel-example-1" role="button"
data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--Controls-->
</div>
<!-- Carousel Wrapper -->
</div>
<!-- Container -->
</section>
<!--Section: testimonials-->
If you want you can change the color of the rating stars. Replace .blue-text class with .amber-text
class (or whatever color you like).
This section is based on Carousel component. If you want to learn more about Carousels - read our Carousel Docs
To see all available sections - have a look at our Sections Demo.
Step 2 - streak
Go to the Plugin & Addons / Streak Docs and copy the code for Streak with photo.
Next, place it inside <!--Section: call to action--> comments.
<!--Section: call to action-->
<div class="streak streak-md streak-photo" style="background-image:url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img(115).jpg')">
<div class="flex-center white-text rgba-black-light pattern-1">
<ul class="mb-0 list-unstyled">
<li>
<h2 class="h2-responsive"><i class="fa fa-quote-left" aria-hidden="true"></i> The people who
are
crazy enough to think they can change the world are the ones who do. <i class="fa fa-quote-right"
aria-hidden="true"></i></h2>
</li>
<li class="mb-0">
<h5 class="text-center font-italic mb-0">~ Steve Jobs</h5>
</li>
</ul>
</div>
</div>
<!--Section: call to action-->
If you want, you can change the background image of the streak. To do it, replace the URL of the current image with the photo you like.
<div class="streak streak-md streak-photo" style="background-image:url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img(115).jpg')">
Step 3 - mask and button
We will replace this quote from Steve Jobs with a call to action button.
<!--Section: call to action-->
<div class="streak streak-md streak-photo" style="background-image:url('https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img(115).jpg')">
<div class="flex-center rgba-black-light pattern-1">
<div class="white-text smooth-scroll mx-4">
<h2 class="h2-responsive mb-5 wow fadeIn">If you have any legal problem in your life ... We are
available</h2>
<div class="text-center">
<a href="#contact" class="btn btn-outline-white wow fadeIn " data-offset="100" data-wow-delay="0.2s">Contact
us</a>
</div>
</div>
</div>
</div>
<!--Section: call to action-->
Did you notice .pattern-1 class? It provides a mask with special dotted background.
You can use one of nine predefined patterns:
pattern-1pattern-2pattern-3pattern-4pattern-5pattern-6pattern-7pattern-8pattern-9
Choose the one you like and save the file.
To learn more about masks read our Masks Docs.
Rate this lesson
Previous lesson Live preview Next lesson
Spread the word:
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.Sign up to follow your progress and get additional benefits
1. Navigation and full-page background image
2. Masks and flexbox
3. Flexbox advanced options
4. Sections, icons and typography
5. Hover effect, waves effect and shadows
6. Carousel (slider / gallery)
7. Contact section and inputs / forms
8. Google Maps
9. Footer advanced options
10. Navbar advanced options