My first testimonial block for the Mobirise Website builder.

Project Download:

https://www.dropbox.com/s/ggaslqsvv8kn5qr/project.mobirise?dl=1

HTML Code Snippet:

<section class="testimonials2" group="Features" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-parallax-background': bg.parallax}">
    <mbr-parameters>
        <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="range" inline title="Top" name="paddingTop" min="0" max="9" step="1" value="6">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="9" step="1" value="6">
        <input type="checkbox" title="Show Top Section" name="showTop" checked>
        <input type="range" inline title="Text Width" name="text_width" min="0" max="100" step="1" value="65" condition="showText == true">
        <input type="color" title="Card Bg" name="cardBg" value="#ffffff">
        <select title="Cards" name="cardsAmount">
            <option value="1">1</option>
            <option value="2" selected>2</option>
        </select>
        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Background Image" value="#" parallax>
            <input type="color" title="Background Color" value="#f8f8f8" selected>
            <input type="video" title="Background Video" value="https://youtu.be/iM-NestDPNQ">
        </fieldset>
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'">
        <input type="color" title="Overlay Color" name="overlayColor" value="#efefef" condition="overlay && bg.type !== 'color'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.9" condition="overlay && bg.type !== 'color'">
        <!-- End block parameters -->
    </mbr-parameters>
    <div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
    </div>
    <div class="container">
        <div class="row justify-content-center text-center pb-lg-3" mbr-if="showTop">
            <div class="col-12 col-md-10">
                <h2 class="mbr-section-title mbr-fonts-style pb-3" mbr-theme-style="display-2">Testimonials</h2>
                <p class="mbr-text mbr-fonts-style mx-auto wrapper pb-3" mbr-theme-style="display-7">
                    Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life one day however a small line.
                </p>
            </div>
        </div>
        <div class="row justify-content-center" mbr-class="{'pt-2':showTitle||showSubtitle}">
            <div class="card col-12 col-md-6">
                <div class="card-box">
                    <div class="pb-5">
                        <p class="mbr-text card-text mbr-fonts-style align-left m-0 tl" mbr-theme-style="display-5" data-app-selector=".card-text">
                            "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics."
                        </p>
                    </div>
                    <div class="card-header">
                        <div class="card-img">
                            <img src="https://i.imgur.com/rkapER0.png" alt="Mobirise" title>
                        </div>
                        <h4 class="card-title mbr-fonts-style align-center mb-0 mbr-white" mbr-theme-style="display-7" data-app-selector=".card-title, .card-img"><b>Evan Glashow &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</b></h4>
                    </div>
                </div>
            </div>
            <div class="card col-12 col-md-6" mbr-if="cardsAmount > 1">
                <div class="card-box">
                    <div class="pb-5">
                        <p class="mbr-text card-text mbr-fonts-style align-left m-0 tl" mbr-theme-style="display-5" data-app-selector=".card-text">
                            "A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth."
                        </p>
                    </div>
                    <div class="card-header">
                        <div class="card-img">
                            <img src="https://i.imgur.com/01ga7jf.png" alt="Mobirise" title>
                        </div>
                        <h4 class="card-title mbr-fonts-style align-center mb-0 mbr-white" mbr-theme-style="display-7" data-app-selector=".card-title, .card-img"><b>Christina Nisen</b></h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS Code Snippet:

padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
& when (@bg-type = 'color') {
  background-color: @bg-value;
}
& when (@bg-type = 'image') {
  background-image: url(@bg-value);
}
.wrapper {
  width: (@text_width * 1%);
  @media (max-width: 992px) {
    width: 100% !important;
  }
}
.card {
  padding: 1rem 1rem 1rem 1rem;
}
.card-title {
  padding: .5rem 1rem .5rem 4rem;
  margin-left: .5rem;
  margin-bottom: 0;
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
}
.card-header {
  display: -webkit-flex;
  align-items: center;
  background: none;
  padding: 0;
  border: none;
  padding-bottom: 2rem;
  -webkit-align-items: center;
}
.card-img {
  position: absolute;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  background: #ffffff;
  display: -webkit-flex;
  img {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
  }
}
.card-text,.mbr-subtitle {
  color: #8d97ad;
}
.card-sign {
  padding-top: .5rem;
}
.underline {
  .line {
    width: 5rem;
    height: 1px;
    background: #efefef;
    display: inline-block;
  }
}
.mbr-section-btn {
  margin-left: 0;
}
@media (max-width: 767px) {
  .card-title {
    text-align: center;
  }
  p.mbr-text,p.date {
    text-align: center;
  }
}
.card-box {
  background: @cardBg;
  padding: 2rem 2rem;
  box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
  -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
  border-radius: .25rem;
}
.card-title, .card-img {
  color: #141414;
}
.card-text {
  color: #141414;
}
P {
  color: #999999;
}
.mbr-fonts-style {
  font-weight: 400;
}
.card-title, .card-img B {
  color: #141414;
}
.tl {
  text-align: left !important;
}

Images used:

Designed by Kues1
Designed by Pressfoto