My first feature block for the Mobirise Website builder.

Project Download:

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

HTML Code Snippet:

<section class="features7" 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="checkbox" title="Show Title" name="showTitle" checked>
        <input type="checkbox" title="Show Text" name="showText" checked>
        <input type="range" inline title="Text Width" name="text_width" min="0" max="100" step="1" value="65" condition="showText == true">
        <input type="checkbox" title="Show 4 Features" name="ff" checked>
        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Background Image" value="../_images/background2.jpg" parallax>
            <input type="color" title="Background Color" value="#ffffff" selected>
            <input type="video" title="Background Video" value="http://www.youtube.com/watch?v=uNCr7NdOJgw">
        </fieldset>
        <input type="checkbox" title="Overlay" name="overlay" checked condition="bg.type !== 'color'">
        <input type="color" title="Overlay Color" name="overlayColor" value="#ffffff" condition="overlay && bg.type !== 'color'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.5" 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">Main Services</h2>
                <p class="mbr-text mbr-fonts-style mx-auto wrapper pb-3" mbr-theme-style="display-7">
                    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
                </p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="card p-3 col-12 col-md-6">
                <div class="media">
                    <div class="card-img pr-2">
                        <span mbr-icon class="mbr-iconfont fa-line-chart fa" style="font-size: 38px; color: rgb(82, 139, 255);"></span>
                    </div>
                    <div class="card-box media-body">
                        <h3 class="card-title py-2 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title, .card-img"><b>Financial Planning</b></h3>
                        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showText">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
                        </p>
                    </div>
                </div>
            </div>

            <div class="card p-3 col-12 col-md-6">
                <div class="media">
                    <div class="card-img pr-2">
                        <span mbr-icon class="mbr-iconfont fa-bar-chart-o fa" style="font-size: 38px; color: rgb(82, 139, 255);"></span>
                    </div>
                    <div class="card-box media-body">
                        <h3 class="card-title py-2 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title, .card-img"><b>Savings &amp; Investment</b></h3>
                        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showText">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center pt-md-4" mbr-if="ff">
            <div class="card p-3 col-12 col-md-6">
                <div class="media">
                    <div class="card-img pr-2">
                        <span mbr-icon class="mbr-iconfont fa-users fa" style="font-size: 38px; color: rgb(82, 139, 255);"></span>
                    </div>
                    <div class="card-box media-body">
                        <h3 class="card-title py-2 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title, .card-img"><b>Financial Planning</b></h3>
                        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showText">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
                        </p>
                    </div>
                </div>
            </div>

            <div class="card p-3 col-12 col-md-6">
                <div class="media">
                    <div class="card-img pr-2">
                        <span mbr-icon class="mbr-iconfont fa-pie-chart fa" style="font-size: 38px; color: rgb(82, 139, 255);"></span>
                    </div>
                    <div class="card-box media-body">
                        <h3 class="card-title py-2 mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title, .card-img"><b>Savings &amp; Investment</b></h3>
                        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showText">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
                        </p>
                    </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-img {
  width: auto;
}
.card-img span {
  font-size: 72px;
  color: #707070;
}
.card-box {
  padding-left: 1rem;
  word-break: break-word;
}
@media (max-width: 991px) {
  .card-img {
    text-align: left;
    padding-bottom: 0.75rem;
  }
}
@media (max-width: 300px) {
  .card-img span {
    font-size: 40px !important;
  }
}
P {
  color: #999999;
}
.mbr-fonts-style {
  font-weight: 400;
}
H2 {
  color: #141414;
}
.card-title, .card-img B {
  color: #141414;
}