My first team block for the Mobirise Website builder.

Project Download:

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

HTML Code Snippet:

<section>
    <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="range" inline title="Subtitle Width" name="subtitle_width" min="0" max="100" step="1" value="65">
        <input type="checkbox" title="Show Top Section" name="showTop" checked>
        <input type="checkbox" title="Show Title" name="showTitle" checked>
        <input type="checkbox" title="Show Text" name="showText" checked>
        <select title="Cards" name="cardsAmount">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3" selected>3</option>
            <option value="4">4</option>
        </select>
        <fieldset type="background" name="bg" parallax>
            <input type="color" title="Background Color" value="#f8f8f8" selected>
        </fieldset>
        <input type="checkbox" title="Overlay" name="overlay" checked 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.8" 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-5" 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">Our Team</h2>
                <p class="mbr-text mbr-fonts-style wrapper mx-auto 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="media-container-row text-center">
            <div class="card p-3 col-12 col-md-6" mbr-class="{'col-lg-3': cardsAmount == '4',
            'col-lg-4': cardsAmount == '3'}">
                <div class="card-wrapper">
                    <div class="card-img">
                        <img src="https://i.imgur.com/F5VxySf.png" alt="Mobirise" title>
                    </div>
                    <div class="card-box">
                        <h3 class="card-title pb-2 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title"><font color="#141414"><b>Ryan Printz</b></font></h3>
                        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText">
                            Financial Analyst</p>
                    </div>
                </div>
            </div>
            <div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 1" mbr-class="{'col-lg-3': cardsAmount == '4',
            'col-lg-4': cardsAmount == '3'}">
                <div class="card-wrapper">
                    <div class="card-img">
                        <img src="https://i.imgur.com/Nc6OEJN.png" alt="Mobirise" title>
                    </div>
                    <div class="card-box ">
                        <h3 class="card-title pb-2 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title"><font color="#141414"><b>Maya Jonson</b></font></h3>
                        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText">
                            Marketing &amp; Advertising</p>
                    </div>
                </div>
            </div>
            <div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 2" mbr-class="{'col-lg-3': cardsAmount == '4',
            'col-lg-4': cardsAmount == '3'}">
                <div class="card-wrapper">
                    <div class="card-img">
                        <img src="https://i.imgur.com/pneKxOf.png" alt="Mobirise" title>
                    </div>
                    <div class="card-box">
                        <h3 class="card-title pb-2 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title"><b>Sarah Hyland</b></h3>
                        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText">
                            Banking Consultant
                        </p>
                    </div>
                </div>
            </div>
            <div class="card p-3 col-12 col-md-6" mbr-if="cardsAmount > 3" mbr-class="{'col-lg-3': cardsAmount == '4',
            'col-lg-4': cardsAmount == '3'}">
                <div class="card-wrapper">
                    <div class="card-img">
                        <img src="file:///C:/Users/Gustav/AppData/Local/Mobirise.com/Mobirise/projects/project-2018-10-31_085505/assets/images/t3.png" alt="Mobirise" title>
                    </div>
                    <div class="card-box">
                        <h3 class="card-title pb-2 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title"><b>Sarah Hyland</b></h3>
                        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-if="showText">
                            Banking Consultant
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS Code Snippet:

padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
background-color: @bg-value;
.wrapper {
  width: (@subtitle_width * 1%);
  @media (max-width: 992px) {
    width: 100% !important;
  }
}
.card-box {
  padding: 38px;
  border: solid 1px #EEE;
  border-top: none;
  background-color: #fff;
}
.card-wrapper {
  height: 100%;
}
.mbr-fonts-style {
  font-weight: 400;
}
H2 {
  color: #141414;
}
p {
  color: #999999;
}
.card-title B {
  color: #141414;
}

Images used:

Designed by Nensuria
Designed by Luis_molinero
Designed by Nensuria